/* ============================================================
 * styles/station-card.css — تنسيق بطاقة المحطة (components/station-card.js) — منقول من V1 حرفيًا + إضافات V2 في آخره
 * Station card styles — moved verbatim from V1 + V2 additions at the end
 * ============================================================ */
.db-freshness-note{
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:10.5px;color:var(--text-secondary);
  margin-top:10px;padding-top:10px;border-top:1px solid var(--border);
}
.db-freshness-note svg{flex-shrink:0;color:var(--teal);}
.station-table{
  position:relative;z-index:6;
  width:100%;
  margin-top:4px;
  background:var(--bg-card);border:1px solid var(--border-strong);
  border-radius:16px;
  padding:0;
  display:none;
  max-height:none;overflow:visible;
  box-shadow:0 10px 24px rgba(0,0,0,.22);
}
.station-table.show{display:block;}
.sb-inner{padding:12px 18px;}
.sb-data-row{
  display:flex;align-items:center;gap:0;
  border:1px solid var(--border-strong);border-radius:10px;
  overflow:hidden;margin-bottom:10px;
}
.sb-data-cell{
  flex:1;min-width:0;text-align:center;padding:8px 6px;
  border-inline-start:1px solid var(--border-strong);
}
.sb-data-cell:first-child{border-inline-start:none;}
.sb-data-cell .cell-label{font-size:9.5px;color:var(--text-secondary);margin-bottom:2px;}
.sb-data-cell .cell-value{font-size:13px;font-weight:800;font-family:'JetBrains Mono',monospace;direction:ltr;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sb-data-cell .cell-value.ar{font-family:'IBM Plex Sans Arabic',sans-serif;direction:rtl;}
.station-table table{width:100%;border-collapse:collapse;font-size:11px;}
.station-table td{padding:3px 0;color:var(--text-secondary);}
.station-table td.v{color:var(--text-primary);font-weight:500;text-align:left;font-family:'JetBrains Mono',monospace;direction:ltr;}
.station-table .st-actions{display:flex;gap:8px;flex-wrap:wrap;}
/* ترتيب الإجراءات المعتمد: المسار رئيسي بارز، سطر خريطة جدة بحالتها، ثم ثلاثة أزرار مساعدة — the approved action order */
.station-table .st-actions-v2{display:grid;grid-template-columns:1fr;gap:8px;}
.station-table .st-btn.primary.st-main{justify-content:center;padding:13px;font-size:15px;font-weight:700;background:var(--teal);border-color:var(--teal);color:#fff;}
.station-table .st-btn.primary.st-main:hover{background:var(--teal-light);color:#fff;}
.station-table .st-btn.st-om{justify-content:space-between;text-align:right;padding:9px 14px;}
.station-table .st-om-text{display:grid;gap:1px;}
.station-table .st-om-text b{font-size:13px;color:var(--text-primary);}
.station-table .st-om-text small{font-size:11.5px;color:var(--text-secondary);}
.station-table .st-om-chev{color:var(--text-secondary);font-size:15px;}
.station-table .st-sub{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.station-table .st-sub .st-btn{justify-content:center;}
.station-table .st-btn[hidden]{display:none;}
.station-table .st-btn{
  text-align:center;font-size:11px;padding:7px 14px;border-radius:8px;white-space:nowrap;
  border:1px solid var(--border-strong);background:var(--bg);color:var(--text-secondary);
  text-decoration:none;cursor:pointer;transition:.2s;display:inline-flex;align-items:center;gap:5px;
}
.station-table .st-btn:hover{border-color:var(--teal);color:var(--text-primary);}
.station-table .st-btn.primary{background:transparent;border-color:rgba(31,174,140,0.4);color:var(--teal-light);}
/* زر الحذف للمدير (التصميم «أ»): أحمر خافت، والصف يصير 2×2 (قوقل/مشاركة، تعديل/حذف) — admin delete (design «A») */
.station-table .st-sub.st-sub-admin{grid-template-columns:repeat(2,1fr);}
.station-table .st-btn.st-danger{border-color:rgba(224,101,79,0.45);color:#E0654F;background:rgba(224,101,79,0.06);}
.station-table .st-btn.st-danger:hover{border-color:#E0654F;background:rgba(224,101,79,0.14);color:#E0654F;}
/* V2: محطة بلا إحداثيات صالحة — ملاحظة وأزرار معطلة بنفس ألوان V1 — V2: a station without valid coordinates */
.st-note-warn{background:rgba(232,163,23,.14);border-radius:10px;padding:8px 10px;font-size:11.5px;margin-bottom:10px;color:var(--text-primary);}
.station-table .st-btn:disabled,.station-table .st-btn.st-disabled{opacity:.45;cursor:not-allowed;}
.station-table .st-btn.primary.st-main:disabled{background:var(--teal);opacity:.45;}

/* ===== تصميم محمد (15 أكتوبر): بطاقة واحدة تحيط بالخريطة — Mohammed's design (15 Oct): one card around the map =====
   الجزء العلوي (#stationTable) ثم الخريطة (.map-stage-slot) ثم الجزء السفلي (#stationActions) بإطار واحد متصل؛ في الملاحة
   الكاملة تُطوى البطاقة كلها والخريطة تملأ الشاشة كما كانت.
   The top part, the map, then the bottom part share one continuous frame; full navigation folds the card as before. */
.sb-top .sb-data-row{margin-bottom:12px;border-radius:14px;}
.sb-top .sb-data-cell{padding:10px 6px;}
.sb-top .sb-data-cell .cell-label{font-size:12px;margin-bottom:4px;}
.sb-top .sb-data-cell .cell-value{font-size:17px;}
.station-table .sb-top .st-btn.primary.st-main{padding:14px;font-size:16px;border-radius:14px;}
.station-actions{width:min(1100px, 96vw);margin:0 auto;box-sizing:border-box;}
body.nav-full .station-actions{display:none !important;}
.sb-bottom .st-sub{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:10px;}
.station-table .sb-bottom .st-btn{justify-content:center;font-size:14px;font-weight:700;padding:11px 10px;border-radius:12px;color:var(--text-primary);background:transparent;min-width:0;}
.station-table .sb-bottom .st-btn.st-span{grid-column:1 / -1;}
.station-table .sb-bottom .st-google,.station-table .sb-bottom .st-share{border-color:rgba(46,125,209,0.7);}
.station-table .sb-bottom .st-edit{border-color:rgba(229,181,58,0.75);}
.station-table .sb-bottom .st-om{border-color:rgba(31,174,140,0.6);}
.station-table .sb-bottom .st-om .st-om-text{text-align:center;}
.station-table .sb-bottom .st-om .st-om-text b{font-size:13px;white-space:normal;}
.station-table .sb-bottom .st-btn.st-danger{color:#E0654F;}
.station-table .sb-bottom .st-btn:hover{border-color:var(--teal);}
.sb-bottom .db-freshness-note{justify-content:flex-start;align-items:flex-start;font-size:12px;line-height:1.7;margin-top:12px;padding-top:12px;text-align:start;}
.sb-bottom .db-freshness-note svg{margin-top:3px;}
.hero.station-framed .top-content-area .station-table{margin-top:12px;border-radius:16px 16px 0 0;border-bottom:none;box-shadow:none;}
.hero.station-framed .top-content-area .sb-inner{padding-bottom:4px;}
.hero.station-framed .map-stage-slot{
  width:min(1100px, 96vw);margin:0 auto;box-sizing:border-box;padding:8px 18px 0;
  background:var(--bg-card);border-left:1px solid var(--border-strong);border-right:1px solid var(--border-strong);
}
.hero.station-framed .map-stage-slot .globe-stage.map-active{width:100%;}
.hero.station-framed .station-actions{border-radius:0 0 16px 16px;border-top:none;box-shadow:none;}
.hero.station-framed .station-actions .sb-inner{padding-top:12px;}
@media (max-width:767px){
  .station-actions,.hero.station-framed .map-stage-slot{width:100%;}
  .hero.station-framed .map-stage-slot{padding:8px 12px 0;}
  .hero.station-framed .station-table .sb-inner{padding-left:12px;padding-right:12px;}
}
@media (max-width:380px){
  .station-table .sb-bottom .st-btn{font-size:13px;padding:10px 6px;}
  .sb-top .sb-data-cell .cell-value{font-size:15px;}
}
/* شريط أدوات الخريطة داخل البطاقة بالجوال: مسافات أضيق ليتسع «الخريطة» والنوع و«قريب» و«مغذي» — the toolbar inside the card on phones */
@media (max-width:767px){
  .hero.station-framed .toolbar-scroll{padding:6px 6px;gap:2px;}
  .hero.station-framed .toolbar-btn,.hero.station-framed .map-mode-chip{padding:7px 7px;gap:4px;}
}
/* مدة البحث ومصدره (16 أكتوبر) — the search time and its source */
.st-search-time{font-size:13px;text-align:center;margin:-4px 0 10px;color:var(--text-secondary);}
.st-search-time b{font-family:'JetBrains Mono',monospace;color:var(--text-primary);unicode-bidi:isolate;}
.st-search-time.local b{color:var(--teal);}
.st-search-time.server b{color:#E5B53A;}

/* ===== إعادة التصميم — المرحلة ج (19 أكتوبر): لوحة المحطة المدمجة تحت الخريطة =====
   رأس بشارة النوع والرقم والمغذي والمنطقة، ثم صف أزرار بأيقونات (يلتف على الشاشات الضيقة)، ثم سطر «آخر تحديث».
   Redesign — stage C: the compact station sheet under the map — a head (type badge, number, feeder, region), one icon
   button row (wraps on narrow screens), then the freshness line. */
.station-sheet{margin:8px auto 0;max-width:1100px;border-radius:var(--radius-lg);box-shadow:none;border-color:var(--border-strong);}
body.nav-full .station-sheet{display:none !important;}
.station-sheet .sb-inner{padding:12px 14px;}
.station-sheet .sb-top{padding-bottom:6px;}
.station-sheet .sb-bottom{padding-top:4px;}
.sheet-head{display:flex;align-items:center;gap:10px;min-width:0;}
.sheet-badge{width:44px;height:44px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.sheet-badge.is-dist{background:var(--dist-soft);color:var(--dist);}
.sheet-badge.is-sub{background:var(--sub-soft);color:var(--sub);}
.sheet-title{min-width:0;flex-shrink:0;}
.sheet-id{font-size:18px;font-weight:700;color:var(--text-primary);white-space:nowrap;}
.sheet-id-k{font-size:14px;font-weight:600;color:var(--text-secondary);}
.sheet-id .cell-value{font-family:'JetBrains Mono',monospace;font-weight:800;}
.sheet-type{font-size:13px;font-weight:700;}
.sheet-type.is-dist{color:var(--dist);}
.sheet-type.is-sub{color:var(--sub);}
.station-sheet .sheet-meta{flex:1;min-width:0;margin:0;border-radius:12px;}
.station-sheet .sheet-meta .sb-data-cell{padding:6px 4px;}
.station-sheet .sheet-meta .cell-label{font-size:12px;margin-bottom:2px;}
.station-sheet .sheet-meta .cell-value{font-size:14.5px;}
.station-sheet .st-search-time{margin-top:8px;font-size:12.5px;}
.station-sheet .st-note-warn{margin:8px 0 0;font-size:13px;}
/* صف الأزرار: أيقونة فوق تسمية، كلها بنفس العرض — the button row: icon over label, all the same width */
.station-sheet .sheet-actions{display:grid;grid-template-columns:repeat(var(--n, 5), minmax(0,1fr));gap:6px;}
.station-table.station-sheet .sheet-actions .st-btn{
  flex-direction:column;justify-content:center;gap:3px;min-height:58px;padding:6px 2px;border-radius:12px;
  font-size:12.5px;font-weight:700;color:var(--text-primary);background:var(--bg-elev);border:1px solid var(--border);white-space:nowrap;min-width:0;
}
.station-sheet .st-ico{display:flex;}
.station-sheet .st-lbl{max-width:100%;overflow:hidden;text-overflow:ellipsis;}
.station-table.station-sheet .sheet-actions .st-btn.primary.st-main{background:var(--dist);border-color:var(--dist);color:#fff;}
.station-table.station-sheet .sheet-actions .st-google .st-ico,.station-table.station-sheet .sheet-actions .st-share .st-ico{color:var(--sub);}
.station-table.station-sheet .sheet-actions .st-edit .st-ico{color:var(--accent);}
[data-theme="light"] .station-table.station-sheet .sheet-actions .st-edit .st-ico{color:#9A6B00;}
.station-table.station-sheet .sheet-actions .st-om .st-ico{color:var(--dist);}
.station-table.station-sheet .sheet-actions .st-danger{color:var(--danger);background:var(--danger-bg);}
.station-sheet .st-om small{display:none;} /* حالة خريطة جدة تظهر في نافذتها — its status shows in its own sheet */
.station-sheet .db-freshness-note{margin-top:8px;padding-top:8px;font-size:12.5px;color:var(--text-secondary);}
/* الشاشات الضيقة: صفّان من ثلاثة — narrow screens: two rows of three */
@media (max-width:359px){ .station-sheet .sheet-actions{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (max-width:380px){ .sheet-badge{width:38px;height:38px;} .sheet-id{font-size:16px;} }
.station-table.station-sheet .sheet-actions .st-btn .st-lbl{font-size:12.5px;font-weight:700;}
/* الأزرار لا ترث خط الصفحة افتراضيًا بخلاف الرابط («قوقل ماب») — نفس الخط للجميع — buttons don't inherit the page font, unlike the link */
.station-sheet .st-btn{font-family:inherit;}
/* التسمية الطويلة («خريطة جدة») تلتف سطرين بدل قصّها — a long label wraps to two lines instead of being cut */
.station-table.station-sheet .sheet-actions .st-btn{white-space:normal;}
.station-sheet .st-lbl{white-space:normal;line-height:1.2;text-align:center;overflow:visible;}
/* وضوح أكبر للمغذي والمنطقة والتسميات (ملاحظة محمد 7.2) — clearer feeder, region and labels */
.station-sheet .sheet-meta .cell-label{font-size:13px;}
.station-sheet .sheet-meta .cell-value{font-size:15px;}
.station-sheet .db-freshness-note{font-size:13px;}
.station-sheet .db-freshness-note{font-size:12.5px;letter-spacing:-.1px;}

/* ===== نظام الألوان الوظيفي في لوحة المحطة (اعتماد محمد) — the functional colors in the station sheet =====
   «المسار» الأبرز بلون التوزيع الصريح؛ قوقل ماب والمشاركة بلون التحويل (الموقع)؛ التعديل ذهبي (عملية)؛ خريطة جدة رمادي
   مزرق (تقنية)؛ الحذف أحمر (خطر). خلفيات هادئة وإطار بلون كل نوع، بلا ظلال.
   «Route» the most prominent in the solid distribution color; maps/share in the substation blue; edit gold; Jeddah map
   blue-gray; delete red. Calm backgrounds with a frame in each type's color, no shadows. */
.sheet-badge.is-dist{background:var(--c-dist-bg);color:var(--c-dist-fg);border:1px solid var(--c-dist-line);}
.sheet-badge.is-sub{background:var(--c-sub-bg);color:var(--c-sub-fg);border:1px solid var(--c-sub-line);}
.sheet-type.is-dist{color:var(--c-dist-fg);}
.sheet-type.is-sub{color:var(--c-sub-fg);}
.station-table.station-sheet .sheet-actions .st-btn{box-shadow:none;border:1px solid var(--border-strong);background:var(--bg-card);color:var(--text-primary);}
.station-table.station-sheet .sheet-actions .st-btn.primary.st-main{background:var(--c-dist-fg);border-color:var(--c-dist-fg);color:#07261C;}
[data-theme="light"] .station-table.station-sheet .sheet-actions .st-btn.primary.st-main{color:#FFFFFF;}
.station-table.station-sheet .sheet-actions .st-btn.primary.st-main .st-ico{color:inherit;}
.station-table.station-sheet .sheet-actions .st-google,.station-table.station-sheet .sheet-actions .st-share{background:var(--c-sub-bg);border-color:var(--c-sub-line);color:var(--c-sub-fg);}
.station-table.station-sheet .sheet-actions .st-edit{background:var(--c-ops-bg);border-color:var(--c-ops-line);color:var(--c-ops-fg);}
.station-table.station-sheet .sheet-actions .st-om{background:var(--c-info-bg);border-color:var(--c-info-line);color:var(--c-info-fg);}
.station-table.station-sheet .sheet-actions .st-danger{background:var(--danger-bg);border-color:var(--danger);color:var(--danger);}
.station-table.station-sheet .sheet-actions .st-btn .st-ico{color:inherit;}
.station-table.station-sheet .sheet-actions .st-btn:hover,.station-table.station-sheet .sheet-actions .st-btn:focus-visible{border-color:currentColor;outline:none;}
[data-theme="light"] .station-table.station-sheet .sheet-actions .st-edit .st-ico{color:inherit;}
/* بطاقة «محطات المغذي»: الرقم كبير في المنتصف بلون التوزيع — the feeder card: a large centered number in the distribution color */
.station-table.station-sheet .sheet-actions .st-feeder{background:var(--c-dist-bg);border-color:var(--c-dist-line);color:var(--c-dist-fg);}
.station-sheet .st-count{font-family:'JetBrains Mono',monospace;font-size:20px;font-weight:800;line-height:1;}
/* التذييل: مدة البحث ومصدره وآخر تحديث في كتلة واحدة بنفس الخط والمحاذاة (طلب محمد) — the footer: search time/source and freshness together */
.station-sheet .sheet-foot{margin-top:8px;padding-top:8px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:4px;}
.station-sheet .sheet-foot .st-search-time{margin:0;font-size:12.5px;text-align:start;justify-content:flex-start;display:flex;align-items:center;gap:4px;color:var(--text-secondary);}
.station-sheet .sheet-foot .db-freshness-note{margin:0;padding:0;border:none;}
/* زر «التفاصيل» تحت نوع المحطة — the «details» button under the station type */
.sheet-more{margin-top:4px;padding:4px 10px;border-radius:9px;border:1px solid var(--border-strong);background:var(--bg-elev);color:var(--text-primary);font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;}

/* ===== رأس اللوحة (طلب محمد 19 أكتوبر): رمز النوع صغير في سطر علوي، والرقم خانة بجانب المغذي والمنطقة =====
   The sheet head: a small type symbol on a top line, and the number a cell beside the feeder and region */
.sheet-head{flex-direction:column;align-items:stretch;gap:8px;}
.sheet-line{display:flex;align-items:center;gap:8px;min-width:0;}
.sheet-badge{width:28px;height:28px;border-radius:8px;}
.sheet-badge svg{width:16px;height:16px;}
.sheet-line .sheet-type{font-size:14px;flex:1;min-width:0;}
.sheet-line .sheet-more{margin:0;flex-shrink:0;}
.station-sheet .sheet-meta{flex:none;width:100%;}
.station-sheet .sheet-meta .sb-data-cell .cell-value{display:block;}
.station-sheet .sheet-meta .sheet-id .cell-value{font-size:16px;}
@media (max-width:380px){ .sheet-badge{width:26px;height:26px;} }