@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600&family=Playfair+Display:wght@600&display=swap");



:root {

  --ink: #24361f;

  --muted: #5f6b5b;

  --border: #d4d9cc;

  --panel: #ffffff;

  --bg: #f3f2e6;

  --accent: #2f5a2f;

  --green: #2f6b2f;

  --red: #c65a49;

  --black: #111111;

  --blue: #2878c8;

  --pending: #d6a64b;

}



* {

  box-sizing: border-box;

}



body {

  margin: 0;

  font-family: "Source Sans 3", "Segoe UI", sans-serif;

  background: var(--bg);

  color: var(--ink);

}



a {

  color: inherit;

  text-decoration: none;

}



.site-header {

  display: flex;

  justify-content: flex-start;

  align-items: center;

  gap: 16px;

  padding: 12px 20px;

  max-width: 1200px;

  margin: 0 auto;

}



.brand {

  display: grid;

  gap: 4px;

  align-items: start;

}



.brand a {

  font-family: "Playfair Display", "Georgia", serif;

  font-size: 22px;

}



.brand span {

  font-size: 11px;

  color: var(--muted);

  letter-spacing: 0.6px;

  text-transform: uppercase;

}



.brand-text {

  display: flex;

  gap: 0;

  align-items: center;

}



.brand-mark {

  width: 90px;

  max-width: 60vw;

  height: auto;

  display: block;

}



.site-nav {

  display: flex;

  gap: 16px;

  flex-wrap: nowrap;

  align-items: center;

  font-size: 14px;

  color: var(--muted);

  margin-left: 12px;

  flex: 1;

}



.site-nav .nav-help {

  margin-left: auto;

}



.nav-help-wrap {

  margin-left: auto;

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  gap: 4px;

}



.nav-help-wrap.admin-inline {

  margin-left: 0;

  align-items: flex-start;

}



.nav-login-meta {

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  gap: 2px;

}



.nav-login-status {

  font-size: 12px;

  color: var(--muted);

  white-space: nowrap;

  font-family: "Source Sans 3", "Segoe UI", sans-serif;

  line-height: 1.2;

}



.nav-login-role {

  font-size: 12px;

  color: var(--muted);

  white-space: nowrap;

  font-family: "Source Sans 3", "Segoe UI", sans-serif;

  display: block;

}



.site-nav a {

  padding: 6px 10px;

  border-radius: 999px;

  border: 1px solid transparent;

}



.site-nav a:hover {

  border-color: var(--accent);

  color: var(--ink);

  background: var(--accent);

  color: #fff;

  border-color: #1b3f28;

}



.site-nav a.active,

.site-nav a[aria-current="page"] {

  border-color: var(--accent);

  color: var(--accent);

  background: rgba(47, 90, 47, 0.12);

  font-weight: 600;

}



.site-nav .nav-admin-pill {

  background: #e9f4df;

  border-color: #9fc58f;

  color: #2f5a2f;

  font-weight: 600;

}



.site-nav .nav-admin-pill:hover {

  background: #2f5a2f;

  border-color: #1b3f28;

  color: #fff;

}



.site-nav .nav-login-logout-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 6px 14px;

  border-radius: 999px;

  background: var(--accent);

  color: #fff;

  white-space: nowrap;

  font-size: 12px;

  font-weight: 600;

  font-family: "Source Sans 3", "Segoe UI", sans-serif;

  text-decoration: none;

  border: 1px solid #1b3f28;

}



.site-nav .nav-login-logout-btn:hover {

  background: #244a24;

  border-color: #1b3f28;

  color: #fff;

}



.page {

  max-width: 1200px;

  margin: 0 auto;

  padding: 20px 20px 40px;

}



.page-wide {

  max-width: 1400px;

}



.admin-nav {

  display: flex;

  gap: 12px;

  margin-bottom: 20px;

  flex-wrap: nowrap;

  align-items: center;

}



.updates-head {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

}



.updates-subnav {

  display: flex;

  gap: 10px;

  margin: 6px 0 12px;

  flex-wrap: wrap;

}



.updates-subnav-link {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 6px 14px;

  border-radius: 999px;

  border: 1px solid var(--border);

  color: inherit;

  text-decoration: none;

  background: #fff;

  font-weight: 600;

}



.updates-subnav-link.active {

  background: #edf4ea;

  border-color: #c7d7c2;

  color: #225c2e;

}



.logbook-filters {

  display: grid;

  gap: 12px;

  margin-bottom: 16px;

}



.logbook-layout {

  display: grid;

  grid-template-columns: 220px minmax(0, 1fr);

  gap: 20px;

  align-items: start;

}



.logbook-menu {

  display: grid;

  gap: 10px;

}



.logbook-menu-link {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 8px 14px;

  border-radius: 999px;

  border: 1px solid var(--border);

  color: inherit;

  text-decoration: none;

  background: #fff;

  font-weight: 600;

}



.logbook-menu-link.active {

  background: #edf4ea;

  border-color: #c7d7c2;

  color: #225c2e;

}



@media (max-width: 900px) {

  .logbook-layout {

    grid-template-columns: 1fr;

  }

  .logbook-menu {

    grid-auto-flow: column;

    grid-auto-columns: max-content;

    overflow-x: auto;

    padding-bottom: 6px;

  }

}



.logbook-filters .filter-row {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

  gap: 12px;

}



.logbook-filters label {

  display: grid;

  gap: 6px;

  font-weight: 600;

}



.logbook-filters input {

  width: 100%;

}



.logbook-filters .filter-actions {

  display: flex;

  gap: 10px;

  flex-wrap: nowrap;

}



.logbook-action-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  flex-wrap: nowrap;

  margin-bottom: 10px;

  overflow-x: auto;

  padding-bottom: 4px;

}



.logbook-select {

  display: flex;

  gap: 8px;

  flex-wrap: nowrap;

}



.logbook-action-row .hint {

  margin-left: auto;

  white-space: nowrap;

}



.logbook-table-wrap {

  display: grid;

  gap: 12px;

}



.logbook-table {

  width: 100%;

  border-collapse: collapse;

  background: #fff;

  border-radius: 14px;

  overflow: hidden;

  border: 1px solid var(--border);

}



.logbook-table th,

.logbook-table td {

  padding: 10px 12px;

  border-bottom: 1px solid var(--border);

  text-align: left;

  vertical-align: top;

}



.logbook-table th {

  background: #f7f4ef;

  font-weight: 700;

}



.logbook-table tr:last-child td {

  border-bottom: none;

}



.logbook-check {

  width: 36px;

}



.logbook-actions {

  display: flex;

  justify-content: flex-end;

}



.logbook-table .muted {

  color: #7b7368;

  font-size: 0.9rem;

  margin-top: 4px;

}



.log-clear-form {

  margin: 0;

}



.log-clear-btn {

  border: 1px solid var(--border);

  background: #fff;

  color: var(--red);

  width: 38px;

  height: 38px;

  border-radius: 999px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  padding: 0;

}



.log-clear-btn svg {

  width: 18px;

  height: 18px;

  fill: currentColor;

}



.log-clear-btn:hover {

  border-color: var(--red);

  background: rgba(198, 90, 73, 0.08);

}



.admin-nav a {

  padding: 8px 14px;

  border-radius: 999px;

  border: 1px solid var(--border);

  color: var(--muted);

  font-size: 14px;

}

.admin-status-row {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 12px;

  margin-bottom: 12px;

}

.admin-nav-pill {

  padding: 8px 14px;

  border-radius: 999px;

  border: 1px solid var(--border);

  color: var(--muted);

  font-size: 14px;

  font-family: inherit;

  font-weight: 400;

  line-height: 1.2;

  background: transparent;

  cursor: pointer;

}

.admin-nav-pill.allowed {

  background: #e9f4df;

  border-color: #9fc58f;

  color: #2f5a2f;

}

.admin-nav-pill.active {

  color: var(--ink);

  border-color: var(--accent);

}



.admin-nav a.allowed {

  background: #e9f4df;

  border-color: #9fc58f;

  color: #2f5a2f;

}



.admin-nav a.disabled {

  background: #f2f0ea;

  border-color: rgba(46, 87, 42, 0.15);

  color: rgba(60, 70, 56, 0.45);

  cursor: not-allowed;

  pointer-events: none;

  filter: grayscale(0.2);

}



.admin-nav a.disabled.active {

  background: #f2f0ea;

  border-color: rgba(46, 87, 42, 0.15);

  color: rgba(60, 70, 56, 0.45);

}



.admin-nav a.active {

  color: var(--ink);

  border-color: var(--accent);

}



.admin-status {

  display: inline-block;

  padding: 6px 12px;

  border-radius: 10px;

  border: 2px solid #1f1b16;

  background: #f9f5ef;

  color: #1f1b16;

  font-size: 13px;

  font-weight: 600;

  margin-bottom: 0;

}



.intro {

  font-size: 18px;

  margin-bottom: 14px;

}



.layout {

  display: grid;

  grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);

  gap: 24px;

  align-items: start;

}



.contact-layout {

  display: grid;

  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);

  gap: 24px;

  align-items: start;

}



.fb-section {

  margin-top: 32px;

}



.fb-section h3 {

  margin: 0 0 12px;

  font-family: "Playfair Display", "Georgia", serif;

}



.fb-embed {

  background: var(--panel);

  border: 1px solid var(--border);

  border-radius: 16px;

  padding: 16px;

  display: flex;

  justify-content: center;

}



.fb-embed iframe {

  width: 100%;

  max-width: 520px;

}



.consent-banner {

  position: fixed;

  inset: auto 0 0 0;

  display: none;

  padding: 12px 16px;

  background: #1f7aa3;

  color: #fff;

  backdrop-filter: none;

  z-index: 999;

}



.consent-banner.active {

  display: block;

}



.consent-card {

  max-width: 100%;

  margin: 0 auto;

  background: transparent;

  border: none;

  border-radius: 0;

  padding: 6px 8px;

  display: grid;

  gap: 12px;

  box-shadow: none;

}



.consent-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

}



.consent-row p {

  margin: 0;

  color: #fff;

  font-size: 15px;

  line-height: 1.4;

}



.consent-options {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 12px 18px;

  color: var(--ink);

  font-size: 14px;

}



.consent-option {

  display: flex;

  align-items: center;

  gap: 8px;

}



.consent-option select {

  padding: 6px 10px;

  border-radius: 8px;

  border: 1px solid var(--border);

}



.consent-actions {

  display: flex;

  flex-wrap: nowrap;

  align-items: center;

  gap: 12px;

  align-items: center;

}



.consent-actions a {

  font-size: 14px;

  color: var(--accent);

}



@media (max-width: 720px) {

  .consent-banner {

    padding: 10px;

  }



  .consent-row {

    flex-direction: column;

    align-items: flex-start;

  }



  .consent-actions {

    width: 100%;

    justify-content: flex-start;

    flex-wrap: wrap;

  }

}



.consent-actions .primary,

.consent-actions .ghost {

  background: transparent;

  border: 2px solid #fff;

  color: #fff;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.04em;

  padding: 8px 14px;

  font-size: 12px;

}



.consent-actions .primary {

  background: #fff;

  color: #1f7aa3;

}



.consent-details {

  background: #fffdf9;

  border-radius: 12px;

  padding: 12px 14px;

  color: var(--ink);

  display: grid;

  gap: 10px;

  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);

}



.consent-policy {

  color: #1f7aa3;

  font-weight: 600;

  text-decoration: none;

}



.consent-policy:hover {

  text-decoration: underline;

}



.consent-embed {

  width: 100%;

  min-height: 220px;

  display: grid;

  place-items: center;

  text-align: center;

}



.consent-modal {

  position: fixed;

  inset: 0;

  display: none;

  align-items: center;

  justify-content: center;

  background: rgba(16, 20, 16, 0.55);

  backdrop-filter: blur(6px);

  z-index: 1000;

  padding: 16px;

}



.consent-modal[hidden] {

  display: none !important;

}



.consent-modal:not([hidden]) {

  display: flex;

}



.consent-modal-card {

  width: min(92vw, 620px);

  background: #fffdf9;

  border: 1px solid #d9d0c4;

  border-radius: 20px;

  padding: 24px 26px 22px;

  box-shadow: 0 26px 50px rgba(0, 0, 0, 0.25);

  position: relative;

  display: grid;

  gap: 12px;

}



.consent-modal-card::before {

  content: "";

  position: absolute;

  inset: 0 0 auto 0;

  height: 6px;

  border-radius: 20px 20px 0 0;

  background: linear-gradient(90deg, #2f5a2f, #6c8f4a);

}



.consent-modal-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

}



.consent-modal-header h3 {

  margin: 0;

  font-family: "Playfair Display", "Georgia", serif;

  font-size: 22px;

}



.consent-close {

  border: 1px solid #d3c8bb;

  background: #fff;

  color: var(--ink);

  width: 34px;

  height: 34px;

  border-radius: 999px;

  font-size: 18px;

  line-height: 1;

  cursor: pointer;

}



.consent-close:hover {

  border-color: #6c8f4a;

}



.consent-modal-card .checkbox-field {

  background: #f3efe8;

  border: 1px solid #d9d0c4;

  border-radius: 12px;

  padding: 10px 12px;

  width: fit-content;

}



.consent-modal-card .consent-actions {

  justify-content: flex-end;

  gap: 14px;

  flex-wrap: wrap;

}



.consent-modal-card .consent-actions .ghost {

  background: #efefef;

  border-color: #d2d2d2;

  min-width: 120px;

  white-space: nowrap;

}



.consent-modal-card .consent-actions .ghost:hover {

  background: #e2e2e2;

}



.map-frame {

  width: 100%;

  border: 0;

  border-radius: 12px;

  min-height: 320px;

}



.calendar-card,

.form-card,

.hero-card,

.login-card,

.map-card,

.gallery-card {

  background: var(--panel);

  border: 1px solid var(--border);

  border-radius: 16px;

  padding: 18px;

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);

  min-width: 0;

  max-width: 100%;

}



.calendar-card {

  --ink: #1f1b16;

  --muted: #6f6a63;

  --border: #d9d0c4;

  --panel: #ffffff;

  --accent: #c14d4d;

  --blue: #2878c8;

  --pending: #f0a43c;

}



.form-card {

  width: 100%;

}



.import-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

  gap: 16px;

  margin-bottom: 1.5rem;

}



.gallery-grid {

  --gallery-gap: 16px;

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

  gap: var(--gallery-gap);

  margin-top: 12px;

}



.gallery-grid-fixed {

  display: flex;

  flex-wrap: wrap;

  gap: var(--gallery-gap);

  justify-content: center;

}



.gallery-grid-fixed .gallery-item {

  flex: 0 0 calc((100% - (var(--gallery-columns) - 1) * var(--gallery-gap)) / var(--gallery-columns));

  max-width: calc((100% - (var(--gallery-columns) - 1) * var(--gallery-gap)) / var(--gallery-columns));

}



@media (max-width: 820px) {

  .gallery-grid-fixed {

    --gallery-columns: 2 !important;

  }

}



@media (max-width: 520px) {

  .gallery-grid-fixed {

    --gallery-columns: 1 !important;

  }

}



.gallery-title-link {

  color: inherit;

  text-decoration: none;

}



.gallery-title-link:hover {

  text-decoration: underline;

}



.reglement-card {

  max-width: 1100px;

  margin: 0 auto;

  width: 100%;

}



.reglement-actions {

  display: flex;

  gap: 10px;

  justify-content: flex-start;

  margin: 6px 0 14px;

  flex-wrap: wrap;

}



.reglement-frame {

  border: 1px solid #e5e1d8;

  border-radius: 12px;

  overflow: hidden;

  width: 100%;

  max-width: 100%;

  margin: 0;

  aspect-ratio: 210 / 297;

}



.reglement-frame iframe {

  width: 100%;

  height: 100%;

  border: 0;

  display: block;

}



.reglement-upload-meta {

  margin-top: 10px;

  display: grid;

  gap: 8px;

}



.reglement-thumb {

  width: 220px;

  border: 1px solid #e5e1d8;

  border-radius: 10px;

  overflow: hidden;

  background: #fff;

}



.reglement-thumb iframe {

  width: 100%;

  height: 260px;

  border: 0;

  display: block;

}



.gallery-item {

  margin: 0;

  border-radius: 14px;

  overflow: hidden;

  border: 1px solid var(--border);

  background: #fff;

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);

}



.gallery-item img {

  width: 100%;

  height: 100%;

  display: block;

  object-fit: cover;

  aspect-ratio: 4 / 3;

  transition: transform 180ms ease;

}



.gallery-link {

  display: block;

  color: inherit;

  padding: 0;

  border: none;

  background: none;

  cursor: pointer;

}



.gallery-item:hover img,

.gallery-link:hover img {

  transform: scale(1.03);

}



.lightbox {

  position: fixed;

  inset: 0;

  display: none;

  align-items: center;

  justify-content: center;

  z-index: 1000;

}



.lightbox.active {

  display: flex;

}



.lightbox-backdrop {

  position: absolute;

  inset: 0;

  background: rgba(0, 0, 0, 0.7);

  border: none;

}



.lightbox-body {

  position: relative;

  margin: 0;

  z-index: 1;

  max-width: min(92vw, 1200px);

  max-height: 88vh;

  display: grid;

  place-items: center;

}



.lightbox-body img {

  max-width: 100%;

  max-height: 88vh;

  border-radius: 12px;

  border: 10px solid #111111;

  box-shadow:

    16px 16px 0 rgba(90, 90, 90, 0.28),

    0 12px 30px rgba(0, 0, 0, 0.35);

  background: #fff;

  transition: opacity 260ms ease;

}



.lightbox-body img.is-loading { opacity: 0.6; }



.lightbox-img.fade-out {

  opacity: 0;

}



.lightbox-body {

  position: relative;

}



.lightbox-img.current {

  position: relative;

  display: block;

}



.lightbox-img.next {

  position: absolute;

  inset: 0;

  margin: auto;

  max-width: 100%;

  max-height: 88vh;

  object-fit: contain;

}



.lightbox-close {

  position: absolute;

  top: -12px;

  right: -12px;

  width: 36px;

  height: 36px;

  border-radius: 999px;

  border: none;

  background: #fff;

  color: #111;

  font-size: 24px;

  cursor: pointer;

  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);

}



.lightbox-nav {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  width: 42px;

  height: 42px;

  border-radius: 999px;

  border: none;

  background: rgba(255, 255, 255, 0.9);

  color: #111;

  font-size: 26px;

  cursor: pointer;

  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);

}



.lightbox-nav.prev {

  left: -16px;

}



.lightbox-nav.next {

  right: -16px;

}



.conflict-table {

  width: 100%;

  border-collapse: collapse;

  margin-top: 8px;

  font-size: 13px;

}



.conflict-table th,

.conflict-table td {

  border: 1px solid var(--border);

  padding: 8px 10px;

  vertical-align: top;

  text-align: left;

}



.conflict-table th {

  background: #fffdfb;

}



.conflict-actions {

  display: flex;

  gap: 8px;

  flex-wrap: nowrap;

  align-items: center;

  margin-bottom: 8px;

}



.hero-card h1,

.calendar-head h2,

.form-card h3,

.login-card h1,

.calendar-card h2 {

  font-family: "Playfair Display", "Georgia", serif;

  margin-top: 0;

}



.calendar-head {

  display: grid;

  grid-template-columns: 1fr auto 1fr;

  align-items: center;

  gap: 12px;

  margin-bottom: 8px;

}



.reset-button {

  margin: 0 0 12px;

}



.calendar-controls {

  display: flex;

  gap: 12px;

  align-items: center;

  flex-wrap: nowrap;

  align-items: center;

  margin-bottom: 12px;

}



.calendar-controls .reset-button {

  margin: 0;

  border: 2px solid #16371f;

  background: var(--green);

  color: #fff;

  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);

  font-weight: 600;

}



.calendar-controls .today-button {

  text-decoration: none;

}



.calendar-controls .reset-button:hover {

  background: #255d32;

  border-color: #0f2b18;

  color: #fff;

}



.calendar-controls .calendar-hint {

  margin: 0;

  flex: 1;

  font-size: 13px;

  line-height: 1.4;

}



.calendar-controls .calendar-hints {

  display: grid;

  gap: 6px;

  flex: 1;

}



.reserve-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  margin-top: 10px;

  text-decoration: none;

}



.hero-card-home .hero-header {

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 12px;

}



.hero-card-home .hero-header h1 {

  margin: 0;

}



.hero-reserve-btn {

  margin-top: 0;

  align-self: flex-start;

}



@media (max-width: 720px) {

  .hero-card-home .hero-header {

    flex-direction: column;

    align-items: flex-start;

  }

}



.calendar-head h2 {

  margin: 0;

  font-size: 24px;

  text-align: center;

  justify-self: center;

}



.calendar-head h2 span {

  color: var(--accent);

}



.calendar-nav {

  font-size: 14px;

  color: #fff;

  display: inline-flex;

  align-items: center;

  gap: 6px;

  padding: 6px 12px;

  border-radius: 999px;

  border: 2px solid #16371f;

  background: var(--green);

  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);

  font-weight: 600;

}



.calendar-head .calendar-nav:first-child {

  justify-self: start;

}



.calendar-head .calendar-nav:last-child {

  justify-self: end;

}

.calendar-nav:hover {

  border-color: #0f2b18;

  background: #255d32;

  color: #fff;

}



.calendar {

  width: 100%;

  border-collapse: collapse;

  table-layout: fixed;

}



.calendar th {

  background: var(--blue);

  color: #fff;

  padding: 8px;

  font-size: 13px;

  font-weight: 600;

}



.calendar td {

  border: 1px solid var(--border);

  padding: 6px;

  height: 70px;

  vertical-align: top;

  cursor: pointer;

  background-clip: padding-box;

  position: relative;

  padding-left: 12px;

}



.calendar td.selected {

  box-shadow: inset 0 0 0 2px var(--accent);

}



.calendar td.other {

  background: #fbf8f5;

  color: #a7a29c;

}



.calendar td .date {

  display: block;

  font-weight: 600;

  font-size: 12px;

  margin-bottom: 6px;

}



.calendar td .status {

  font-size: 11px;

  display: block;

  max-width: 100%;

  white-space: normal;

  overflow-wrap: anywhere;

  line-height: 1.1;

}



.calendar td .multi-badge {

  position: absolute;

  top: 6px;

  right: 6px;

  background: #274a2b;

  color: #fff;

  border-radius: 999px;

  padding: 2px 6px;

  font-size: 11px;

  font-weight: 700;

  line-height: 1;

}



.calendar td .holiday-label {

  display: block;

  margin-top: 6px;

  font-size: 11px;

  opacity: 0.9;

}



.calendar-body {

  display: block;

}



.calendar td.unavailable .holiday-label {

  color: var(--black);

}



.calendar td::before {

  content: "";

  position: absolute;

  left: 0;

  top: 0;

  bottom: 0;

  width: 6px;

  background: var(--border);

}



.calendar td.first-available::after {

  content: "";

  position: absolute;

  right: 6px;

  bottom: 6px;

  width: 7px;

  height: 7px;

  border-radius: 999px;

  background: var(--green);

  box-shadow: 0 0 0 2px #fff;

}



.calendar td.available::before {

  background: var(--border);

}



.calendar td.reserved::before {

  background: var(--green);

}



.calendar td.unavailable::before {

  background: var(--black);

}



.calendar td.out-of-range::before {

  background: #8b949e;

}



.calendar td.pending::before {

  background: var(--pending);

}



.calendar td.declined::before {

  background: transparent;

  border: 1px solid var(--red);

}



.calendar td.available,

.calendar td.reserved,

.calendar td.pending,

.calendar td.unavailable,

.calendar td.out-of-range,

.calendar td.declined {

  background: transparent;

  color: var(--ink);

}



.calendar td .date {

  display: inline-block;

  padding: 2px 8px;

  border-radius: 999px;

}



.calendar td.available .date {

  background: #fff;

  color: var(--ink);

  border: 1px solid var(--border);

}



.calendar td.reserved .date {

  background: var(--green);

  color: #fff;

}



.calendar td.pending .date {

  background: var(--pending);

  color: #fff;

}



.calendar td.unavailable .date {

  background: var(--black);

  color: #fff;

}



.calendar td.out-of-range .date {

  background: #8b949e;

  color: #fff;

}



.calendar td.declined .date {

  background: transparent;

  color: var(--ink);

  border: 2px solid var(--red);

}



.calendar td.weekend {

  background: #e3e3e3;

}



.calendar td.holiday {

  background: #dcdcdc;

}



.calendar td.out-of-range {

  background: repeating-linear-gradient(

    -45deg,

    #f1efeb,

    #f1efeb 6px,

    #e0ded8 6px,

    #e0ded8 12px

  );

}



.calendar td.weekend.available .date {

  background: #e0e0e0;

  color: var(--ink);

}



.calendar td.unavailable .holiday-label {

  color: #111;

}



.legend {

  display: flex;

  gap: 16px;

  margin-top: 14px;

  flex-wrap: nowrap;

  align-items: center;

  font-style: italic;

  color: var(--muted);

}



.legend-item {

  position: relative;

  padding-left: 18px;

}



.legend-item::before {

  content: "";

  position: absolute;

  left: 0;

  top: 6px;

  width: 10px;

  height: 10px;

  background: currentColor;

}



.legend-item.available {

  color: var(--ink);

}



.legend-item.available::before {

  background: #fff;

  border: 1px solid var(--border);

}

.legend-item.reserved { color: var(--green); }

.legend-item.unavailable { color: var(--black); }

.legend-item.out-of-range { color: #8b949e; }

.legend-item.pending { color: var(--pending); }

.legend-item.declined { color: var(--red); }



.reserved-icon {

  width: 18px;

  height: 18px;

  border-radius: 50%;

  background: var(--green);

  color: #fff;

  display: inline-grid;

  place-items: center;

  margin-right: 8px;

  flex-shrink: 0;

  font-size: 12px;

  line-height: 1;

  font-weight: 700;

}



.reserved-icon svg {

  width: 12px;

  height: 12px;

  fill: currentColor;

}



.reserved-icon.header-icon {

  width: 30px;

  height: 30px;

  margin-left: 12px;

  vertical-align: middle;

  background: transparent;

  border-radius: 0;

  color: var(--ink);

  object-fit: contain;

}



.print-btn-icon {

  border: none;

  background: transparent;

  padding: 0;

  cursor: pointer;

}



.print-btn-icon img {

  display: block;

}



@media print {

  body,

  body * {

    background: transparent !important;

    box-shadow: none !important;

  }



  body.print-reserved-only * {

    visibility: hidden !important;

  }



  body.print-reserved-only #reserved-print,

  body.print-reserved-only #reserved-print * {

    visibility: visible !important;

  }



  body.print-reserved-only #reserved-print {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

  }



  body.print-reserved-only #reserved-print .show-past-form,

  body.print-reserved-only #reserved-print .filter-range,

  body.print-reserved-only #reserved-print button,

  body.print-reserved-only #reserved-print input,

  body.print-reserved-only #reserved-print select,

  body.print-reserved-only #reserved-print .reservation-actions form,

  body.print-reserved-only #reserved-print .reservation-actions .delete-reason {

    display: none !important;

  }



  body.print-reserved-only #reserved-print .print-btn-icon {

    display: none !important;

  }



  body.print-reserved-only #reserved-print .status,

  body.print-reserved-only #reserved-print .status-chip {

    display: none !important;

  }



  body.print-reserved-only #reserved-print .reservation-row {

    border: 1px solid #999 !important;

  }

}



.form-grid {

  display: grid;

  gap: 10px;

  width: 100%;

  min-width: 0;

  justify-items: stretch;

  grid-template-columns: minmax(0, 1fr);

}



.form-grid label {

  display: flex;

  gap: 6px;

  align-items: center;

  font-size: 14px;

  color: var(--muted);

  width: 100%;

  max-width: 100%;

  justify-items: stretch;

  min-width: 0;

}



.admin-form label {

  display: grid !important;

  grid-template-columns: 1fr;

  gap: 6px;

  align-items: start;

  justify-items: stretch;

}



.admin-form label > span {

  display: block;

  font-size: 14px;

  color: var(--muted);

}



.admin-form small.hint {

  margin-top: 2px;

  font-size: 12px;

  color: var(--muted);

}



.admin-form .radio-group {

  align-items: flex-start;

}



.admin-form label > input,

.admin-form label > select,

.admin-form label > textarea {

  width: 100%;

  max-width: 100%;

  min-width: 0;

}



.password-field {

  position: relative;

  display: grid;

}



.password-field input {

  padding-right: 44px;

}



.password-toggle {

  position: absolute;

  right: 6px;

  top: 50%;

  transform: translateY(-50%);

  border: 1px solid var(--border);

  background: #fff;

  border-radius: 8px;

  padding: 4px 8px;

  cursor: pointer;

  font-size: 12px;

}



.match-hint {

  font-size: 12px;

  color: #c65a49;

  margin-top: 2px;

}



.match-hint.ok {

  color: #2f5a2f;

}



.reset-meta {

  font-size: 13px;

  color: var(--muted);

  margin-bottom: 10px;

  display: flex;

  gap: 10px;

  flex-wrap: wrap;

}



.reset-meta strong {

  color: var(--ink);

}

.admin-form label > input.input-compact {

  width: 4ch;

  max-width: 4ch;

  justify-self: start;

  text-align: center;

}

.admin-form label > input.input-compact-wide {

  width: 12ch;

  max-width: 12ch;

  min-width: 90px;

  padding-left: 10px;

  padding-right: 10px;

}



.inline-field {

  display: flex;

  align-items: center;

  gap: 12px;

  flex-wrap: wrap;

}



.inline-field > span {

  flex: 1 1 220px;

}



.inline-field > input {

  flex: 0 0 auto;

  width: min(320px, 100%);

}



.checkbox-field {

  display: flex;

  align-items: center;

  gap: 10px;

  font-size: 14px;

  color: var(--muted);

}

.checkbox-field input[type="checkbox"] {

  margin: 0;

}

.checkbox-field--grid {

  display: grid;

  grid-template-columns: minmax(0, 1fr) auto;

  align-items: center;

  gap: 10px;

}



.admin-form .checkbox-field {

  display: flex;

  align-items: center;

  gap: 10px;

  flex-direction: row;

}



.checkbox-field input {

  width: 16px;

  height: 16px;

}



.radio-group {

  display: flex !important;

  flex-direction: row !important;

  align-items: center;

  justify-content: flex-start;

  gap: 14px;

  flex-wrap: nowrap;

  align-items: center;

  margin-top: 2px;

}



.radio-field {

  display: grid;

  gap: 6px;

  color: var(--muted);

  font-size: 14px;

}



.role-heading {

  display: block;

  font-size: 18px;

  font-weight: 700;

  color: var(--ink);

  margin: 10px 0 6px;

  padding: 0;

}



.role-card {

  border: 1px solid var(--border);

  border-radius: 12px;

  padding: 12px 14px;

  background: #fff;

  display: grid;

  gap: 12px;

}



.radio-option {

  display: inline-flex !important;

  align-items: center;

  gap: 8px;

  font-size: 14px;

  color: var(--ink);

  width: auto !important;

  max-width: none !important;

  flex: 0 0 auto !important;

  margin: 0;

}



.radio-stack {

  flex-direction: column;

  align-items: center;

  gap: 6px;

  min-width: 90px;

}



.radio-stack span {

  color: var(--muted);

  font-size: 13px;

}



.radio-option input {

  width: 16px;

  height: 16px;

}



.form-grid input,

.form-grid textarea {

  border: 1px solid var(--border);

  border-radius: 8px;

  padding: 8px 10px;

  font-family: inherit;

  font-size: 14px;

  width: 100%;

  max-width: 100%;

  min-width: 0;

  display: block;

  box-sizing: border-box;

}



.half-width {

  width: 50%;

}



.captcha {

  margin-top: 6px;

}



.form-grid textarea {

  resize: vertical;

  min-height: 70px;

}



.primary,

.ghost {

  border: none;

  border-radius: 8px;

  padding: 10px 16px;

  font-family: inherit;

  cursor: pointer;

  font-size: 14px;

}



.danger {

  border: none;

  border-radius: 8px;

  padding: 10px 16px;

  font-family: inherit;

  cursor: pointer;

  font-size: 14px;

  background: var(--red);

  color: #fff;

}



.danger:hover {

  filter: brightness(0.95);

}



.primary {

  background: var(--accent);

  color: #fff;

  width: fit-content;

}



.primary:disabled {

  opacity: 0.5;

  cursor: not-allowed;

}



.ghost {

  background: transparent;

  border: 1px solid var(--border);

}



.ghost:disabled {

  opacity: 0.5;

  cursor: not-allowed;

}



.settings-page .ghost {

  background: rgba(47, 90, 47, 0.12);

  border-color: rgba(47, 90, 47, 0.35);

  color: var(--accent);

  font-weight: 600;

}



.settings-page .ghost:hover {

  background: rgba(47, 90, 47, 0.2);

}



.settings-save-floating {

  grid-column: 1 / -1;

  justify-self: center;

  position: sticky;

  top: 12px;

  width: fit-content;

  margin: 0 auto 12px;

  z-index: 5;

  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.15);

}



.settings-save-floating:focus-visible {

  outline: 2px solid var(--accent);

  outline-offset: 2px;

}



.hint {

  color: var(--muted);

  font-size: 13px;

}



.info-icon {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 26px;

  height: 26px;

  margin-left: 6px;

  border-radius: 50%;

  border: 1px solid #cfcfcf;

  background: #ededed;

  color: #2f5a2f;

  cursor: help;

  vertical-align: middle;

}



.info-icon svg {

  width: 16px;

  height: 16px;

  fill: currentColor;

}



.info-icon:hover {

  background: #d7e6d3;

}



.has-tooltip {

  position: relative;

}



.has-tooltip::after {

  content: attr(data-tooltip);

  position: absolute;

  bottom: calc(100% + 10px);

  right: 0;

  min-width: 220px;

  max-width: 320px;

  padding: 10px 12px;

  border-radius: 10px;

  background: #1f2b1f;

  color: #fff;

  font-size: 12px;

  line-height: 1.4;

  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);

  opacity: 0;

  transform: translateY(6px);

  pointer-events: none;

  transition: opacity 0.15s ease, transform 0.15s ease;

  z-index: 10;

}



.has-tooltip::before {

  content: "";

  position: absolute;

  bottom: calc(100% + 4px);

  right: 10px;

  border-width: 6px;

  border-style: solid;

  border-color: #1f2b1f transparent transparent transparent;

  opacity: 0;

  transform: translateY(6px);

  transition: opacity 0.15s ease, transform 0.15s ease;

  pointer-events: none;

  z-index: 10;

}



.has-tooltip:hover::after,

.has-tooltip:hover::before {

  opacity: 1;

  transform: translateY(0);

}



.selected-dates {

  font-weight: 700;

  font-size: 15px;

  color: var(--ink);

}



.contact-fieldset {

  border: 1px solid var(--border);

  border-radius: 12px;

  padding: 10px 12px 8px;

}



.contact-fieldset legend {

  padding: 0 6px;

  font-weight: 600;

  color: var(--ink);

}



.contact-grid {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 12px;

}



.contact-grid--stacked {

  grid-template-columns: minmax(0, 1fr);

}



.editor-field {

  display: grid;

  gap: 8px;

}



.editor-label {

  font-size: 14px;

  color: var(--muted);

}



.editor-toolbar {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

}



.editor-toolbar .ghost {

  padding: 6px 10px;

  font-size: 12px;

  background: #e6e2db;

  border-color: #c9c1b4;

  color: #3a3a35;

}



.editor-toolbar .ghost:hover {

  background: #d9d4cb;

  border-color: #bcb3a4;

}



.rich-editor,

.list-editor {

  border: 1px solid var(--border);

  border-radius: 10px;

  padding: 10px 12px;

  min-height: 90px;

  background: #fff;

  font-size: 14px;

  color: var(--ink);

}



.rich-editor-input {

  min-height: auto;

}



.list-editor {

  min-height: 120px;

}



.rich-editor:focus,

.list-editor:focus {

  outline: 2px solid rgba(47, 90, 47, 0.4);

  outline-offset: 2px;

}



.rich-hidden {

  display: none;

}



.intro-preview {

  font-size: 18px;

  color: var(--ink);

}



.hero-preview {

  font-size: 15px;

  color: var(--ink);

}



.rich-editor p {

  margin: 0 0 8px;

}



.list-preview {

  color: var(--muted);

  padding-left: 22px;

}



.list-preview div {

  position: relative;

  margin: 4px 0;

}



.list-preview div::before {

  content: "•";

  position: absolute;

  left: -16px;

  color: var(--muted);

}



.homepage-preview-area {

  display: grid;

  gap: 16px;

}



.homepage-preview .hero-reserve-btn {

  cursor: default;

  opacity: 0.7;

}



.homepage-layout {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 16px;

}



.layout-block {

  position: relative;

  min-width: 0;

}



.layout-block--full {

  grid-column: 1 / -1;

}



@media (max-width: 840px) {

  .homepage-layout {

    grid-template-columns: 1fr;

  }



  .layout-block--full {

    grid-column: auto;

  }

}



.layout-controls {

  display: grid;

  gap: 8px;

  margin-bottom: 12px;

}



.layout-controls-row {

  display: flex;

  gap: 10px;

  flex-wrap: wrap;

  align-items: center;

}



.layout-controls select {

  border: 1px solid var(--border);

  border-radius: 8px;

  padding: 8px 10px;

  font-family: inherit;

  font-size: 14px;

  background: #fff;

}



.block-toolbar {

  position: absolute;

  top: 8px;

  right: 8px;

  display: flex;

  flex-wrap: wrap;

  gap: 6px;

  z-index: 2;

  align-items: center;

}



.block-toolbar .ghost {

  padding: 4px 8px;

  font-size: 12px;

  background: #efefef;

  border-color: #d2d2d2;

}



.block-toolbar .ghost:hover {

  background: #e2e2e2;

}



.block-label {

  font-size: 12px;

  font-weight: 600;

  color: var(--ink);

  background: #fff;

  border: 1px solid var(--border);

  border-radius: 999px;

  padding: 2px 8px;

}



.block-handle {

  cursor: grab;

  font-size: 14px;

  line-height: 1;

  padding: 4px 8px;

  min-width: 24px;

  height: 24px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border-radius: 6px;

  border: 1px solid var(--border);

  background: #f0f0f0;

}



.layout-block.dragging {

  opacity: 0.6;

}



.admin-layout .layout-block:hover {

  outline: 2px dashed rgba(47, 90, 47, 0.35);

  outline-offset: 2px;

}





.info-card--highlight {

  background: #fff4e6;

  border-color: #e6c7a2;

}



.info-card--text p {

  margin: 0 0 8px;

}





.success-email {

  margin-top: 6px;

  color: var(--ink);

  font-weight: 600;

}



@media (max-width: 640px) {

  .contact-grid {

    grid-template-columns: 1fr;

  }

}



.menu-tree {

  display: grid;

  gap: 12px;

  margin-top: 12px;

}



.menu-node {

  border: 1px solid var(--border);

  border-radius: 10px;

  padding: 8px 10px;

  background: #fffdfb;

  font-weight: 600;

}



.menu-children {

  margin-top: 8px;

  display: grid;

  gap: 6px;

  padding-left: 12px;

}



.menu-children .menu-node {

  font-weight: 500;

  background: #ffffff;

}



.alert {

  padding: 10px 12px;

  border-radius: 8px;

  font-size: 13px;

}



.alert.error {

  background: #ffe4e4;

  color: #b33a3a;

}



.alert.success {

  background: #e8f5e0;

  color: #3c6b2f;

}



.alert.warning {

  background: #fff2cc;

  color: #6b5b2a;

}



.reservation-card {

  border: 1px solid var(--border);

  border-radius: 12px;

  padding: 12px;

  margin-top: 12px;

  background: #fffdfb;

}



.reservation-head {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 6px;

}



.status {

  text-transform: uppercase;

  font-size: 11px;

  letter-spacing: 1px;

  display: inline-block;

  padding: 4px 8px;

  border-radius: 999px;

  font-weight: 600;

  border: 1px solid transparent;

}



.status.pending {

  color: #fff;

  background: var(--pending);

  border-color: rgba(194, 113, 33, 0.5);

}

.status.approved {

  color: #fff;

  background: var(--green);

  border-color: rgba(37, 88, 55, 0.5);

}

.status.declined {

  color: #fff;

  background: var(--red);

  border-color: rgba(151, 40, 40, 0.5);

}



.reservation-actions {

  display: flex;

  align-items: flex-end;

}



.action-row {

  display: flex;

  justify-content: flex-end;

  gap: 8px;

  flex-wrap: wrap;

  align-items: center;

}



.action-row .status { order: 0; }

.action-row .approve-form { order: 1; }

.action-row .decline-form { display: contents; }

.action-row .decline-btn { order: 2; }

.action-row .delete-form { order: 3; }

.action-row .delete-reason { order: 4; flex-basis: 100%; justify-self: end; }



.delete-reason {

  display: grid;

  gap: 6px;

  justify-items: end;

  font-size: 12px;

  color: var(--muted);

  text-align: right;

  margin-top: 4px;

}



.delete-reason input {

  border: 1px solid var(--border);

  border-radius: 8px;

  padding: 6px 8px;

  font-size: 12px;

  width: 280px;

}



.delete-form {

  display: flex;

  align-items: center;

  gap: 8px;

}



.action-form {

  display: flex;

  flex-direction: column;

  gap: 8px;

}



.filter-range {

  display: flex;

  align-items: flex-end;

  gap: 10px;

  padding: 8px;

  border: 1px solid var(--border);

  border-radius: 10px;

  background: #fffdfb;

}



.status-summary {

  display: flex;

  gap: 12px;

  flex-wrap: nowrap;

  align-items: center;

  margin-bottom: 12px;

}



.status-chip {

  padding: 6px 12px;

  border-radius: 999px;

  font-size: 13px;

  border: 1px solid var(--border);

  background: #fff;

}



.status-chip.pending,

.status-chip.status-pending {

  border-color: var(--pending);

  color: var(--pending);

}



.status-chip.approved,

.status-chip.status-approved {

  border-color: var(--green);

  color: var(--green);

}



.status-chip.declined,

.status-chip.status-declined {

  border-color: #b23a3a;

  color: #b23a3a;

}



.reservation-list {

  display: grid;

  gap: 12px;

}



.reservation-block {

  margin-top: 18px;

  padding-top: 6px;

  border-top: 1px dashed var(--border);

}



.reservation-block h3 {

  margin: 0 0 10px;

  font-family: "Playfair Display", "Georgia", serif;

}



.show-past-form {

  display: flex;

  gap: 12px;

  align-items: center;

  flex-wrap: nowrap;

  align-items: center;

  margin-bottom: 12px;

}



.reservation-row {

  display: grid;

  grid-template-columns: minmax(0, 1fr) auto;

  gap: 12px;

  align-items: start;

  border: 1px solid var(--border);

  border-radius: 12px;

  padding: 12px;

  background: #fffdfb;

}



.reservation-row.is-target {

  border-color: var(--accent);

  box-shadow: 0 0 0 2px rgba(47, 90, 47, 0.15);

}



.reservation-info {

  display: grid;

  gap: 6px;

}



.reservation-line {

  display: flex;

  gap: 10px;

  flex-wrap: nowrap;

  align-items: center;

}



.reservation-meta {

  display: flex;

  flex-wrap: nowrap;

  align-items: center;

  gap: 12px;

  font-size: 12px;

  color: var(--muted);

}



.admin-list {

  margin-top: 16px;

  display: grid;

  gap: 12px;

}



.admin-card {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 12px;

  border: 1px solid var(--border);

  border-radius: 12px;

  padding: 12px;

  background: #fffdfb;

}



.photo-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

  gap: 16px;

  margin-top: 12px;

}



.photo-card {

  border: 1px solid var(--border);

  border-radius: 12px;

  padding: 10px;

  background: #fffdfb;

  display: grid;

  gap: 10px;

}



.photo-card img {

  width: 100%;

  height: auto;

  border-radius: 10px;

  display: block;

  border: 1px solid var(--border);

}



.photo-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

}



.conflict-choice {

  border: 1px solid var(--border);

  border-radius: 10px;

  padding: 8px;

  margin-bottom: 8px;

  background: #fffdfb;

}



.conflict-actions {

  margin-bottom: 8px;

}



.conflict-groups {

  display: grid;

  gap: 14px;

}



.conflict-group {

  border: 1px solid var(--border);

  border-radius: 12px;

  padding: 12px;

  background: #fffdfb;

  display: grid;

  gap: 10px;

}



.conflict-date {

  font-weight: 700;

  color: var(--ink);

  border-bottom: 1px dashed var(--border);

  padding-bottom: 6px;

}



.conflict-item {

  border: 1px solid var(--border);

  border-radius: 10px;

  padding: 10px;

  background: #fff;

}



.conflict-line {

  display: flex;

  justify-content: space-between;

  gap: 12px;

  align-items: center;

  flex-wrap: wrap;

}



.conflict-title {

  font-weight: 600;

  margin-bottom: 4px;

}



.conflict-actions-row {

  display: flex;

  justify-content: flex-end;

  gap: 8px;

  flex-wrap: wrap;

  margin-top: 8px;

}



.conflict-approve {

  background: #e8f4ea;

  border-color: #b9e1c1;

  color: #2f6d3f;

}



.conflict-delete {

  background: #fde9e7;

  border-color: #f1b5ad;

  color: #9a2f2f;

}



.import-list {

  margin: 0;

  padding-left: 0;

  list-style: none;

  display: grid;

  gap: 6px;

}



.is-disabled {

  opacity: 0.5;

  filter: grayscale(0.2);

}



.is-disabled .admin-form,

.is-disabled .admin-table,

.is-disabled .import-grid,

.is-disabled .import-table-wrap,

.is-disabled .conflict-groups {

  pointer-events: none;

}



.admin-form fieldset {

  border: 0;

  margin: 0;

  padding: 0;

}



.row-approved {

  color: var(--green);

  font-weight: 600;

}



.row-pending {

  color: var(--pending);

  font-weight: 600;

}



.row-declined {

  color: #b23a3a;

  font-weight: 600;

}



.icon-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 36px;

  height: 36px;

  padding: 0;

}



.icon-btn svg {

  width: 18px;

  height: 18px;

  display: block;

}



.info-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

  gap: 16px;

  margin-top: 12px;

}



.info-card {

  border: 1px solid var(--border);

  border-radius: 12px;

  padding: 14px;

  background: #fffdfb;

}



.info-card h3 {

  margin: 0 0 6px;

}



.info-card.full-width {

  grid-column: 1 / -1;

}



.info-card--two .info-list {

  columns: 2;

  column-gap: 24px;

}



.info-card--two .info-list li {

  break-inside: avoid;

}



@media (max-width: 840px) {

  .info-card--two .info-list {

    columns: 1;

  }

}



.info-list {

  margin: 8px 0 0 18px;

  padding: 0;

  color: var(--muted);

  font-size: 14px;

  line-height: 1.5;

}



.admin-table {

  width: 100%;

  border-collapse: collapse;

  margin-top: 12px;

  font-size: 13px;

  table-layout: auto;

}



.table-scroll {

  overflow-x: auto;

}



.admin-table--fixed {

  table-layout: fixed;

}



.admin-table--fixed col.col-user { width: 110px; }
.admin-table--fixed col.col-name { width: 220px; }

.admin-table--fixed col.col-email { width: 240px; }

.admin-table--fixed col.col-role { width: 220px; }

.admin-table--fixed col.col-pass { width: 140px; }

.admin-table--fixed col.col-action { width: 140px; }



.admin-table th,

.admin-table td {

  border: 1px solid var(--border);

  padding: 8px 10px;

  text-align: left;

  vertical-align: top;

  overflow-wrap: anywhere;

  overflow: hidden;

}



.admin-table td form {

  margin: 0;

}



.admin-table td .primary,

.admin-table td .status-chip {

  white-space: nowrap;

}



.admin-table .name-form {

  display: grid;

  grid-template-columns: 1fr;

  gap: 6px;

  align-items: start;

  width: 100%;

}



.admin-table .name-form input {

  min-width: 0;

  width: 100%;

  max-width: 100%;

  box-sizing: border-box;

}



.admin-table .delete-form .primary {

  width: auto;

  min-width: 0;

}



.admin-table tr.self-row {

  cursor: help;

}



.admin-table tr.self-row .self-hint {

  display: block;

  font-size: 12px;

  color: var(--muted);

  margin-top: 6px;

  opacity: 0;

  max-height: 0;

  overflow: hidden;

  transition: opacity 0.2s ease, max-height 0.2s ease;

}



.admin-table tr.self-row:hover .self-hint,

.admin-table tr.self-row:focus-within .self-hint,

.admin-table tr.self-row:focus .self-hint {

  opacity: 1;

  max-height: 60px;

}



.role-form {

  display: grid;

  grid-template-columns: 1fr;

  gap: 6px;

  align-items: start;

}



.role-form select {

  width: 100%;

  min-width: 0;

}



.admin-table .role-form .primary {

  width: 100%;

}



.settings-page .admin-status {

  margin-bottom: 12px;

}



.settings-hero {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 18px;

  padding: 16px 18px;

  border-radius: 18px;

  border: 1px solid var(--border);

  background: linear-gradient(135deg, #fffdf6 0%, #f1efe3 100%);

  position: relative;

  overflow: hidden;

  margin-bottom: 18px;

}



.settings-hero::after {

  content: "";

  position: absolute;

  right: -40px;

  top: -40px;

  width: 140px;

  height: 140px;

  background: radial-gradient(circle at center, rgba(47, 90, 47, 0.18), rgba(47, 90, 47, 0));

}



.settings-hero h2 {

  margin: 0 0 6px;

  font-family: "Playfair Display", "Georgia", serif;

}



.settings-hero p {

  margin: 0;

  color: var(--muted);

  max-width: 520px;

}



.settings-hero-badge {

  position: relative;

  z-index: 1;

  background: #fff;

  border: 1px solid var(--border);

  padding: 8px 12px;

  border-radius: 12px;

  text-align: right;

  min-width: 140px;

}



.settings-hero-badge span {

  display: block;

  font-size: 12px;

  color: var(--muted);

}



.settings-hero-badge strong {

  font-size: 16px;

}



.settings-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

  gap: 16px;

  margin-top: 6px;

  align-items: start;

}



.settings-grid--wide {

  grid-template-columns: repeat(3, minmax(220px, 1fr));

}



.settings-card {

  background: #fffdfb;

  border: 1px solid var(--border);

  border-radius: 16px;

  padding: 16px;

  display: grid;

  gap: 10px;

  align-content: start;

}



.settings-row {

  grid-column: 1 / -1;

  display: grid;

  gap: 16px;

}



.settings-row--two {

  grid-template-columns: repeat(2, minmax(0, 1fr));

}



.settings-card--wide {

  grid-column: 1 / -1;

}



.settings-card--compact {

  padding: 12px;

  font-size: 14px;

}



.settings-card--compact .settings-card-head {

  gap: 10px;

}



.settings-card--compact .settings-icon {

  width: 34px;

  height: 34px;

}



@media (min-width: 721px) {

  .settings-card--right {

    grid-column: 3;

  }

}



.settings-card--full {

  width: 100%;

}



.settings-card--compact .settings-icon svg {

  width: 18px;

  height: 18px;

}



.settings-card.full-width {

  grid-column: 1 / -1;

}



.settings-card h3 {

  margin: 0 0 4px;

}



.settings-card-head {

  display: flex;

  align-items: center;

  gap: 12px;

}



.settings-card-head .hint {

  margin: 0;

}



.settings-icon {

  width: 38px;

  height: 38px;

  border-radius: 12px;

  background: linear-gradient(135deg, rgba(47, 90, 47, 0.85), rgba(47, 90, 47, 0.55));

  display: grid;

  place-items: center;

  color: #fff;

  flex-shrink: 0;

}



.settings-icon svg {

  width: 20px;

  height: 20px;

  fill: currentColor;

}



.settings-actions {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  flex-wrap: wrap;

}



.settings-actions .primary {

  margin-left: auto;

}



@media (max-width: 720px) {

  .settings-hero {

    flex-direction: column;

    align-items: flex-start;

  }



  .settings-hero-badge {

    width: 100%;

    text-align: left;

  }



  .settings-grid--wide {

    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

  }



  .settings-card--wide {

    grid-column: 1 / -1;

  }



  .settings-row--two {

    grid-template-columns: 1fr;

  }

}



.role-table {

  width: 100%;

  border-collapse: collapse;

  margin-top: 10px;

  font-size: 13px;

}



.role-table th,

.role-table td {

  border: 1px solid var(--border);

  padding: 8px 10px;

  text-align: left;

}



.role-icon {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 22px;

  height: 22px;

  border-radius: 50%;

  font-size: 12px;

  font-weight: 700;

}



.role-yes {

  background: #e3f2dc;

  color: #2f5a2f;

  border: 1px solid #9fc58f;

}



.role-no {

  background: #fde7e7;

  color: #9a2c2c;

  border: 1px solid #e2a2a2;

}



.admin-table th {

  background: #fffdfb;

}



.import-table-wrap {

  margin: 12px 0 18px;

}



.import-table {

  width: 100%;

  border-collapse: collapse;

  font-size: 13px;

}



.import-table th,

.import-table td {

  border: 1px solid var(--border);

  padding: 8px 10px;

  text-align: left;

}



.import-table th {

  background: #fffdfb;

}



.import-conflict { background: #ffe8cc; }

.import-invalid { background: #ffd6d6; }

.import-skipped { background: #fff3c4; }

.import-updated { background: #e6f6dc; }

.import-added { background: #dff5e6; }



.actions {

  display: flex;

  gap: 12px;

  margin-top: 12px;

}



.login-page {

  min-height: 100vh;

  display: grid;

  place-items: center;

  padding: 20px;

}



.login-brand {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  margin-bottom: 12px;

}



.login-brand-main {

  display: flex;

  align-items: center;

  gap: 12px;

}



.login-brand-logo {

  width: 48px;

  height: 48px;

  object-fit: contain;

}



.login-brand-title {

  font-family: "Playfair Display", "Georgia", serif;

  font-size: 20px;

  font-weight: 600;

  color: var(--ink);

}



.login-brand-subtitle {

  font-size: 13px;

  color: var(--muted);

}



.login-close {

  border: 1px solid var(--border);

  color: var(--ink);

  background: #fff;

  padding: 6px 12px;

  border-radius: 999px;

  font-size: 13px;

  text-decoration: none;

  display: inline-flex;

  align-items: center;

}



.login-close:hover {

  border-color: var(--accent);

}



.login-close-icon {

  padding: 0;

  width: 36px;

  height: 36px;

  justify-content: center;

  font-size: 20px;

  font-weight: 700;

  color: #b72b2b;

  border-color: #e2b4b4;

}



.login-close-icon:hover {

  border-color: #b72b2b;

  background: #fff5f5;

}



.modal-backdrop {

  position: fixed;

  inset: 0;

  background: rgba(0, 0, 0, 0.45);

  display: grid;

  place-items: center;

  z-index: 999;

}



.modal-backdrop[hidden] {

  display: none !important;

}



.modal-card {

  background: #fff;

  border-radius: 14px;

  padding: 18px;

  width: min(92vw, 520px);

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);

  position: relative;

}



.modal-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  margin-bottom: 12px;

  padding-right: 44px;

}



.modal-card h2 {

  margin: 0;

  font-size: 18px;

}



.modal-close {

  border: 1px solid var(--border);

  background: #fff;

  color: var(--ink);

  width: 32px;

  height: 32px;

  border-radius: 999px;

  font-size: 18px;

  line-height: 1;

  cursor: pointer;

  position: absolute;

  top: 12px;

  right: 12px;

}



.modal-close:hover {

  border-color: var(--accent);

}



.modal-card .form-grid label {

  display: grid;

  gap: 6px;

}



.modal-field {

  display: flex;

  flex-direction: column;

  gap: 6px;

  margin: 10px 0 6px;

}



.modal-field label {

  font-weight: 600;

  font-size: 0.95rem;

}



.modal-actions {

  display: flex;

  justify-content: flex-end;

  gap: 10px;

  margin-top: 6px;

}



.site-footer {

  border-top: 1px solid var(--border);

  padding: 28px 20px 34px;

  max-width: 1200px;

  margin: 0 auto;

}



.footer-grid {

  display: grid;

  gap: 18px;

  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

}



.footer-grid h4 {

  margin: 0 0 8px;

  font-family: "Playfair Display", "Georgia", serif;

}



.footer-grid p {

  margin: 0;

  color: var(--muted);

  font-size: 14px;

}



.fb-float {

  position: fixed;

  left: 14px;

  top: 50%;

  transform: translateY(-50%);

  width: 44px;

  height: 44px;

  border-radius: 999px;

  display: grid;

  place-items: center;

  background: #1877f2;

  color: #fff;

  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6), 0 8px 16px rgba(0, 0, 0, 0.4);

  z-index: 998;

}



.fb-float svg {

  width: 22px;

  height: 22px;

  fill: currentColor;

}



.fb-float:hover {

  filter: brightness(1.05);

}



.scroll-top {

  position: fixed;

  right: 18px;

  bottom: 18px;

  width: 44px;

  height: 44px;

  border-radius: 999px;

  border: 1px solid #1f4a2f;

  background: var(--accent);

  color: #fff;

  font-size: 20px;

  font-weight: 700;

  cursor: pointer;

  display: grid;

  place-items: center;

  box-shadow: 0 16px 32px rgba(31, 90, 47, 0.28);

  opacity: 0;

  pointer-events: none;

  transform: translateY(6px);

  transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease;

  z-index: 998;

}



.scroll-top.visible {

  opacity: 1;

  pointer-events: auto;

  transform: translateY(0);

}



.scroll-top:hover {

  border-color: #1b3f28;

  filter: brightness(1.05);

}



.reporter-fab {

  position: fixed;

  right: 18px;

  bottom: 74px;

  padding: 10px 14px;

  border-radius: 999px;

  border: 1px solid #184a2e;

  background: #1f5a3a;

  color: #fff;

  font-size: 13px;

  font-weight: 600;

  cursor: pointer;

  box-shadow: 0 14px 28px rgba(31, 90, 58, 0.28);

  z-index: 998;

  display: inline-flex;

  align-items: center;

  gap: 8px;

}



.reporter-fab:hover {

  filter: brightness(1.05);

}



.reporter-badge {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 2px 8px;

  border-radius: 999px;

  background: #fff;

  color: #1f5a3a;

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 0.02em;

}



.reporter-toast {

  position: fixed;

  right: 18px;

  bottom: 132px;

  background: #fff;

  color: var(--ink);

  border: 1px solid var(--border);

  border-radius: 12px;

  padding: 10px 36px 10px 12px;

  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);

  font-size: 13px;

  max-width: 320px;

  z-index: 999;

}



.reporter-toast-close {

  position: absolute;

  top: 6px;

  right: 8px;

  border: none;

  background: transparent;

  font-size: 16px;

  cursor: pointer;

  color: var(--muted);

}



.reporter-modal {

  position: fixed;

  inset: 0;

  display: none;

  align-items: center;

  justify-content: center;

  background: rgba(31, 27, 22, 0.45);

  z-index: 1000;

  padding: 16px;

}



.reporter-modal[hidden] {

  display: none !important;

}



.reporter-modal:not([hidden]) {

  display: flex;

}



.reporter-card {

  width: min(92vw, 560px);

  background: #fff;

  border-radius: 16px;

  padding: 18px 20px;

  border: 1px solid var(--border);

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);

  display: grid;

  gap: 12px;

}



.reporter-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.reporter-header h3 {

  margin: 0;

  font-family: "Playfair Display", "Georgia", serif;

}



.reporter-header .reporter-close {

  border: 1px solid var(--border);

  background: #fff;

  color: var(--ink);

  width: 32px;

  height: 32px;

  border-radius: 999px;

  font-size: 18px;

  line-height: 1;

  cursor: pointer;

}



.reporter-meta {

  line-height: 1.4;

  margin-top: -4px;

}



.reporter-meta a {

  color: var(--accent);

  word-break: break-all;

}



.reporter-tools {

  display: flex;

  gap: 10px;

  flex-wrap: wrap;

}



.reporter-upload {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  cursor: pointer;

}



.reporter-upload input {

  display: none;

}



.reporter-preview {

  min-height: 40px;

}



.reporter-preview-img {

  max-width: 100%;

  border-radius: 12px;

  border: 1px solid var(--border);

}



.reporter-actions {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 12px;

  flex-wrap: wrap;

}



.reporter-actions .primary,

.reporter-actions .ghost {

  min-width: 120px;

}



.reporter-share {

  margin: 0;

}



.page-footer {

  text-align: center;

  font-size: 12px;

  color: var(--muted);

  opacity: 0.7;

  letter-spacing: 0.6px;

  margin: 24px 0 16px;

}



.mini-calendar {

  border: 1px dashed var(--border);

  border-radius: 12px;

  padding: 12px;

  background: #fbf8f5;

}



.mini-calendar .calendar-head h2 {

  font-size: 18px;

}



.mini-calendar .calendar-nav {

  font-size: 12px;

  width: auto;

  min-width: 140px;

}



.calendar-mini th {

  font-size: 11px;

  padding: 6px;

}



.calendar-mini td {

  height: 34px;

  padding: 4px;

  text-align: center;

}



.calendar-mini .date {

  font-size: 11px;

}



.calendar-mini td.available,

.calendar-mini td.reserved,

.calendar-mini td.pending,

.calendar-mini td.unavailable {

  background: transparent;

  color: var(--ink);

}



.calendar-mini td .date {

  display: inline-block;

  padding: 2px 6px;

  border-radius: 999px;

}



.calendar-mini td.available .date {

  background: #fff;

  color: var(--ink);

  border: 1px solid var(--border);

}



.calendar-mini td.reserved .date {

  background: var(--green);

  color: #fff;

}



.calendar-mini td.pending .date {

  background: var(--pending);

  color: #fff;

}



.calendar-mini td.unavailable .date {

  background: var(--black);

  color: #fff;

}



.calendar-mini td.weekend {

  background: #e3e3e3;

}



.calendar-mini td.holiday {

  background: #dcdcdc;

}



.calendar-mini td.weekend.available .date {

  background: #e0e0e0;

  color: var(--ink);

}



.calendar-mini td.has-tooltip {

  position: relative;

}



.calendar-mini td.has-tooltip::after {

  content: attr(data-tooltip);

  position: absolute;

  left: 50%;

  bottom: 100%;

  transform: translate(-50%, -8px);

  min-width: 220px;

  max-width: 320px;

  padding: 8px 10px;

  border-radius: 10px;

  background: rgba(20, 20, 20, 0.92);

  color: #fff;

  font-size: 12px;

  line-height: 1.35;

  white-space: pre-line;

  text-align: left;

  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.12s ease, transform 0.12s ease;

  z-index: 20;

}



.calendar-mini td.has-tooltip::before {

  content: "";

  position: absolute;

  left: 50%;

  bottom: 100%;

  transform: translate(-50%, -2px);

  border-width: 6px 6px 0 6px;

  border-style: solid;

  border-color: rgba(20, 20, 20, 0.92) transparent transparent transparent;

  opacity: 0;

  transition: opacity 0.12s ease, transform 0.12s ease;

  pointer-events: none;

  z-index: 19;

}



.calendar-mini td.has-tooltip:hover::after,

.calendar-mini td.has-tooltip:focus-within::after {

  opacity: 1;

  transform: translate(-50%, -10px);

}



.calendar-mini td.has-tooltip:hover::before,

.calendar-mini td.has-tooltip:focus-within::before {

  opacity: 1;

  transform: translate(-50%, -4px);

}





@media (max-width: 900px) {

  .layout {

    grid-template-columns: 1fr;

  }



  .contact-layout {

    grid-template-columns: 1fr;

  }



  .calendar td {

    height: 70px;

  }



  .site-header {

    flex-direction: column;

    align-items: flex-start;

  }



  .brand-mark {

    width: 90px;

  }



  .reservation-row {

    grid-template-columns: 1fr;

    justify-items: start;

  }

}



@media (max-width: 720px) {

  .calendar-body {

    display: flex;

    flex-direction: column-reverse;

    gap: 10px;

  }



  .legend {

    justify-content: flex-start;

    flex-wrap: wrap;

    gap: 8px 12px;

  }



  .calendar th {

    font-size: 10px;

    padding: 6px 2px;

    letter-spacing: 0;

  }



  .calendar td {

    height: 56px;

    padding: 4px 4px 4px 8px;

  }



  .calendar td .date {

    font-size: 10px;

    margin-bottom: 4px;

  }



  .calendar td .status {

    font-size: 0;

    width: auto;

    white-space: normal;

    word-break: break-word;

  }



  .calendar td .status::before {

    content: "";

    display: inline-block;

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: var(--border);

    vertical-align: middle;

  }



  .calendar td.available .status::before {

    background: #fff;

    border: 1px solid var(--border);

  }



  .calendar td.reserved .status::before {

    background: var(--green);

  }



  .calendar td.pending .status::before {

    background: var(--pending);

  }



  .calendar td.unavailable .status::before {

    background: var(--black);

  }



  .calendar td.declined .status::before {

    background: transparent;

    border: 1px solid var(--red);

  }



  .calendar td .holiday-label {

    font-size: 10px;

  }

}

.reporter-contact {

  display: grid;

  gap: 6px;

  text-align: center;

}



.reporter-contact input {

  justify-self: center;

  width: min(360px, 100%);

}



.reporter-description {

  display: grid;

  gap: 6px;

}



.reporter-description textarea {

  width: 100%;

  max-width: 100%;

  box-sizing: border-box;

}

.reglement-page .layout {

  max-width: 1100px;

  margin: 0 auto;

  grid-template-columns: 1fr;

}