/* =========================================================
   WILD BEAUTIES OF BOTSWANA — Admin styles
   ========================================================= */
:root {
  --charcoal: #232318; --charcoal-deep: #1a1a11;
  --bark: #5c4737; --gold: #c79447; --gold-deep: #a1712f; --ochre: #d2ab62;
  --sand: #ddc79a; --cream: #f4ead2; --paper: #fbf8f1;
  --ink: #232318; --dim: rgba(35,35,24,0.55);
  --serif: 'Cinzel', Georgia, serif;
  --sans: 'Montserrat', system-ui, sans-serif;
  --hand: 'Great Vibes', cursive;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
body { font-family: var(--sans); font-size: 15px; color: var(--ink); background: var(--paper); }
h1,h2,h3 { font-family: var(--serif); font-weight: 600; }
h2 { font-size: 1.25rem; margin-bottom: 0.9rem; }
h3 { font-size: 1rem; margin: 1.4rem 0 0.6rem; color: var(--bark); }
button { font: inherit; cursor: pointer; }
input, select, textarea {
  font: inherit; width: 100%; padding: 0.55rem 0.7rem;
  border: 1px solid rgba(35,35,24,0.22); border-radius: 8px;
  background: #fff; color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(199,148,71,0.18); }
label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--bark); margin-bottom: 0.7rem; }
label input, label select, label textarea { margin-top: 0.3rem; font-weight: 400; }
.a-dim { color: var(--dim); font-weight: 400; }
.a-error { background: #fdf0ec; border: 1px solid #e3b3a0; color: #8a3d11; border-radius: 8px; padding: 0.6rem 0.8rem; margin-top: 0.8rem; font-size: 0.9rem; }
.a-ok { color: #3e6b3e; margin-top: 0.6rem; font-weight: 600; }
.chk { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; }
.chk input { width: auto; }

/* Buttons */
.abtn { border: none; border-radius: 999px; padding: 0.55rem 1.2rem; font-weight: 600; font-size: 0.88rem; transition: background 0.2s, color 0.2s; }
.abtn--gold { background: var(--gold); color: #fff; }
.abtn--gold:hover { background: var(--gold-deep); }
.abtn--dark { background: var(--charcoal); color: var(--cream); }
.abtn--dark:hover { background: #000; }
.abtn--ghost { background: transparent; color: var(--bark); border: 1px solid rgba(92,71,55,0.4); }
.abtn--ghost:hover { border-color: var(--gold); color: var(--gold-deep); }
.abtn--danger { background: transparent; color: #8a3d11; border: 1px solid rgba(138,61,17,0.4); }
.abtn--danger:hover { background: #8a3d11; color: #fff; }

/* Login */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--charcoal); padding: 1rem; }
.login-card { background: var(--paper); border-radius: 18px; padding: 2.4rem 2.2rem; width: min(380px, 92vw); text-align: center; border-top: 4px solid var(--gold); }
.login-card h1 { font-size: 1.4rem; letter-spacing: 0.12em; }
.login-sub { font-family: var(--hand); color: var(--gold-deep); font-size: 1.4rem; margin: 0.2rem 0 1.4rem; }
.login-card input { margin-bottom: 0.8rem; text-align: center; }

/* Top bar */
.a-top { display: flex; align-items: center; gap: 1.4rem; padding: 0.7rem 1.4rem; background: var(--charcoal); color: var(--cream); position: sticky; top: 0; z-index: 50; flex-wrap: wrap; }
.a-brand { display: flex; align-items: center; gap: 0.6rem; }
.a-brand img { height: 44px; width: auto; }
.a-brand span { display: flex; flex-direction: column; line-height: 1.1; }
.a-brand b { font-family: var(--serif); letter-spacing: 0.1em; font-size: 0.95rem; }
.a-brand small { color: var(--gold); font-size: 0.68rem; letter-spacing: 0.3em; text-transform: uppercase; }
.a-tabs { display: flex; gap: 0.3rem; flex: 1; flex-wrap: wrap; }
.a-tabs button { background: transparent; border: none; color: rgba(244,234,210,0.75); padding: 0.5rem 0.9rem; border-radius: 8px; font-weight: 600; font-size: 0.88rem; }
.a-tabs button:hover { color: var(--cream); }
.a-tabs button.on { background: rgba(199,148,71,0.25); color: var(--gold); }
.a-top .abtn--ghost { color: rgba(244,234,210,0.8); border-color: rgba(244,234,210,0.3); }

.a-main { padding: 1.4rem; max-width: 1500px; margin: 0 auto; }
.a-toolbar { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.a-panel { background: #fff; border: 1px solid rgba(35,35,24,0.1); border-radius: 14px; padding: 1.4rem; }
.year-switch { display: inline-flex; border: 1px solid rgba(35,35,24,0.2); border-radius: 999px; overflow: hidden; }
.year-switch button { border: none; background: transparent; padding: 0.5rem 1.1rem; font-weight: 700; color: var(--dim); }
.year-switch button.on { background: var(--charcoal); color: var(--gold); }
.a-legend { display: flex; gap: 1rem; align-items: center; font-size: 0.82rem; color: var(--dim); flex-wrap: wrap; }
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 0.3rem; }
.dot--prov { background: repeating-linear-gradient(45deg, var(--ochre), var(--ochre) 3px, #fff 3px, #fff 5px); border: 1px solid var(--ochre); }
.dot--conf { background: var(--gold); }
.a-hint { font-style: italic; }

/* Planner (wall-planner: month rows × day columns) */
.planner { background: #fff; border: 1px solid rgba(35,35,24,0.12); border-radius: 14px; padding: 0.8rem; overflow-x: auto; }
.p-row { display: grid; grid-template-columns: 52px repeat(31, minmax(26px, 1fr)); align-items: stretch; }
.p-row + .p-row { border-top: 1px solid rgba(35,35,24,0.06); }
.p-month { font-family: var(--serif); font-weight: 700; font-size: 0.78rem; color: var(--bark); display: flex; align-items: center; }
.p-daynums .p-month { visibility: hidden; }
.p-cell { position: relative; min-height: 34px; border-left: 1px solid rgba(35,35,24,0.05); cursor: pointer; }
.p-cell:hover { background: rgba(199,148,71,0.12); }
.p-cell .dnum { position: absolute; top: 2px; left: 3px; font-size: 0.58rem; color: rgba(35,35,24,0.35); }
.p-cell.today .dnum { color: var(--gold-deep); font-weight: 700; }
.p-cell.off { background: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(35,35,24,0.03) 4px, rgba(35,35,24,0.03) 6px); cursor: default; }
.p-daynum-h { font-size: 0.6rem; color: var(--dim); text-align: center; padding: 0.2rem 0; }
.p-cell .bk { position: absolute; left: 0; right: 0; top: 14px; bottom: 3px; cursor: pointer; }
.p-cell .bk.prov { background: repeating-linear-gradient(45deg, rgba(210,171,98,0.85), rgba(210,171,98,0.85) 4px, rgba(255,255,255,0.7) 4px, rgba(255,255,255,0.7) 7px); border-top: 2px solid var(--ochre); }
.p-cell .bk.conf { background: var(--gold); border-top: 2px solid var(--gold-deep); }
.p-cell .bk-label { position: absolute; top: 15px; left: 3px; z-index: 5; font-size: 0.66rem; font-weight: 700; color: var(--charcoal); white-space: nowrap; pointer-events: none; text-shadow: 0 1px 2px rgba(255,255,255,0.7); }

/* Booking list */
.a-list { margin-top: 1.6rem; }
.a-list h2 { margin-bottom: 0.8rem; }
.bk-item { display: flex; align-items: center; gap: 1rem; background: #fff; border: 1px solid rgba(35,35,24,0.1); border-radius: 12px; padding: 0.8rem 1.1rem; margin-bottom: 0.6rem; cursor: pointer; flex-wrap: wrap; }
.bk-item:hover { border-color: var(--gold); }
.bk-item .nm { font-weight: 700; min-width: 160px; }
.bk-item .dt { color: var(--dim); font-size: 0.88rem; }
.badge { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.22rem 0.6rem; border-radius: 999px; }
.badge--prov { background: rgba(210,171,98,0.25); color: var(--gold-deep); border: 1px solid var(--ochre); }
.badge--conf { background: var(--gold); color: #fff; }
.badge--cancel { background: rgba(35,35,24,0.08); color: var(--dim); text-decoration: line-through; }
.badge--money { background: rgba(62,107,62,0.12); color: #3e6b3e; border: 1px solid rgba(62,107,62,0.35); }
.badge--owe { background: #fdf0ec; color: #8a3d11; border: 1px solid #e3b3a0; }

/* Drawers */
.drawer-veil { position: fixed; inset: 0; background: rgba(26,26,17,0.55); z-index: 90; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(680px, 96vw); background: var(--paper); z-index: 100; box-shadow: -12px 0 40px rgba(0,0,0,0.25); display: flex; flex-direction: column; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.4rem; background: var(--charcoal); color: var(--cream); }
.drawer-head h2 { font-size: 1.1rem; }
.drawer-body { padding: 1.2rem 1.4rem 2.4rem; overflow-y: auto; }
.drawer-actions { display: flex; gap: 0.8rem; margin-top: 1.6rem; flex-wrap: wrap; }

.f-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.f-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.8rem; }
@media (max-width: 640px) { .f-row2, .f-row3 { grid-template-columns: 1fr; } }

/* Repeatable rows */
.rrow { display: grid; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
.rrow--guest { grid-template-columns: 2fr 72px 110px 34px; }
.rrow--segment { grid-template-columns: 1.4fr 1fr 1fr 1.2fr 86px 34px; }
.rrow--activity { grid-template-columns: 1fr 2fr 110px 34px; }
.rrow--payment { grid-template-columns: 1fr 130px 2fr 34px; }
.rrow--lact { grid-template-columns: 2fr 110px 120px 34px; }
.rrow .del { background: transparent; border: none; color: #8a3d11; font-size: 1rem; }
.rrow .chk { font-size: 0.78rem; }
@media (max-width: 640px) { .rrow { grid-template-columns: 1fr 1fr !important; } }

.fin-summary { background: var(--cream); border: 1px solid rgba(199,148,71,0.4); border-radius: 10px; padding: 0.8rem 1rem; margin-top: 0.8rem; font-size: 0.92rem; line-height: 1.7; }
.fin-summary b { color: var(--bark); }

/* Locations */
.loc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.loc-card { background: #fff; border: 1px solid rgba(35,35,24,0.1); border-top: 4px solid var(--gold); border-radius: 12px; padding: 1.1rem 1.2rem; cursor: pointer; }
.loc-card:hover { border-color: var(--gold); }
.loc-card h3 { margin: 0 0 0.4rem; font-size: 1.1rem; color: var(--ink); }
.loc-card p { font-size: 0.85rem; color: var(--dim); }

/* Itinerary tab */
.itn-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.2rem; align-items: start; }
@media (max-width: 1000px) { .itn-grid { grid-template-columns: 1fr; } }
.rrow--leg { grid-template-columns: 2fr 110px 34px; }
.x-item { display: grid; grid-template-columns: auto 1fr 110px; gap: 0.6rem; align-items: center; margin-bottom: 0.4rem; font-size: 0.92rem; }
.itn-preview h4 { font-family: var(--serif); color: var(--bark); margin: 0.9rem 0 0.3rem; }
.itn-preview .rate-line { display: flex; justify-content: space-between; padding: 0.3rem 0; border-bottom: 1px dashed rgba(35,35,24,0.15); font-size: 0.92rem; }
.itn-preview .rate-line.total { font-weight: 700; border-bottom: 2px solid var(--gold); }

/* Settings */
.a-table { width: 100%; border-collapse: collapse; }
.a-table th { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--bark); text-align: left; padding: 0.4rem 0.5rem; border-bottom: 2px solid var(--gold); }
.a-table td { padding: 0.35rem 0.5rem; }
.a-table td input { padding: 0.4rem 0.5rem; }