/* =========================================================================
   EVER CRM — Tinh chỉnh Mobile + cảm giác App (PWA)
   Hầu hết nằm trong @media để KHÔNG ảnh hưởng bản desktop.
   ========================================================================= */

/* ---- An toàn chung (mọi kích thước) ---- */
* { -webkit-tap-highlight-color: rgba(174,124,65,0.15); }
html { -webkit-text-size-adjust: 100%; }
img, video, canvas { max-width: 100%; height: auto; }
button, a { -webkit-touch-callout: none; }

/* Cuộn mượt kiểu app + ẩn nhiện thanh cuộn gọn */
* { scrollbar-width: thin; }
*::-webkit-scrollbar { width: 7px; height: 7px; }
*::-webkit-scrollbar-thumb { background: rgba(174,124,65,0.35); border-radius: 10px; }

/* An toàn vùng tai thỏ khi cài làm app */
.pwa-standalone body { padding-bottom: env(safe-area-inset-bottom); }

/* =========================================================================
   ĐIỆN THOẠI: <= 768px
   ========================================================================= */
@media (max-width: 768px) {

    html, body {
        width: 100%;
        overflow-x: hidden;
    }

    body {
        min-height: 100vh;
        overflow-x: hidden;
    }

    /* Quan trọng: chặn iOS tự zoom khi focus input (font >= 16px) */
    input, select, textarea, button { font-size: 16px !important; }

    /* Vùng chạm tối thiểu thoải mái */
    button, .btn, .nav-item, .tab-btn, .hc-tab, .app-card { min-height: 44px; }

    /* ---------- KHUNG CRM CHUNG ---------- */
    .page-shell,
    .content-wrapper,
    .report-shell,
    .leader-page,
    .admin-container,
    .hc-page,
    .page-topbar,
    .page-topbar-main,
    .page-topbar-side,
    .hero-panel,
    .hero-side,
    .surface,
    .container,
    .management-box,
    .summary-card,
    .info-card,
    .workspace-card,
    .review-queue,
    .review-dashboard-band,
    .customer-nav-header,
    .customer-workspace-area,
    .report-command-panel,
    .report-preview-panel,
    .report-workspace-tools,
    .data-card,
    .form-card,
    .req-card {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .page-shell,
    .content-wrapper,
    .report-shell,
    .leader-page {
        gap: 14px !important;
    }

    /* ---------- SIDEBAR / WORKSPACE DẠNG CRM ---------- */
    .portal-shell,
    .leader-shell,
    .hc-shell,
    .profile-workspace,
    .report-master-grid,
    .report-workspace-grid,
    .booking-stage,
    .hub-workspace {
        grid-template-columns: 1fr !important;
        display: grid !important;
        gap: 14px !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    .profile-right-pane,
    .report-right-pane,
    .report-workspace-right,
    .booking-main-panel {
        order: 1 !important;
    }

    .profile-left-pane,
    .report-left-pane,
    .report-workspace-left,
    .booking-side-panel,
    .hub-quick-panel {
        order: 2 !important;
    }

    .portal-sidebar,
    .leader-sidebar,
    .hc-sidebar,
    .profile-left-pane,
    .report-left-pane,
    .report-workspace-left,
    .booking-side-panel,
    .hub-quick-panel {
        position: static !important;
        top: auto !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        border-right: 0 !important;
    }

    .portal-sidebar,
    .leader-sidebar,
    .hc-sidebar {
        padding: 14px !important;
        border-radius: 22px !important;
        border: 1px solid rgba(255,255,255,0.08) !important;
        margin: 0 0 2px !important;
    }

    .sidebar-toggle,
    .hc-sidebar-toggle {
        min-height: 46px !important;
        padding: 10px 14px !important;
        border-radius: 14px !important;
    }

    .brand-block,
    .hc-side-brand,
    .leader-profile-card,
    .hc-side-profile,
    .profile-card,
    .brand-meta,
    .hc-side-meta {
        min-width: 0 !important;
    }

    .brand-meta strong,
    .hc-side-meta strong {
        font-size: 17px !important;
        line-height: 1.15 !important;
    }

    .brand-meta span,
    .hc-side-meta span,
    .leader-profile-card .profile-role,
    .hc-side-profile-role {
        font-size: 11.5px !important;
        line-height: 1.45 !important;
    }

    .sidebar-group,
    .hc-sidebar-group,
    .leader-sidebar .sidebar-group,
    .hc-main-nav,
    .leader-nav {
        gap: 8px !important;
    }

    .sidebar-group .nav-link,
    .hc-main-nav-link,
    .leader-nav-link,
    .nav-link {
        border-radius: 16px !important;
        min-height: 48px !important;
    }

    /* ---------- INDEX / HUB ---------- */
    .hub-shell { gap: 14px !important; }
    .hub-workspace { align-items: stretch !important; }
    .hub-quick-panel { order: 1 !important; }
    .hub-app-stage { order: 2 !important; }
    .hub-quick-panel,
    .hub-app-stage {
        padding: 16px !important;
        border-radius: 24px !important;
    }
    .hub-profile-top {
        min-height: 0 !important;
        padding: 16px !important;
        gap: 12px !important;
    }
    .hub-profile-avatar-wrap {
        width: 68px !important;
        height: 68px !important;
        border-radius: 20px !important;
    }
    .hub-profile-avatar { border-radius: 16px !important; }
    .hub-profile-copy h2 {
        font-size: clamp(18px, 5vw, 22px) !important;
        line-height: 1.05 !important;
    }
    .hub-profile-copy p {
        font-size: 12px !important;
        line-height: 1.35 !important;
    }
    .hub-status-panel {
        align-items: flex-start !important;
        gap: 12px !important;
    }
    .hub-action-row {
        grid-template-columns: 1fr !important;
    }

    /* ---------- INDEX / HUB ---------- */
    .nav-inner.hub-nav { padding: 0 14px !important; }
    .nav-logo img, .navbar-left img { height: 40px !important; }
    .hub-wrapper { padding: calc(14px + env(safe-area-inset-top)) 12px calc(132px + env(safe-area-inset-bottom)) !important; }
    .hub-header { margin-bottom: 28px !important; }
    .hub-header h2 { font-size: 24px !important; }
    .app-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        align-items: start !important;
    }
    .app-card {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 14px 14px 13px !important;
        border-radius: 22px !important;
        min-height: 0 !important;
    }
    .app-card-head {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    .app-icon {
        width: 38px !important;
        height: 38px !important;
        border-radius: 11px !important;
        margin-bottom: 0 !important;
        flex: 0 0 38px !important;
    }
    .app-icon i { font-size: 18px !important; }
    .app-title {
        display: flex !important;
        align-items: center !important;
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        font-size: 13.5px !important;
        min-height: 38px !important;
        line-height: 1.1 !important;
        margin-bottom: 0 !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }
    .app-desc {
        font-size: 12.5px !important;
        line-height: 1.42 !important;
        margin-top: 0 !important;
    }
    .desktop-only { gap: 8px !important; }
    #welcomeUser, #employeeCodeDisplay { font-size: 11px !important; padding: 6px 10px !important; }

    /* Cổng nhập mã (gateway) */
    .gateway-container { gap: 30px !important; padding: 0 6px; }
    .gateway-logo { max-width: 240px !important; }
    .gateway-left p { font-size: 1.1em !important; letter-spacing: 2px !important; }
    .gateway-title { font-size: 1.0em !important; }

    /* ---------- NAVBAR CHUNG ---------- */
    .navbar { height: 60px !important; padding: 0 14px !important; }
    .navbar h1 { font-size: 17px !important; }
    .hc-nav { height: 58px !important; }
    .hc-nav-inner { padding: 0 12px !important; }
    .hc-nav-brand img { height: 32px !important; }
    .hc-nav-right { gap: 8px !important; }
    .hc-nav-right a span, .hc-nav-right a { font-size: 0 !important; } /* chỉ còn icon cho gọn */
    .hc-nav-right a .material-icons { font-size: 22px !important; }
    #userLabel { display: none !important; }

    /* ---------- HÀNH CHÍNH ---------- */
    .hc-page { padding: 14px 12px 84px !important; }
    .hc-header h1 { font-size: 26px !important; }
    .flow-hint { font-size: 12px !important; padding: 12px 14px !important; }
    .hc-tabs { gap: 0 !important; -webkit-overflow-scrolling: touch; }
    .hc-tab { padding: 11px 14px !important; font-size: 13px !important; }
    .form-card { padding: 20px 16px !important; border-radius: 12px !important; }
    .form-row { grid-template-columns: 1fr !important; }
    .req-card { padding: 16px !important; border-radius: 12px !important; }
    .push-area .push-row { flex-direction: column; align-items: stretch; }
    .push-area select { min-width: 0 !important; width: 100%; }
    .btn-sign { width: 100%; justify-content: center; }

    /* Modal chi tiết dạng tấm trượt đáy (bottom sheet) */
    .modal-overlay { align-items: flex-end !important; padding: 0 !important; }
    .modal-box { max-width: 100% !important; max-height: 92vh !important; border-radius: 18px 18px 0 0 !important; }
    .modal-body { padding: 16px 18px 24px !important; }
    .approve-btns { flex-direction: column; }
    .approve-btns .btn { width: 100%; justify-content: center; }

    /* ---------- ADMIN ---------- */
    .admin-container { padding: 14px 12px 84px !important; }
    .navbar-actions { width: 100% !important; justify-content: flex-start !important; }
    .admin-hero,
    .dashboard-balance-grid,
    .review-focus-grid,
    .workspace-grid,
    .hero-command-grid,
    .hero-side-metrics {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .portal-main,
    .leader-main,
    .hc-main {
        height: auto !important;
        overflow: visible !important;
    }
    .tabs { gap: 8px !important; padding-bottom: 10px !important; flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tab-btn { padding: 10px 16px !important; font-size: 13px !important; white-space: nowrap; }
    .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
    .stat-card { padding: 16px !important; }
    .stat-card .value { font-size: 26px !important; }
    .data-card { padding: 16px !important; }
    .card-header { flex-direction: column; align-items: flex-start !important; gap: 8px; }
    .card-body { grid-template-columns: 1fr !important; }
    .card-body p strong { width: auto !important; margin-right: 6px; }
    .card-actions { flex-direction: column; }
    .card-actions .btn, .card-actions select, .card-actions button { width: 100%; justify-content: center; }
    .modal-content { max-width: 100% !important; padding: 22px 18px !important; border-radius: 16px !important; }

    /* ---------- PROFILE ---------- */
    .main-container { flex-direction: column !important; }
    .sidebar { width: 100% !important; flex-direction: row !important; flex-wrap: nowrap !important; overflow-x: auto; padding: 8px 10px !important; gap: 6px !important; -webkit-overflow-scrolling: touch; }
    .nav-item { border-radius: 22px !important; padding: 9px 14px !important; white-space: nowrap; font-size: 14px; }
    .content-area { padding: 18px 14px 80px !important; }
    .grid-2 { grid-template-columns: 1fr !important; gap: 14px !important; }
    .home-avatar { width: 120px !important; height: 120px !important; }
    .home-name { font-size: 26px !important; }
    .info-card { padding: 20px 16px !important; }
    .action-buttons { flex-direction: column-reverse; }
    .action-buttons .btn { width: 100%; justify-content: center; }
    .rec-top { flex-direction: column; gap: 8px; }

    /* ---------- CUSTOMER / PROFILE WORKSPACE ---------- */
    .profile-workspace {
        gap: 14px !important;
    }
    .page-shell {
        padding: 12px 10px 84px !important;
    }
    .container,
    .customer-command-panel,
    .management-box,
    .sidebar-note-card {
        padding: 18px 14px !important;
        border-radius: 20px !important;
    }
    .customer-command-head,
    .customer-workspace-head,
    .summary-top,
    .section-header,
    .summary-actions,
    .customer-pane-title-row,
    .customer-summary-top,
    .customer-action-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    .customer-pane-title,
    .section-header h2,
    .customer-workspace-head h2,
    .summary-title {
        font-size: 22px !important;
        line-height: 1.08 !important;
    }
    .customer-pane-note,
    .customer-workspace-head p,
    .summary-subtitle {
        font-size: 12.5px !important;
        line-height: 1.55 !important;
    }
    .customer-command-actions,
    .customer-overview-grid,
    .customer-detail-grid,
    .customer-kpi-strip,
    .summary-checklist {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .customer-count {
        width: fit-content !important;
        max-width: 100% !important;
    }
    .customer-summary-card,
    .customer-hero-card,
    .customer-detail-item,
    .summary-item,
    .workspace-list-row {
        border-radius: 18px !important;
    }
    .customer-hero-top,
    .customer-hero-identity {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    .customer-hero-name {
        font-size: 24px !important;
    }
    .customer-hero-sub {
        font-size: 12.5px !important;
        line-height: 1.55 !important;
    }
    .customer-hero-avatar {
        width: 68px !important;
        height: 68px !important;
        font-size: 24px !important;
    }
    .workspace-list-row {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .sidebar-note-card {
        padding: 16px 14px !important;
    }
    .sidebar-note-list {
        gap: 8px !important;
    }
    .sidebar-note-item {
        font-size: 12px !important;
        line-height: 1.5 !important;
    }
    .summary-btn,
    .customer-action-bar .btn-action,
    .customer-action-bar .btn-soft,
    .customer-command-actions .btn-action,
    .customer-command-actions .btn-light,
    .customer-command-actions .btn-gold-flat {
        width: 100% !important;
        justify-content: center !important;
    }

    /* ---------- REPORT ---------- */
    .report-shell,
    .report-master-grid,
    .report-workspace-grid {
        gap: 14px !important;
    }
    .report-command-panel,
    .report-preview-panel,
    .report-workspace-tools,
    .control-panel,
    .modal-content,
    .a4-container {
        border-radius: 20px !important;
    }
    .report-command-panel,
    .report-preview-panel,
    .report-workspace-tools {
        padding: 18px 14px !important;
    }
    .report-preview-panel,
    .report-empty-stage,
    .report-side-panel,
    .report-process-panel {
        padding: 18px 14px !important;
    }
    .report-command-head,
    .report-workspace-tools,
    .control-panel,
    .header-actions {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    .report-preview-title,
    .report-command-title,
    .report-workspace-tools h3 {
        font-size: 22px !important;
        line-height: 1.08 !important;
    }
    .report-tool-grid,
    .report-list-stats,
    .report-preview-stats,
    .report-preview-grid,
    .signature-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .report-choice-panel {
        align-items: flex-start !important;
        text-align: left !important;
        padding: 0 !important;
    }
    .report-choice-panel h2 {
        font-size: 24px !important;
        line-height: 1.08 !important;
    }
    .report-choice-panel p,
    .report-command-note,
    .report-pane-note,
    .report-group-desc,
    .report-list-meta {
        font-size: 12.5px !important;
        line-height: 1.55 !important;
    }
    .report-choice-actions,
    .report-list-actions,
    .report-command-actions,
    .report-tool-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .report-choice-actions .btn,
    .report-list-actions .btn,
    .report-command-actions .btn,
    .report-tool-grid .btn,
    #actionButtons .btn {
        width: 100% !important;
        justify-content: center !important;
        min-height: 50px !important;
    }
    .report-group-toggle {
        padding: 14px 15px !important;
        border-radius: 16px !important;
    }
    .report-group-left {
        align-items: flex-start !important;
    }
    .report-group-name {
        font-size: 22px !important;
        line-height: 1.02 !important;
    }
    .report-list-card,
    .report-list-card.active {
        max-height: none !important;
        gap: 10px !important;
    }
    .report-preview-panel {
        order: 1 !important;
    }
    .report-command-panel {
        order: 2 !important;
    }
    .report-side-panel,
    .report-process-panel {
        order: 3 !important;
    }
    .report-workspace-left {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }
    .report-process-head,
    .report-tools-head {
        gap: 8px !important;
    }
    .report-process-log,
    .report-process-timeline {
        max-height: none !important;
    }
    .a4-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        order: 1 !important;
    }
    .a4-container {
        min-width: 720px;
        width: 720px !important;
        max-width: none !important;
        padding: 18px 14px !important;
        margin: 0 !important;
    }
    .data-table {
        display: table !important;
        min-width: 680px;
    }
    .data-table th,
    .data-table td {
        min-width: 90px !important;
    }

    /* ---------- LEADER / DUYET LENH ---------- */
    .leader-main {
        padding: 14px 12px 84px !important;
    }
    .status-strip,
    .ops-banner,
    .leader-grid,
    .profile-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .main-topbar,
    .embedded-head,
    .section-header,
    .card-header,
    .card-actions,
    .topbar-actions,
    .customer-nav-header,
    .workspace-card-title,
    .global-search-header,
    .queue-group-head,
    .queue-group-right {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    .topbar-title h1,
    .section-header h2 {
        font-size: 24px !important;
        line-height: 1.08 !important;
    }
    .search-box,
    .section-search,
    .smart-box-row input[type="text"] {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }
    .workspace-metrics,
    .customer-nav-actions,
    .section-tools {
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
    }

    /* ---------- CHUÔNG THÔNG BÁO ---------- */
    .nb-panel { width: 94vw !important; right: -6px !important; }
    .nb-toast-wrap { left: 12px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); max-width: none; }

    /* ---------- FORM CHUNG (booking, hồ sơ KH, login...) ---------- */
    .form-group input, .form-group select, .form-group textarea { border-radius: 10px; }
}

/* =========================================================================
   ĐIỆN THOẠI NHỎ: <= 480px
   ========================================================================= */
@media (max-width: 480px) {
    .stats-grid { grid-template-columns: 1fr !important; }
    .hub-header h2 { font-size: 21px !important; }
    .navbar h1 { font-size: 15px !important; }
    .hc-header h1 { font-size: 23px !important; }
    .hc-tab .material-icons { display: none; } /* tab gọn hơn trên máy nhỏ */
    .hub-profile-copy h2,
    .customer-pane-title,
    .customer-hero-name,
    .topbar-title h1,
    .section-header h2,
    .report-preview-title { font-size: 20px !important; }
    .hub-wrapper,
    .admin-container,
    .leader-main,
    .hc-page,
    .content-area,
    .page-shell { padding-left: 10px !important; padding-right: 10px !important; }
    .container,
    .customer-command-panel,
    .management-box,
    .sidebar-note-card,
    .report-command-panel,
    .report-preview-panel,
    .report-workspace-tools,
    .info-card,
    .summary-card,
    .workspace-card,
    .review-queue,
    .review-dashboard-band,
    .data-card { padding: 16px 12px !important; }
    .a4-container {
        min-width: 640px;
        width: 640px !important;
    }
}

/* =========================================================================
   Hiệu ứng chạm "app-like" cho thẻ & nút (mọi cảm ứng)
   ========================================================================= */
@media (hover: none) {
    .app-card:active, .req-card:active, .data-card:active, .rec-card:active { transform: scale(0.985); transition: transform .08s; }
    .btn:active, .tab-btn:active, .nav-item:active, .hc-tab:active { opacity: .85; }
}