/* Bổ sung nhỏ cho bản web đặt xe — dùng lại toàn bộ biến/class của /assets/app.css
   (đã polish ở control panel) để 2 giao diện đồng nhất, không viết lại từ đầu. */

.wa-role-banner {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px;
    background: var(--primary-light, #eef2fe); border: 1px solid var(--primary); border-radius: var(--radius);
    padding: 10px 14px; margin-bottom: 16px; font-size: 13px;
}
.wa-role-banner strong { color: var(--primary); }

.seg { display: flex; gap: 4px; margin-bottom: 16px; }
.seg button {
    flex: 1; padding: 8px; border-radius: var(--radius-sm); border: 1px solid var(--border);
    background: var(--surface); color: var(--muted); font-weight: 600; cursor: pointer;
}
.seg button.active { background: var(--primary); border-color: var(--primary); color: #fff; }

.wa-tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 16px; overflow-x: auto; }
.wa-tabs button {
    padding: 10px 14px; border: 0; background: none; color: var(--muted); font-weight: 600;
    cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent;
}
.wa-tabs button.active { color: var(--primary); border-color: var(--primary); }

.wa-item { display: flex; flex-direction: column; gap: 4px; }
.wa-item .row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.wa-item .actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }

.wa-tip {
    display: flex; align-items: flex-start; gap: 10px;
    background: var(--primary-light, #eef2fe); border: 1px solid var(--primary);
    border-radius: var(--radius); padding: 12px 14px; margin-bottom: 16px;
    font-size: 13px; line-height: 1.5; color: var(--text);
}
.wa-tip .icon { font-size: 18px; flex: none; }

.wa-empty { text-align: center; padding: 40px 16px; color: var(--muted); }
.wa-quip { display: inline-block; margin-top: 10px; font-size: 13px; font-style: italic; color: var(--primary); max-width: 320px; }
.wa-err { color: var(--danger); font-size: 13px; margin: 8px 0; }
.wa-ok { color: var(--ok); font-size: 13px; margin: 8px 0; }

@media (max-width: 700px) {
    .topbar .brand span { display: none; }
}

/* Thanh tab dưới cùng — LUÔN cố định (khác .tabbar của app.css, chỉ fixed ở
   mobile vì control panel có nav chữ riêng ở trên). Trang web đặt xe chỉ có
   1 view nên thanh này là điều hướng chính, cần thấy được ở mọi kích thước màn. */
.wa-tabbar {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--surface); border-top: 1px solid var(--border);
    box-shadow: 0 -1px 3px rgba(16, 24, 40, .06);
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.wa-tabbar a {
    flex: 1; text-align: center; padding: 12px 4px; color: var(--muted);
    font-size: 13px; font-weight: 600; text-decoration: none;
    border-top: 2px solid transparent;
}
.wa-tabbar a:hover { text-decoration: none; background: var(--surface-alt); }
.wa-tabbar a.active { color: var(--primary); border-top-color: var(--primary); }

.wa-tab-badge {
    position: absolute; top: 4px; left: 50%; margin-left: 6px;
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
    background: var(--danger); color: #fff; font-size: 10px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; line-height: 1;
}

/* Chừa chỗ cho thanh tab cố định, không thì nó che nội dung cuối trang. */
main.page { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0)); }

/* Badge trạng thái chuyến trên thẻ — mượn màu badge có sẵn của app.css. */
.wa-status { font-size: 11px; padding: 2px 8px; border-radius: 12px; font-weight: 600; white-space: nowrap; }
.wa-status-open, .wa-status-accepted { background: #e5eefb; color: var(--primary); }
.wa-status-full { background: var(--warn-bg); color: var(--warn); }
.wa-status-running, .wa-status-on_the_way, .wa-status-picked_up, .wa-status-in_transit { background: var(--transit-bg); color: var(--transit); }
.wa-status-completed, .wa-status-delivered { background: var(--ok-bg); color: var(--ok); }
.wa-status-cancelled { background: #eceff2; color: var(--muted); }

/* Chuông thông báo ở topbar — thay cho tab "Thông báo" riêng (yêu cầu 2026-08-08). */
.wa-bell { position: relative; background: none; border: 0; font-size: 18px; cursor: pointer; padding: 4px 6px; }
.wa-bell .wa-tab-badge { position: absolute; top: -2px; right: -2px; left: auto; margin: 0; }

/* Radio chọn số ghế thay cho nhập tay (yêu cầu 2026-08-08). */
.wa-seat-radios { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.wa-seat-radio { display: inline-flex; }
.wa-seat-radio input { position: absolute; opacity: 0; }
.wa-seat-radio span {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border);
    color: var(--text); font-weight: 600; cursor: pointer;
}
.wa-seat-radio input:checked + span { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Modal dùng chung (chat, thông báo, điều khoản...). */
.wa-modal-backdrop {
    position: fixed; inset: 0; background: rgba(16, 24, 40, .45); z-index: 100;
    display: flex; align-items: flex-end; justify-content: center;
}
.wa-modal {
    background: var(--surface); width: 100%; max-width: 480px; max-height: 85vh;
    border-radius: var(--radius) var(--radius) 0 0; display: flex; flex-direction: column; overflow: hidden;
}
@media (min-width: 560px) {
    .wa-modal-backdrop { align-items: center; }
    .wa-modal { border-radius: var(--radius); max-height: 80vh; }
}
.wa-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.wa-modal-head h3 { margin: 0; font-size: 16px; }
.wa-modal-body { padding: 12px 16px; overflow-y: auto; }
.wa-terms { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.7; color: var(--text); }
.wa-terms li { margin-bottom: 8px; }

/* Toast báo trạng thái mới (poll định kỳ). */
.wa-toast {
    position: fixed; left: 50%; bottom: 80px; transform: translate(-50%, 10px);
    background: var(--text); color: #fff; padding: 10px 16px; border-radius: var(--radius);
    font-size: 13px; z-index: 200; opacity: 0; transition: opacity .3s, transform .3s; max-width: 90%; text-align: center;
}
.wa-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Khung chat trong modal. */
.wa-chat-list { display: flex; flex-direction: column; gap: 14px; max-height: 50vh; overflow-y: auto; }
.wa-chat-msg { display: flex; flex-direction: column; align-items: flex-start; }
.wa-chat-msg.mine { align-items: flex-end; }
.wa-chat-msg .bubble { background: var(--surface-alt); border-radius: 12px; padding: 6px 10px; max-width: 80%; font-size: 14px; line-height: 1.4; }
.wa-chat-msg.mine .bubble { background: var(--primary); color: #fff; }
.wa-chat-msg .muted.small { margin-top: 2px; }
.wa-chat-input { display: flex; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--border); }
.wa-chat-input input { flex: 1; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); }