/* =========================
   Font: Vazirmatn (with fallbacks)
   ========================= */

/* Variable WOFF2 (preferred) */
@font-face {
  font-family: 'Vazirmatn';
  src: url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/variable/Vazirmatn[wght].woff2')
       format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Fallback static Regular (400) */
@font-face {
  font-family: 'Vazirmatn';
  src: url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/ttf/Vazirmatn-Regular.ttf')
       format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Fallback static Bold (700) */
@font-face {
  font-family: 'Vazirmatn';
  src: url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/ttf/Vazirmatn-Bold.ttf')
       format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ============ Theme Base ============ */
:root{
  --bg:#0b1022; --fg:#161a2b; --line:#e8ecf5; --accent:#673ab7;
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  background:#f6f8ff;
  color:var(--fg);
  font-family:'Vazirmatn', system-ui, Segoe UI, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-variation-settings:"wght" 400;
  font-feature-settings:"rlig","calt","kern";
}
a{ color:inherit; text-decoration:none }

/* Controls that must inherit the same font */
input, select, textarea, button,
.leaflet-popup-content, .leaflet-container,
.btn, .chip, .badge, .panel, .legend, .row, .stat, .panel-title {
  font-family:'Vazirmatn', system-ui, Segoe UI, Arial, sans-serif;
}

/* Buttons */
.btn{
  border:0; border-radius:12px; padding:10px 14px;
  background:var(--accent); color:#fff; cursor:pointer;
  transition:.2s;
}
.btn:hover{ filter:brightness(0.95) }
.btn.ghost{ background:#eef2ff; border:1px solid #c9d1ff; color:#333 }

/* ---------- صفحه اصلی ---------- */
.home .hero{
  position:relative; padding:14px 16px 6px; color:#fff;
  background:linear-gradient(135deg,var(--bg),#1b2350 60%);
}
.hero-content{ display:flex; justify-content:space-between; align-items:center }
.brand{ display:flex; gap:12px; align-items:center }
.logo-img{ width:120px; height:28px; object-fit:contain; filter:drop-shadow(0 2px 10px rgba(0,0,0,.25)) }
.title{ font-weight:800; letter-spacing:-.2px }
.subtitle{ font-size:12px; opacity:.9 }

/* Quickbar */
.quickbar{
  display:grid; grid-template-columns:1.6fr 1fr 1fr .8fr .8fr auto auto;
  gap:8px; padding:10px 0;
}
.quickbar .q{
  border:1px solid #dfe4f1; background:#fff; border-radius:12px; padding:9px 10px;
}

/* Layout & Panel */
.layout{ display:grid; grid-template-columns:360px 1fr; gap:16px; padding:16px }
.panel{
  background:#fff; border-radius:18px; border:1px solid #e9edf7;
  box-shadow:0 10px 26px rgba(15,18,33,.08);
  max-height:calc(100vh - 190px); overflow:auto;
}
.panel-handle{
  position:sticky; top:8px; margin:8px; display:inline-grid; place-items:center;
  width:36px; height:36px; border-radius:10px; border:1px solid #e9edf7; background:#f7f8ff; cursor:pointer;
}
.panel-section{ padding:12px 14px; border-bottom:1px solid #f0f2fc }
.panel-title{ font-weight:800; margin-bottom:8px }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:8px }
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px }
.stat{ background:#fafbff; border:1px solid #edf0f7; border-radius:12px; padding:12px; text-align:center }
.stat-num{ font-size:20px; font-weight:800 }
.stat-num.green{ color:#168a3b } .stat-num.red{ color:#c62828 }
.hint{ font-size:12px; color:#6f789b }

.list{ display:flex; flex-direction:column; gap:10px }
.row{
  background:#fff; border:1px solid #e9ecf7; border-radius:12px; padding:10px 12px;
  cursor:pointer; transition:.15s;
}
.row:hover{ box-shadow:0 8px 22px rgba(15,18,33,.08); transform:translateY(-1px) }
.row-top{ display:flex; align-items:center; justify-content:space-between }
.row-title{ font-weight:800 }
.row-sub{ font-size:12px; color:#7c86a8; margin-top:4px }
.row-meta{ display:flex; gap:6px; align-items:center; margin-top:6px; flex-wrap:wrap }
.chip{ display:inline-block; padding:5px 9px; border:1px solid #e7eaf6; border-radius:999px; font-size:12px; background:#fff }
.chip.sm{ padding:3px 7px }
.badge{ padding:4px 10px; border-radius:999px; background:#eceff1; font-size:12px }
.badge.available{ background:#e6f5ea; color:#168a3b }
.badge.booked{ background:#ffe5e8; color:#c62828 }
.badge.maintenance{ background:#fff3e0; color:#9c6f00 }

/* Map */
.map-wrap{ position:relative; border-radius:18px; overflow:hidden; box-shadow:0 10px 26px rgba(15,18,33,.08) }
.map{ height:70vh } /* ضروری: ارتفاع نقشه */

/* Legend (یک نسخه تمیز) */
.legend{
  position:absolute; top:12px; right:12px; z-index:9999;
  background:#ffffffd9; border:1px solid #eef1fa; padding:8px 10px; border-radius:12px;
  display:flex; gap:10px; backdrop-filter:blur(6px);
}
.legend .lg{ font-size:12px; color:#2b3248; display:flex; align-items:center; gap:6px; white-space:nowrap }
.dot{ width:10px; height:10px; border-radius:50%; display:inline-block; border:1px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.2) }
.dot.green{ background:#1bb934 } .dot.red{ background:#ff3040 } .dot.orange{ background:#ffa000 }

/* Leaflet popup tidy */
.leaflet-popup-content{ font-size:14px; line-height:1.6 }
.popup h3{ margin:0 0 6px 0; font-size:15px; font-weight:700 }
.popup .btn{ display:inline-block; background:#5c6bc0; color:#fff; padding:6px 10px; border-radius:6px; text-decoration:none; transition:.2s }
.popup .btn:hover{ filter:brightness(.95) }
.popup .btn.ghost{ background:#e0e0e0; color:#000 }
.popup .btn.ghost:hover{ background:#bdbdbd }

/* Admin tweaks (به همان فونت) */
.admin .btn{ background:#673ab7; color:#fff }
.admin a.btn{ display:inline-block; text-decoration:none }
.admin table{ background:#fff; border:1px solid #e6e9f2; border-radius:12px; overflow:hidden }
.admin th{ background:#f7f8ff }

/* Scrollbar زیباتر برای لیست سمت راست */
.panel .list-section{ flex:1; overflow:auto; scrollbar-gutter:stable; overscroll-behavior:contain }
.panel .list-section{ scrollbar-width:thin; scrollbar-color:#b9c3ff #f3f5ff }
.panel .list-section::-webkit-scrollbar{ width:10px }
.panel .list-section::-webkit-scrollbar-track{ background:#f3f5ff; border-radius:10px }
.panel .list-section::-webkit-scrollbar-thumb{ background:#cdd4ff; border-radius:10px; border:2px solid #f3f5ff }
.panel .list-section::-webkit-scrollbar-thumb:hover{ background:#b5c0ff }

/* Responsive */
.logo-img{ height:32px; max-width:160px; object-fit:contain; display:block }
@media (max-width:900px){
  .logo-img{ height:28px; max-width:140px }
  .layout{ grid-template-columns:1fr; gap:12px }
  .panel{ max-height:none }
}
/* ساختار پنل و اسکرول نرم */
.panel{display:flex;flex-direction:column}
.panel .panel-section{flex:0 0 auto}
.panel .list-section{
  flex:1 1 auto;
  overflow:auto;               /* فقط عمودی */
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;        /* Firefox */
  scrollbar-color: transparent transparent; /* در حالت عادی پنهان */
}

/* WebKit (Chrome/Edge/Safari) — در حالت عادی پنهان */
.panel .list-section::-webkit-scrollbar{ width:8px }
.panel .list-section::-webkit-scrollbar-track{ background:transparent }
.panel .list-section::-webkit-scrollbar-thumb{
  background:transparent;
  border-radius:8px;
  border:2px solid transparent;    /* برای باریک‌تر دیده‌شدن */
  background-clip:padding-box;
  transition:background .2s;
}

/* وقتی کاربر موس را روی لیست می‌برد، اسکرول‌بار نمایان شود */
.panel .list-section:hover{ scrollbar-color:#c7cff7 transparent }     /* Firefox */
.panel .list-section:hover::-webkit-scrollbar-thumb{ background:#c7cff7 }
.panel .list-section:hover::-webkit-scrollbar-track{ background:#f3f5ff }

/* در لمس موبایل همیشه نازک و کم‌رنگ باشد */
@media (hover:none){
  .panel .list-section{ scrollbar-color:#d7dcfa transparent }
  .panel .list-section::-webkit-scrollbar-thumb{ background:#d7dcfa }
}
/* ======= Mobile tweaks ======= */
@media (max-width: 900px){
  /* چینش: سایدبار بالا، نقشه پایین */
  .layout{ grid-template-columns:1fr; gap:12px; padding:12px }
  .panel{ max-height:none; position:relative }
  .map{ height:64vh } /* کمی کوتاه‌تر تا لیست هم جا شود */

  /* نوار جستجوی سریع: اسکرول افقی لمسی */
  .quickbar{
    grid-auto-flow: column;
    grid-template-columns: max-content;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .quickbar>*{ scroll-snap-align: start; min-width: 160px }

  /* لگند روی نقشه وسط-بالا و واکنش‌گرا */
  .legend{ left:50%; right:auto; transform:translateX(-50%); gap:8px; max-width:calc(100% - 24px); flex-wrap:wrap }

  /* پاپاپ‌ها خواناتر روی موبایل */
  .leaflet-popup-content{ font-size:15px; line-height:1.7 }
  .popup .btn{ padding:8px 12px; border-radius:8px }
}

/* نوار اسکرول ستون نتایج: فقط هنگام hover/drag دیده شود */
.panel{ display:flex; flex-direction:column }
.panel .panel-section{ flex:0 0 auto }
.panel .list-section{ flex:1 1 auto; overflow:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color: transparent transparent }
.panel .list-section::-webkit-scrollbar{ width:8px }
.panel .list-section::-webkit-scrollbar-thumb{ background:transparent; border-radius:8px; border:2px solid transparent; background-clip:padding-box }
.panel .list-section:hover{ scrollbar-color:#c7cff7 transparent }
.panel .list-section:hover::-webkit-scrollbar-thumb{ background:#c7cff7 }
@media (hover:none){
  .panel .list-section{ scrollbar-color:#d7dcfa transparent }
  .panel .list-section::-webkit-scrollbar-thumb{ background:#d7dcfa }
}