/* ==========================================================================
   TASK MANAGEMENT - MOBILE RESPONSIVE STYLESHEET
   ========================================================================== */

/* Universal Box Sizing & Overflows */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
    margin: 0;
    padding: 0;
}

img, svg, video {
    max-width: 100% !important;
    height: auto;
}

/* Text Wrapping Guard */
p, h1, h2, h3, h4, h5, h6, span, td, th, div, label, a {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Responsive Table Wrapper */
.table-responsive {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin-bottom: 1rem;
    border-radius: 8px;
}

.table-responsive table {
    width: 100% !important;
    min-width: 600px; /* Ensures tables don't squeeze dangerously on small screens */
}

/* Topbar Hamburger Menu Button */
.mobile-menu-toggle {
    display: none;
    background: transparent;
    border: none;
    color: #374151;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    -webkit-tap-highlight-color: transparent;
}

.mobile-menu-toggle:hover,
.mobile-menu-toggle:focus {
    background: #f3f4f6;
    outline: none;
}

/* Sidebar Backdrop Overlay */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.6);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
}

.sidebar-overlay.active,
body.sidebar-open .sidebar-overlay {
    opacity: 1;
    pointer-events: auto;
}


/* ==========================================================================
   BREAKPOINT: Large Tablets & Laptops (< 1024px)
   ========================================================================== */

@media (max-width: 1023.98px) {

    /* Off-Canvas Sidebar Setup */
    .layout {
        position: relative !important;
        flex-direction: column !important;
        min-height: 100vh !important;
    }

    .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 260px !important;
        height: 100vh !important;
        z-index: 9999 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: none !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .sidebar.mobile-open,
    body.sidebar-open .sidebar {
        transform: translateX(0) !important;
        box-shadow: 4px 0 25px rgba(0, 0, 0, 0.3) !important;
    }

    .main {
        margin-left: 0 !important;
        width: 100% !important;
        min-width: 100% !important;
        flex: 1;
    }

    /* Topbar Layout */
    .topbar {
        padding: 0 16px !important;
        height: 60px !important;
    }

    .mobile-menu-toggle {
        display: inline-flex !important;
    }

    .page-title {
        font-size: 18px !important;
    }

    .user-name {
        font-size: 13px !important;
    }

    .user-role {
        font-size: 11px !important;
    }

    /* Main Content Padding */
    .main > div:not(.topbar),
    .content,
    .content-area,
    .container {
        padding: 16px !important;
    }

    /* Dashboard Metrics & Summary Grids */
    .stats,
    .stats-grid,
    .metrics,
    .metrics-grid,
    .dashboard-grid,
    .summary-cards,
    .summary-grid,
    .cards-grid,
    .attendance-info-grid,
    .reports-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }

    .info-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }

    /* Forms 2-Column to 1-Column */
    .form-grid,
    .form-row,
    .two-column,
    .filter-grid,
    .filters-grid,
    .filter-form,
    .filter-bar,
    .filters-bar,
    .search-filter-box {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
}


/* ==========================================================================
   BREAKPOINT: Tablets & Standard Mobile (< 768px)
   ========================================================================== */

@media (max-width: 767.98px) {

    .topbar {
        padding: 0 12px !important;
    }

    .user-name {
        max-width: 130px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Card Padding & Spacing */
    .card,
    .stat-card,
    .metric-card,
    .welcome-card,
    .attendance-summary {
        padding: 16px !important;
        margin-bottom: 16px !important;
    }

    /* Attendance Buttons on Staff Dashboard */
    .attendance-actions,
    .on-duty-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .attendance-actions button,
    .attendance-actions a,
    .attendance-actions form,
    .on-duty-actions button,
    .on-duty-actions a,
    .on-duty-actions form {
        width: 100% !important;
    }

    .attendance-actions button,
    .on-duty-actions button,
    .btn {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 14px !important;
    }

    /* Inputs & Form Elements */
    .form-group input,
    .form-group select,
    .form-group textarea,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="date"],
    select,
    textarea {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 42px;
        font-size: 14px !important;
        box-sizing: border-box !important;
    }

    textarea {
        min-height: 90px;
    }

    .form-actions,
    .card-actions,
    .page-actions {
        display: flex !important;
        flex-direction: column-reverse !important;
        gap: 10px !important;
        width: 100% !important;
        margin-top: 16px !important;
    }

    .form-actions .btn,
    .card-actions .btn,
    .page-actions .btn,
    .btn-primary,
    .btn-secondary {
        width: 100% !important;
        margin: 0 !important;
    }

    /* Filter Bars & Search Forms */
    .filter-bar,
    .filters-form,
    .search-filter-box,
    .filters-bar,
    .filter-form {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .filter-bar .form-group,
    .filters-form .form-group,
    .filter-bar input,
    .filter-bar select,
    .filter-bar button {
        width: 100% !important;
    }

    /* Discussion / Chat Section */
    .discussion-card,
    .message-card {
        padding: 14px !important;
    }

    .message-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
    }

    .discussion-form button {
        width: 100% !important;
        margin-top: 10px !important;
    }

    /* Modals */
    .pause-modal-card,
    .logout-modal-card,
    .modal-card {
        width: calc(100% - 24px) !important;
        max-width: 100% !important;
        padding: 18px !important;
        margin: 12px !important;
        border-radius: 10px !important;
    }

    .pause-modal-actions,
    .logout-modal-actions,
    .modal-actions {
        display: flex !important;
        flex-direction: column-reverse !important;
        gap: 8px !important;
    }

    .pause-modal-actions button,
    .pause-modal-actions a,
    .logout-modal-actions button,
    .logout-modal-actions a,
    .modal-actions button,
    .modal-actions a {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        min-height: 44px !important;
    }

    /* Task Detail / View Information Grids */
    .info-grid {
        grid-template-columns: 1fr !important;
    }

    /* Login Page */
    .login-card,
    .login-container,
    .login-box {
        width: calc(100% - 28px) !important;
        max-width: 400px !important;
        padding: 24px 18px !important;
        margin: 20px auto !important;
    }
}


/* ==========================================================================
   BREAKPOINT: Small Mobile (< 480px / 360px)
   ========================================================================== */

@media (max-width: 479.98px) {

    .main > div:not(.topbar),
    .content,
    .content-area,
    .container {
        padding: 12px 10px !important;
    }

    .stats,
    .stats-grid,
    .metrics,
    .metrics-grid,
    .dashboard-grid,
    .summary-cards,
    .summary-grid,
    .cards-grid,
    .attendance-info-grid,
    .reports-grid {
        grid-template-columns: 1fr !important;
    }

    .page-title {
        font-size: 16px !important;
    }

    .topbar .user-name {
        display: none !important;
    }

    .topbar .user-role {
        font-size: 10px !important;
    }

    /* Available Jobs & Task List Cards */
    .task-card,
    .job-card {
        padding: 12px !important;
    }

    .task-card-header,
    .job-card-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
    }

    .task-card-footer,
    .job-card-footer {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    .task-card-footer button,
    .task-card-footer a,
    .job-card-footer button,
    .job-card-footer a {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }

    /* Compact Table Font Sizes */
    table th, table td {
        padding: 8px 10px !important;
        font-size: 13px !important;
    }
}