/*
 * Responsive & layering fixes — loaded after every other stylesheet
 * (layouts/app.blade.php, layouts/guest.blade.php).
 * Breakpoints match Tailwind: sm 640, md 768, lg 1024, xl 1280.
 */

/* ===================== Project board: row ⋮ menus =====================
   The open row is lifted (.menu-open-lift, project-show.css), but the rule
   `.project-show-root .task-row.task-columns-row > :first-child { z-index:3 !important }`
   is MORE specific than `.menu-open-lift > :first-child`, so the sticky title
   cell holding the menu stayed at z-index 3 and later rows / the next section
   painted over the lower menu items (Rename / Delete). Same specificity +1: */
.project-show-root .task-row.task-columns-row.menu-open-lift > :first-child {
    z-index: 10040 !important;
}

/* Lift every wrapper around an open menu too (subtask list, task list,
   section), so no later sibling can paint over it. */
.project-show-root .subtask-list:has(.menu-open-lift),
.project-show-root .task-list:has(.menu-open-lift),
.project-show-root [data-section-id]:has(.menu-open-lift),
.project-show-root [data-section-id].section-menu-open {
    position: relative;
    z-index: 10030;
}

/* ===================== App shell on phones (< 768px) =====================
   Before: icon rail (48px) + projects sidebar (240px) stayed in the page
   flow, leaving ~90px for content on a phone. Now the projects/HR sidebar
   floats OVER the content (tap outside or the ☰ button to close). */
@media (max-width: 767.98px) {
    .app-shell {
        position: relative;
    }

    .projects-sidebar-panel.projects-sidebar-open,
    .projects-sidebar-panel.projects-sidebar-open1 {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 48px; /* right of the icon rail */
        z-index: 60;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    }

    .app-sidebar-backdrop {
        position: absolute;
        inset: 0;
        z-index: 55;
        background: rgba(0, 0, 0, 0.5);
    }
}

@media (min-width: 768px) {
    .app-sidebar-backdrop {
        display: none !important;
    }
}

/* ===================== Content safety nets =====================
   Media never wider than its container. */
img, video, iframe, canvas, svg {
    max-width: 100%;
}
/* (height is left to each image's own classes — h-8 avatars etc. stay exact) */

/* Phones: tables not already inside a scroll wrapper scroll sideways instead
   of pushing the whole page wider. (Tablets and up keep normal table layout.) */
@media (max-width: 639.98px) {
    table:not(.overflow-x-auto table):not(.overflow-auto table):not(.overflow-x-scroll table) {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Modals / dialogs (fixed full-screen overlay → centred panel): on phones and
   short screens never taller than the screen (scroll inside), small side
   margin. Larger screens keep their normal (unclipped) dialogs. */
@media (max-width: 639.98px), (max-height: 640px) {
    .fixed.inset-0 > [class*="max-w-"] {
        max-height: calc(100dvh - 2rem);
        overflow-y: auto;
        width: calc(100% - 1.5rem);
    }
}

/* Long unbroken strings (emails, URLs, file names) wrap instead of overflowing */
td, th, .break-anywhere {
    overflow-wrap: break-word; /* not "anywhere": that would let columns collapse */
}

/* Touch devices: comfortable tap targets for icon buttons */
@media (pointer: coarse) {
    .hamburger-btn,
    .subtask-menu-trigger {
        min-width: 32px;
        min-height: 32px;
    }
}