/* ══════════════════════════════════════════════
   SignalBusMaint — Mobile Responsive CSS
   ══════════════════════════════════════════════ */

/* ── Hamburger button ───────────────────────── */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  padding: 6px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
  flex-shrink: 0;
}
.hamburger span {
  display: block;
  height: 2px;
  background: var(--gray-700);
  border-radius: 2px;
  transition: .3s;
}

/* ── Overlay ────────────────────────────────── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 99;
}
.sidebar-overlay.active { display: block; }

/* ══════════════════════════════════════════════
   MOBILE — max-width: 768px
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* إخفاء الشريط وتحويله لـ drawer */
  .sidebar {
    transform: translateX(100%);
    transition: transform .3s ease;
    z-index: 200;
    width: 280px !important;
    box-shadow: -4px 0 20px rgba(0,0,0,.15);
  }
  .sidebar.open { transform: translateX(0); }

  /* المحتوى الرئيسي بدون margin */
  .main { margin-right: 0 !important; }

  /* إظهار زر الـ hamburger */
  .hamburger { display: flex; }

  /* Topbar */
  .topbar {
    padding: 0 12px !important;
    height: 52px !important;
    gap: 8px !important;
  }
  .page-title { font-size: 14px !important; }
  .page-subtitle { display: none; }

  /* إخفاء بعض أزرار الـ topbar على الموبايل */
  .topbar .btn:not(.primary):not(.hamburger) {
    display: none;
  }
  .topbar .btn.primary {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
  .topbar .btn.primary span.btn-text { display: none; }

  /* Content padding */
  .content { padding: 12px !important; }

  /* KPI Grid — عمودين */
  .kpi-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  .kpi-value { font-size: 22px !important; }
  .kpi-label { font-size: 11px !important; }

  /* Two/Three col → one col */
  .two-col,
  .three-col,
  .two-col.gap-14 {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Cards */
  .card { padding: 12px !important; }
  .card-title { font-size: 13px !important; }

  /* Tables — scroll horizontal */
  .table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .data-table { min-width: 600px; font-size: 12px !important; }
  .data-table th, .data-table td { padding: 7px 8px !important; }

  /* Form grids → single col */
  .form-grid,
  .form-grid.cols-3 {
    grid-template-columns: 1fr !important;
  }

  /* Modals */
  .modal-overlay { padding: 10px !important; align-items: flex-end !important; }
  .modal {
    max-width: 100% !important;
    max-height: 92vh !important;
    border-radius: 16px 16px 0 0 !important;
  }
  .modal-header { padding: 14px 16px !important; }
  .modal-body   { padding: 14px 16px !important; }
  .modal-footer { padding: 12px 16px !important; flex-wrap: wrap !important; }

  /* Bus cards grid */
  #buses-grid {
    grid-template-columns: 1fr !important;
  }

  /* Tech cards grid */
  #tech-grid {
    grid-template-columns: 1fr !important;
  }

  /* Roles grid */
  #roles-grid {
    grid-template-columns: 1fr !important;
  }

  /* Stats bar */
  .stats-bar {
    grid-template-columns: 1fr 1fr !important;
    display: grid !important;
    gap: 8px !important;
  }

  /* Filter bar wrap */
  .filter-bar {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  .filter-pill { font-size: 11px !important; padding: 4px 10px !important; }

  /* Login page */
  .login-wrap { padding: 12px !important; }
  .login-logo  { width: 200px !important; height: 70px !important; }
  .login-body  { padding: 20px 16px !important; }

  /* Sidebar logo */
  .sidebar-logo img { max-width: 180px !important; height: 65px !important; }

  /* User card in sidebar footer */
  .user-name { font-size: 12px !important; }
  .user-role { font-size: 10px !important; }

  /* Permissions table */
  .perm-table { font-size: 12px !important; min-width: 500px; }

  /* Bus status bar */
  .bus-status-bar {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* Type tabs */
  .type-tabs { width: 100% !important; }
  .type-tab  { flex: 1; justify-content: center; padding: 8px 10px !important; font-size: 12px !important; }
}

/* ── Small phones ────────────────────────────── */
@media (max-width: 380px) {
  .kpi-grid { grid-template-columns: 1fr !important; }
  .topbar .btn.primary { font-size: 11px !important; }
}