/* ============================================================
   Mobile CSS — Smart Office PWA
   Load after style.css
   ============================================================ */

/* ---- Bottom Navigation Bar ---- */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: #fff;
    border-top: 1px solid #ddd;
    z-index: 1050;
    justify-content: space-around;
    align-items: center;
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
}

.mobile-bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    color: #6b7280;
    text-decoration: none;
    font-size: 10px;
    padding: 6px 0;
    min-height: 44px;
    min-width: 44px;
    -webkit-tap-highlight-color: transparent;
}

.mobile-bottom-nav a i {
    font-size: 18px;
    margin-bottom: 2px;
}

.mobile-bottom-nav a.active,
.mobile-bottom-nav a:hover {
    color: #2563eb;
}

/* ---- Safe area insets for iPhone notch ---- */
@supports (padding: env(safe-area-inset-bottom)) {
    .mobile-bottom-nav {
        padding-bottom: env(safe-area-inset-bottom);
        height: calc(56px + env(safe-area-inset-bottom));
    }
}

/* ============================================================
   TABLET (max-width: 991px)
   ============================================================ */
@media (max-width: 991px) {
    /* Schedule page: stack header controls */
    .panel-schedule .panel-heading .row {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 10px;
    }
    .panel-schedule .panel-heading .col-md-8 {
        text-align: left !important;
        width: 100%;
    }
    .panel-schedule .panel-heading .col-md-4 {
        width: 100%;
    }

    /* Schedule table: reduce padding */
    .schedule-table thead th {
        padding: 10px 8px !important;
        font-size: 10px;
    }

    /* Tasks filter bar: allow wrapping */
    .filter-bar .row .col-md-3,
    .filter-bar .row .col-md-2,
    .filter-bar .row .col-md-1 {
        margin-bottom: 8px;
    }

    /* Dashboard: right column below on tablet */
    .dashboard-header {
        flex-direction: column;
        gap: 10px;
    }
}

/* ============================================================
   MOBILE (max-width: 767px)
   ============================================================ */
@media (max-width: 767px) {
    /* Show bottom nav */
    .mobile-bottom-nav {
        display: flex;
    }

    /* Content padding for bottom nav */
    .main-content {
        padding-bottom: 70px !important;
    }

    @supports (padding: env(safe-area-inset-bottom)) {
        .main-content {
            padding-bottom: calc(70px + env(safe-area-inset-bottom)) !important;
        }
    }

    /* Hide sidebar toggle text */
    .sidebar-toggle span {
        display: none;
    }

    /* Top bar compact */
    .top-bar {
        padding: 5px 10px;
    }

    /* Container fluid padding */
    .container-fluid.main-content {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Sidebar logo text */
    .sidebar .logo-area h4 {
        font-size: 11px;
    }
    .sidebar .logo-area h3 {
        font-size: 14px;
    }

    /* Touch targets */
    .btn, .btn-sm {
        min-height: 38px;
        min-width: 38px;
    }

    /* Tables: compact */
    .table > tbody > tr > td,
    .table > thead > tr > th {
        padding: 10px 8px;
        font-size: 13px;
    }

    /* Panels full width */
    .panel {
        margin-left: -5px;
        margin-right: -5px;
        border-radius: 0;
    }

    /* ---- DASHBOARD ---- */
    .stat-card,
    .dashboard-card {
        margin-bottom: 10px;
    }

    .dashboard-header {
        flex-direction: column;
        gap: 8px;
    }

    .dashboard-header > div:last-child {
        text-align: left;
    }

    .dashboard-panel .panel-title-bar {
        padding: 12px 15px;
    }

    .dashboard-panel .panel-title-bar h4 {
        font-size: 13px;
    }

    .dashboard-table thead th {
        font-size: 10px;
        padding: 8px 10px;
    }

    .dashboard-table tbody td {
        font-size: 12px;
        padding: 8px 10px;
    }

    /* Hide less important columns on mobile */
    .dashboard-table thead th:nth-child(4),
    .dashboard-table tbody td:nth-child(4) {
        display: none;
    }

    /* ---- DOCUMENTS LIST ---- */
    .floating-toolbar {
        padding: 10px !important;
    }

    .floating-toolbar .search-input {
        font-size: 14px !important;
        height: 40px !important;
    }

    .floating-toolbar .toolbar-row {
        gap: 8px;
    }

    /* Mobile filter collapsible: collapse elements that use in-desktop class */
    .collapse.in-desktop:not(.in) {
        display: none !important;
    }

    .mobile-action-group {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-start;
        margin-top: 8px;
    }

    /* Document cards on mobile */
    .doc-card {
        padding: 12px !important;
    }

    .doc-card .doc-title {
        font-size: 13px !important;
    }

    .doc-meta {
        font-size: 11px !important;
    }

    /* ---- TASKS PAGE ---- */
    /* Hide "Văn bản gốc" column on mobile */
    #tasksTable thead th:nth-child(3),
    #tasksTable tbody td:nth-child(3) {
        display: none;
    }

    /* Compact task cells */
    #tasksTable .task-title {
        font-size: 13px;
    }

    #tasksTable .task-meta {
        font-size: 10px;
    }

    .filter-bar {
        padding: 12px;
    }

    .filter-bar .col-md-3,
    .filter-bar .col-md-2,
    .filter-bar .col-md-1 {
        margin-bottom: 8px;
    }

    /* Tasks stat cards */
    .panel-chart-container {
        height: auto;
        padding: 15px;
    }

    /* Bulk actions bar */
    #bulkActionsBar {
        bottom: 70px !important;
        padding: 8px 15px !important;
        font-size: 12px;
    }

    #bulkActionsBar .btn-sm {
        padding: 4px 10px;
        font-size: 11px;
    }

    /* Pagination compact */
    .panel-footer .col-md-6 {
        text-align: center !important;
        padding: 5px 10px;
    }

    .panel-footer .col-md-6:last-child {
        padding-right: 10px !important;
    }

    /* ---- SCHEDULE PAGE ---- */
    .panel-schedule .panel-heading {
        padding: 12px 15px;
    }

    .panel-schedule .panel-title {
        font-size: 16px;
    }

    /* Schedule header controls: stack vertically */
    .panel-schedule .panel-heading .row {
        display: block !important;
    }

    .panel-schedule .panel-heading .col-md-4,
    .panel-schedule .panel-heading .col-md-8 {
        width: 100%;
        float: none;
        text-align: left !important;
        margin-bottom: 8px;
    }

    .panel-schedule .panel-heading .col-md-8 {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
    }

    .week-nav-box {
        flex: 1;
        min-width: 200px;
    }

    .week-nav-box .btn-link {
        padding: 6px 10px;
        font-size: 13px;
    }

    /* Schedule table: hide some columns on mobile */
    .schedule-table thead th:nth-child(3),
    .schedule-table tbody td:nth-child(3),
    .schedule-table thead th:nth-child(4),
    .schedule-table tbody td:nth-child(4),
    .schedule-table thead th:nth-child(5),
    .schedule-table tbody td:nth-child(5) {
        display: none;
    }

    .schedule-table thead th:nth-child(6),
    .schedule-table tbody td:nth-child(6) {
        width: 60px !important;
    }

    /* Keep time and content visible */
    .schedule-table thead th:nth-child(1) {
        width: 80px !important;
    }

    .time-cell {
        font-size: 14px;
    }

    .content-title {
        font-size: 13px;
    }

    .badge-agency {
        font-size: 10px;
        padding: 3px 8px;
    }

    .date-header {
        padding: 10px 15px !important;
        font-size: 13px;
    }

    /* Schedule detail card on mobile */
    .detail-card {
        margin: 10px;
        padding: 15px;
    }

    .detail-card .row {
        display: block !important;
    }

    .detail-card .col-md-8,
    .detail-card .col-md-4 {
        width: 100%;
        float: none;
        border-left: none !important;
        padding-left: 0 !important;
        margin-top: 15px;
    }

    /* Schedule row: make actions visible */
    .schedule-row td {
        padding: 10px 8px !important;
    }

    .btn-action-group .btn-link {
        width: 40px;
        height: 40px;
    }

    /* Schedule modal */
    .modal-dialog.modal-lg {
        margin: 10px;
    }

    .modal-body {
        padding: 15px !important;
    }

    .modal-footer {
        padding: 15px !important;
    }

    /* ---- DETAIL / PDF VIEWER PAGE ---- */
    /* Document detail chat widget: full screen on mobile */
    .chat-widget-container {
        width: 100vw !important;
        height: 60vh !important;
        bottom: 0 !important;
        right: 0 !important;
        border-radius: 12px 12px 0 0 !important;
    }

    .chat-toggle-btn {
        bottom: 70px !important;
        right: 10px !important;
        width: 48px;
        height: 48px;
    }

    /* File list items */
    .file-item {
        font-size: 12px;
        padding: 8px 12px !important;
    }

    /* Notes panel compact */
    #noteInput {
        font-size: 13px;
    }

    /* Action buttons in detail page */
    .btn-group-justified .btn {
        font-size: 12px;
        padding: 8px 10px;
    }

    /* AI buttons in detail */
    .btn-gradient-purple,
    .btn-xs {
        font-size: 11px !important;
        padding: 4px 8px !important;
    }

    /* ---- SEARCH PAGE ---- */
    .search-result-item {
        padding: 12px;
    }

    /* Search results table: hide Cơ quan BH (col 4) and Điểm (col 6) */
    .search-results-table thead th:nth-child(4),
    .search-results-table tbody td:nth-child(4),
    .search-results-table thead th:nth-child(6),
    .search-results-table tbody td:nth-child(6) {
        display: none;
    }

    /* Search results: compact */
    .search-results-table thead th,
    .search-results-table tbody td {
        padding: 8px !important;
        font-size: 12px;
    }

    /* Truncate trích yếu */
    .search-results-table .doc-excerpt,
    .search-results-table td:nth-child(2) {
        max-width: 150px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Quick date filter buttons wrap */
    .search-quick-filters,
    .search-filter-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    /* ---- PROFILES PAGE ---- */
    .profile-card {
        margin-bottom: 12px;
    }

    /* Profile detail: hide STT (col 1), Ngày BH (col 3), Cơ quan BH (col 5) */
    #profileDocsTable thead th:nth-child(1),
    #profileDocsTable tbody td:nth-child(1),
    #profileDocsTable thead th:nth-child(3),
    #profileDocsTable tbody td:nth-child(3),
    #profileDocsTable thead th:nth-child(5),
    #profileDocsTable tbody td:nth-child(5) {
        display: none;
    }

    /* Profile box-tools: stack */
    .profile-detail .box-tools,
    .panel .box-tools {
        float: none;
        text-align: left;
        margin-top: 8px;
    }

    /* Profile cards: reduce min-height */
    .profile-card {
        min-height: auto !important;
    }

    /* ---- COMPARE PAGE ---- */
    /* Doc selector: stack vertically */
    .compare-selector,
    .doc-selector-row {
        flex-direction: column !important;
        gap: 10px;
    }

    /* Diff container: horizontal scroll for diff table */
    .diff-container,
    .compare-diff-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .diff-container table,
    .compare-diff-wrapper table {
        min-width: 500px;
    }

    /* Compare stats: wrap and compact */
    .compare-stats,
    .diff-stats {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        font-size: 12px;
    }

    /* ---- NOTIFICATION PANEL ---- */
    #notificationPanel {
        top: 50px !important;
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        max-height: calc(100vh - 130px);
    }

    #notificationPanel .panel-body {
        max-height: calc(100vh - 200px);
        overflow-y: auto;
    }

    #notificationList {
        max-height: calc(100vh - 230px) !important;
    }

    /* ---- KCN PAGE ---- */
    .kcn-card {
        margin-bottom: 12px;
    }

    /* ---- REPORT EDITOR ---- */
    .report-editor-container {
        padding: 10px !important;
    }

    /* ---- SETTINGS ---- */
    .settings-section {
        padding: 12px;
    }

    /* Settings tab nav: horizontal scrollable pill bar */
    .settings-tab-nav {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
        padding-bottom: 8px;
        border-bottom: 1px solid #ddd;
        margin-bottom: 15px;
    }

    .settings-tab-nav .list-group-item {
        border: 1px solid #ddd;
        border-radius: 20px !important;
        padding: 8px 16px;
        white-space: nowrap;
        flex-shrink: 0;
        text-align: center;
        font-size: 13px;
    }

    .settings-tab-nav .list-group-item.active {
        background: #2563eb;
        border-color: #2563eb;
        color: #fff;
    }

    /* Settings: date range row stack vertical */
    #settingDateRangeGroup .row,
    .settings-section .row {
        display: block;
    }

    #settingDateRangeGroup .col-md-6 {
        width: 100%;
        margin-bottom: 10px;
    }

    /* Settings: index buttons stack vertical */
    .panel-body .row .col-sm-4 {
        margin-bottom: 12px;
    }

    /* ---- TOUCH UX ---- */
    /* Remove 300ms tap delay */
    a, button, input, select, textarea,
    .btn, .list-group-item, .nav > li > a {
        touch-action: manipulation;
    }

    /* Prevent iOS Safari auto-zoom on input focus */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    input[type="date"],
    textarea,
    select {
        font-size: 16px !important;
    }

    /* Active state feedback for buttons */
    .btn:active,
    .list-group-item:active {
        transform: scale(0.97);
    }

    /* Touch target: min 44px for list items (Apple HIG) */
    .list-group-item {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* ---- ADMIN PAGES ---- */
    .admin-panel {
        margin: 0 -10px;
    }
}

/* ============================================================
   AI Chat full-screen overlay on mobile
   ============================================================ */
@media (max-width: 767px) {
    .ai-chat-widget .chat-window.active {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        z-index: 2000 !important;
    }

    .ai-chat-widget .chat-window.active .chat-header {
        border-radius: 0;
        padding-top: env(safe-area-inset-top, 8px);
    }

    .ai-chat-widget .chat-window.active .chat-input-area {
        padding-bottom: env(safe-area-inset-bottom, 8px);
    }

    /* Larger input area for easier typing */
    .ai-chat-widget .chat-window.active #aiChatInput {
        font-size: 16px;
        min-height: 44px;
    }

    /* Hide bottom nav when chat is open */
    body.ai-chat-open .mobile-bottom-nav {
        display: none !important;
    }

    /* Hide chat toggle button on mobile (use bottom nav instead) */
    .ai-chat-widget .chat-toggle-btn {
        display: none;
    }

    /* Chat sidebar full width on mobile */
    .ai-chat-widget .chat-sidebar.open {
        width: 100% !important;
    }
}

/* ============================================================
   SMALL MOBILE (max-width: 480px) — Extra compact
   ============================================================ */
@media (max-width: 480px) {
    /* Even more compact stat cards */
    .stat-card {
        padding: 12px !important;
    }

    .stat-card h3 {
        font-size: 20px !important;
    }

    .stat-card p {
        font-size: 10px !important;
    }

    .stat-icon-wrapper {
        display: none;
    }

    /* Tasks: hide checkbox column on very small screens */
    #tasksTable thead th:first-child,
    #tasksTable tbody td:first-child {
        display: none;
    }

    /* Schedule: ultra compact */
    .schedule-table thead th:nth-child(1) {
        width: 60px !important;
    }

    .time-cell {
        font-size: 12px !important;
    }

    .time-raw {
        font-size: 9px !important;
    }

    /* Dashboard header */
    .dashboard-header h2 {
        font-size: 18px !important;
    }

    /* Bottom nav labels smaller */
    .mobile-bottom-nav a {
        font-size: 9px;
    }

    .mobile-bottom-nav a i {
        font-size: 16px;
    }
}