/* لوحة تحكم المدرسة: قائمة جانبية يمين (الأقسام السبعة والأقسام الفرعية تحت كل مجموعة)
 * والمحتوى جنبها. قبل الدخول: الشعار فوق كرت الدخول متل قبل. على الهاتف: زر قائمة فوق. */
.navToggle { display: none; }
.brand { flex-direction: row !important; align-items: center; gap: 10px !important; flex-wrap: wrap; }
.brand h1 { margin: 0; }
.brand .brandName { color: var(--ink) !important; font-size: 19px !important; }
.brand .brandTagline { flex-basis: 100%; }
.brandLogo {
  width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(to bottom, #1D4ED8 72%, #1E40AF 72%); color: #DBEAFE; flex-shrink: 0;
}
.brandLogo .ic { width: 22px; height: 22px; }
#tabs, .sideActions { display: none; }
#loginBox .loginLogo { color: var(--ink); }

body.loggedIn {
  max-width: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 264px minmax(0, 1fr); align-items: start; min-height: 100vh;
}
body.loggedIn #app-header {
  grid-column: 1; grid-row: 1 / span 3;
  position: sticky; top: 0; height: 100vh; overflow-y: auto; box-sizing: border-box;
  margin: 0; padding: 20px 14px; background: #fff; border-inline-end: 1px solid #E8ECF2;
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 16px;
}
body.loggedIn .brand { padding: 0 6px; }
body.loggedIn .brand .brandTagline { display: none; }
body.loggedIn .schoolBrand { padding: 10px; border-radius: 14px; background: #F7F8FA; }
body.loggedIn #app { grid-column: 2; padding: 24px; min-width: 0; }
body.loggedIn #tabs {
  display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; background: none; border: none; box-shadow: none;
}
body.loggedIn #tabs button.tabBtn {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; margin: 0; padding: 0 12px;
  background: transparent; color: #374151; border-radius: 12px; font-size: 14px; font-weight: 500; text-align: start;
}
body.loggedIn #tabs button.tabBtn:hover { background: #F1F5FB; color: var(--ink); }
body.loggedIn #tabs button.tabBtn.active { background: var(--primary-tint); color: var(--primary); font-weight: 700; }
body.loggedIn #tabs button.tabBtn .ic { width: 20px; height: 20px; }
body.loggedIn .alertsBadge { position: static; margin-inline-start: auto; box-shadow: none; background: var(--danger); }
body.loggedIn .subTabs {
  flex-direction: column; gap: 2px; margin: 2px 22px 6px 0; padding: 0 10px 0 0; background: none;
  border: none; border-inline-start: 2px solid var(--primary-soft); border-radius: 0;
}
body.loggedIn .subTabs button.subTabBtn {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; margin: 0; padding: 0 10px;
  text-align: start; font-size: 13.5px; border-radius: 10px;
}
body.loggedIn .subTabs button.subTabBtn:hover { background: #F1F5FB; }
body.loggedIn .subTabs button.subTabBtn.active { background: var(--primary-tint); color: var(--primary); }
body.loggedIn .sideActions { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
body.loggedIn .sideActions button { width: 100%; justify-content: center; display: flex; align-items: center; gap: 8px; }
body.loggedIn #adminPushBtn { color: var(--danger-dark); background: #FEF2F2; border-color: #FECACA; }

/* الهاتف والتابلت: القائمة بتصير زر فوق */
@media (max-width: 900px) {
  body.loggedIn { display: block; }
  body.loggedIn #app-header {
    position: sticky; top: 0; z-index: 50; height: auto; max-height: 100vh; padding: 10px 12px;
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; border-inline-end: none; border-bottom: 1px solid #E8ECF2;
  }
  body.loggedIn .navToggle { display: inline-flex; align-items: center; justify-content: center; margin: 0; width: 44px; height: 44px; padding: 0; }
  body.loggedIn .brand { flex: 1; }
  body.loggedIn .schoolBrand { padding: 4px 8px; }
  body.loggedIn #tabs, body.loggedIn .sideActions { display: none; flex-basis: 100%; }
  body.loggedIn #app-header.navOpen { overflow-y: auto; }
  body.loggedIn #app-header.navOpen #tabs, body.loggedIn #app-header.navOpen .sideActions { display: flex; }
  body.loggedIn #app { padding: 12px; }
}

/* ترتيب المحطات تلقائياً (كشف طلاب الجولة) */
.routePlanBox { margin: 10px 0 4px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--primary-tint); }
.routePlanBox:empty { display: none; }
.routePlanHead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; color: var(--ink); }
.routePlanCost { margin: 8px 0 2px; font-weight: 600; color: var(--primary-dark); }
.routePlanSum { margin: 8px 0; font-weight: 600; }
.routePlanGrid { display: grid; grid-template-columns: minmax(200px, 1fr) 2fr; gap: 12px; }
.routePlanStops { margin: 0; padding-inline-start: 22px; max-height: 320px; overflow: auto; background: #fff; border-radius: var(--radius-sm); padding-block: 8px; }
.routePlanStops li { padding: 3px 0; }
.routePlanMap { min-height: 320px; border-radius: var(--radius-sm); background: #E8EDF4; }
@media (max-width: 760px) { .routePlanGrid { grid-template-columns: 1fr; } .routePlanMap { min-height: 260px; } }