/*!
  Kritamo admin — "Beige & Brown" theme (matches the public site, see docs/theme-colours.md).
  Load AFTER global.css and floor-plan-panel.css so these overrides win.
  Remove the <link> in index.html to go back to the green theme.
*/
:root {
  --bg: #efe2c8;
  --ink: #4a3826;
  --muted: rgba(74, 56, 38, 0.76);
  --line: rgba(74, 56, 38, 0.18);
  --glass: rgba(233, 215, 184, 0.94);
  --accent: #7a4a21;
  --accent2: #a06a2e;
  --shadow: 0 18px 55px rgba(74, 56, 38, 0.22);
  --card-bg: #f4e8d2;
  --card-inner-bg: rgba(255, 250, 240, 0.5);
  --admin-field-bg: #f4e8d2;
  --admin-field-border: #b98a55;
  color-scheme: light;
}

/* Page wash + green Kritamo mark (brown PNG used as a mask, filled with brand green) */
body::before {
  background: linear-gradient(
    180deg,
    rgb(239 226 200 / var(--wash-a)) 0%,
    rgb(239 226 200 / var(--wash-b)) 45%,
    rgb(239 226 200 / var(--wash-c)) 100%
  );
}
body::after {
  background-image: none;
  background-color: #123524;
  mix-blend-mode: normal;
  -webkit-mask-image: url("/images/whatsapp-logo-brown.png");
  mask-image: url("/images/whatsapp-logo-brown.png");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center calc(50% + 36px);
  mask-position: center calc(50% + 36px);
  -webkit-mask-size: clamp(480px, 92vw, 1100px) auto;
  mask-size: clamp(480px, 92vw, 1100px) auto;
}

/* Top bars */
.topbar,
.nav {
  background: linear-gradient(to bottom, rgba(239, 226, 200, 0.96), rgba(239, 226, 200, 0.72));
}
@media (prefers-reduced-transparency: reduce) {
  .nav {
    background: rgba(239, 226, 200, 0.98);
  }
}
.brand__dot {
  box-shadow: 0 0 0 6px rgba(122, 74, 33, 0.2);
}

/* Buttons */
.btn {
  border-color: rgba(122, 74, 33, 0.5);
  background: rgba(122, 74, 33, 0.08);
  color: #6b421c;
}
.btn--accent {
  border-color: rgba(122, 74, 33, 0.6);
  background: rgba(122, 74, 33, 0.18);
}
.btn--danger {
  border-color: #9f1d14;
  background: #b42318;
  color: #fff8f2;
}
.btn--danger-outline {
  border-color: rgba(180, 35, 24, 0.5);
  color: #9f1d14;
}

/* Cards and panels (latte caramel) */
.panel,
.card {
  border-color: rgba(122, 74, 33, 0.3);
}
.card {
  background: var(--glass);
}
.admin-table-card,
.admin-closed-dates__item,
.fp-assign-row,
.admin-feedback-card {
  background: rgba(255, 250, 240, 0.5);
}
.admin-item-row,
.events-admin-media-item {
  border-color: rgba(74, 56, 38, 0.14);
  background: rgba(255, 250, 240, 0.55);
}
.notice {
  background: rgba(255, 250, 240, 0.6);
  color: rgba(74, 56, 38, 0.86);
}
.error {
  border-color: rgba(180, 35, 24, 0.35);
}
.admin-error {
  color: #a1261b;
}

/* Form fields (latte caramel) */
input,
textarea,
select,
.admin-deposit-rate input,
.admin-closed-dates__label select,
.admin-bookings-create input,
.admin-bookings-create select,
.admin-bookings-create textarea,
.admin-bookings-create .dateTriggerBtn,
.admin-table-picker__trigger {
  background-color: var(--admin-field-bg);
  border-color: var(--admin-field-border);
}
input:focus,
textarea:focus,
select:focus,
.admin-bookings-create input:focus,
.admin-bookings-create select:focus,
.admin-bookings-create textarea:focus {
  border-color: #7a4a21;
  box-shadow: 0 0 0 2px rgba(122, 74, 33, 0.2);
}
input::placeholder,
textarea::placeholder {
  color: rgba(74, 56, 38, 0.5);
}
select option,
select optgroup {
  background: #f4e8d2;
  color: #4a3826;
}
.admin-bookings-create .dateTriggerBtn:hover {
  background-color: #efdfc2;
  border-color: #7a4a21;
}
.admin-table-picker__trigger::after {
  border-top-color: rgba(74, 56, 38, 0.72);
}
.admin-table-picker__menu {
  box-shadow: 0 8px 24px rgba(74, 56, 38, 0.2);
}
.admin-table-picker__option:hover,
.admin-table-picker__option[aria-selected="true"] {
  background: rgba(160, 106, 46, 0.18);
}

/* Area tabs (Bookings / Menu / Events / Feedback) and menu tabs */
.admin-area-tab,
.admin-tab {
  background: rgba(122, 74, 33, 0.06);
}
.admin-area-tab.is-active,
.admin-tab.is-active {
  border-color: rgba(122, 74, 33, 0.6);
  background: rgba(122, 74, 33, 0.18);
  color: #4a3826;
}

/* Menu publisher help */
.menu-publisher-help {
  background: rgba(122, 74, 33, 0.05);
}
.menu-publisher-help__body {
  border-top-color: rgba(74, 56, 38, 0.1);
}
.menu-publisher-help__note {
  background: rgba(122, 74, 33, 0.1);
  border-color: rgba(122, 74, 33, 0.28);
}

/* Booking status badges (dark text on light tints so they read on beige) */
.admin-booking-badge--confirmed {
  background: rgba(18, 53, 36, 0.1);
  color: #1d5a3a;
  border-color: rgba(18, 53, 36, 0.35);
}
.admin-booking-badge--request {
  background: rgba(202, 138, 4, 0.14);
  color: #7a5200;
  border-color: rgba(161, 98, 7, 0.4);
}
.admin-booking-badge--cancelled {
  background: rgba(185, 28, 28, 0.1);
  color: #991b1b;
  border-color: rgba(185, 28, 28, 0.35);
}
.admin-booking-badge--deposit-pending {
  background: rgba(234, 88, 12, 0.12);
  color: #9a3412;
  border-color: rgba(234, 88, 12, 0.4);
}
.admin-booking-badge--deposit-paid {
  background: rgba(13, 148, 136, 0.12);
  color: #115e59;
  border-color: rgba(13, 148, 136, 0.4);
}
.admin-booking-badge--deposit-refunded {
  background: rgba(100, 116, 139, 0.14);
  color: #475569;
  border-color: rgba(100, 116, 139, 0.4);
}

/* Bookings list */
.admin-bookings-create {
  border-color: rgba(122, 74, 33, 0.4);
  background: rgba(255, 250, 240, 0.5);
}
.admin-bookings-create .admin-field-label {
  color: rgba(74, 56, 38, 0.72);
}
.admin-bookings-date-header {
  background: rgba(122, 74, 33, 0.08);
}
.admin-bookings-slot {
  background: rgba(255, 250, 240, 0.55);
  border-color: rgba(74, 56, 38, 0.14);
}
.admin-bookings-slot--editing {
  border-color: rgba(122, 74, 33, 0.6);
  background: rgba(122, 74, 33, 0.08);
}
.admin-bookings-slot__meta {
  color: rgba(74, 56, 38, 0.78);
}
.admin-bookings-slot__message {
  color: rgba(74, 56, 38, 0.9);
}
.admin-bookings-slot__message-label {
  color: rgba(74, 56, 38, 0.72);
}
.admin-bookings-slot--draggable::before {
  color: #a06a2e;
}
@media (max-width: 699px) {
  .admin-bookings-slot__actions {
    border-top-color: rgba(74, 56, 38, 0.1);
  }
}
#admin-area-bookings .bookings-workspace__bookings .admin-bookings-slot__actions {
  border-top-color: rgba(74, 56, 38, 0.1);
}

/* Date picker modal */
.dateModal {
  background: rgba(255, 251, 243, 0.98);
}
.dateModal::backdrop {
  background: rgba(74, 56, 38, 0.35);
}
.dateOption {
  background: rgba(122, 74, 33, 0.05);
}
.dateOption:hover {
  border-color: rgba(160, 106, 46, 0.5);
}
.dateOption.is-active {
  border-color: rgba(122, 74, 33, 0.55);
  background: rgba(122, 74, 33, 0.14);
}

/* Floor plan */
.fp-booking-row__meta,
.fp-assign-row__meta {
  color: rgba(74, 56, 38, 0.68);
}
.fp-booking-row__table,
.fp-assign-row__table {
  color: #8a5a2b;
}
.fp-assign-row--assigned {
  border-color: rgba(122, 74, 33, 0.55);
  background: rgba(122, 74, 33, 0.1);
}
.fp-canvas-wrap {
  background: rgba(122, 74, 33, 0.06);
}
.fp-canvas {
  background-image:
    linear-gradient(rgba(74, 56, 38, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74, 56, 38, 0.06) 1px, transparent 1px);
}
.fp-table {
  border-color: rgba(74, 56, 38, 0.3);
  background: #fbf5ea;
  box-shadow: 0 2px 8px rgba(74, 56, 38, 0.18);
}
.fp-table:hover {
  box-shadow: 0 4px 16px rgba(74, 56, 38, 0.25);
}
.fp-table--free {
  border-color: rgba(18, 53, 36, 0.55) !important;
  background: #fbf5ea;
}
.fp-table--occupied {
  border-color: #7a4a21 !important;
  background: #a06a2e !important;
}
.fp-table--occupied .fp-table__label,
.fp-table--occupied .fp-table__seats,
.fp-table--occupied .fp-table__booking {
  color: #fffaf0;
}
.fp-table--bar {
  background: rgba(122, 74, 33, 0.14);
  border-color: rgba(122, 74, 33, 0.5);
}
.fp-table--merged {
  box-shadow: 0 0 0 3px rgba(161, 98, 7, 0.7), 0 2px 8px rgba(74, 56, 38, 0.2);
}
.fp-table--dragging {
  box-shadow: 0 8px 28px rgba(74, 56, 38, 0.3);
}
.fp-canvas--booking-drop .fp-table--drop-ok {
  border-color: #2f8a52 !important;
  background: #dcefdf !important;
  box-shadow: 0 0 0 3px rgba(47, 138, 82, 0.35);
}
.fp-canvas--booking-drop .fp-table--drop-ok .fp-table__label,
.fp-canvas--booking-drop .fp-table--drop-ok .fp-table__seats,
.fp-canvas--booking-drop .fp-table--drop-ok .fp-table__booking {
  color: #123524;
}
.fp-canvas--booking-drop .fp-table--drop-ok.fp-table--drop-hover {
  box-shadow: 0 0 0 4px rgba(47, 138, 82, 0.55);
}
.fp-table__seats {
  color: rgba(74, 56, 38, 0.8);
}
.fp-table__booking {
  color: rgba(74, 56, 38, 0.9);
}

/* Feedback */
.admin-feedback-star {
  color: rgba(74, 56, 38, 0.32);
}
.admin-feedback-star.is-filled {
  color: #0f766e;
}
.admin-feedback-star.is-filled.is-low {
  color: #b91c1c;
}
.admin-feedback-card__comment {
  background: rgba(122, 74, 33, 0.06);
  color: rgba(74, 56, 38, 0.92);
}
.menu-publisher-help__summary {
  color: #7a4a21;
}