/* ============================================================================
   RESPONSIVE OVERRIDES — loaded last in layout.blade.php
   Breakpoints follow Bootstrap 5: xs<576, sm<768, md<992, xl<1200.
   The sidebar becomes an off-canvas drawer below 1199.98px (Sneat core).
   ============================================================================ */

/* ---------------------------------------------------------------------------
   ALL SIZES — flex overflow guards.

   .layout-page / .content-wrapper / .navbar-nav-right are flex items without
   min-width:0, so they refuse to shrink below their content's min-content
   width. Any wide child (the navbar row, a table) widens the whole page and
   everything lays out wider than the viewport — nothing wraps and content is
   clipped. min-width:0 lets them shrink so inner containers wrap properly.
--------------------------------------------------------------------------- */
.layout-page,
.content-wrapper,
.navbar-nav-right,
.navbar-nav-right .nav-item {
    min-width: 0;
}

/* An image must never expand the layout past the viewport — before
   board-view-card.css finishes loading, kanban avatars briefly render at
   natural size (~500px) and Chrome widens the layout viewport. This clamps
   them for good measure at all widths; class rules still win on height. */
img,
svg,
video {
    max-width: 100%;
}

img {
    height: auto;
}

/* Avatar stacks (.avatar-group on project cards, user lists): the .avatar
   circle has no overflow:hidden, so a missing photo renders its alt text
   spilling out of the 32px circle into an overlapping pile. Clip it inside
   the circle and let groups wrap so the "+N" badge stays reachable. */
.avatar {
    overflow: hidden;
}

.avatar img {
    object-fit: cover;
    font-size: 0;
}

.users-list.avatar-group {
    flex-wrap: wrap;
    row-gap: 4px;
}

/* Kanban board cards: board-view-card.css is linked in <body> so avatars
   flash at natural size (~500px) while it loads. This file lives in <head>
   and pins the same 16px size early — identical value, so the later theme
   stylesheet still wins if it ever changes. */
.pgb-bubble-avatar {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
   < 1200px — sidebar is an overlay drawer, not a fixed column
--------------------------------------------------------------------------- */
@media screen and (max-width: 1199.98px) {

    /* Ignore the desktop "collapsed" localStorage state so the drawer has
       a usable width when opened via the navbar hamburger. */
    #layout-menu,
    #layout-menu.sidebar-collapsed {
        width: min(var(--expanded-width, 260px), 85vw) !important;
        min-width: 0 !important;
    }

    #layout-menu.sidebar-collapsed .sidebar-content {
        opacity: 1;
        max-height: none !important;
        pointer-events: auto;
        overflow-y: auto;
    }

    /* Brand sits inside the drawer: span full drawer width, toggle on right */
    #layout-menu .sidebar-brand,
    #layout-menu.sidebar-collapsed .sidebar-brand {
        width: 100%;
    }

    #layout-menu .sidebar-toggle-wrapper,
    #layout-menu.sidebar-collapsed .sidebar-toggle-wrapper {
        left: auto;
        right: 12px;
    }

    #layout-menu.sidebar-collapsed .sidebar-brand-content {
        left: 16px;
    }

    /* No drag-resize on touch layouts */
    #layout-menu .sidebar-resize-handle {
        display: none !important;
    }

    /* Navbar: the inline --navbar-offset (set by sidebar JS for the desktop
       collapsed state) must not push navbar content on overlay layouts. */
    #layout-navbar.jira-navbar {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Slightly narrower search field on tablets */
    #layout-navbar .jira-search-wrapper {
        flex-shrink: 1;
        min-width: 0;
    }

    #layout-navbar .jira-search-input {
        width: 150px;
    }

    /* Workspace switcher: shrink to content, truncate label */
    #openWorkspaceSelectorBtn {
        min-width: 0 !important;
        max-width: 200px !important;
    }

    /* Sneat gives .layout-navbar z-index:1080 below 1200px so the sidebar
       drawer slides over it — but that also parks the navbar's 64px ON TOP of
       every Bootstrap modal (1055), offcanvas (1045), backdrop (1050/1040),
       dropdown picker and the task detail sheet (1050). Popups lose their
       header/close button under the navbar. Lift every overlay layer above
       the navbar while staying below the drawer (1100) and toasts (9999). */
    .modal-backdrop {
        z-index: 1081 !important;
    }

    .modal {
        z-index: 1082 !important;
    }

    .offcanvas-backdrop {
        z-index: 1083 !important;
    }

    .offcanvas {
        z-index: 1084 !important;
    }

    /* Popups rendered at document level (plugin dropdowns, pickers, popovers,
       tinymce dialogs) must sit above modals too */
    .select2-container--open .select2-dropdown,
    .daterangepicker,
    .flatpickr-calendar.open,
    .tagify__dropdown,
    .popover,
    .tox-tinymce-aux,
    .drp-calendar {
        z-index: 1086 !important;
    }

    /* The full-screen task detail sheet: above the navbar so its header
       (title + close) is reachable, below offcanvas/modal so subtask/edit
       panels spawned from it still layer correctly */
    .plg-wrapper.task-panel-open .plg-div4,
    .ti-layout-wrapper.task-panel-open .plg-div4,
    .board-plg.task-panel-open .plg-div4 {
        z-index: 1081 !important;
    }
}

/* ---------------------------------------------------------------------------
   < 992px — slide-in panels and split layouts
--------------------------------------------------------------------------- */
@media screen and (max-width: 991.98px) {

    /* Task detail panel (.plg-div4 / #taskDetailPanel): _information.css hides
       it entirely on the project page, and shows it at 38% width on the task
       page — both unusable. Make it a full-screen sheet instead, matching the
       existing edit-project-panel mobile behaviour.
       NOTE: !important is needed throughout — jira blades re-include
       _information.css / board-view-card.css in the <body>, after this file. */
    .plg-wrapper.task-panel-open .plg-div4,
    .ti-layout-wrapper.task-panel-open .plg-div4 {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        height: 100dvh !important;
        grid-area: unset !important;
        border-left: none !important;
        background: #fff !important;
        z-index: 1081 !important;
        overflow: hidden !important;
        animation: taskPanelSlideIn 0.22s ease;
    }

    /* Task information page: 50/50 side-by-side split stacks vertically and
       the whole page scrolls instead of two cramped inner scroll panes */
    .ti-layout-wrapper {
        flex-direction: column !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    /* ── Task titles: show the WHOLE title (wrap to extra lines) instead of
       truncating with an ellipsis — applies to every place a task title
       appears on phones and tablets ── */

    /* Jira task list rows (project Tasks tab, task-info subtask list) */
    .jtl-task-title {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        word-break: break-word;
        min-width: 0;
    }

    /* The ≤992px rule gives the title cell a 250px floor — release it so the
       cell can shrink to its track */
    .jtl-col-title {
        min-width: 0 !important;
    }

    /* Keep the ticket id aligned with the first line of a wrapped title */
    .jtl-task-link {
        align-items: flex-start;
        min-width: 0;
    }

    /* Opened-task titles: the title controls are nowrap textareas that grow
       via tpGrowTitleInput()/growTitle — allow the wrap here */
    #taskPanelTitle,
    #tiTaskTitle {
        white-space: normal !important;
    }

    /* Subtask detail-panel heading + subtask list links: drop the ellipsis */
    .plg-div4 .tp-panel-header h6.text-truncate,
    #subtasks_container a.text-truncate {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        word-break: break-word;
    }

    /* Dashboard "My Tasks"/"My Projects" lists */
    #navs-my-tasks .text-truncate,
    #navs-my-projects .text-truncate {
        white-space: normal;
        max-width: none !important;
        word-break: break-word;
    }

    /* Subtask names and parent-task reference inside kanban board cards */
    .pgb-subtask-name,
    .pgb-parent-link {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        word-break: break-word;
        max-width: none;
    }

    /* Bootstrap-table task/project title cells (tasks list, project lists) */
    .fixed-table-body td .project-title-wrap {
        flex-wrap: wrap;
    }

    .fixed-table-body td a.project-title-link {
        white-space: normal;
        word-break: break-word;
    }

    .ti-div1 {
        flex: none !important;
        width: 100% !important;
        overflow: visible !important;
        border-right: none !important;
        border-bottom: 1px solid #dfe1e6 !important;
    }

    .ti-div2 {
        overflow: visible !important;
    }

    .ti-div2 .tab-content {
        height: auto !important;
        overflow: visible !important;
    }

    .ti-div2 .tab-pane,
    .ti-div2 .tab-pane.active {
        height: auto !important;
        overflow-y: visible !important;
    }

    /* Discussion thread's internal 100%-height chain collapses gracefully */
    .tp-discussion-section {
        height: auto !important;
    }

    /* Global search: side-by-side results/quick-access becomes single column;
       the fixed 220px right panel drops below the results */
    #globalSearchModal .modal-body > .d-flex {
        flex-direction: column;
    }

    #globalSearchModal .gs-quick-access {
        width: 100% !important;
        flex-shrink: 1;
        border-top: 1px solid #ebecf0;
    }

    /* Project page Task Statistics tab: a 5-column grid with ~70px columns on
       phones — stack the chart, status list and activity feed vertically */
    .ts-grid,
    .plg-wrapper.task-panel-open .ts-grid {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
    }

    .ts-div1,
    .ts-div2,
    .ts-div3,
    .plg-wrapper.task-panel-open .ts-div1,
    .plg-wrapper.task-panel-open .ts-div2,
    .plg-wrapper.task-panel-open .ts-div3 {
        grid-area: auto !important;
    }
}

/* ---------------------------------------------------------------------------
   < 768px — phones and small tablets
--------------------------------------------------------------------------- */
@media screen and (max-width: 767.98px) {

    /* Safety net against stray fixed-width children causing page scroll */
    body {
        overflow-x: clip;
    }

    /* Pages whose root element is a bare .row (user/client profile): Bootstrap's
       negative gutters (-12px each side) are designed to be absorbed by a
       container's padding — without one the row box bleeds 13px past the
       viewport and mobile Chrome expands the layout viewport (page zooms out).
       Neutralize the margins; the column padding still provides inner gutter. */
    .content-wrapper > .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* custom.css caps .menu-container at calc(100vh - 50px) under 768px —
       the sidebar drawer needs its full height */
    #layout-menu.menu-container {
        max-height: none !important;
    }

    /* Navbar: tighter spacing, smaller workspace button */
    #layout-navbar.jira-navbar {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    #openWorkspaceSelectorBtn {
        max-width: 132px !important;
        padding: 6px 8px !important;
    }

    /* custom.css hides .nav-mobile-hidden under 767px but .d-flex !important
       beats it — enforce it here so the name/role column really goes away */
    .nav-item .nav-mobile-hidden {
        display: none !important;
    }

    /* Card headers/rows with title + button groups wrap instead of clipping */
    .card .d-flex.justify-content-between {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }

    /* Page-header rows (breadcrumb + action buttons) wrap instead of
       squeezing the buttons into overflow */
    .container-fluid > .d-flex.justify-content-between,
    .pgw-main > .d-flex.justify-content-between {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* Dropdown panels never exceed the viewport (many use inline
       min-width: 250-300px) */
    .dropdown-menu {
        min-width: 0 !important;
        max-width: calc(100vw - 16px) !important;
        max-height: 80vh;
        overflow-y: auto;
    }

    /* Workspace selector modal is positioned with inline margins by JS */
    #workspaceSelectorModal .modal-dialog {
        max-width: calc(100vw - 16px) !important;
        margin: 8px auto !important;
    }

    /* bootstrap-table toolbar + pagination */
    .fixed-table-toolbar {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    /* Momentum scrolling inside table containers (iOS) */
    .table-responsive,
    .fixed-table-container,
    .jira-task-list {
        -webkit-overflow-scrolling: touch;
    }

    /* Icon buttons: bump tap targets towards ~34px */
    .task-ctrl-icon-btn {
        padding: 8px 10px !important;
    }

    .jtl-action-btn {
        padding: 8px !important;
    }

    .fixed-table-toolbar .search .form-control,
    .fixed-table-toolbar .search input {
        width: 100%;
        min-width: 0;
    }

    .fixed-table-pagination {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    /* Pagination wraps rather than overflowing */
    .pagination {
        flex-wrap: wrap;
    }

    /* Jira page headers (.plg-div1): breadcrumb + badge + 5 icon buttons sit
       on one nowrap line inside a wrapper with overflow:hidden — buttons
       past the viewport are clipped AND unreachable. Wrap to a second row. */
    .plg-div1 > .d-flex {
        flex-wrap: wrap !important;
        gap: 0.5rem;
    }

    /* Jira list rows (.jtl-row): JS stamps an inline desktop
       grid-template-columns, and nowrap title cells give the `1fr` track a
       ~250px min-content floor — the row then overflows its own container and
       expands the page. min-width:0 lets every column shrink properly. */
    .jtl-header > *,
    .jtl-row > * {
        min-width: 0 !important;
    }

    /* Workspaces list: inline-stamped `60px 0.7fr 2.5fr 90px 50px` columns
       squeeze the workspace title to a few characters on phones. Restack as
       title row + full-width user chips row (header hidden, same pattern as
       the announcements mobile layout). */
    .ws-list .jtl-header {
        display: none !important;
    }

    .ws-list .ws-row {
        grid-template-columns: auto 1fr auto auto !important;
        grid-template-rows: auto auto;
        align-items: center;
        gap: 6px 10px !important;
        padding: 10px 8px !important;
    }

    .ws-list .ws-row > div:first-child {
        grid-column: 1;
        grid-row: 1;
        padding-left: 4px !important;
    }

    .ws-list .ws-row .jtl-col-title {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
    }

    /* _information.css ≤768px hides .jtl-col-users globally — workspaces
       need the member chips, so re-show them on the second row */
    .ws-list .ws-row .jtl-col-users {
        display: block !important;
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .ws-list .ws-row .jtl-col-default {
        grid-column: 3;
        grid-row: 1;
    }

    .ws-list .ws-row .jtl-col-actions {
        grid-column: 4;
        grid-row: 1;
    }

    /* Projects page header: search (inline 250px) + filter/refresh + toolbar
       buttons total ~577px on one nowrap line — wrap to two tidy rows:
       search row fills the width, toolbar slides right-aligned below it. */
    .project-header-actions {
        flex-wrap: wrap !important;
        width: 100%;
    }

    .project-header-actions > .d-flex {
        flex-wrap: wrap;
        min-width: 0;
    }

    .project-header-actions .jira-search-wrapper {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 140px !important;
    }

    .project-header-actions .project-toolbar-buttons {
        margin-left: auto;
        flex-wrap: wrap;
    }

    /* Task info page: breadcrumb + action buttons wrap; workflow bar scrolls */
    .ti-breadcrumb-row {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .tp-panel-workflow-bar {
        overflow-x: auto;
    }

    /* Task detail sheet header: the close button ships at font-size:0.65rem
       inline (~10px) — too small to see or tap. Enlarge tap targets; the
       important flag beats the inline style. */
    .tp-panel-header {
        padding-top: max(8px, env(safe-area-inset-top)) !important;
    }

    .tp-panel-header .btn-close {
        font-size: 0.95rem !important;
        padding: 10px !important;
        margin: -6px -4px -6px 8px !important;
        opacity: 0.7;
    }

    #taskPanelFullLink {
        font-size: 1.15rem !important;
        padding: 6px 4px;
    }

    /* Project page Activity Log tab: 220px date sidebar + timeline leaves
       ~130px on phones — stack the date list horizontally over the timeline
       (mirrors the global activity-log page's own .gal-* mobile rules) */
    .al-layout {
        flex-direction: column !important;
    }

    .al-date-sidebar {
        width: 100% !important;
        flex-shrink: 0;
    }

    /* Same body-<style> load-order problem as _information.css — important
       required so these beat the tab blade's inline rules. */
    .al-date-list {
        position: static !important;
        flex-direction: row !important;
        gap: 5px !important;
        max-height: none !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        padding: 2px 2px 6px !important;
    }

    .al-date-btn {
        width: auto !important;
        flex-shrink: 0 !important;
    }

    .al-timeline-panel {
        width: 100%;
    }

    /* Entry cards: wrap the trailing time/date line instead of clipping it */
    .al-actor-info,
    .al-time-date-footer {
        flex-wrap: wrap !important;
        row-gap: 2px !important;
    }

    .al-actor-meta,
    .al-time-date-footer {
        font-size: 0.68rem !important;
    }

    /* Tab rows keep Bootstrap's default wrap so every tab stays visible —
       the Jira pages have their own .nav-tabs-scroll-wrap scrolling anyway */

    /* Kanban columns fit small screens (overrides inline 300px styles) */
    .kanban-board {
        gap: 0.75rem;
        padding: 0.75rem;
    }

    .kanban-column {
        min-width: min(260px, 80vw) !important;
        max-width: min(260px, 80vw) !important;
    }

    /* FullCalendar toolbar wraps; title shrinks */
    .fc .fc-toolbar {
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .fc .fc-toolbar-title {
        font-size: 1rem;
    }

    /* Third-party widgets: never wider than the viewport */
    .daterangepicker {
        max-width: calc(100vw - 8px) !important;
        overflow-x: auto !important;
    }

    .select2-container {
        max-width: 100%;
    }

    .select2-dropdown {
        max-width: calc(100vw - 16px) !important;
    }

    .select2-search__field {
        width: 100% !important;
    }

    .flatpickr-calendar {
        max-width: 100vw;
    }

    .tagify {
        max-width: 100%;
    }

    .iti {
        width: 100%;
    }

    /* Toasts span edge-to-edge instead of a fixed 300px block */
    #toast-container {
        left: 8px;
        right: 8px;
        width: auto;
    }

    #toast-container > .toast {
        width: 100%;
        max-width: 100%;
    }

    /* Cards breathe less on phones */
    .card .card-body,
    .card .card-header {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Media and embedded content */
    video,
    iframe,
    embed,
    object {
        max-width: 100%;
    }

    pre {
        white-space: pre-wrap;
        word-break: break-word;
    }
}

/* ---------------------------------------------------------------------------
   < 576px — phones only
--------------------------------------------------------------------------- */
@media screen and (max-width: 575.98px) {

    /* Global search collapses to a compact tap target that still opens
       the search modal on click */
    #layout-navbar .jira-search-wrapper {
        width: 40px;
        flex-shrink: 0;
    }

    #layout-navbar .jira-search-input {
        width: 40px;
        padding: 6px 6px 6px 34px;
        color: transparent;
        caret-color: transparent;
        cursor: pointer;
    }

    #layout-navbar .jira-search-input::placeholder {
        color: transparent;
    }

    /* custom.css hides bx-search below 884px — re-show it inside the wrapper
       so the collapsed field still reads as "search" */
    #layout-navbar .jira-search-wrapper .search-icon {
        display: block !important;
        left: 13px;
    }

    /* Workspace switcher: icon-only on phones (tap still opens the modal) */
    #openWorkspaceSelectorBtn {
        max-width: 44px !important;
        min-width: 44px !important;
        padding: 6px 10px !important;
        justify-content: center;
    }

    #openWorkspaceSelectorBtn #selectedWorkspacesLabel,
    #openWorkspaceSelectorBtn .bx-chevron-down {
        display: none !important;
    }

    #openWorkspaceSelectorBtn .bx-briefcase-alt-2 {
        margin-right: 0 !important;
    }

    /* Time in/out buttons: icon-only on phones */
    .time-btn {
        min-width: 36px !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    .time-btn .btn-label {
        display: none !important;
    }

    /* Global search: hide the quick-access panel on phones (footer already
       has "Go to" links) and pull the modal up so the keyboard has room */
    #globalSearchModal .gs-quick-access {
        display: none !important;
    }

    #globalSearchModal .modal-dialog {
        margin-top: 8px !important;
    }

    #globalSearchModal .modal-body {
        max-height: 65vh !important;
    }

    /* iOS Safari zooms on <16px inputs — scoped to form surfaces (modals,
       offcanvas panels) so dense tables/filters aren't inflated */
    .modal .form-control,
    .modal .form-select,
    .offcanvas .form-control,
    .offcanvas .form-select {
        font-size: 16px;
    }

    /* Task create/edit/detail meta rows (.tp-meta-row): a 1fr 1fr grid whose
       cells hold select2/date inputs with ~155px min-content — at phone width
       the second cell overflows the container and clips sideways. Stack to a
       single column; each cell keeps label left + control filling the row.
       Applies wherever the row appears (modals, offcanvas, side panels, the
       task information page). */
    .tp-meta-row {
        grid-template-columns: 1fr !important;
    }

    .tp-meta-cell {
        grid-column: 1 / -1 !important;
        border-right: none !important;
    }

    .tp-meta-cell .tp-meta-value {
        flex: 1 1 auto;
        min-width: 0;
        text-align: left;
    }

    .tp-meta-value .select2-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Fixed-position user/approver pickers must stay inside the viewport */
    .tp-add-assignee-dropdown {
        min-width: 0 !important;
        width: min(280px, calc(100vw - 16px)) !important;
        max-width: calc(100vw - 16px) !important;
    }

    /* Panel section headers (e.g. Description + AI controls) wrap instead of
       crowding one line */
    .tp-panel-body .d-flex.justify-content-between {
        flex-wrap: wrap;
        row-gap: 6px;
    }
}

/* ---------------------------------------------------------------------------
   Touch devices — reveal controls that are only reachable on hover
--------------------------------------------------------------------------- */
@media (hover: none) {

    /* Kanban task cards: the 3-dot menu is invisible until hover, and the
       workflow/assignee details section only expands on hover — show both */
    .pgb-actions-corner {
        opacity: 1 !important;
    }

    .pgb-actions {
        opacity: 1 !important;
    }

    .pgb-card .pgb-hover-details {
        max-height: none !important;
        opacity: 1 !important;
        margin-top: 2px;
        padding-top: 6px;
        border-color: #f0f1f3 !important;
        transform: none !important;
        pointer-events: all !important;
    }
}