/* Zahra Villas Admin — shared styles */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --teal:#0D5C63;--teal-lt:#1A8A94;--sand:#F5E6C8;--coral:#E8472A;--coral-dk:#C33820;
  --cream:#FAFAF5;--ink:#12110F;--ink-mid:#4A4844;--ink-lt:#8A8784;--white:#FFFFFF;
  --border:rgba(18,17,15,0.10);--shadow:0 2px 16px rgba(18,17,15,0.10);
  --shadow-lg:0 8px 32px rgba(18,17,15,0.16);--r-sm:8px;--r-md:14px;--r-lg:22px;--r-pill:100px;
  --green:#22C55E;--red:#EF4444;--amber:#F59E0B;
}
body{font-family:'Inter',sans-serif;background:var(--cream);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}

/* ── LAYOUT ── */
.admin-shell{display:flex;min-height:100vh}
.sidebar{
  width:240px;flex-shrink:0;background:var(--teal);color:var(--white);
  display:flex;flex-direction:column;padding:24px 16px;position:fixed;top:0;left:0;bottom:0;overflow-y:auto;z-index:50;
}
.sidebar-logo{
  font-family:'Fraunces',serif;font-size:22px;font-weight:700;padding:0 12px 28px;
  display:flex;align-items:center;gap:6px;
}
.sidebar-logo span{color:var(--sand)}
.sidebar-nav{display:flex;flex-direction:column;gap:4px;flex:1}
.sidebar-link{
  display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:var(--r-sm);
  font-size:14px;font-weight:500;color:rgba(255,255,255,0.75);transition:background 0.2s,color 0.2s;
}
.sidebar-link:hover{background:rgba(255,255,255,0.08);color:var(--white)}
.sidebar-link.active{background:rgba(255,255,255,0.14);color:var(--white)}
.sidebar-icon{font-size:16px;width:20px;text-align:center}
.sidebar-footer{padding-top:16px;border-top:1px solid rgba(255,255,255,0.12)}
.sidebar-user{display:flex;align-items:center;gap:10px;padding:8px 12px;font-size:13px;color:rgba(255,255,255,0.7)}
.sidebar-avatar{width:30px;height:30px;border-radius:50%;background:var(--coral);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;flex-shrink:0}
.sidebar-logout{display:block;width:100%;text-align:left;background:none;border:none;color:rgba(255,255,255,0.6);font-size:13px;padding:8px 12px;border-radius:var(--r-sm)}
.sidebar-logout:hover{background:rgba(255,255,255,0.08);color:var(--white)}

.main{flex:1;margin-left:240px;min-height:100vh;display:flex;flex-direction:column}
.topbar{
  height:64px;background:var(--white);border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;padding:0 32px;position:sticky;top:0;z-index:30;
}
.topbar-title{font-family:'Fraunces',serif;font-size:20px;font-weight:600}
.topbar-actions{display:flex;align-items:center;gap:12px}
.content{padding:32px;flex:1}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:var(--r-pill);font-size:14px;font-weight:600;border:none;transition:all 0.2s;white-space:nowrap}
.btn-primary{background:var(--teal);color:var(--white)}
.btn-primary:hover{background:var(--teal-lt)}
.btn-coral{background:var(--coral);color:var(--white)}
.btn-coral:hover{background:var(--coral-dk)}
.btn-outline{background:transparent;border:1.5px solid var(--border);color:var(--ink)}
.btn-outline:hover{border-color:var(--teal);color:var(--teal)}
.btn-sm{padding:6px 14px;font-size:12px}
.btn-danger{background:rgba(239,68,68,0.1);color:var(--red)}
.btn-danger:hover{background:rgba(239,68,68,0.18)}
.btn:disabled{opacity:0.5;cursor:not-allowed}

/* ── CARDS ── */
.card{background:var(--white);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:24px}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:28px}
.stat-card{background:var(--white);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:22px}
.stat-label{font-size:12px;color:var(--ink-lt);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:8px}
.stat-value{font-family:'Fraunces',serif;font-size:30px;font-weight:600;color:var(--teal)}
.stat-sub{font-size:12px;color:var(--ink-lt);margin-top:4px}

/* ── FORMS ── */
.field-group{margin-bottom:20px}
.field-label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--ink)}
.field-hint{font-size:12px;color:var(--ink-lt);margin-top:4px}
.field-input,.field-select,.field-textarea{
  width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:var(--r-sm);
  font-size:14px;font-family:inherit;background:var(--white);color:var(--ink);transition:border-color 0.2s;
}
.field-input:focus,.field-select:focus,.field-textarea:focus{outline:none;border-color:var(--teal)}
.field-textarea{resize:vertical;min-height:90px}
.field-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.field-row-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.input-prefix{position:relative}
.input-prefix span{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:14px;color:var(--ink-lt);pointer-events:none}
.input-prefix input{padding-left:40px}

.toggle{position:relative;width:44px;height:24px;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0}
.toggle-track{position:absolute;inset:0;background:var(--border);border-radius:var(--r-pill);transition:background 0.2s;cursor:pointer}
.toggle-track::after{content:'';position:absolute;width:18px;height:18px;border-radius:50%;background:var(--white);top:3px;left:3px;transition:transform 0.2s;box-shadow:0 1px 3px rgba(0,0,0,0.2)}
.toggle input:checked + .toggle-track{background:var(--green)}
.toggle input:checked + .toggle-track::after{transform:translateX(20px)}

.checkbox-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.checkbox-item{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1.5px solid var(--border);border-radius:var(--r-sm);cursor:pointer;font-size:13px;transition:all 0.2s}
.checkbox-item:hover{border-color:var(--teal)}
.checkbox-item.checked{border-color:var(--teal);background:rgba(13,92,99,0.05);color:var(--teal);font-weight:500}
.checkbox-item input{display:none}

/* ── TABLE ── */
.table{width:100%;border-collapse:collapse}
.table th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:0.05em;color:var(--ink-lt);padding:12px 16px;border-bottom:1px solid var(--border)}
.table td{padding:14px 16px;border-bottom:1px solid var(--border);font-size:14px;vertical-align:middle}
.table tr:hover td{background:#fafaf8}
.table-photo{width:56px;height:42px;border-radius:var(--r-sm);object-fit:cover;display:block}
.badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:var(--r-pill);font-size:11px;font-weight:600}
.badge-green{background:rgba(34,197,94,0.12);color:var(--green)}
.badge-red{background:rgba(239,68,68,0.12);color:var(--red)}
.badge-amber{background:rgba(245,158,11,0.12);color:var(--amber)}
.badge-teal{background:rgba(13,92,99,0.1);color:var(--teal)}

/* ── TOAST ── */
.toast-container{position:fixed;top:20px;right:20px;z-index:1000;display:flex;flex-direction:column;gap:10px}
.toast{background:var(--white);border-radius:var(--r-sm);box-shadow:var(--shadow-lg);padding:14px 18px;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;min-width:260px;animation:slideIn 0.25s ease}
.toast-success{border-left:4px solid var(--green)}
.toast-error{border-left:4px solid var(--red)}
.toast-warn{border-left:4px solid var(--amber)}
@keyframes slideIn{from{transform:translateX(40px);opacity:0}to{transform:translateX(0);opacity:1}}

/* ── LOADING ── */
.spinner{width:18px;height:18px;border:2.5px solid rgba(13,92,99,0.2);border-top-color:var(--teal);border-radius:50%;animation:spin 0.7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-overlay{position:fixed;inset:0;background:rgba(250,250,245,0.7);display:flex;align-items:center;justify-content:center;z-index:999}
.empty-state{text-align:center;padding:60px 20px;color:var(--ink-lt)}
.empty-state-icon{font-size:40px;margin-bottom:12px}

/* ── PHOTO UPLOAD ── */
.dropzone{border:2px dashed var(--border);border-radius:var(--r-md);padding:32px;text-align:center;cursor:pointer;transition:all 0.2s}
.dropzone:hover,.dropzone.dragover{border-color:var(--teal);background:rgba(13,92,99,0.03)}
.dropzone-icon{font-size:28px;margin-bottom:8px}
.photo-category-tabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.photo-cat-tab{padding:8px 16px;border-radius:var(--r-pill);border:1.5px solid var(--border);font-size:13px;font-weight:500;cursor:pointer;background:var(--white)}
.photo-cat-tab.active{border-color:var(--teal);background:var(--teal);color:var(--white)}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.photo-thumb{position:relative;border-radius:var(--r-sm);overflow:hidden;aspect-ratio:4/3;background:#eee}
.photo-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.photo-thumb-cat{position:absolute;bottom:6px;left:6px;background:rgba(18,17,15,0.7);color:#fff;font-size:10px;padding:2px 8px;border-radius:var(--r-pill);text-transform:capitalize}
.photo-thumb-remove{position:absolute;top:6px;right:6px;width:22px;height:22px;background:rgba(18,17,15,0.7);color:#fff;border:none;border-radius:50%;font-size:12px;display:flex;align-items:center;justify-content:center}

/* ── CALENDAR ── */
.cal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.cal-nav{display:flex;gap:8px;align-items:center}
.cal-nav button{width:32px;height:32px;border-radius:50%;border:1px solid var(--border);background:var(--white);display:flex;align-items:center;justify-content:center}
.cal-month-label{font-family:'Fraunces',serif;font-size:18px;font-weight:600;min-width:160px;text-align:center}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-dow{text-align:center;font-size:11px;color:var(--ink-lt);text-transform:uppercase;padding-bottom:6px;font-weight:600}
.cal-day{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:var(--r-sm);
  font-size:13px;cursor:pointer;border:1.5px solid transparent;background:#f5f5f0;color:var(--ink);position:relative;user-select:none;
}
.cal-day.empty{visibility:hidden}
.cal-day.past{color:var(--ink-lt);background:transparent;cursor:not-allowed}
.cal-day.available{background:rgba(34,197,94,0.12);color:#15803d}
.cal-day.blocked{background:rgba(239,68,68,0.12);color:#b91c1c}
.cal-day.booked{background:rgba(13,92,99,0.15);color:var(--teal)}
.cal-day.promo{background:rgba(232,71,42,0.14);color:var(--coral-dk)}
.cal-day.promo::after{content:'%';position:absolute;top:2px;right:4px;font-size:9px}
.cal-day.selected{border-color:var(--teal);box-shadow:0 0 0 2px rgba(13,92,99,0.2)}
.cal-legend{display:flex;gap:16px;margin-top:16px;flex-wrap:wrap}
.cal-legend-item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-mid)}
.cal-legend-dot{width:10px;height:10px;border-radius:3px}

/* ── MAP ── */
#mapPicker{width:100%;height:320px;border-radius:var(--r-md);border:1.5px solid var(--border)}
.map-radius-note{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-lt);margin-top:8px;background:rgba(13,92,99,0.05);padding:10px 14px;border-radius:var(--r-sm)}

/* ── RESPONSIVE ── */
@media (max-width:900px){
  .sidebar{transform:translateX(-100%);transition:transform 0.25s;width:220px}
  .sidebar.open{transform:translateX(0)}
  .main{margin-left:0}
  .stat-grid{grid-template-columns:1fr 1fr}
  .field-row,.field-row-2{grid-template-columns:1fr}
  .checkbox-grid{grid-template-columns:1fr 1fr}
  .content{padding:18px}
  .topbar{padding:0 16px}
}
.menu-toggle{display:none;background:none;border:none;font-size:22px;cursor:pointer}
@media (max-width:900px){.menu-toggle{display:block}}

/* ── PHOTO UPLOAD FIELDS ── */
.photo-input-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: var(--teal);
  color: #fff;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s, opacity 0.2s;
  border: none;
  user-select: none;
}
.upload-btn:hover { background: var(--teal-lt); }
.upload-btn.uploading { opacity: 0.65; cursor: wait; }
.upload-btn input[type="file"] { display: none; }

.upload-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.upload-row .field-input { flex: 1; min-width: 0; }

.photo-preview-wrap {
  position: relative;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--cream);
}
.photo-preview-img {
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  display: block;
}
.photo-clear {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(18,17,15,0.65);
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.photo-clear:hover { background: var(--red); }

/* Upload progress bar */
.upload-progress {
  height: 3px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 4px;
}
.upload-progress-bar {
  height: 100%;
  background: var(--teal);
  border-radius: 3px;
  width: 0;
  transition: width 0.3s;
}

/* Gallery grid preview */
.gallery-preview-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-top: 8px;
}
.gallery-preview-thumb {
  aspect-ratio: 1;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
  position: relative;
  background: var(--cream);
}
.gallery-preview-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gallery-preview-thumb .thumb-num {
  position: absolute;
  bottom: 3px;
  left: 3px;
  background: rgba(18,17,15,0.6);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
}
.gallery-preview-thumb.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-lt);
  font-size: 18px;
}