/* ============================================================
 * styles/home.css — الصفحة الرئيسية: الشاشات الثلاث (الرئيسية، الخريطة، المحطات)، أزرار الإجراءات، زر الزائر
 * ============================================================
 * إعادة التصميم (19 أكتوبر): بلا كرة ولا شاشة افتتاحية؛ شاشة واحدة ظاهرة حسب body[data-view]، والمحتوى بين الرأس الثابت
 * والشريط السفلي الثابت (مع المناطق الآمنة). الخريطة في map-view.css، والبطاقة في station-card.css، والإحصاءات في stats-cards.css.
 * Redesign (19 Oct): no globe or intro; one screen shown by body[data-view], the content between the fixed header and the
 * fixed bottom bar (with the safe areas). The map, card and stats keep their own files.
 * ============================================================ */
body.home-page{min-height:100dvh;padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 12px);}
body.home-page.guest-mode,body.home-page.nav-full{padding-bottom:0;}
body.home-page > header{position:fixed;top:0;left:0;right:0;z-index:160;}
.app-views{padding-top:var(--header-h, 120px);}

/* شاشة واحدة ظاهرة — one screen shown */
.app-view{display:none;}
body[data-view="home"] .view-home,
body[data-view="map"] .view-map,
body[data-view="stations"] .view-stations,
body[data-view="details"] .view-details,
body[data-view="more"] .view-more,
body[data-view="storage"] .view-storage{display:block;}

/* شاشة الخريطة — the map screen */
.hero{position:relative;padding:10px 12px 0;}
.top-content-area{position:relative;z-index:5;width:100%;max-width:1100px;margin:0 auto;}
.map-stage-slot{width:100%;margin-top:10px;}
body:not(.nav-full) .map-stage-slot .globe-stage.map-active{position:relative;top:auto;left:auto;transform:none;aspect-ratio:auto;margin:0 auto;transition:none;}

/* شاشة الرئيسية — the home screen */
.hero-content{position:relative;z-index:5;width:100%;display:flex;flex-direction:column;align-items:center;gap:14px;padding:18px 16px 4px;}
.hero-heading{width:100%;max-width:560px;}
.hero-content h1{font-size:clamp(19px,5.2vw,24px);font-weight:700;line-height:1.35;color:var(--text-primary);text-align:start;text-wrap:balance;}
.search-wrap{width:100%;max-width:560px;display:flex;flex-direction:column;align-items:center;gap:10px;}
body.guest-mode .search-wrap{display:none;}

/* زر الدخول للزائر — the guest login button */
.guest-login-cta{
  display:none;align-items:center;justify-content:center;gap:10px;width:min(300px,80vw);padding:17px 24px;border-radius:32px;
  background:linear-gradient(135deg, var(--teal), var(--teal-light));color:#052018;font-weight:700;font-size:16px;text-decoration:none;
  box-shadow:0 10px 30px rgba(31,174,140,0.5), 0 0 44px rgba(77,214,181,0.38);transition:transform .2s ease, box-shadow .2s ease;
  animation:guestCtaGlow 2.6s ease-in-out infinite;
}
.guest-login-cta:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(31,174,140,0.6), 0 0 52px rgba(77,214,181,0.48);}
@keyframes guestCtaGlow{
  0%, 100%{box-shadow:0 10px 30px rgba(31,174,140,0.5), 0 0 40px rgba(77,214,181,0.32);}
  50%{box-shadow:0 10px 30px rgba(31,174,140,0.6), 0 0 58px rgba(77,214,181,0.5);}
}
body.guest-mode .guest-login-cta{display:flex;}

/* البطاقات والإجراءات — cards and actions */
.cards-section{position:relative;z-index:5;padding:14px 16px 20px;display:flex;flex-direction:column;align-items:center;gap:14px;}
.cards-section.hidden{display:none;}
body.guest-mode #cardsSection{display:none;}
/* أزرار الإجراءات (تصميم محمد، 15 أكتوبر): «إضافة محطة» بعرض الصف، ثم ثلاث بطاقات بأيقونات بنفس الحجم
   Action buttons (Mohammed's design, 15 Oct): a full-row «add station», then three equal icon tiles */
.action-add{
  width:100%;max-width:560px;display:flex;align-items:center;justify-content:center;position:relative;
  padding:16px 52px;border-radius:22px;border:1.6px solid rgba(77,214,181,0.75);background:rgba(31,174,140,0.08);
  color:var(--teal-light);font-family:inherit;font-size:18px;font-weight:700;cursor:pointer;transition:.2s;
}
.action-add:hover{background:rgba(31,174,140,0.18);border-color:var(--teal);}
.action-add-label{display:inline-flex;align-items:center;gap:8px;}
.action-add-plus{position:absolute;inset-inline-end:20px;top:50%;transform:translateY(-50%);font-size:28px;font-weight:400;line-height:1;}
.action-tiles{width:100%;max-width:560px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.action-tile{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:118px;
  padding:14px 8px;border-radius:18px;border:1.6px solid;font-family:inherit;cursor:pointer;transition:.2s;text-align:center;
}
.tile-label{font-size:14.5px;font-weight:700;line-height:1.35;}
.tile-sub{font-size:11px;font-weight:600;opacity:.85;margin-top:-4px;}
/* الأعطال أصفر — outage yellow */
.tile-outage{background:rgba(229,181,58,0.08);color:#E8C155;border-color:rgba(229,181,58,0.7);}
.tile-outage:hover,.tile-outage[aria-expanded="true"]{background:rgba(229,181,58,0.18);border-color:#E5B53A;}
/* آخر المحطات أزرق — recent blue */
.tile-recent{background:rgba(46,125,209,0.08);color:#6FA8E8;border-color:rgba(46,125,209,0.7);}
.tile-recent:hover{background:rgba(46,125,209,0.18);border-color:var(--blue-mid);}
/* التحديث محايد — refresh neutral */
.tile-refresh{background:var(--bg-elev);color:var(--text-secondary);border-color:var(--border-strong);}
.tile-refresh:hover{color:var(--text-primary);border-color:var(--text-secondary);}
.tile-refresh svg{transition:transform .6s linear;}
.tile-refresh.spinning svg{transform:rotate(360deg);}
.action-tile:disabled{cursor:default;}
/* رسالة زر «تحديث» — the refresh tile's note */
.action-note{width:100%;max-width:560px;font-size:12px;font-weight:600;line-height:1.6;text-align:center;padding:10px 14px;border-radius:14px;
  background:var(--bg-elev);color:var(--text-secondary);border:1px solid var(--border-strong);}
.action-note[data-kind="ok"]{color:var(--teal-light);border-color:rgba(77,214,181,0.5);}
.action-note[data-kind="fail"]{color:#E0654F;border-color:rgba(224,101,79,0.45);}
[data-theme="light"] .action-note[data-kind="ok"]{color:var(--teal);}
[data-theme="light"] .action-add{color:var(--teal);}
[data-theme="light"] .tile-outage{color:#A57C12;}
[data-theme="light"] .tile-recent{color:var(--blue-mid);}
@media (max-width:767px){
  .action-add{font-size:17px;padding:15px 48px;}
  .action-tiles{gap:8px;}
  .action-tile{min-height:108px;padding:12px 6px;}
  .tile-label{font-size:13.5px;}
}
.home-slot{width:100%;display:flex;flex-direction:column;align-items:center;}

/* الجوال — phones */
@media (max-width:767px){
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select{font-size:16px !important;}
}

/* مكتبة الخريطة تعذّرت: رسالة واضحة مكان الخريطة والبطاقة فوقها بكل بياناتها — the map library unavailable: a clear message in its place */
.map-unavailable{margin:10px auto 0;max-width:min(1100px, 96vw);box-sizing:border-box;padding:16px 18px;border-radius:14px;
  border:1px dashed var(--border-strong);background:var(--bg-card);color:var(--text-secondary);font-size:13px;font-weight:700;text-align:center;line-height:1.7;}

/* ===== إعادة التصميم — المرحلة ب: الرئيسية (19 أكتوبر) — Redesign stage B: the home screen ===== */
.hero-content{align-items:stretch;gap:10px;padding:14px 16px 4px;max-width:592px;margin:0 auto;}
.home-date{font-size:13px;font-weight:600;color:var(--text-muted);}
.home-date .status-bar-item{display:block;}
.home-title{font-size:20px;font-weight:700;color:var(--text-primary);line-height:1.3;}
.search-wrap{max-width:none;align-items:stretch;}
#lensBox .search-and-back-row{width:100%;}
#lensBox .station-search-bar{height:54px;border-radius:var(--radius);}
#lensBox .station-search-bar input{font-size:16px;}
body.guest-mode .home-title{display:none;}
.guest-login-cta{align-self:center;margin-top:24px;}

.cards-section{gap:12px;padding:12px 16px 16px;max-width:592px;margin:0 auto;}
.cards-section .home-slot{max-width:560px;}
/* الإجراءات السريعة: ثلاث بطاقات مدمجة بنفس الارتفاع — quick actions: three compact tiles of equal height */
.action-tiles{max-width:560px;gap:10px;}
.action-tile{min-height:0;padding:12px 6px;gap:4px;border-width:1px;border-radius:var(--radius-lg);}
.tile-label{font-size:14.5px;}
.tile-sub{font-size:12px;margin-top:0;}
@media (max-width:767px){ .action-tile{min-height:0;padding:12px 6px;} .tile-label{font-size:14px;} }
/* النص الإرشادي عربي فيُعرض من اليمين ما دام الحقل فارغًا؛ الكتابة نفسها (أرقام وأحرف لاتينية) كما هي
   The Arabic placeholder reads right-to-left while the field is empty; typing (digits/Latin) is unchanged */
#lensBox .station-search-bar input:placeholder-shown{direction:rtl;text-align:right;}

/* ===== ملاحظات محمد على المرحلة ب: نصوص ثانوية أكبر، والبيانات المؤقتة مطوية =====
   Mohammed's notes on stage B: larger secondary text, the cached data folded */
.home-date{font-size:14px;}
.stats-board .sb-foot{font-size:13.5px;color:var(--text-secondary);}
.home-fold{width:100%;max-width:560px;background:var(--bg-card);border:1px solid var(--border-strong);border-radius:var(--radius-lg);}
.home-fold > summary{display:flex;align-items:center;gap:10px;padding:14px;cursor:pointer;font-size:15px;font-weight:700;color:var(--text-primary);list-style:none;}
.home-fold > summary::-webkit-details-marker{display:none;}
.home-fold > summary::after{content:'';margin-inline-start:auto;width:9px;height:9px;border-inline-start:2px solid var(--text-muted);border-bottom:2px solid var(--text-muted);transform:rotate(-45deg);transition:transform .2s;}
.home-fold[open] > summary::after{transform:rotate(135deg);}
.fold-icon{display:flex;color:var(--sub);}
.fold-sub{font-size:13px;font-weight:600;color:var(--text-muted);}
.home-fold .home-slot{padding:0 0 4px;}
.home-fold .storage-row{border:none;background:none;padding-top:0;}
.home-fold .storage-title{display:none;}
.storage-usage-top,.storage-percent{font-size:13.5px;}
.storage-clear-btn{font-size:13.5px;padding:8px 12px;}
/* خانات البيانات المؤقتة: 2×2 بخط أوضح بدل أربع خانات ضيقة — cached-data cells: 2×2 with clearer text instead of four narrow ones */
.home-fold .storage-cells{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:14px;}
.home-fold .storage-cell:nth-child(3){border-right:none;}
.home-fold .storage-cell-label{font-size:13px;}
.home-fold .storage-cell-val{font-size:14.5px;}
.home-fold .storage-cell-val small{font-size:12px;}
.home-fold .stations-cache-info{font-size:13px;}

/* ===== المرحلة ج: شاشة الخريطة بارتفاع الشاشة — stage C: the map screen fits the screen height ===== */
.view-map.hero{padding:8px 12px 0;}
.view-map .map-stage-slot{margin-top:8px;}
.view-map .top-content-area .station-search-bar{height:46px;}
.view-map .map-stage-slot .globe-stage.map-active{width:100%;}
.view-map .tb-title{display:none;} /* التبويب نفسه اسمه «الخريطة» فيتسع الشريط للأدوات — the tab is already «map», leaving room for the tools */
/* شريط أدوات الخريطة بلا ازدحام: كل الأدوات في سطر واحد على 390 بلا قص (ملاحظة محمد 5.6) — the map toolbar uncluttered */
.view-map .tb-div{display:none;}
.view-map .toolbar-scroll{justify-content:space-between;gap:2px;padding:6px 6px;}
.view-map .toolbar-btn,.view-map .map-mode-chip{padding:7px 7px;font-size:13px;gap:4px;}
.view-map .map-mode-chip .mm-auto-badge{font-size:11px;padding:2px 6px;}
.view-map [data-tools="more"]{font-size:0;gap:0;padding:7px 9px;} /* «⋯» أيقونة فقط فتتسع كل الأدوات — «⋯» icon only so every tool fits */
.view-map [data-tools="more"] .tb-icon{font-size:17px;}

/* ===== نظام الألوان الوظيفي (اعتماد محمد، 19 أكتوبر) — the functional color system =====
   اللون يدل على نوع البيانات في الوضعين (الدرجة تتغير فقط): التوزيع أخضر، التحويل أزرق، العمليات ذهبي، الأعطال نحاسي،
   المعلومات التقنية رمادي مزرق؛ والثانوية محايدة. لا ظلال ولا إضاءة للتمييز. ثلاث حالات: عادية ← محددة (إطار أوضح) ←
   نشطة/مفتوحة (إطار + شريط جانبي بلون البطاقة). التحديد لا يغيّر لون البطاقة إلى لون نوع آخر.
   Color marks the data type in both themes (only the shade changes); secondary cards stay neutral. No shadows or glow.
   Three states: normal ← selected (clearer frame) ← active/open (frame + a side bar in the card's color). */
.k-dist,.st-tile.sb-dist{--k-bg:var(--c-dist-bg);--k-fg:var(--c-dist-fg);--k-line:var(--c-dist-line);}
.k-sub,.st-tile.sb-sub,.tile-recent{--k-bg:var(--c-sub-bg);--k-fg:var(--c-sub-fg);--k-line:var(--c-sub-line);}
.k-ops,.st-tile.sb-today{--k-bg:var(--c-ops-bg);--k-fg:var(--c-ops-fg);--k-line:var(--c-ops-line);}
.k-alert,.tile-outage{--k-bg:var(--c-alert-bg);--k-fg:var(--c-alert-fg);--k-line:var(--c-alert-line);}
.k-info,.home-fold{--k-bg:var(--c-info-bg);--k-fg:var(--c-info-fg);--k-line:var(--c-info-line);}

/* البطاقات الملوّنة — the colored cards */
.st-tile.sb-dist,.st-tile.sb-sub,.st-tile.sb-today,.tile-outage,.tile-recent,.home-fold{
  background:var(--k-bg);border:1px solid var(--k-line);color:var(--k-fg);box-shadow:none;
}
.st-tile.sb-dist .st-num,.st-tile.sb-sub .st-num,.st-tile.sb-today .st-op b,
.st-tile.sb-dist .st-icon,.st-tile.sb-sub .st-icon,.st-tile.sb-today .st-icon,
.st-tile.sb-dist .st-label,.st-tile.sb-sub .st-label,.st-tile.sb-today .st-label,.st-tile.sb-today .st-ops{color:var(--k-fg);}
.home-fold > summary,.home-fold .fold-icon{color:var(--k-fg);}
.home-fold .fold-sub{color:var(--k-fg);opacity:.8;}
/* المحايدة: الإجمالي والتحديث وجدول اليوم — the neutral ones: total, refresh, today's table */
.st-tile.sb-all,.tile-refresh,.sb-detail{background:var(--bg-card);border:1px solid var(--border-strong);color:var(--text-primary);box-shadow:none;}
.tile-refresh .tile-sub{color:var(--text-secondary);}
/* المحددة (تمرير/تركيز): إطار أوضح بنفس اللون — selected: a clearer frame in the same color */
.action-tile:hover,.action-tile:focus-visible,.home-fold > summary:focus-visible{border-color:var(--k-fg, var(--text-secondary));outline:none;}
.tile-outage:hover,.tile-recent:hover{background:var(--k-bg);}
/* النشطة/المفتوحة: إطار + شريط جانبي بلون البطاقة — active/open: frame + a side bar in the card's color */
.action-tile[aria-expanded="true"],.home-fold[open]{border-color:var(--k-fg);box-shadow:inset -4px 0 0 var(--k-fg);}
.tile-outage[aria-expanded="true"]{background:var(--k-bg);}
[data-theme="light"] .tile-outage,[data-theme="light"] .tile-recent{color:var(--k-fg);}

/* ===== لوحة التصميم المحسّنة (19 أكتوبر): بطاقات الأرقام والإجراءات بتعبئة لونها =====
   التوزيع أخضر، التحويل أزرق، الإجمالي بنفسجي، عمليات اليوم ذهبي، الأعطال برتقالي، آخر المحطات أزرق فاتح، التحديث محايد.
   ممتلئة في الداكن والنص أبيض (أو داكن على الذهبي والبرتقالي)، وهادئة في الفاتح بنص بلون النوع.
   The enhanced board: tiles filled with their color — solid in dark with white text (dark on gold/orange), calm in light. */
.st-tile.sb-dist{--t-fill:var(--c-dist-fill);--t-ink:var(--c-dist-ink);--t-line:var(--c-dist-line);}
.st-tile.sb-sub{--t-fill:var(--c-sub-fill);--t-ink:var(--c-sub-ink);--t-line:var(--c-sub-line);}
.st-tile.sb-all{--t-fill:var(--c-total-fill);--t-ink:var(--c-total-ink);--t-line:var(--c-total-line);}
.st-tile.sb-today{--t-fill:var(--c-ops-fill);--t-ink:var(--c-ops-ink);--t-line:var(--c-ops-line);}
.tile-outage{--t-fill:var(--c-alert-fill);--t-ink:var(--c-alert-ink);--t-line:var(--c-alert-line);--k-fg:var(--c-alert-ink);}
.tile-recent{--t-fill:var(--c-recent-fill);--t-ink:var(--c-recent-ink);--t-line:var(--c-recent-line);--k-fg:var(--c-recent-ink);}
.st-tile.sb-dist,.st-tile.sb-sub,.st-tile.sb-all,.st-tile.sb-today,.tile-outage,.tile-recent{background:var(--t-fill);border:1px solid var(--t-line);color:var(--t-ink);}
.st-tile.sb-dist *,.st-tile.sb-sub *,.st-tile.sb-all *,.st-tile.sb-today *{color:var(--t-ink);}
.tile-outage,.tile-recent,[data-theme="light"] .tile-outage,[data-theme="light"] .tile-recent{color:var(--t-ink);}
.tile-outage:hover,.tile-recent:hover,.tile-outage[aria-expanded="true"]{background:var(--t-fill);}
/* الحالة المفتوحة على الممتلئة: إطار ونص بلون النص نفسه — the open state on a filled tile */
.action-tile.tile-outage[aria-expanded="true"],.action-tile.tile-recent[aria-expanded="true"]{border-color:var(--t-ink);box-shadow:inset -4px 0 0 var(--t-ink);}
/* ارتفاع موحّد لكل بطاقات الأرقام (لوحة التصميم: توحيد الارتفاع والمحاذاة) — one height for all number tiles */
.st-tile{min-height:104px;justify-content:space-between;}
.action-tile{min-height:96px;}
.stats-board .st-tile[class] .st-num,.stats-board .st-tile[class] .st-label,.stats-board .st-tile[class] .st-icon,
.stats-board .st-tile[class] .st-ops,.stats-board .st-tile[class] .st-op b{color:var(--t-ink);}
.st-tile{min-height:92px;}
/* البيانات المؤقتة بخلفية البطاقات الداكنة نفسها، والحالة المفتوحة بإطار هادئ بلا شريط فاتح (ملاحظة محمد) — the cached data on the dark card background */
.home-fold{background:var(--bg-card);}
.home-fold[open]{box-shadow:none;border-color:var(--c-info-line);}
/* الأرقام دائمًا في المنتصف (طلب محمد) — numbers always centered */
.st-tile{align-items:center;text-align:center;}
.st-top{justify-content:center;}
.st-num{text-align:center;}
.st-ops{justify-content:center;}

/* ===== صفحة الزائر كما في الموقع الحي: الكرة وتحتها «تسجيل الدخول» (طلب محمد 19 أكتوبر) =====
   The guest page as on the live site: the globe with «login» under it */
body.guest-mode .app-views{display:none;}
.guest-landing{position:relative;min-height:100dvh;overflow-x:clip;}
.guest-landing[hidden]{display:none;}
.guest-hero{position:relative;z-index:5;display:flex;flex-direction:column;align-items:center;gap:14px;padding:calc(var(--header-h, 120px) + 24px) 20px 40px;}
.eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:2px;color:var(--teal-light);text-transform:uppercase;text-align:center;
  background:rgba(5,15,25,0.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:20px;padding:6px 16px;white-space:nowrap;}
[data-theme="light"] .eyebrow{color:var(--blue-deep);background:rgba(255,255,255,0.65);}
.guest-title{width:min(700px,90%);font-size:clamp(24px,6vw,42px);font-weight:700;text-align:center;line-height:1.3;margin:0;
  background:linear-gradient(90deg, #ffffff, var(--teal-light));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 2px 14px rgba(0,0,0,0.55);}
[data-theme="light"] .guest-title{background:linear-gradient(90deg, var(--text-primary), var(--teal));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;}
.guest-landing .guest-login-cta{display:flex;margin-top:0;}

/* ===== الخريطة بلا فراغ فوقها وتحتها (طلب محمد 19 أكتوبر): مسافات أضيق، وبلا حد أدنى لارتفاع المسرح —
   فالشاشات القصيرة لم تعد تترك فراغًا بين الخريطة ولوحة المحطة (كان المسرح 280 والخريطة 200).
   The map with no gap above or below it: tighter spacing and no stage minimum height, so short screens no longer leave a
   gap between the map and the station sheet. */
.view-map.hero{padding-top:6px;}
.view-map .map-stage-slot{margin-top:6px;}
.view-map .map-stage-slot .globe-stage.map-active{min-height:0;}
.view-map .station-sheet{margin-top:6px;}
/* سطر رسائل البحث لا يحجز مساحة وهو فارغ (كان 22 نقطة فوق الخريطة)، ويظهر بنصه عند وجود رسالة
   The search message line takes no space while empty (it was 22px above the map), and shows when there is a message */
.view-map .station-search-hint:empty{min-height:0;padding:0;}

/* ===== الخريطة بكامل الصفحة (طلب محمد 20 أكتوبر) =====
   الخريطة تملأ المساحة بين الرأس والشريط السفلي؛ فوقها حقل بحث زجاجي شبه شفاف وأدوات الخريطة كأزرار عائمة، وأسفلها بطاقة
   المحطة بخلفية زجاجية شبه شفافة وأزرار واضحة. التوسيط في المساحة المرئية بينهما (pages/home.js layout + map-view insets).
   أثناء الملاحة تبقى قواعد navigation.css كما هي (كلها هنا مقيّدة بـ body:not(.nav-full)).
   The full-page map: the map fills the space between the header and the bottom bar; a translucent glass search and the map
   tools float above it, the station card floats below on translucent glass. Navigation keeps its own rules. */
:root{--glass-bg:rgba(13,24,38,0.62);--glass-strong:rgba(13,24,38,0.80);--glass-line:rgba(255,255,255,0.14);}
[data-theme="light"]{--glass-bg:rgba(255,255,255,0.66);--glass-strong:rgba(255,255,255,0.84);--glass-line:rgba(20,40,60,0.16);}
body.home-page[data-view="map"]{min-height:0;}
body:not(.nav-full) .view-map.hero{position:fixed;top:var(--header-h, 120px);left:0;right:0;
  bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));padding:0;overflow:hidden;z-index:1;}
/* البحث عائم أعلى الخريطة — the search floats at the top */
body:not(.nav-full) .view-map .top-content-area{position:absolute;top:8px;left:12px;right:12px;width:auto;max-width:none;margin:0;z-index:20;}
body:not(.nav-full) .view-map .station-search-bar{background:var(--glass-bg);border-color:var(--glass-line);box-shadow:none;
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);}
body:not(.nav-full) .view-map .station-search-bar input{font-family:'JetBrains Mono','IBM Plex Sans Arabic',monospace;font-weight:700;color:var(--text-primary);}
/* المسرح بكامل المساحة: الخريطة خلفية، والأدوات واللوحات تتراص تحت البحث فوقها — the stage fills the area: the map behind, tools stacked above it */
body:not(.nav-full) .view-map .map-stage-slot{position:absolute;inset:0;margin:0;width:auto;padding:0;}
body:not(.nav-full) .view-map .map-stage-slot .globe-stage.map-active{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;
  padding:calc(var(--search-h, 46px) + 16px) 12px 0;box-sizing:border-box;gap:6px;pointer-events:none;}
body:not(.nav-full) .view-map .globe-stage.map-active > *{pointer-events:auto;}
body:not(.nav-full) .view-map .globe-stage.map-active #map-container{position:absolute;inset:0;height:100% !important;border-radius:0;z-index:0;}
body:not(.nav-full) .view-map .map-toolbar-bar,body:not(.nav-full) .view-map .map-mode-panel,body:not(.nav-full) .view-map .map-panels > *,
body:not(.nav-full) .view-map .map-tool-hint{position:relative;z-index:10;}
/* أدوات الخريطة أزرار زجاجية منفصلة — the map tools as separate glass pills */
body:not(.nav-full) .view-map .map-toolbar-bar{background:none;border:none;border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;overflow:visible;}
body:not(.nav-full) .view-map .toolbar-scroll{height:auto;padding:0 0 2px;gap:6px;justify-content:flex-start;}
body:not(.nav-full) .view-map .toolbar-btn,body:not(.nav-full) .view-map .map-mode-chip{padding:8px 11px;border-radius:999px;font-size:13px;
  background:var(--glass-bg);border:1px solid var(--glass-line);color:var(--text-primary);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);}
body:not(.nav-full) .view-map .toolbar-btn.active{background:var(--teal);border-color:var(--teal);color:#04241c;}
body:not(.nav-full) .view-map [data-tools="more"]{padding:8px 11px;}
/* لوحات الأدوات والتلميح بطاقات زجاجية تحت الأزرار — the tool panels and the hint as glass cards under the pills */
body:not(.nav-full) .view-map .map-mode-panel,body:not(.nav-full) .view-map .map-panels > *,body:not(.nav-full) .view-map .map-tool-hint{
  border:1px solid var(--glass-line);border-radius:14px;background:var(--glass-strong);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);}
/* التكبير والتنبيه فوق البطاقة دائمًا — zoom and the toast always above the card */
body:not(.nav-full) .view-map .map-toast{bottom:calc(var(--sheet-h, 0px) + 16px);}
/* بطاقة المحطة عائمة أسفل الخريطة بخلفية زجاجية — the station card floats at the bottom on glass */
body:not(.nav-full) .view-map .station-sheet{position:absolute;left:8px;right:8px;bottom:8px;margin:0;z-index:20;max-height:56%;overflow-y:auto;overscroll-behavior:contain;
  background:var(--glass-bg);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(16px) saturate(1.25);backdrop-filter:blur(16px) saturate(1.25);}
body:not(.nav-full) .view-map .station-sheet .sheet-meta{background:var(--glass-strong);border-color:var(--glass-line);}
body:not(.nav-full) .view-map .station-sheet .sheet-foot{border-top-color:var(--glass-line);}
/* الأدوات الخمس في سطر واحد بلا قص على 390 (الأنماط، قريب، مغذي، أعطال، ⋯) — all five tools on one line at 390 */
body:not(.nav-full) .view-map .toolbar-scroll{gap:5px;}
body:not(.nav-full) .view-map .toolbar-btn,body:not(.nav-full) .view-map .map-mode-chip{padding:7px 9px;gap:4px;font-size:12.5px;}
body:not(.nav-full) .view-map [data-tools="more"]{padding:7px 10px;}
@media (max-width:440px){ body:not(.nav-full) .view-map .map-mode-chip .mm-auto-badge{display:none;} body:not(.nav-full) .view-map .toolbar-btn .tb-icon{display:none;} }
/* «⋯» أيقونة فقط (لا يلتبس بتبويب «المزيد» في الشريط السفلي) — «⋯» icon only (not confused with the bottom bar's «More») */
body:not(.nav-full) .view-map .toolbar-btn[data-tools="more"] .tb-label{display:none;}
body:not(.nav-full) .view-map .toolbar-btn[data-tools="more"] .tb-icon{display:inline;font-size:16px;}

/* ===== الرئيسية = الخريطة (طلب محمد 20 أكتوبر، نموذج الصورة) =====
   عمود أزرار زجاجية على اليمين تحت البحث: الملاحة المباشرة (عند وجود محطة)، التكبير/التصغير، الطبقات، الأدوات؛ و«موقعي»
   أسفل يمين الخريطة فوق البطاقة. أدوات الشريط (قريب، مغذي، أعطال، ⋯) مطوية خلف «الأدوات» فلا تُحذف أي ميزة.
   Home = the map: a glass button column on the right under the search (direct navigation when a station is chosen, zoom,
   layers, tools) and «my location» bottom-right above the card. The toolbar tools fold behind «tools», no feature lost. */
body:not(.nav-full) .view-map .map-stage-slot .globe-stage.map-active{padding-right:66px;}
body:not(.nav-full) .view-map .map-side{display:flex;flex-direction:column;align-items:center;gap:8px;position:absolute;
  top:calc(var(--search-h, 46px) + 16px);right:12px;z-index:12;}
body:not(.nav-full) .view-map .side-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border-radius:50%;cursor:pointer;
  background:var(--glass-strong);border:1px solid var(--glass-line);color:var(--text-primary);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);}
body:not(.nav-full) .view-map .side-btn[hidden]{display:none;}
body:not(.nav-full) .view-map .side-nav{background:var(--c-dist-fg);border-color:var(--c-dist-fg);color:#07261C;}
[data-theme="light"] body:not(.nav-full) .view-map .side-nav{color:#FFFFFF;}
body:not(.nav-full) .view-map .side-tools[aria-expanded="true"]{border-color:var(--teal);color:var(--teal);}
/* أداة نشطة (قريب/مغذي) والأدوات مطوية ← نقطة على زر الأدوات — an active tool while folded ← a dot on the tools button */
body:not(.nav-full) .view-map .globe-stage:not(.tools-open):has(.toolbar-btn.active) .side-tools{border-color:var(--teal);color:var(--teal);box-shadow:inset 0 0 0 2px var(--teal);}
body:not(.nav-full) .view-map .map-side .zoom-controls{position:static;display:flex;flex-direction:column;border-radius:22px;overflow:hidden;
  border:1px solid var(--glass-line);box-shadow:none;}
body:not(.nav-full) .view-map .map-side .zoom-btn{width:44px;height:42px;background:var(--glass-strong);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);}
body:not(.nav-full) .view-map .map-locate{position:absolute;right:12px;bottom:calc(var(--sheet-h, 0px) + 12px);z-index:12;width:50px;height:50px;color:#2F86F6;}
body:not(.nav-full) .view-map .globe-stage:not(.tools-open) .map-toolbar-bar{display:none;}