div.dataTables_wrapper div.dataTables_length {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
}

div.dataTables_wrapper .dataTables_filter {
    margin-top: 0 !important;
    margin-bottom: 10px !important;

}

.dataTables_wrapper .dataTables_length select {
    font-size: 12px !important;
}

.div.dataTables_wrapper div.dataTables_length label {
    font-size: 14px;

}

.dataTables_wrapper .dataTables_filter input {
    font-size: 14px;
}





#LoginImageSection {
    display: block;
}


.card-box-custom {
    padding: 15px;
}

.box-header-title {
    border: 1px solid #d4d4d4;
    padding: 10px;
    border-radius: 7px;
    background: #eee;
}








/* ============================================
   WORK HOURS BOX - BASELINE STYLES
   ============================================ */

/* Force work hours images to be responsive on ALL devices */
.work-hours-main-box img,
.work-hours-main-box .col-lg-4 img,
#OverAllProjectDetails img[alt="Icon"],
#TechnologyDetailsBlock img[alt="Icon"] {
    max-width: 100px;
    height: auto;
    display: block;
}

/* ============================================
   RESPONSIVE UTILITIES & BREAKPOINTS
   ============================================ */

/* Responsive Helper Classes */
.mobile-only {
    display: none !important;
}

.tablet-only {
    display: none !important;
}

.desktop-only {
    display: block !important;
}

/* Touch-friendly sizing */
.btn,
button,
/* a.btn {
    min-height: 38px;
} */

/* Responsive container */
.container-fluid {
    padding-left: 15px;
    padding-right: 15px;
}

/* ============================================
   MOBILE FIRST - BASE STYLES (Mobile: ≤576px)
   ============================================ */
@media only screen and (max-width: 576px) {

    /* Login page */
    #LoginImageSection {
        display: none;
    }

    /* General layout */
    body {
        font-size: 14px;
    }

    /* Helper classes */
    .mobile-only {
        display: block !important;
    }

    .desktop-only,
    .tablet-only {
        display: none !important;
    }

    /* Container spacing */
    .container-xxl,
    .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Cards */
    .card,
    .card-box-custom {
        padding: 10px !important;
        margin-bottom: 15px;
    }

    .card-body {
        padding: 12px !important;
    }

    /* Buttons */
    .btn {
        padding: 10px 15px;
        font-size: 14px;
        width: 100%;
        margin-bottom: 8px;
        min-height: 44px;
        /* Touch-friendly */
    }

    .btn-sm {
        padding: 8px 12px;
        font-size: 13px;
    }

    /* Keep copy buttons small on mobile */
    .backup-copy-btn {
        width: auto !important;
        min-width: 36px !important;
        padding: 6px 10px !important;
        font-size: 12px !important;
        margin-bottom: 0 !important;
        min-height: auto !important;
    }

    /* Forms */
    .form-control,
    .form-select {
        font-size: 14px;
        padding: 10px;
    }

    .form-label {
        font-size: 13px;
        margin-bottom: 5px;
    }

    /* Grid system - force single column */
    .row>[class*='col-'] {
        width: 100%;
        margin-bottom: 10px;
    }

    /* Tables - horizontal scroll */
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        display: block !important;
        width: 100% !important;
        min-height: 0.01% !important;
    }

    .table {
        font-size: 12px;
    }

    .table th,
    .table td {
        padding: 8px 5px;
        white-space: normal !important;
        word-wrap: break-word !important;
    }

    /* Modals */
    .modal-dialog {
        margin: 10px;
        max-width: calc(100% - 20px);
    }

    .modal-content {
        border-radius: 8px;
    }

    .modal-body {
        padding: 15px;
    }

    /* Custom components */
    .box-header-title {
        padding: 8px;
        font-size: 14px;
    }

    .box-header-title p {
        font-size: 14px !important;
    }

    /* Work hours boxes */
    .work-hours-main-box {
        padding: 10px !important;
        margin-bottom: 12px;
    }

    .work-hours-main-box h3,
    .work-hours-main-box h4 {
        font-size: 18px !important;
        margin-top: 5px !important;
    }

    .work-hours-main-box small {
        font-size: 12px !important;
        display: block;
    }

    .work-hours-main-box img {
        max-width: 60px !important;
        height: auto !important;
        display: block;
        margin: 0 auto 8px auto;
    }

    /* Extra specific selectors for work hours images */
    .work-hours-main-box .col-lg-4 img,
    .work-hours-main-box div img,
    #OverAllProjectDetails .work-hours-main-box img,
    #TechnologyDetailsBlock .work-hours-main-box img,
    div.work-hours-main-box img[alt="Icon"],
    .project-topbar .work-hours-main-box img {
        max-width: 60px !important;
        width: 60px !important;
        height: auto !important;
    }

    /* Ultra-specific targeting by image source */
    img[src*="completed_hours.png"],
    img[src*="extra_hours.png"],
    img[src*="changes_hours.png"],
    img[src*="all.png"] {
        max-width: 60px !important;
        width: 60px !important;
        height: auto !important;
    }

    /* Target by parent container ID */
    #OverAllProjectDetails img,
    #TechnologyDetailsBlock img {
        max-width: 60px !important;
        height: auto !important;
    }

    /* Staff Profile Page Icons - Mobile Responsive */
    .staff-details-box img[alt="Icon"],
    .staff-details-box .col-lg-2 img,
    .staff-details-box .col-md-2 img,
    .staff-details-box img[src*="staff.png"],
    .staff-details-box img[src*="phone.png"],
    .staff-details-box img[src*="email.png"],
    .staff-details-box img[src*="office-email.png"],
    .staff-details-box img[src*="parent-contact.png"],
    .staff-details-box img[src*="gmail.png"],
    .staff-details-box img[src*="skype.png"],
    .staff-details-box img[src*="slack.png"] {
        max-width: 50px !important;
        width: 50px !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
    }

    /* Leave Info Count Box Icons - Mobile Responsive */
    .leave-info-count-box img,
    .leave-info-count-box .col-lg-5 img,
    .leave-info-count-box .col-md-5 img,
    .leave-info-count-box img[src*="harf-day.png"],
    .leave-info-count-box img[src*="full-day.png"],
    .leave-info-count-box img[src*="total-leave.png"] {
        max-width: 60px !important;
        width: 60px !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
    }

    /* Staff Report Menu Icons - Mobile Responsive */
    .staff-report-menu img,
    .staff-report-menu .col-lg-3 img,
    .staff-report-menu .col-md-3 img,
    .staff-report-menu img[src*="login-history.png"],
    .staff-report-menu img[src*="eod-report.png"],
    .staff-report-menu img[src*="Assigned-Project.png"],
    .staff-report-menu img[src*="Assigned-Visibility.png"],
    .staff-report-menu img[src*="call-details.png"],
    .staff-report-menu img[src*="report.png"] {
        max-width: 50px !important;
        width: 50px !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
    }

    /* Edit Details Button - Mobile Responsive */
    .staff-data-edit-btn {
        position: absolute !important;
        right: -10px !important;
        top: -10px !important;
        width: auto;
        margin: 0;
        display: block;
        text-align: center;
        padding: 6px 12px !important;
        font-size: 12px !important;
    }

    /* Ultra-specific selectors for Edit Details button */
    .staff-details-box .staff-data-edit-btn,
    a.staff-data-edit-btn.btn,
    .btn.staff-data-edit-btn.btn-success {
        position: absolute !important;
        right: -10px !important;
        top: -10px !important;
        width: auto !important;
        margin: 0 !important;
        padding: 6px 12px !important;
        font-size: 12px !important;
    }

    /* Force Image and Text on Same Line - Mobile */
    .staff-details-box .col-lg-3,
    .staff-details-box .col-md-4 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Keep Image on Left, Text on Right - Don't Stack */
    .staff-details-box .col-lg-2,
    .staff-details-box .col-md-2 {
        flex: 0 0 20% !important;
        max-width: 20% !important;
        padding-right: 8px !important;
    }

    .staff-details-box .col-lg-10,
    .staff-details-box .col-md-10 {
        flex: 0 0 80% !important;
        max-width: 80% !important;
        padding-left: 0 !important;
    }

    /* Staff details text sizing for mobile */
    .staff-details-title {
        font-size: 11px !important;
        margin-bottom: 2px !important;
    }

    .staff-details-value {
        font-size: 12px !important;
        word-wrap: break-word;
    }

    /* Leave Info Count Box - Force Same Line Layout */
    .leave-info-count-box .col-lg-5,
    .leave-info-count-box .col-md-5 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }

    .leave-info-count-box .col-lg-7,
    .leave-info-count-box .col-md-7 {
        flex: 0 0 75% !important;
        max-width: 75% !important;
    }

    /* Leave Info Count Box - view-leave.blade.php uses col-lg-4/col-lg-8 */
    .leave-info-count-box .col-lg-4 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }

    .leave-info-count-box .col-lg-8 {
        flex: 0 0 75% !important;
        max-width: 75% !important;
    }

    .leave-info-count-box h5 {
        font-size: 11px !important;
        white-space: nowrap !important;
        overflow: visible !important;
    }

    .leave-info-count-box p {
        font-size: 20px !important;
    }

    /* Staff Report Menu - Force Same Line Layout */
    .staff-report-menu .col-lg-3,
    .staff-report-menu .col-md-3 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
        padding-right: 8px !important;
    }

    .staff-report-menu .col-lg-8,
    .staff-report-menu .col-md-8 {
        flex: 0 0 75% !important;
        max-width: 75% !important;
        padding-left: 0 !important;
    }

    .staff-report-menu h5 {
        font-size: 13px !important;
        line-height: 1.3;
    }

    /* Prevent responsive column styles from affecting modals */
    .modal .col-lg-4,
    .modal .col-lg-8,
    .modal .col-lg-5,
    .modal .col-lg-7 {
        flex: initial !important;
        max-width: initial !important;
    }


    /* Work hours responsive columns - ensure proper alignment on mobile */
    #OverAllProjectDetails .col-lg-3,
    #TechnologyDetailsBlock .col-lg-3 {
        margin-bottom: 12px;
    }

    /* Center align content in work hours boxes on mobile */
    .work-hours-main-box .row {
        text-align: center;
    }

    .work-hours-main-box .col-lg-4 {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 8px;
    }

    .work-hours-main-box .col-lg-8 {
        text-align: center !important;
    }

    /* Project topbar */
    .project-topbar {
        padding: 8px !important;
    }

    /* DataTables responsive - keep entries and search on same row */
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        float: none !important;
        text-align: left !important;
        display: inline-block !important;
        width: auto !important;
        margin: 5px !important;
    }

    .dataTables_wrapper .row:first-child {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px;
    }

    .dataTables_wrapper .row:first-child>div {
        width: auto !important;
        flex: 0 0 auto !important;
    }

    .dataTables_wrapper .dataTables_length label,
    .dataTables_wrapper .dataTables_filter label {
        font-size: 12px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 5px;
        flex-wrap: nowrap !important;
        white-space: nowrap;
    }

    .dataTables_wrapper .dataTables_length select {
        width: 60px !important;
        padding: 4px !important;
        font-size: 12px !important;
        min-height: 32px !important;
    }

    .dataTables_wrapper .dataTables_filter input {
        width: 120px !important;
        padding: 4px 8px !important;
        font-size: 12px !important;
        min-height: 32px !important;
        margin-left: 5px !important;
    }

    /* DataTable pagination - responsive buttons on same line */
    .dataTables_wrapper .dataTables_paginate {
        text-align: center !important;
        margin-top: 0 !important;
        display: inline-block !important;
        vertical-align: middle !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: 3px 6px !important;
        margin: 1px !important;
        font-size: 10px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        display: inline-block !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.current,
    .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        padding: 3px 6px !important;
        font-size: 10px !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.previous,
    .dataTables_wrapper .dataTables_paginate .paginate_button.next {
        padding: 3px 8px !important;
        font-size: 10px !important;
    }

    .dataTables_wrapper .dataTables_info {
        text-align: left !important;
        font-size: 11px !important;
        padding: 8px 0 !important;
        display: inline-block !important;
        vertical-align: middle !important;
    }

    /* DataTables bottom row - info and pagination on same line */
    .dataTables_wrapper .row:last-child {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        padding: 5px 0 !important;
    }

    .dataTables_wrapper .row:last-child>div {
        flex: 0 1 auto !important;
    }

    /* Bootstrap Pagination - responsive on same line */
    .pagination {
        justify-content: center !important;
        flex-wrap: wrap !important;
        margin: 10px 0 !important;
        padding: 5px 0 !important;
    }

    .pagination .page-item {
        margin: 0 1px !important;
    }

    .pagination .page-link {
        padding: 3px 6px !important;
        font-size: 10px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        line-height: 1.5 !important;
        border-radius: 3px !important;
    }

    .pagination .page-item.active .page-link {
        padding: 3px 6px !important;
        font-size: 10px !important;
    }



    /* DataTables */
    div.dataTables_wrapper div.dataTables_length,
    div.dataTables_wrapper div.dataTables_filter {
        text-align: left;
        margin-bottom: 10px;
    }

    div.dataTables_wrapper div.dataTables_info,
    div.dataTables_wrapper div.dataTables_paginate {
        text-align: center;
        margin-top: 10px;
    }
}

/* ============================================
   TABLET (577px - 992px)
   ============================================ */
@media (min-width: 577px) and (max-width: 992px) {

    /* Helper classes */
    .tablet-only {
        display: block !important;
    }

    .mobile-only {
        display: none !important;
    }

    /* Container spacing */
    .container-xxl,
    .container-fluid {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Cards */
    .card-box-custom {
        padding: 12px;
    }

    /* Grid - 2 column layout */
    .row>.col-lg-3,
    .row>.col-lg-4 {
        width: 50%;
        float: left;
    }

    /* Buttons */
    .btn {
        min-height: 42px;
    }

    /* Tables */
    .table {
        font-size: 13px;
    }

    /* Modals */
    .modal-lg {
        max-width: 90%;
    }

    /* Work hours */
    .work-hours-main-box {
        padding: 10px !important;
    }

    .work-hours-main-box img {
        max-width: 70px !important;
        height: auto !important;
    }

    .work-hours-main-box h3,
    .work-hours-main-box h4 {
        font-size: 17px !important;
    }

    .work-hours-main-box small {
        font-size: 13px !important;
    }

    /* Staff Profile Icons - Tablet */
    .staff-details-box img[alt="Icon"],
    .staff-details-box .col-lg-2 img,
    .staff-details-box .col-md-2 img {
        max-width: 60px !important;
        width: 60px !important;
        height: auto !important;
    }

    /* Leave Info Count Box - Tablet */
    .leave-info-count-box img {
        max-width: 70px !important;
        width: 70px !important;
        height: auto !important;
    }

    /* Staff Report Menu - Tablet */
    .staff-report-menu img {
        max-width: 60px !important;
        width: 60px !important;
        height: auto !important;
    }

    /* Edit Details Button - Tablet */
    .staff-data-edit-btn {
        position: absolute;
        right: -15px;
        top: -12px;
        width: auto;
        font-size: 13px;
        padding: 8px 12px;
    }

    /* Staff details text sizing - Tablet */
    .staff-details-title {
        font-size: 12px;
    }

    .staff-details-value {
        font-size: 13px;
    }
}

/* ============================================
   DESKTOP (≥993px)
   ============================================ */
@media only screen and (min-width: 993px) {

    /* Helper classes */
    .desktop-only {
        display: block !important;
    }

    .mobile-only,
    .tablet-only {
        display: none !important;
    }

    /* Reset button widths */
    .btn {
        width: auto;
        margin-bottom: 0;
    }

    /* Staff Profile - Restore Original Image Sizes on Desktop */
    .staff-details-box img[alt="Icon"],
    .staff-details-box .col-lg-2 img,
    .staff-details-box .col-md-2 img {
        max-width: 75% !important;
        width: auto !important;
    }

    /* Leave Info Count Box - Restore Original Size on Desktop */
    .leave-info-count-box img {
        max-width: 100% !important;
        width: auto !important;
    }

    /* Staff Report Menu - Restore Original Size on Desktop */
    .staff-report-menu img {
        max-width: 100% !important;
        width: auto !important;
    }

    /* Edit Details Button - Restore Original Position */
    .staff-data-edit-btn {
        position: absolute !important;
        right: -26px !important;
        top: -15px !important;
        width: auto !important;
    }

    /* Staff Details Text - Original Sizes */
    .staff-details-title {
        font-size: inherit !important;
    }

    .staff-details-value {
        font-size: inherit !important;
    }
}

/* ============================================
   ProjectDetailsModal - Mobile Responsive Buttons
   ============================================ */

/* Mobile (≤576px) - Same line with smaller buttons */
@media only screen and (max-width: 576px) {
    #ProjectDetailsModal .modal-footer {
        display: flex;
        justify-content: center;
        gap: 8px;
        flex-wrap: nowrap;
    }

    #ProjectDetailsModal .modal-footer .btn {
        flex: 0 1 auto;
        min-width: 100px;
        max-width: 140px;
        min-height: 44px;
        /* iOS minimum touch target */
        font-size: 13px;
        padding: 10px 12px;
    }
}

/* Tablet (577px-992px) - Larger horizontal buttons */
@media only screen and (min-width: 577px) and (max-width: 992px) {
    #ProjectDetailsModal .modal-footer .btn {
        min-width: 120px;
        min-height: 40px;
        font-size: 14px;
        padding: 8px 20px;
        margin: 0 5px;
    }
}

/* ============================================
   Additional Modals - Mobile Responsive Buttons
   ============================================ */

/* Mobile (≤576px) - Same line with smaller buttons */
@media only screen and (max-width: 576px) {

    #TestingModuleModal .modal-footer,
    #ChangeRequestModal .modal-footer,
    #ApkModal .modal-footer,
    #NotesModal .modal-footer,
    #LinkModal .modal-footer,
    #BackupModal .modal-footer {
        display: flex;
        justify-content: center;
        gap: 8px;
        flex-wrap: nowrap;
    }

    #TestingModuleModal .modal-footer .btn,
    #ChangeRequestModal .modal-footer .btn,
    #ApkModal .modal-footer .btn,
    #NotesModal .modal-footer .btn,
    #LinkModal .modal-footer .btn,
    #BackupModal .modal-footer .btn {
        flex: 0 1 auto;
        min-width: 100px;
        max-width: 140px;
        min-height: 44px;
        /* iOS minimum touch target */
        font-size: 13px;
        padding: 10px 12px;
    }
}

/* Tablet (577px-992px) - Larger horizontal buttons */
@media only screen and (min-width: 577px) and (max-width: 992px) {

    #TestingModuleModal .modal-footer .btn,
    #ChangeRequestModal .modal-footer .btn,
    #ApkModal .modal-footer .btn,
    #NotesModal .modal-footer .btn,
    #LinkModal .modal-footer .btn,
    #BackupModal .modal-footer .btn {
        min-width: 120px;
        min-height: 40px;
        font-size: 14px;
        padding: 8px 20px;
        margin: 0 5px;
    }
}

/* ============================================
   TechnologyDetailsBlock - Mobile Responsive Buttons
   ============================================ */

/* Mobile (≤576px) - Smaller buttons */
@media only screen and (max-width: 576px) {
    #TechnologyDetailsBlock .btn-sm {
        min-width: 90px;
        max-width: 120px;
        font-size: 12px;
        padding: 6px 10px;
    }
}

/* Tablet (577px-992px) - Medium buttons */
@media only screen and (min-width: 577px) and (max-width: 992px) {
    #TechnologyDetailsBlock .btn-sm {
        min-width: 100px;
        font-size: 13px;
        padding: 7px 12px;
    }
}

/* ============================================
   TechnologyDetailsBlock - Work Hours Flexbox
   ============================================ */

/* Make image and text same line - All screens */
#TechnologyDetailsBlock .work-hours-main-box .row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

/* Image column - fixed width */
#TechnologyDetailsBlock .work-hours-main-box .col-lg-4 {
    flex: 0 0 auto;
    width: auto;
    padding: 0;
}

/* Image sizing */
#TechnologyDetailsBlock .work-hours-main-box img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

/* Text column - flexible width */
#TechnologyDetailsBlock .work-hours-main-box .col-lg-8 {
    flex: 1 1 auto;
    padding: 0;
}

/* Mobile - smaller image */
@media only screen and (max-width: 576px) {
    #TechnologyDetailsBlock .work-hours-main-box img {
        width: 40px;
        height: 40px;
    }

    #TechnologyDetailsBlock .work-hours-main-box small {
        font-size: 0.875rem !important;
    }

    #TechnologyDetailsBlock .work-hours-main-box h3,
    #TechnologyDetailsBlock .work-hours-main-box h4 {
        font-size: 1.2rem !important;
        margin: 0;
    }
}

/* Tablet */
@media only screen and (min-width: 577px) and (max-width: 992px) {
    #TechnologyDetailsBlock .work-hours-main-box img {
        width: 45px;
        height: 45px;
    }
}/* ============================================
   View Project - Close Button Responsive
   ============================================ */

/* Mobile - Adjust position for smaller screens */
@media only screen and (max-width: 576px) {
    button[onclick="CloseProjectLocationArea()"] {
        right: 5px !important;
        top: 10px !important;
        position: absolute !important;
        z-index: 10;
    }
}

/* Tablet - Slightly adjust position */
@media only screen and (min-width: 577px) and (max-width: 992px) {
    button[onclick="CloseProjectLocationArea()"] {
        right: 0px !important;
        top: 15px !important;
    }
}
/* Update Close Button - Ensure parent container has relative positioning */
@media only screen and (max-width: 992px) {

    .tech-details-area,
    #TechnologyDetailsBlock {
        position: relative !important;
    }

    button[onclick="CloseProjectLocationArea()"] {
        position: absolute !important;
        right: 10px !important;
        top: 10px !important;
        z-index: 100 !important;
    }
}
/* Close Button - Updated positions based on testing */

/* Large Tablet/Small Desktop (768px - 992px) */
@media only screen and (min-width: 768px) and (max-width: 992px) {
    button[onclick="CloseProjectLocationArea()"] {
        right: -15px !important;
        top: 200px !important;
        position: absolute !important;
        z-index: 10;
    }
}

/* Tablet (577px - 767px) */
@media only screen and (min-width: 577px) and (max-width: 767px) {
    button[onclick="CloseProjectLocationArea()"] {
        right: -15px !important;
        top: 150px !important;
        position: absolute !important;
        z-index: 10;
    }
}

/* Mobile (≤576px) */
@media only screen and (max-width: 576px) {
    button[onclick="CloseProjectLocationArea()"] {
        right: -5px !important;
        top: 440px !important;
        position: absolute !important;
        z-index: 10;
    }
}