/* ===== Giao diện điện thoại (≤ 760px) ===== */
@media (max-width: 760px) {
  html, body { overscroll-behavior-y: none; }
  body { font-size: 15.5px; -webkit-tap-highlight-color: transparent; }
  .bg-blobs i { filter: blur(60px); }

  /* Khung: menu chuyển xuống đáy màn hình */
  .shell { grid-template-columns: 1fr; height: 100dvh; }
  .main { height: 100dvh; }
  .side { display: flex; position: fixed; z-index: 30; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); margin: 0;
    flex-direction: row; align-items: stretch; gap: 2px; padding: 6px; border-radius: 24px; }
  .side .logo, .side .sp, .side [data-logout] { display: none; }
  .nav-item { flex: 1; padding: 7px 2px 6px; gap: 3px; font-size: 11px; border-radius: 18px; min-width: 0; }
  .nav-item svg { width: 24px; height: 24px; }
  .nav-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .nav-item .badge { top: 2px; right: calc(50% - 22px); min-width: 18px; height: 18px; font-size: 11px; }

  .topbar { margin: calc(8px + env(safe-area-inset-top)) 8px 0; padding: 8px 10px 8px 14px; gap: 8px; border-radius: 22px; }
  .topbar h1 { font-size: 18px; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; }
  .topbar h1 svg { width: 22px; height: 22px; }
  .clock b { font-size: 17px; }
  .clock span, .me-chip > div, .sync-dot, .topbar .theme-btn { display: none; }
  .topbar h1 { display: block; flex: 1; text-overflow: ellipsis; }
  .topbar .sp { display: none; }
  .topbar h1 svg { vertical-align: -4px; margin-right: 6px; }
  .me-chip { padding: 3px; border-radius: 50%; }
  .me-chip .avatar { width: 36px; height: 36px; font-size: 15px; }
  .icon-btn, .theme-btn { width: 40px; height: 40px; border-radius: 13px; }
  .content { padding: 12px 8px calc(100px + env(safe-area-inset-bottom)); }

  /* Thẻ, ô số liệu, nút nhanh */
  .card { padding: 14px; border-radius: 20px; }
  .card + .card { margin-top: 12px; }
  .card-head { gap: 8px; margin-bottom: 12px; }
  .card-head h3 { font-size: 17px; }
  .card-head .faint.small { display: none; }
  .tiles { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
  .tile { padding: 12px; gap: 10px; border-radius: 18px; }
  .tile .ti { width: 40px; height: 40px; border-radius: 13px; }
  .tile b { font-size: 24px; }
  .tile span { font-size: 12.5px; }
  .quick { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
  .quick-btn { padding: 12px; gap: 10px; font-size: 15px; border-radius: 18px; }
  .quick-btn .qi { width: 44px; height: 44px; border-radius: 14px; }
  .quick-btn .qi svg { width: 24px; height: 24px; }
  .next-cards { grid-template-columns: 1fr; }
  .grid2, .grid3, .grid-2, .grid-3-1 { grid-template-columns: 1fr; }

  .btn-xl { height: 60px; font-size: 18px; padding: 0 20px; border-radius: 20px; }
  .btn-lg { height: 52px; font-size: 16px; padding: 0 16px; border-radius: 17px; }
  .row-btns { gap: 10px; }
  .row-btns .btn { flex: 1; }
  .action-bar .btn { flex: 1 1 calc(50% - 10px); }
  .toolbar { gap: 8px; margin-bottom: 12px; }
  .toolbar .sp { display: none; }
  .toolbar .btn-lg { flex: 1; }
  .seg { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .seg button { height: 40px; padding: 0 12px; font-size: 14px; white-space: nowrap; }
  .date-nav { flex: 1; justify-content: space-between; }
  .date-nav .dlabel { min-width: 0; font-size: 16px; }
  .toolbar .inp[type=date] { width: 100% !important; flex: 1; }
  .toolbar .sel { flex: 1; min-width: 0; }

  /* Danh sách chuyến */
  .trip { grid-template-columns: 70px 1fr; gap: 10px; padding: 12px; }
  .trip-time b { font-size: 19px; }
  .trip-title { font-size: 15.5px; }
  .trip-right { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; padding-left: 0 !important; }
  .trip-meta .loc { max-width: 100%; }
  .ext-row { grid-template-columns: 1fr; }
  .day-head { font-size: 15.5px; margin: 14px 2px 8px; }

  /* Timeline: vuốt ngang, cột tài xế đứng yên */
  .tl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 16px; border: 1px solid var(--line); scrollbar-width: thin; }
  .tl { min-width: 860px; --label: 112px; --row: 58px; border: 0; border-radius: 0; overflow: visible; }
  .tl-label, .tl-corner { position: sticky; left: 0; z-index: 7; background: rgba(9, 32, 66, .97); }
  .tl-row.taxi .tl-label { background: linear-gradient(rgba(255, 211, 77, .1), rgba(255, 211, 77, .1)), rgba(9, 32, 66, .97); }
  .tl-row.unassigned .tl-label { background: linear-gradient(rgba(255, 90, 82, .12), rgba(255, 90, 82, .12)), rgba(9, 32, 66, .97); }
  .tl-label { padding: 0 8px; gap: 8px; }
  .tl-label .avatar { display: grid; width: 30px; height: 30px; font-size: 13px; }
  .tl-name b { font-size: 14px; }
  .tl-name small { font-size: 11px; }
  .tl-corner { padding: 0 10px; }
  .tl-legend { font-size: 12px; gap: 6px 12px; }
  .tl-legend .faint { display: none; }

  /* Dashboard tài xế */
  .alert-banner { font-size: 16px; padding: 14px 16px; gap: 10px; margin-bottom: 12px; }
  .alert-banner svg { width: 28px; height: 28px; }
  .hero { padding: 18px; border-radius: 24px; }
  .hero .time { font-size: 46px; }
  .hero .time small { font-size: 22px; }
  .hero .count { font-size: 17px; }
  .hero .what { font-size: 18px; margin: 12px 0 8px; }
  .hero .info { font-size: 15px; }
  .big-actions { gap: 12px; margin-top: 14px; }
  .big-btn { height: 124px; font-size: 22px; border-radius: 26px; }
  .big-btn svg { width: 44px; height: 44px; }
  .big-btn.yes, .big-btn.no { height: 92px; font-size: 19px; }
  .backup-box, .ext-box { padding: 14px; margin-top: 12px; }
  .ext-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }

  /* Cửa sổ: trượt lên từ đáy */
  .modal-wrap { padding: 0; place-items: end stretch; }
  .modal, .modal.wide { width: 100%; max-height: 92dvh; border-radius: 26px 26px 0 0; animation: sheet .25s cubic-bezier(.2, .9, .3, 1); }
  .modal-head { padding: 14px 16px 8px; }
  .modal-head::before { content: ""; position: absolute; top: 7px; left: 50%; width: 42px; height: 5px; margin-left: -21px; border-radius: 3px; background: var(--faint); }
  .modal-head h2 { font-size: 18px; }
  .modal-ic { width: 40px; height: 40px; border-radius: 13px; }
  .modal-body { padding: 4px 16px calc(18px + env(safe-area-inset-bottom)); }
  .detail .drow { grid-template-columns: 1fr; gap: 4px; }
  .stop-edit { grid-template-columns: 1fr; }
  .stop-edit .icon-btn { justify-self: end; }
  .dpick button { flex: 1 1 calc(50% - 10px); min-height: 52px; }
  .opt-sec { padding: 12px; }
  .opt-sec .btn { flex: 1 1 auto; }
  @keyframes sheet { from { transform: translateY(40px); opacity: 0; } }

  /* Thông báo, toast */
  .notif-panel { top: calc(68px + env(safe-area-inset-top)); left: 8px; right: 8px; width: auto; max-height: calc(100dvh - 180px); }
  #toast-root { left: 10px; right: 10px; bottom: calc(96px + env(safe-area-inset-bottom)); align-items: stretch; }
  .toast { max-width: none; }

  /* Bảng: cuộn ngang */
  .card:has(> .table) { overflow-x: auto; }
  .table { min-width: 620px; font-size: 13.5px; }
  .drv-admin { gap: 12px; }
  .drv-admin .hstack { width: 100%; }
  .drv-admin .hstack .btn { flex: 1; padding: 0 10px; }
  .req { padding: 14px; }
  .kpi-banner { flex: 1; }

  /* Đăng nhập */
  .login-wrap { padding: 16px; align-items: start; padding-top: calc(64px + env(safe-area-inset-top)); }
  .login-card { padding: 22px; border-radius: 28px; }
  .login-card h1 { font-size: 26px; }
  .login-card .brand .lg { width: 60px; height: 60px; border-radius: 18px; }
  .login-hero { height: 90px; }
  .theme-float { top: calc(12px + env(safe-area-inset-top)); right: 12px; }
}
@media (max-width: 760px) and (hover: none) {
  .quick-btn:hover, .tl-block:hover, .btn:hover { transform: none; filter: none; }
}
@media (max-width: 760px) {
  :root[data-theme="light"] .tl-label, :root[data-theme="light"] .tl-corner { background: rgba(246, 250, 255, .98); }
  :root[data-theme="light"] .tl-row.taxi .tl-label { background: linear-gradient(rgba(255, 200, 40, .14), rgba(255, 200, 40, .14)), #f6faff; }
  :root[data-theme="light"] .tl-row.unassigned .tl-label { background: linear-gradient(rgba(220, 50, 40, .08), rgba(220, 50, 40, .08)), #f6faff; }
}