/* ==========================================================================
   Horizon V2 — Responsive Design
   Mobile-first responsive rules for all screen sizes
   ========================================================================== */

/* --- Global responsive helpers --- */

.overflow-x-auto {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* --- Tablet (max-width: 992px) — sidebar collapses --- */

@media (max-width: 992px) {

    /* Topbar: show on mobile too for quick actions */
    #topbar {
        display: block !important;
        position: sticky;
        top: 0;
        z-index: 1020;
    }

    #topbar .container-fluid {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* Sidebar overlay on mobile */
    #sidebar .navbar-collapse {
        position: fixed;
        top: 0;
        left: 0;
        width: 280px;
        height: 100vh;
        background: #fff;
        z-index: 1050;
        overflow-y: auto;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
        padding: 1rem;
    }

    [data-theme="dark"] #sidebar .navbar-collapse {
        background: #1a1a2e;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.4);
    }

    /* Sidebar backdrop */
    #sidebar .navbar-collapse.show::before {
        content: '';
        position: fixed;
        top: 0;
        left: 280px;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: -1;
    }

    /* Page header stacking */
    .page-header .row {
        flex-direction: column;
    }

    .page-header .col-sm-auto {
        margin-top: 0.75rem;
    }

    /* Container padding reduction */
    .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    main.py-6 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    /* Page title smaller on tablets */
    .h2, h2 {
        font-size: 1.35rem;
    }

    /* Kanban: slightly narrower columns */
    .kanban-column {
        min-width: 270px;
        max-width: 270px;
    }

    /* Stat cards: ensure 2 per row */
    .stat-card-value {
        font-size: 1.5rem;
    }

    /* Notification dropdown narrower */
    #notifDropdown {
        width: 300px !important;
    }

    /* Search modal narrower */
    .search-modal {
        margin: 40px 16px 0;
        max-width: none;
    }

    /* Table: hide less critical columns */
    .table-responsive-hide-tablet {
        display: none !important;
    }
}

/* --- Mobile (max-width: 768px) --- */

@media (max-width: 768px) {

    /* Kanban: stack columns vertically or allow scroll with smaller columns */
    .kanban-board {
        gap: 0.75rem;
        padding-bottom: 0.75rem;
    }

    .kanban-column {
        min-width: 260px;
        max-width: 260px;
    }

    .kanban-column,
    .kanban-column[style*="width:300px"] {
        min-width: 260px !important;
        max-width: 260px !important;
        width: 260px !important;
    }

    /* Calendar: reduce cell height */
    .calendar-cell {
        min-height: 70px;
        padding: 2px;
    }

    .calendar-date {
        font-size: 0.7rem;
        width: 22px;
        height: 22px;
    }

    .calendar-task {
        font-size: 0.6rem;
        padding: 1px 3px;
    }

    .calendar-header-cell {
        font-size: 0.7rem;
        padding: 0.35rem 0.15rem;
    }

    /* Gantt: reduce name panel and make scrollable */
    .gantt-names {
        flex: 0 0 120px !important;
    }

    .gantt-name-row {
        font-size: 0.7rem;
        padding: 0 0.4rem;
    }

    .gantt-wrapper {
        min-height: auto;
    }

    /* Timeline view: narrower names */
    .timeline-names {
        min-width: 100px;
    }

    /* Task detail: stack sidebar below */
    .task-sidebar {
        border-left: none;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        padding-top: 1rem;
    }

    [data-theme="dark"] .task-sidebar {
        border-top-color: rgba(255, 255, 255, 0.1);
    }

    .task-meta-label {
        flex: 0 0 100px;
        font-size: 0.75rem;
    }

    .task-meta-value {
        font-size: 0.75rem;
    }

    /* Sprint board columns */
    .sprint-columns .kanban-column {
        min-width: 250px !important;
        max-width: 250px !important;
    }

    /* Dashboard: stack stat cards */
    .stat-card-value {
        font-size: 1.25rem;
    }

    .stat-card-label {
        font-size: 0.7rem;
    }

    /* Modals: full-width on mobile */
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }

    .modal-lg,
    .modal-xl {
        max-width: calc(100% - 1rem);
    }

    /* Card padding reduction */
    .card-body {
        padding: 0.75rem;
    }

    /* Forms: full-width inputs */
    .hstack {
        flex-wrap: wrap;
    }

    /* Buttons: wrap in header */
    .page-header .hstack {
        gap: 0.5rem !important;
        flex-wrap: wrap;
    }

    /* User dropdown: compact */
    #topbar .navbar-user .hstack {
        gap: 0.75rem !important;
    }

    /* Notification dropdown mobile */
    #notifDropdown {
        width: 280px !important;
        max-height: 350px !important;
    }

    /* Mindmap: ensure scroll */
    #mindmap-view {
        min-height: 300px;
        max-height: 60vh;
    }

    /* Workload table scroll */
    #workload-view {
        overflow-x: auto;
    }

    /* Page title */
    .h2, h2 {
        font-size: 1.2rem;
    }

    .h1, h1 {
        font-size: 1.5rem;
    }

    /* Filter bars: wrap */
    .filter-bar,
    .view-switcher {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* Breadcrumbs */
    .breadcrumb {
        font-size: 0.75rem;
        flex-wrap: wrap;
    }

    /* Dropdown menus - prevent overflow */
    .dropdown-menu {
        max-width: calc(100vw - 2rem);
    }
}

/* --- Small phone (max-width: 576px) --- */

@media (max-width: 576px) {

    /* Container minimal padding */
    .container-fluid {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    main.py-6 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    /* Kanban: near full-width single column scroll */
    .kanban-column,
    .kanban-column[style*="width:300px"] {
        min-width: 85vw !important;
        max-width: 85vw !important;
        width: 85vw !important;
    }

    .kanban-board {
        scroll-snap-type: x mandatory;
    }

    .kanban-column {
        scroll-snap-align: start;
    }

    .kanban-dropzone {
        min-height: 120px;
    }

    /* Calendar: abbreviated day names + smaller cells */
    .calendar-cell {
        min-height: 55px;
    }

    .calendar-header-cell {
        font-size: 0.6rem;
        padding: 0.25rem 0;
    }

    .calendar-task {
        font-size: 0.55rem;
        border-left-width: 2px;
    }

    /* Gantt: hide name panel, show overlay */
    .gantt-names {
        flex: 0 0 90px !important;
        font-size: 0.65rem;
    }

    /* Table columns: hide on small */
    .table-responsive-hide-mobile {
        display: none !important;
    }

    /* Task list table: optimize */
    #taskTable th,
    #taskTable td {
        padding: 0.4rem 0.35rem;
        font-size: 0.75rem;
    }

    /* Sprint metrics cards */
    .sprint-progress {
        height: 4px;
    }

    /* Dashboard: single column stat cards */
    .col-6.col-lg-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Card body even more compact */
    .card-body {
        padding: 0.5rem;
    }

    .card-header {
        padding: 0.5rem 0.75rem;
    }

    /* Buttons smaller */
    .btn {
        font-size: 0.8rem;
        padding: 0.3rem 0.6rem;
    }

    .btn-sm {
        font-size: 0.7rem;
        padding: 0.2rem 0.5rem;
    }

    /* Avatar sizes */
    .avatar-text {
        height: 2rem;
        width: 2rem;
        line-height: 2rem;
        font-size: 16px;
    }

    /* Search overlay */
    .search-modal {
        margin: 20px 8px 0;
        border-radius: 8px;
    }

    .search-results {
        max-height: 300px;
    }

    .search-item {
        padding: 8px 12px;
    }

    /* Page header compact */
    .border-bottom.pt-6 {
        padding-top: 1rem !important;
    }

    /* Notification dropdown full width */
    #notifDropdown {
        width: calc(100vw - 2rem) !important;
        right: -0.5rem;
    }

    /* Timer widget compact */
    #timerWidget .rounded-pill {
        padding: 0.2rem 0.5rem !important;
        font-size: 0.75rem;
    }

    /* Activity feed */
    .activity-item {
        font-size: 0.75rem;
        gap: 0.5rem;
        padding: 0.35rem 0;
    }

    /* Comment section */
    .comment-item {
        gap: 0.5rem;
        padding: 0.75rem 0;
    }

    /* Checklist */
    .checklist-item {
        font-size: 0.8rem;
    }

    /* Holding view */
    .holding-stats .col {
        flex: 0 0 50%;
    }

    /* Hide elements marked as desktop-only */
    .d-mobile-none {
        display: none !important;
    }
}

/* --- Landscape phone optimization --- */

@media (max-width: 768px) and (orientation: landscape) {
    .kanban-column,
    .kanban-column[style*="width:300px"] {
        min-width: 280px !important;
        max-width: 280px !important;
        width: 280px !important;
    }

    .calendar-cell {
        min-height: 60px;
    }

    main.py-6 {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }
}

/* --- Large desktop (min-width: 1400px) --- */

@media (min-width: 1400px) {
    .kanban-column {
        min-width: 320px;
        max-width: 320px;
    }
}

/* --- Touch-friendly improvements --- */

@media (hover: none) and (pointer: coarse) {
    /* Larger tap targets */
    .nav-link {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .dropdown-item {
        padding: 0.55rem 1rem;
    }

    .btn-sm {
        min-height: 36px;
    }

    /* Disable hover effects on touch */
    .kanban-card:hover {
        transform: none;
        box-shadow: none;
    }

    .gantt-bar:hover {
        filter: none;
    }

    /* Better touch scrolling */
    .kanban-board,
    .gantt-timeline-scroll,
    .timeline-scroll,
    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }
}

/* --- Print responsive --- */

@media print {
    #sidebar,
    #topbar,
    #toastContainer,
    .navbar-toggler,
    .btn,
    .dropdown {
        display: none !important;
    }

    main {
        padding: 0 !important;
    }

    .container-fluid {
        max-width: 100%;
        padding: 0;
    }
}