/* Riad Dar Ma Ward — booking app theme */

@font-face { font-family:'Marcellus'; src: url('/public/fonts/marcellus-latin-400-normal.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'EB Garamond'; src: url('/public/fonts/eb-garamond-latin-400-normal.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'EB Garamond'; src: url('/public/fonts/eb-garamond-latin-500-normal.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'EB Garamond'; src: url('/public/fonts/eb-garamond-latin-600-normal.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Jost'; src: url('/public/fonts/jost-latin-300-normal.woff2') format('woff2'); font-weight:300; font-display:swap; }
@font-face { font-family:'Jost'; src: url('/public/fonts/jost-latin-400-normal.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Jost'; src: url('/public/fonts/jost-latin-500-normal.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Jost'; src: url('/public/fonts/jost-latin-600-normal.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Cormorant Garamond'; src: url('/public/fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Cormorant Garamond'; src: url('/public/fonts/cormorant-garamond-latin-400-italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }

:root {
  --green: #173A2E;
  --green-dark: #0F2921;
  --green-soft: rgba(23,58,46,.08);
  --green-soft-2: rgba(23,58,46,.14);
  --cream: #F7F2E7;
  --cream-2: #EFE7D6;
  --card: #FFFDF8;
  --ink: #22301F;
  --muted: #6B7566;
  --border: rgba(23,58,46,.14);
  --red: #C81E2C;
  --red-soft: rgba(200,30,44,.10);
  --ok: #2E7D4F;
  --ok-soft: rgba(46,125,79,.12);
  --warn: #9A6B00;
  --warn-soft: rgba(199,150,10,.15);
  --radius: 10px;
}

* { box-sizing: border-box; }
body {
  margin:0;
  font-family:'EB Garamond', Georgia, serif;
  background: var(--cream);
  color: var(--ink);
  font-size: 16px;
}
a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 1160px; margin: 0 auto; padding: 20px 20px 60px; }

.topbar {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding: 12px 20px; background: var(--green); color: var(--cream);
  border-bottom: 3px solid var(--green-dark);
  position: sticky; top:0; z-index: 10;
}
.brand { display:flex; align-items:center; gap:10px; }
.brand img { height: 30px; width: 30px; display:block; }
.brand .name {
  font-family:'Marcellus', serif; font-size: 17px; letter-spacing:.4px;
}
.brand .tag {
  font-family:'Jost', sans-serif; font-size: 10px; letter-spacing:1.6px; text-transform:uppercase;
  color: rgba(247,242,231,.6); margin-top:1px;
}
.brand-block { display:flex; flex-direction:column; line-height:1.15; }

.nav { display:flex; gap:4px; flex-wrap:wrap; align-items:center; }
.nav a {
  font-family:'Jost', sans-serif; font-size: 12.5px; letter-spacing:.5px; text-transform:uppercase;
  padding:8px 12px; border-radius:999px; color: rgba(247,242,231,.78);
}
.nav a:hover { text-decoration:none; color:#fff; }
.nav a.active { background: rgba(247,242,231,.16); color:#fff; }

.role-badge {
  font-family:'Jost', sans-serif; font-size:10px; letter-spacing:1.4px; text-transform:uppercase;
  padding: 3px 9px; border-radius:999px; border:1px solid rgba(247,242,231,.35); color: rgba(247,242,231,.85);
}

.topbar-right { display:flex; align-items:center; gap:12px; }

.card {
  background: var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin: 16px 0;
  box-shadow: 0 1px 2px rgba(23,58,46,.04);
}
.grid { display:grid; grid-template-columns: repeat(12,1fr); gap:14px; }
.col-6{grid-column:span 6;} .col-4{grid-column:span 4;} .col-3{grid-column:span 3;} .col-12{grid-column:span 12;}
@media (max-width:900px){ .col-6,.col-4,.col-3{grid-column:span 12;} }

h1,h2,h3 { margin:0 0 10px 0; font-family:'Marcellus', serif; font-weight:400; color: var(--green); }
h1{font-size:24px;} h2{font-size:18px;} h3{font-size:15px;}
small, .muted { color: var(--muted); }
.eyebrow {
  font-family:'Jost', sans-serif; font-size:11px; letter-spacing:2px; text-transform:uppercase;
  color: var(--muted); margin: 0 0 6px 0; display:block;
}

.table { width:100%; border-collapse:collapse; }
.table th, .table td { padding:10px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top; }
.table th {
  font-family:'Jost', sans-serif; color: var(--muted); font-weight:600; font-size:11px;
  text-transform:uppercase; letter-spacing:.08em;
}

.pill {
  display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px;
  font-family:'Jost', sans-serif; background: var(--green-soft); color: var(--green);
}
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.bad { background: var(--red-soft); color: var(--red); }

form { display:flex; flex-direction:column; gap:10px; }
.row { display:grid; grid-template-columns:repeat(12,1fr); gap:10px; align-items:end; }
.row .field{grid-column:span 6;} .row .field.sm{grid-column:span 3;} .row .field.xs{grid-column:span 2;} .row .field.lg{grid-column:span 12;}
@media (max-width:900px){ .row .field,.row .field.sm,.row .field.xs,.row .field.lg{grid-column:span 12;} }

label {
  font-family:'Jost', sans-serif; font-size:11px; letter-spacing:.5px; text-transform:uppercase;
  color: var(--muted); margin-bottom:6px; display:block;
}
input, select, textarea {
  width:100%; padding:9px 11px; border-radius:8px; background:#fff;
  border:1px solid var(--border); color: var(--ink); outline:none;
  font-family:'EB Garamond', serif; font-size:15px;
}
input:focus, select:focus, textarea:focus { border-color: var(--green); }
textarea { min-height:90px; resize:vertical; }

button {
  padding:9px 16px; border-radius:8px; border:1px solid var(--green);
  background: var(--green); color: var(--cream); cursor:pointer;
  font-family:'Jost', sans-serif; font-weight:600; font-size:13px; letter-spacing:.3px;
}
button:hover { background: var(--green-dark); }
button.secondary { background: transparent; color: var(--green); }
button.secondary:hover { background: var(--green-soft); }
button.danger { background: var(--red); border-color: var(--red); color:#fff; }
button.danger:hover { background: #A5121D; }

.actions { display:flex; gap:8px; flex-wrap:wrap; }
.notice { padding:10px 12px; border-radius:8px; background: var(--green-soft); border:1px solid var(--border); color: var(--ink); }
.notice.ok { border-color: rgba(46,125,79,.3); color: var(--ok); background: var(--ok-soft); }
.notice.bad { border-color: rgba(200,30,44,.3); color: var(--red); background: var(--red-soft); }
.hr { height:1px; background: var(--border); margin:16px 0; }

.stat-value { font-family:'Cormorant Garamond', serif; font-weight:600; font-size:32px; color:var(--green); }

/* ---------- Calendar grid ---------- */
.cal-wrap { overflow-x:auto; }
.cal-grid { border-collapse:collapse; width:100%; min-width:760px; }
.cal-grid th, .cal-grid td { border:1px solid var(--border); text-align:center; padding:0; }
.cal-grid th {
  font-family:'Jost', sans-serif; font-size:10.5px; color: var(--muted); font-weight:600;
  padding:6px 2px; background: var(--cream-2);
}
.cal-grid th.room-col, .cal-grid td.room-col {
  text-align:left; padding:8px 10px; font-family:'Marcellus', serif; font-size:14px;
  color: var(--green); background: var(--cream-2); position:sticky; left:0; white-space:nowrap;
}
.cal-cell { width:26px; height:30px; }
.cal-cell.free { background: #fff; }
.cal-cell.booked { background: var(--green); }
.cal-cell.booked a { display:block; width:100%; height:100%; }
.cal-cell.blackout { background: repeating-linear-gradient(-45deg, var(--warn-soft), var(--warn-soft) 4px, #fff 4px, #fff 8px); }
.cal-cell.external { background: repeating-linear-gradient(45deg, var(--red-soft), var(--red-soft) 4px, #fff 4px, #fff 8px); }
.cal-cell.weekend { background-color: var(--cream-2); }
.cal-cell.booked.weekend { background: var(--green); }

.cal-cell[data-tooltip] { position: relative; }
.cal-cell[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  background: var(--green-dark);
  color: var(--cream);
  padding: 6px 11px;
  border-radius: 6px;
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(15,41,33,.25);
  z-index: 30;
  pointer-events: none;
}
.cal-cell[data-tooltip]:hover::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--green-dark);
  z-index: 30;
  pointer-events: none;
}
.cal-legend { display:flex; gap:18px; align-items:center; margin-top:10px; flex-wrap:wrap; }
.cal-legend .swatch { display:inline-block; width:14px; height:14px; border-radius:3px; margin-right:6px; vertical-align:middle; border:1px solid var(--border); }
.cal-legend span.label { font-family:'Jost', sans-serif; font-size:12px; color: var(--muted); }

.month-nav { display:flex; align-items:center; gap:10px; }
.month-nav a.pill { font-family:'Jost', sans-serif; }

.month-step {
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; flex:0 0 auto;
  border-radius:999px; background:var(--green); color:var(--cream);
  font-family:'Jost', sans-serif; font-size:15px; line-height:1;
}
.month-step:hover { background:var(--green-dark); text-decoration:none; }

.brand-edging {
  height: 16px;
  margin: 4px 0 20px;
  border-radius: 3px;
  background-color: var(--green);
  background-image:
    linear-gradient(135deg, var(--cream) 25%, transparent 25.5%),
    linear-gradient(225deg, var(--cream) 25%, transparent 25.5%);
  background-position: left top, left top;
  background-repeat: repeat-x;
  background-size: 16px 16px;
}

.room-header {
  display:flex; align-items:flex-start; gap:20px; margin-bottom:16px;
}
.room-photo {
  flex: 0 0 180px; width:180px; height:180px; border-radius: var(--radius);
  background-size: cover; background-position: center; overflow:hidden;
  position: relative; box-shadow: 0 1px 3px rgba(23,58,46,.15);
}
.room-photo .room-photo-label {
  position:absolute; left:0; right:0; bottom:0; padding:8px 12px 6px;
  color:#fff; font-family:'Marcellus', serif; font-size:15px;
  background: linear-gradient(0deg, rgba(15,41,33,.85) 0%, rgba(15,41,33,0) 100%);
}
.room-header-content { flex:1 1 auto; min-width:0; }
.room-header-content h2 { margin-top:2px; }
@media (max-width:600px) {
  .room-header { flex-direction:column; }
  .room-photo { width:100%; height:180px; flex-basis:auto; }
}
.room-thumb { width:56px; height:56px; border-radius:8px; object-fit:cover; border:1px solid var(--border); }

.brand-cover {
  background: var(--green); color: var(--cream); border-radius: var(--radius);
  padding: 40px 30px; text-align:center; margin-bottom:20px;
}
.brand-cover img { height:52px; margin-bottom:14px; }
.brand-cover h1 { color:#fff; font-size:22px; letter-spacing:.5px; }
.brand-cover .sub { font-family:'Jost',sans-serif; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:rgba(247,242,231,.65); }