/* ==========================================================================
   Admin UI — brand-aligned with main site (style.css)
   ========================================================================== */

/* ---------- Design tokens (match style.css) ---------- */
:root {
  --brand: #d8ff66;
  --ink-900: #0e0e0e;
  --ink-700: #1f1f1f;
  --ink-600: #2a2a2a;
  --ink-500: #404040;
  --ink-300: #8c8c8c;
  --ink-100: #ececec;
  --surface: #f7f7f7;
  --white: #fff;

  --ring: 0 0 0 .25rem color-mix(in srgb, var(--brand) 30%, transparent);
  --radius: 18px;

  --paragraph-font: "Roboto", system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif;
  --secondary-font: "Hanken Grotesk", system-ui, sans-serif;
  --fifth-font: "Plus Jakarta Sans", system-ui, sans-serif;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body {
  font-family: var(--paragraph-font);
  color: var(--ink-900);
  background: var(--surface);
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: var(--fifth-font);
  letter-spacing: -.02em;
  font-weight: 600;
}

a { color: inherit; }
a:hover { color: color-mix(in srgb, var(--brand) 60%, var(--ink-900)); }

.container-narrow { max-width: 1140px; }

/* ---------- Navbar / header ---------- */
.navbar {
  background: #fff;
  border-bottom: 1px solid var(--ink-100);
}
.navbar .navbar-brand {
  font-family: var(--fifth-font);
  font-weight: 700;
  letter-spacing: -.01em;
}
.navbar .nav-link { color: var(--ink-700); }
.navbar .nav-link:hover { color: var(--ink-900); }

/* ---------- Utilities ---------- */
.shadow-soft { box-shadow: 0 10px 24px rgba(0,0,0,.06); }
.section-title {
  font-family: var(--secondary-font);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .85rem;
  color: var(--ink-500);
}
.logo-dot {
  width: 12px; height: 12px; border-radius: 50%;
  display: inline-block; background: var(--brand); margin-right: .4rem;
}

/* ---------- Buttons (brand-aligned) ---------- */
.btn-brand {
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: color-mix(in srgb, var(--brand) 86%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--brand) 86%, black);
  --bs-btn-color: #000;
}
.btn-ghost {
  background: transparent;
  border: 1px solid var(--brand);
  color: var(--brand);
}
.btn-ghost:hover { background: color-mix(in srgb, var(--brand) 12%, transparent); }
.btn-soft {
  background: color-mix(in srgb, var(--brand) 15%, white);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, white);
  color: var(--ink-700);
}
.btn-soft:hover { background: color-mix(in srgb, var(--brand) 25%, white); }
.btn-blk-ghost {
  background: transparent;
  border: 1px solid var(--ink-500);
  color: var(--ink-500);
}
.btn-blk-ghost:hover { background: color-mix(in srgb, var(--brand) 12%, transparent); }

/* ---------- Forms ---------- */
.form-control, .form-select {
  border-radius: 12px;
  border-color: var(--ink-100);
}
.form-control:focus, .form-select:focus {
  box-shadow: var(--ring);
  border-color: var(--brand);
}
.form-check-input:focus { box-shadow: var(--ring); border-color: var(--brand); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }

/* ---------- Cards & panels ---------- */
.card, .card-admin {
  border: 1px solid var(--ink-100);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 10px 24px rgba(0,0,0,.04);
}
.card-admin .card-body, .card .card-body { padding: 1.25rem; }

.card-admin .icon-wrap, .icon {
  width: 48px; height: 48px; border-radius: 12px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--brand) 16%, #fff);
  border: 1px solid color-mix(in srgb, var(--brand) 35%, #eee);
  box-shadow: inset 0 0 0 6px color-mix(in srgb, var(--brand) 8%, #fff);
  color: #000;
}

.stat-card {
  display: grid; grid-template-columns: 48px 1fr auto; gap: .9rem; align-items: center;
  padding: 1rem 1.1rem;
  border: 1px solid var(--ink-100);
  border-radius: var(--radius);
  background: #fff;
}
.stat-card .stat-title {
  font-family: var(--secondary-font);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .82rem; color: var(--ink-500);
}
.stat-card .stat-value {
  font-family: var(--fifth-font);
  font-weight: 700; letter-spacing: -.02em;
  font-size: 1.35rem; color: var(--ink-900);
}

/* ---------- Tables ---------- */
.table-admin {
  --table-border: var(--ink-100);
  --table-head: var(--ink-700);
  --table-text: var(--ink-600);
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: 14px;
  overflow: hidden;
}
.table-admin thead th {
  font-weight: 600;
  color: var(--table-head);
  background: color-mix(in srgb, var(--brand) 6%, #fafafa);
  border-bottom: 1px solid var(--table-border);
}
.table-admin tbody td {
  color: var(--table-text);
  vertical-align: middle;
  border-top: 1px solid var(--table-border);
}
.table-hover.table-admin tbody tr:hover {
  background: color-mix(in srgb, var(--brand) 6%, #fff);
}

/* ---------- Badges / chips ---------- */
.badge-accent {
  font-family: var(--paragraph-font);
  font-weight: 600;
  color: #000;
  background: color-mix(in srgb, var(--brand) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--brand) 25%, #eee);
  border-radius: 999px;
}
.badge-soft {
  font-family: var(--paragraph-font);
  font-weight: 400;
  font-size: .8em;
  color: #000;
  background: color-mix(in srgb, var(--brand) 12%, white);
  border: 1px solid color-mix(in srgb, var(--brand) 25%, white);
}
.badge-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  border: 1px solid color-mix(in srgb, var(--brand) 35%, #eee);
  background: color-mix(in srgb, var(--brand) 10%, #fff);
  border-radius: 999px;
  padding: .35rem .6rem; font-size: .82rem; color: #000;
}

/* ---------- Pills / status ---------- */
.status-pill{
  display:inline-block; padding:.35rem .6rem; border-radius:999px;
  font-weight:600; font-size:.9rem;
  background:#eee; color:#000; border:1px solid #ddd;
}
.status-open  { background: color-mix(in srgb, var(--brand) 35%, #fff); border-color: color-mix(in srgb, var(--brand) 50%, #ddd); }
.status-closed{ background: #f7d7d7; border-color: #f1bcbc; }
.status-soon  { background: #FFF4CC; border-color: #FFE59A; }

/* ---------- Lists / meta ---------- */
.meta-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: .4rem;
}
.meta-list li { display: flex; align-items: center; gap: .5rem; color: var(--ink-700); }
.meta-list i { font-size: 1.1rem; }

/* ---------- Tables of pending/review (helper spacing) ---------- */
.table-actions { display: flex; gap: .4rem; align-items: center; }

/* ---------- Forms: admin filters row ---------- */
.filter-bar{
  display:flex; gap:.6rem .8rem; flex-wrap:wrap; align-items:center;
  background:#fff; border:1px solid var(--ink-100);
  border-radius: var(--radius); padding:.6rem .8rem;
}

/* ---------- Alerts / notices ---------- */
.notice {
  display:grid; grid-template-columns:auto 1fr; gap:.6rem; align-items:center;
  border:1px solid var(--ink-100); background:#fff; border-radius: var(--radius);
  padding:.75rem .9rem; box-shadow: 0 10px 24px rgba(0,0,0,.04);
}
.notice .notice-kicker{
  font-family: var(--secondary-font);
  text-transform: uppercase; letter-spacing: .12em;
  font-size: .78rem; color: #6d6d6d;
}

/* ---------- Footer ---------- */
.admin-footer {
  color: #dfe7e5; background:#0f1312; border-top: 1px solid #0d0f0e;
}
.admin-footer a { color: var(--brand); text-decoration: none; }
.admin-footer a:hover { color: var(--ink-300); }

/* ---------- Responsive ---------- */
@media (max-width: 575.98px) {
  .card-admin .card-body, .card .card-body { padding: 1rem; }
  .stat-card { grid-template-columns: 40px 1fr; }
}

/* ---------- Optional: subtle focus cleanup for buttons/links ---------- */
button:focus, [role="button"]:focus, .btn:focus, a.btn:focus {
  box-shadow: var(--ring);
  outline: none;
}

a { 
  color: var(--ink-300);
  text-decoration: none;
}

a:hover {
  color: var(--ink-700);
}


/* ===== Dashboard hero ===== */
.dash-hero {
  border: 1px solid var(--ink-100);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%);
}

/* ===== Action cards: tiny lift on hover ===== */
.action-card {
  transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease;
}
.action-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--brand) 35%, #e5e5e5);
  box-shadow: 0 16px 36px rgba(0,0,0,.08);
}

/* ===== Icon sizing for Boxicons inside .icon badge ===== */
.icon i { font-size: 1.9rem; line-height: 1; }
.icon-xl { font-size: 2.2rem; line-height: 1; }

/* Make icon badge a bit roomier on dashboard */
.action-card .icon {
  width: 60px; height: 60px; border-radius: 16px;
  box-shadow: inset 0 0 0 6px color-mix(in srgb, var(--brand) 10%, #fff);
}








/* ===== Add Amenity – page helpers ===== */
#map {
  height: 340px;
  border: 1px solid var(--ink-100);
  border-radius: 12px;
}

.form-help {
  font-size: .86rem;
  color: var(--ink-500);
  margin-top: .25rem;
}

/* Compact checklist with brand ticks */
.guidelines .checklist { margin: 0; }
.guidelines .checklist li {
  display: flex; align-items: center; gap: .5rem;
  padding: .25rem 0; color: var(--ink-700);
}
.guidelines .checklist i { font-size: 1.1rem; color: var(--ink-900); }

/* Consent box */
.consent-card{
  border:1px solid var(--ink-100);
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand) 10%, #fff);
}

/* Facilities grid */
.flag-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
}
@media (max-width: 575.98px) {
  .flag-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Facility “chip” look without changing names/inputs */
.flag-chip {
  display: grid; grid-template-columns: 18px 1fr; align-items: center; gap: .5rem;
  border: 1px solid var(--ink-100);
  background: #fff;
  border-radius: 10px;
  padding: .45rem .55rem;
}
.flag-chip .form-check-input { margin-top: 0; }
.flag-chip .form-check-label { color: var(--ink-800, #1a1a1a); }

/* Bring action buttons on this page in line with brand */
#btnSave.btn-brand { min-width: 180px; }



/* ===== Brand Toast ===== */
.toast-brand-container {
  pointer-events: none;           /* allow clicks through container */
  z-index: 1080;
}
.toast-brand {
  pointer-events: auto;           /* toast itself is clickable */
  --toast-accent: var(--brand, #0d6efd);     /* try to use your brand var if present */
  --toast-bg-start: #0f172a;      /* slate-900-ish */
  --toast-bg-end:   #111827;      /* slate-800-ish */
  --toast-fg:       #ffffff;
  --toast-radius:   14px;
  background: linear-gradient(135deg, var(--toast-bg-start), var(--toast-bg-end));
  color: var(--toast-fg);
  border-left: 6px solid var(--toast-accent);
  border-radius: var(--toast-radius);
  
  min-width: clamp(280px, 36vw, 520px);
  backdrop-filter: saturate(120%) blur(2px);
  animation: toast-in .25s ease-out both;
}
.toast-brand .toast-body {
  font-weight: 500;
  line-height: 1.3;
}
.toast-brand .btn-close-white {
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: .8;
}
.toast-brand .btn-close-white:hover { opacity: 1; }

/* Icon chip */
.toast-brand .toast-icon {
  display: inline-grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--toast-accent) 20%, #ffffff 0%);
  color: var(--toast-accent);
  flex: 0 0 auto;
}
.toast-brand .toast-icon i { font-size: 18px; line-height: 1; }

/* Progress line (duration synced via --toast-duration inline style) */
.toast-brand .toast-progress {
  position: absolute;
  left: 0; bottom: 0; height: 3px; right: 0;
  background: linear-gradient(90deg, var(--toast-accent), rgba(255,255,255,.25));
  transform-origin: left center;
  animation: toast-progress var(--toast-duration, 10000ms) linear forwards;
  border-bottom-left-radius: calc(var(--toast-radius) - 2px);
  border-bottom-right-radius: calc(var(--toast-radius) - 2px);
}

/* Soft shadow you’ve been using elsewhere */
.shadow-soft { box-shadow: 0 12px 24px rgba(0,0,0,.2), 0 2px 8px rgba(0,0,0,.15); }

/* Entrance animation */
@keyframes toast-in {
  from { transform: translateY(12px) scale(.98); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes toast-progress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* Mobile: center and widen */
@media (max-width: 576px) {
  .toast-brand-container {
    left: 0; right: 0; bottom: 0;
    display: grid; place-items: center;
    padding: 1rem;
  }
  .toast-brand {
    width: min(94vw, 560px);
    min-width: 0;
  }
}