/* ==================================================
   RESPONSIVE CSS
   POLIMAS E-FindHub
================================================== */


/* ==================================================
   MOBILE NAVBAR
================================================== */

@media (max-width: 768px) {

    .user-navbar {
        position: sticky;
        top: 0;
        z-index: 1000;
    }

    /* Navbar Container */

    .navbar-container {
        position: relative;
        width: 92%;
        min-height: 75px;
        padding: 10px 0;

        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    /* Logo */

    .navbar-logo {
        gap: 10px;
        margin: 0;
    }

    .navbar-logo img {
        width: 55px;
        height: 55px;
    }

    .logo-text h2 {
        font-size: 16px;
    }

    .logo-text span {
        font-size: 10px;
    }

    /* Hamburger */

    .hamburger-btn {
        width: 45px;
        height: 45px;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        gap: 5px;

        border: none;
        border-radius: 10px;

        background: #ffffff;
        cursor: pointer;
    }

    .hamburger-btn span {
        display: block;

        width: 23px;
        height: 3px;

        border-radius: 5px;

        background: #34186F;

        transition: 0.2s ease;
    }

    /* Mobile Navigation Panel */

    .mobile-nav-panel {
        display: none;

        position: absolute;

        top: calc(100% + 5px);
        left: 0;
        right: 0;

        padding: 18px;

        background: #ffffff;

        border-radius: 0 0 18px 18px;

        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);

        z-index: 2000;
    }

    .navbar-container.mobile-open .mobile-nav-panel {
        display: block;
    }

    /* Menu */

    .navbar-menu {
        width: 100%;

        display: flex;
        flex-direction: column;

        align-items: stretch;

        gap: 0;

        margin: 0;
        padding: 0;

        list-style: none;
    }

    .navbar-menu > li {
        width: 100%;
        text-align: left;
    }

    .navbar-menu > li > a {
        display: block;

        padding: 13px 12px;

        border-radius: 8px;

        font-size: 15px;
    }

    .navbar-menu > li > a:hover {
        background: #F1EBFF;
    }

    /* ==================================================
       MOBILE REPORT DROPDOWN
    ================================================== */

    .navbar-menu .dropdown {
        position: relative;
    }

    .navbar-menu .dropdown-menu {
        position: static;

        display: none;

        width: 100%;

        padding: 0;
        margin: 0;

        transform: none;

        background: #F8F5FF;

        border-radius: 8px;

        box-shadow: none;

        z-index: auto;
    }

    /*
       On mobile, do NOT open dropdown by hover.
       Open it by focus or .open class.
    */

    .navbar-menu .dropdown:hover .dropdown-menu {
        display: none;
    }

    .navbar-menu .dropdown:focus-within .dropdown-menu,
    .navbar-menu .dropdown.open .dropdown-menu {
        display: block;
    }

    /* Remove desktop invisible hover bridge on mobile */

    .navbar-menu .dropdown::after {
        display: none;
    }

    /* Dropdown Links */

    .navbar-menu .dropdown-menu li {
        width: 100%;
    }

    .navbar-menu .dropdown-menu li a {
        display: block;

        padding: 10px 25px;

        font-size: 14px;

        color: #34186F;

        text-decoration: none;
    }

    .navbar-menu .dropdown-menu li a:hover {
        background: #EEE6FF;
        color: #6F42C1;
    }

    /* ==================================================
       PROFILE
    ================================================== */

    .profile-menu {
        width: 100%;

        display: block;

        margin-top: 12px;
        padding-top: 12px;

        border-top: 1px solid #eee;
    }

    .profile-btn {
        width: 100%;

        min-width: 0;

        padding: 12px;

        justify-content: center;

        border-radius: 25px;

        background: #F1EBFF;
    }

    /* Profile Dropdown */

    .profile-dropdown {
        position: static;

        width: 100%;

        margin-top: 8px;

        border-radius: 10px;

        box-shadow: none;

        border: 1px solid #eee;

        transform: none;
    }

    .profile-dropdown.show {
        transform: none;
    }

}


/* ==================================================
   USER GUIDE
================================================== */

@media (max-width: 900px) {

    .workflow {
        flex-direction: column;
    }

    .flow-arrow {
        transform: rotate(90deg);
    }

    .process-container {
        grid-template-columns: 1fr;
        max-width: 600px;
    }

    .how-it-works h2 {
        font-size: 38px;
    }

}


/* ==================================================
   USER GUIDE - MOBILE
================================================== */

@media (max-width: 600px) {

    .how-it-works {
        width: 100%;
        box-sizing: border-box;

        margin: 30px 0;

        padding: 45px 15px;

        border-radius: 20px;
    }

    .how-it-works h2 {
        font-size: 32px;
        margin-bottom: 30px;
    }

    .process-container {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .process-card {
        width: 100%;
        padding: 25px 15px;
    }

    .claim-process {
        padding: 45px 15px;
    }

    .claim-process h2 {
        font-size: 32px;
    }

    .claim-flow {
        flex-direction: column;
    }

    .claim-step {
        width: 100%;
        box-sizing: border-box;
    }

    .claim-arrow {
        transform: rotate(90deg);
    }

    /* About Hero */

    .about-hero {
        width: 100%;

        min-height: auto !important;

        overflow: hidden;
    }

    .about-overlay {
        width: 100%;

        min-height: auto !important;

        padding: 40px 15px !important;

        box-sizing: border-box;

        display: block !important;
    }

    .hero-container {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 auto !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: stretch !important;

        justify-content: center !important;

        gap: 30px !important;

        box-sizing: border-box;
    }

    .hero-left {
        width: 100% !important;
        max-width: 100% !important;

        box-sizing: border-box;

        text-align: center;
    }

    .hero-left h1 {
        width: 100%;

        font-size: 36px !important;

        line-height: 1.2;

        word-wrap: break-word;

        margin-bottom: 20px;
    }

    .hero-left p {
        width: 100%;

        font-size: 16px !important;

        line-height: 1.6;
    }

    .feature-card {
        width: 100% !important;
        max-width: 100% !important;

        box-sizing: border-box;

        padding: 25px 20px !important;

        border-radius: 20px;
    }

    .feature-card h2 {
        font-size: 28px !important;

        text-align: center;

        margin-bottom: 25px;
    }

    .feature-item {
        width: 100%;

        box-sizing: border-box;

        display: flex;

        gap: 12px;

        margin-bottom: 20px;
    }

    .feature-item h3 {
        font-size: 18px;
    }

    .feature-item p {
        font-size: 15px;

        line-height: 1.5;
    }

    .hero-links {
        text-align: center;
    }

}


/* ==================================================
   HOME PAGE RESPONSIVE
================================================== */


/* TABLET */

@media (max-width: 992px) {

    .hero-section {
        flex-direction: column;

        text-align: center;

        padding: 40px;

        box-sizing: border-box;
    }

    .hero-left {
        width: 100%;
    }

    .hero-right {
        width: 100%;

        margin-top: 40px;

        text-align: center;
    }

    .hero-buttons {
        justify-content: center;

        flex-wrap: wrap;
    }

}


/* HOME INFORMATION */

@media (max-width: 900px) {

    .home-info-grid {
        grid-template-columns: 1fr;
    }

}


/* POSTER BUTTONS */

@media (max-width: 600px) {

    .poster-actions {
        flex-direction: column;

        width: 90%;

        margin-left: auto;
        margin-right: auto;
    }

    .poster-actions button {
        width: 100%;
    }

}


/* MOBILE HOME HERO */

@media (max-width: 600px) {

    .hero-section {
        height: auto;

        min-height: 900px;

        padding: 50px 20px;

        box-sizing: border-box;
    }

    .hero-overlay {
        width: 100%;

        flex-direction: column;

        gap: 30px;
    }

    .hero-left {
        width: 100%;
    }

    .hero-left h1 {
        font-size: 32px;

        line-height: 1.3;
    }

    .hero-left p {
        font-size: 15px;

        line-height: 24px;
    }

    .hero-right {
        width: 100%;

        margin-top: 10px;
    }

    .collection-card {
        width: 100%;

        padding: 25px;

        box-sizing: border-box;
    }

    .collection-card h2 {
        font-size: 22px;
    }

    .collection-card p {
        font-size: 14px;

        line-height: 24px;
    }

    .home-info-grid {
        width: 90%;

        grid-template-columns: 1fr;
    }

    .highlights-card {
        padding: 25px;
    }

    .highlight-grid {
        grid-template-columns: 1fr 1fr;

        gap: 12px;
    }

    .highlight-card {
        padding: 18px 10px;
    }

    .highlight-card strong {
        font-size: 24px;
    }

    .highlight-card span {
        font-size: 13px;
    }

}


/* ==================================================
   AUTH PAGE RESPONSIVE
================================================== */

@media (max-width: 768px) {

    .register-form {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 576px) {

    .auth-page {
        padding: 20px;
    }

    .auth-card {
        width: 100%;
    }

    .auth-header {
        padding: 30px 20px;
    }

    form {
        padding: 25px;
    }

}


/* ==================================================
   REPORT PAGE RESPONSIVE
================================================== */

@media (max-width: 768px) {

    .form-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 600px) {

    .report-container {
        padding: 25px 10px;
    }

    .report-card {
        width: 100%;

        padding: 30px 20px;

        border-radius: 18px;
    }

    .report-header {
        margin-bottom: 25px;
    }

    .report-header h2 {
        font-size: 22px;
    }

    .report-header p {
        font-size: 14px;
    }

    .form-grid {
        grid-template-columns: 1fr;

        gap: 0;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        width: 100%;

        box-sizing: border-box;

        font-size: 14px;
    }

    input[type="file"] {
        width: 100%;

        box-sizing: border-box;

        font-size: 13px;
    }

    .submit-btn {
        width: 100%;

        font-size: 15px;
    }

}


/*Admin Table - Report Detail*/

@media (max-width: 800px) {

    .detail-card {

        flex-direction: column;

    }

    .detail-content {

        display: flex;

        gap: 40px;

        align-items: flex-start;

    }

}


/* ===============================
   MOBILE RESPONSIVE - REPORTS
================================ */

@media (max-width: 600px) {

    /* Report Filter */

    .report-filter {

        display: flex;

        flex-direction: column;

        gap: 10px;

        width: 100%;

    }

    .report-filter input,
    .report-filter select {

        width: 100%;

        box-sizing: border-box;

    }

    /* Table Container */

    .report-table-box {

        width: 100%;

        box-sizing: border-box;

        padding: 15px;

        overflow-x: auto;

    }

    /* Keep Table Readable */

    .report-table-box table {

        min-width: 700px;

    }

    .report-table-box th,
    .report-table-box td {

        padding: 12px;

        white-space: nowrap;

    }

    /* Gallery */

    .admin-content .poster-table-wrapper,
    .admin-content .poster-tools {

        width: 100%;

        box-sizing: border-box;

    }

    .gallery-top-action {

        width: 100%;

        box-sizing: border-box;

    }

}

/* ==================================================
   ADMIN DASHBOARD RESPONSIVE
================================================== */

@media (max-width: 768px) {

    .admin-dashboard {
        width: 100%;
        padding: 20px 15px;
        box-sizing: border-box;
    }

    .admin-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .admin-page-header h1 {
        font-size: 28px;
    }

    .admin-page-header .header-actions {
        width: 100%;
    }

    .admin-page-header .header-actions a,
    .admin-page-header .header-actions button {
        width: 100%;
        box-sizing: border-box;
    }

    .poster-tools {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .poster-tools input,
    .poster-tools select,
    .poster-tools button {
        width: 100%;
        box-sizing: border-box;
    }

    .admin-table-wrapper {
        overflow-x: auto;
        width: 100%;
    }

    .admin-table {
        min-width: 700px;
    }

    .admin-gallery {
        grid-template-columns: 1fr;
    }

}


/* ==================================================
   POSTER MODAL - MOBILE
================================================== */

@media (max-width: 600px) {

    .poster-modal-content {
        width: 95%;
        max-height: 90vh;
        overflow-y: auto;
        padding: 20px;
    }

    .poster-modal-content img {
        max-width: 100%;
        height: auto;
    }

}


/* ==================================================
   ADMIN DASHBOARD STATS
================================================== */

@media (max-width: 1000px) {

    .stats-container {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 600px) {

    .stats-container {
        grid-template-columns: 1fr;
    }

}


/* ==================================================
   DASHBOARD CHART
================================================== */

.proof-image {
    max-width: 100%;
    height: auto;
    display: block;
}

.proof-image-container p {
    word-break: break-word;
}

.chart-container {
    width: 100%;
    overflow-x: auto;
}

.chart-box {
    width: 100%;
    box-sizing: border-box;
}

.chart-box h2 {
    font-size: 22px;
}

.chart-box canvas {
    max-width: 100%;
}


/* ==================================================
   FINAL MOBILE DASHBOARD FIX
================================================== */

@media (max-width: 600px) {

    .admin-dashboard {
        width: 100% !important;
        max-width: 100% !important;

        margin: 20px auto !important;
        padding: 15px !important;

        box-sizing: border-box;
    }

    .admin-dashboard .page-header {
        width: 100%;

        flex-direction: column;

        align-items: flex-start;

        gap: 15px;
    }

    .admin-dashboard .page-header h1 {
        font-size: 25px;
        line-height: 1.3;

        word-break: break-word;
    }

    .admin-dashboard .page-header p {
        font-size: 14px;

        line-height: 1.5;
    }

    .admin-dashboard .header-actions {
        width: 100%;

        display: flex;

        flex-direction: column;

        gap: 10px;
    }

    .admin-dashboard .header-actions a,
    .admin-dashboard .header-actions button {
        width: 100%;

        box-sizing: border-box;

        text-align: center;
    }

    .stats-container {
        width: 100% !important;

        grid-template-columns: 1fr !important;

        gap: 15px;
    }

    .stat-card {
        width: 100% !important;

        min-width: 0;

        box-sizing: border-box;
    }

    .dashboard-grid {
        width: 100%;

        grid-template-columns: 1fr !important;

        gap: 20px;
    }

    .chart-container {
        width: 100%;

        overflow-x: hidden;
    }

    .chart-box {
        width: 100% !important;

        min-width: 0;

        padding: 15px !important;

        box-sizing: border-box;
    }

    .chart-box canvas {
        width: 100% !important;

        max-width: 100% !important;

        height: auto !important;
    }

    .proof-image-container {
        width: 100%;
    }

    .proof-image {
        max-width: 100% !important;

        height: auto !important;
    }

    .poster-tools {
        width: 100%;

        flex-direction: column;

        align-items: stretch;

        gap: 10px;
    }

    .poster-tools input,
    .poster-tools select,
    .poster-tools button {
        width: 100% !important;

        box-sizing: border-box;
    }

    .poster-table-wrapper {
        width: 100%;

        overflow-x: auto;

        box-sizing: border-box;
    }

    .poster-table {
        min-width: 700px;
    }

}


/* ==================================================
   ADMIN LAYOUT RESPONSIVE
================================================== */

@media (max-width: 900px) {

    .admin-sidebar {
        width: 220px;
    }

    .admin-content {
        margin-left: 220px;
    }

    .admin-wrapper {
        display: flex;
    }

}


@media (max-width: 600px) {

    .admin-wrapper {
        display: block;
    }

    .admin-sidebar {
        position: relative;

        width: 100%;

        height: auto;

        min-height: auto;

        transform: none;
    }

    .admin-content {
        margin-left: 0;

        width: 100%;

        box-sizing: border-box;
    }

    .admin-sidebar .sidebar-menu {
        display: flex;

        flex-direction: column;
    }

}


@media screen and (max-width: 900px) {

    .admin-sidebar {
        width: 220px;
    }

    .admin-content {
        margin-left: 220px;
    }

}


@media screen and (max-width: 600px) {

    .admin-sidebar {
        width: 100%;
    }

    .admin-content {
        margin-left: 0;
    }

}


/* ==================================================
   CLAIM DETAILS - MOBILE
================================================== */

@media (max-width: 600px) {

    .claim-detail-container {
        width: 100%;

        padding: 20px 15px;

        box-sizing: border-box;
    }

    .claim-detail-card {
        width: 100%;

        padding: 20px;

        box-sizing: border-box;

        border-radius: 15px;
    }

    .claim-detail-card h2 {
        font-size: 22px;

        line-height: 1.3;
    }

    .claim-info p {
        font-size: 14px;

        line-height: 1.6;
    }

    .claim-info strong {
        display: block;

        margin-bottom: 3px;
    }

    .proof-section img {
        max-width: 100%;

        height: auto;

        display: block;
    }

    .back-profile-btn {
        width: 100%;

        text-align: center;

        box-sizing: border-box;
    }

}


/* ==========================================
   CONTACT PAGE - TABLET
========================================== */

@media (max-width: 1100px) {

    .contact-main-card {
        width: 90%;
        padding: 35px;
    }

    .contact-hero {
        grid-template-columns: 1fr;
    }

    .contact-hero-text {
        text-align: center;
    }

    .contact-hero p {
        margin: 0 auto;
    }

    .team-footer-container {
        width: 90%;
        grid-template-columns: 1fr;
    }

    .team-footer-title {
        text-align: center;
    }

}


/* ==========================================
   CONTACT PAGE - TABLET / MOBILE
========================================== */

@media (max-width: 800px) {

    .contact-wrapper {
        grid-template-columns: 1fr;
    }

    .team-footer-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .form-row {
        grid-template-columns: 1fr;
    }

}


/* ==========================================
   CONTACT PAGE - MOBILE
========================================== */

@media (max-width: 550px) {

    .contact-page {
        padding-top: 25px;
    }

    .contact-main-card {
        width: 92%;
        padding: 22px;
    }

    .contact-hero h1 {
        font-size: 31px;
    }

    .message-card,
    .feedback-card {
        padding: 22px;
    }

    .team-footer-list {
        grid-template-columns: 1fr;
    }

    .team-member {
        border-left: none;
        border-bottom: 1px solid #514D57;
    }

}

/* ==================================================
   DASHBOARD RESPONSIVE
================================================== */

@media (max-width: 992px) {

    .welcome-section {
        padding: 30px;
    }

    .welcome-section h1 {
        font-size: 30px;
    }

    .dashboard-cards {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 600px) {

    .welcome-section {
        padding: 25px 20px;
    }

    .welcome-section h1 {
        font-size: 24px;
    }

    .welcome-section p {
        font-size: 14px;
    }

    .dashboard-cards {
        grid-template-columns: 1fr;
    }

}


/* ==================================================
   EDIT REPORT RESPONSIVE
================================================== */

@media (max-width: 700px) {

    .edit-report-container {
        width: 100%;

        padding: 20px 15px;

        box-sizing: border-box;
    }

    .edit-report-card {
        width: 100%;

        padding: 25px 20px;

        box-sizing: border-box;
    }

    .edit-report-card h2 {
        font-size: 24px;
    }

    .edit-report-form .form-group {
        width: 100%;
    }

    .edit-report-form input,
    .edit-report-form select,
    .edit-report-form textarea {
        width: 100%;

        box-sizing: border-box;
    }

    .edit-report-actions {
        flex-direction: column;

        gap: 10px;
    }

    .edit-report-actions button,
    .edit-report-actions a {
        width: 100%;

        text-align: center;

        box-sizing: border-box;
    }

}


/* ==================================================
   GALLERY RESPONSIVE
================================================== */

@media (max-width: 1100px) {

    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }

}


@media (max-width: 800px) {

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 520px) {

    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .gallery-card img {
        width: 100%;

        height: auto;
    }

}


/* ===========================
   DETAILS RESPONSIVE
=========================== */

@media(max-width:900px) {

    .details-card {

        grid-template-columns: 1fr;

    }

}


/* ===========================
   ITEM PAGE - RESPONSIVE
=========================== */

@media(max-width:768px) {


    .item-container {

        width: 100%;

        padding: 25px 15px;

        margin: 20px auto;

        box-sizing: border-box;

    }


    .page-header {

        margin-bottom: 20px;

    }


    .page-header h1 {

        font-size: 30px;

        line-height: 1.2;

    }


    .page-header p {

        font-size: 14px;

        line-height: 1.5;

    }


    /* ===========================
       FILTER
    =========================== */

    .filter-box {

        width: 100%;

        padding: 18px;

        display: flex;

        flex-direction: column;

        gap: 12px;

        align-items: stretch;

        margin-bottom: 25px;

        box-sizing: border-box;

    }


    .search-group {

        width: 100%;

    }


    .search-group input {

        width: 100%;

        padding: 13px 15px;

        font-size: 14px;

        box-sizing: border-box;

    }


    .filter-group {

        width: 100%;

        display: flex;

        flex-direction: column;

        gap: 10px;

    }


    .filter-group select {

        width: 100%;

        padding: 13px 15px;

        font-size: 14px;

        box-sizing: border-box;

    }


    .filter-group button {

        width: 100%;

        padding: 13px 20px;

        box-sizing: border-box;

    }


    /* ===========================
       ITEM CARDS
    =========================== */

    .item-grid {

        grid-template-columns: 1fr;

        gap: 20px;

    }


    .item-card {

        width: 100%;

    }


    .item-card img {

        height: 220px;

    }


    .item-body {

        padding: 18px;

    }


    .item-body h3 {

        font-size: 20px;

    }


    /* ===========================
       VIEW DETAILS - MOBILE
    =========================== */

    .item-card .item-body .view-btn {

        width: 100% !important;

        box-sizing: border-box;

        text-align: center;

    }


    /* ===========================
       ITEM DETAILS
    =========================== */

    .details-container {

        width: 100%;

        padding: 20px 15px;

        margin: 20px auto;

        box-sizing: border-box;

    }


    .details-card {

        grid-template-columns: 1fr;

        gap: 20px;

        padding: 20px;

        box-sizing: border-box;

    }


    .details-info h2 {

        font-size: 24px;

    }


    .button-group {

        flex-direction: column;

    }


    .back-btn,
    .claim-btn {

        width: 100%;

        text-align: center;

        box-sizing: border-box;

    }

}

/* ==================================================
   NOTIFICATION RESPONSIVE
================================================== */

@media (max-width: 768px) {

    .notification-page {
        width: 100%;

        padding: 20px 15px;

        box-sizing: border-box;
    }

    .notification-card {
        width: 100%;

        padding: 20px;

        box-sizing: border-box;
    }

    .notification-card h2 {
        font-size: 22px;
    }

    .notification-item {
        padding: 15px;
    }

    .notification-item p {
        font-size: 14px;

        line-height: 1.5;
    }

}

/* =========================================================
   PROFILE PAGE - RESPONSIVE
========================================================= */

@media (max-width: 600px) {

    .profile-content > .card:nth-child(3),
    .profile-content > .card:nth-child(4) {

        padding: 20px;

        overflow-x: auto;
    }


    .profile-content > .card:nth-child(3) .filter-section,
    .profile-content > .card:nth-child(4) .filter-section {

        flex-wrap: wrap;
    }


    #reportSearch,
    #claimSearch {

        flex: 1;

        min-width: 160px;
    }


    #reportFilter,
    #claimFilter {

        width: 105px;
    }


    #reportTable,
    #claimTable {

        min-width: 600px;
    }

}


@media (max-width: 900px) {

    .profile-content {

        grid-template-columns: 1fr;
    }


    .profile-content > .card {

        min-height: auto;
    }

}


@media (max-width: 600px) {

    .profile-container {

        width: 100%;

        margin: 25px auto;

        padding: 0 15px;

        box-sizing: border-box;
    }


    .profile-content {

        grid-template-columns: 1fr;

        gap: 20px;
    }


    .profile-content > .card {

        width: 100%;

        padding: 25px 20px;

        min-height: auto;

        box-sizing: border-box;
    }


    .profile-content > .card:nth-child(3),
    .profile-content > .card:nth-child(4) {

        overflow-x: auto;
    }


    .profile-content table {

        min-width: 650px;
    }


    .profile-content table th,
    .profile-content table td {

        padding: 10px;

        white-space: nowrap;
    }


    .profile-card .view-btn {

        width: 100%;
    }

}

/* ==================================================
   REPORT DETAIL RESPONSIVE
================================================== */

@media (max-width: 850px) {

    .report-detail-content {
        grid-template-columns: 1fr;
    }

    .report-detail-image {
        height: 300px;
    }

}


/* ==================================================
   MOBILE FIX - REPORT DETAIL
================================================== */

@media (max-width: 600px) {

    .report-detail-page {
        padding: 30px 15px 50px;
    }

    .report-detail-card {
        width: 100%;
        padding: 25px;
        box-sizing: border-box;
    }

    .report-detail-card h1 {
        font-size: 27px;
        line-height: 1.3;
    }

    .report-detail-content {
        display: grid;
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .report-detail-image {
        width: 100%;
        height: auto;
        min-height: 250px;
    }

    .report-detail-image img {
        width: 100%;
        height: auto;
        max-width: 100%;
        object-fit: contain;
    }

    .report-detail-info {
        width: 100%;
    }

    .report-detail-info p {
        font-size: 14px;
        line-height: 1.6;
        word-break: break-word;
    }

    .report-detail-actions {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    .report-detail-actions a,
    .report-detail-actions button {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }

}


/* ==================================================
   REPORT DETAIL - CARD MOBILE
================================================== */

@media (max-width: 600px) {

    .detail-card {
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
    }

    .detail-content {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .detail-image {
        width: 100%;
    }

    .detail-image img {
        width: 100%;
        height: auto;
        max-width: 100%;
    }

    .detail-info {
        width: 100%;
    }

    .detail-info h2 {
        font-size: 24px;
        line-height: 1.3;
    }

    .detail-info p {
        font-size: 14px;
        line-height: 1.6;
        word-break: break-word;
    }

    .detail-actions {
        flex-direction: column;
        gap: 10px;
    }

    .detail-actions a,
    .detail-actions button {
        width: 100%;
        box-sizing: border-box;
    }

}


/* ==================================================
   FINAL MOBILE REPORT DETAIL FIX
================================================== */

@media (max-width: 600px) {

    .report-detail-wrapper {
        width: 100%;
        padding: 15px;
        box-sizing: border-box;
    }

    .report-detail-wrapper .detail-card {
        width: 100%;
        margin: 0 auto;
        box-sizing: border-box;
    }

    .report-detail-wrapper .detail-content {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .report-detail-wrapper .detail-image {
        width: 100%;
    }

    .report-detail-wrapper .detail-image img {
        width: 100%;
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }

    .report-detail-wrapper .detail-info {
        width: 100%;
    }

    .report-detail-wrapper .detail-info p {
        overflow-wrap: anywhere;
    }

}