/* =========================
   STICKY FOOTER LAYOUT
========================= */

html,

body {
    min-height: 100%;
}

body {
    min-height: 100vh;

    display: flex;

    flex-direction: column;
}
main {
    flex: 1;
}
* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;

    padding: 0;
}
* {
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background: #f2f4f7;
    margin: 0;
    padding-top:  80px;
}

.container {
    width: 400px;
    margin: auto;
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h2 {
    text-align: center;
}

.container p {
    text-align: center;
}

label {
    display: block;
    margin-top: 15px;
    font-weight: bold;
}

input {
    width: 100%;
    padding: 12px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
    width: 100%;
    padding: 12px;
    margin-top: 20px;
    background: #2563eb;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background: #1d4ed8;
}

a {
    color: #2563eb;
}
select,
textarea {
    width: 100%;
    padding: 12px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: Arial, sans-serif;
}

textarea {
    resize: vertical;
}

.lost-item-card {
    border: 1px solid #ddd;
    padding: 20px;
    margin-top: 20px;
    border-radius: 8px;
    background: #f9fafb;
}

.lost-item-card h3 {
    margin-top: 0;
}

.status {
 

    display: inline-block;

    padding: 6px 12px;

    border-radius: 20px;

    font-size: 13px;

    font-weight: 600;

    white-space: nowrap;

}
/* =========================
   NAVBAR
========================= */


  .navbar {
    width: 100%;

    position: fixed;

    top: 0;

    left: 0;

    z-index: 1000;

    background-color: #ffffff;

    padding: 15px 0;

    color: black;
}


.nav-container {

    width: 90%;

    max-width: 1200px;

    margin: auto;

    display: flex;

    justify-content: space-between;

    align-items: center;
    
    color: black;
    
}


/* Brand */

.brand {

    display: flex;

    align-items: center;

    gap: 10px;

    color: rgb(0, 0, 0);

    text-decoration: none;
}


.logo-image {
    width: 100px;

    height: 50px;

    object-fit: contain;
}

.brand-name {

    font-size: 20px;

    font-weight: bold;
    color: black;
}


/* Navigation Links */

.nav-links {

    display: flex;

    align-items: center;

    gap: 20px;

    color: black;
}


.nav-links a {

    color: rgb(0, 0, 0);

    text-decoration: none;

    font-size: 15px;
}


.nav-links a:hover {

    text-decoration: underline;
}


.profile-link {

    font-weight: bold;
}
/* =========================
   FOOTER
========================= */
.footer {

    width: 100%;

    background-color: #1f2937;

    color: white;

    text-align: center;

    padding: 20px 0;

    margin-top: 50px;
}
/* =========================
   DASHBOARD
========================= */
.dashboard {

    width: 100%;

    min-height: calc(100vh - 80px);

    padding: 60px 5%;

    /* background-image:

        linear-gradient(
            rgba(0, 0, 0, 0.55),
            rgba(0, 0, 0, 0.55)
        ),

        url("images/home-background.jpg"); */

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}

/* Welcome */

.welcome-section {

    text-align: center;

    margin-bottom: 35px;

}

.welcome-section h1 {

    margin-bottom: 10px;

}


/* Statistics */

.dashboard-stats {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(200px, 1fr)
        );

    gap: 20px;

    margin-bottom: 40px;

}
/* .stat-card {

    padding: 20px;

    text-align: center;

    border-radius: 10px;

    background-color: #f3f4f6;

    border: 1px solid #e5e7eb;

}


.stat-card,
.stat-card:link,
.stat-card:visited,
.stat-card:hover,
.stat-card:active {

    text-decoration: none !important;

    color: inherit !important;

}


.stat-card h3 {

    margin-bottom: 10px;

}


.stat-card p {

    font-size: 30px;

    font-weight: bold;

    margin: 0;

} */

.stat-card {

    padding: 20px;

    text-align: center;

    border-radius: 10px;

    background-color: #f3f4f6;

    border: 1px solid #e5e7eb;

}


.stat-card h3 {

    margin-bottom: 10px;

}


.stat-card p {

    font-size: 30px;

    font-weight: bold;

    margin: 0;

} 


/* Dashboard Options */

.dashboard-options {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(250px, 1fr)
        );

    gap: 25px;

}


.dashboard-card {

    display: block;

    padding: 25px;

    border-radius: 10px;

    background-color: white;

    border: 1px solid #e5e7eb;

    text-decoration: none;

    color: #111827;

    transition: 0.3s;

}


.dashboard-card:hover {

    transform: translateY(-5px);

    box-shadow:
        0 5px 15px
        rgba(0, 0, 0, 0.15);

}


.card-icon {

    font-size: 35px;

    margin-bottom: 10px;

}


.dashboard-card h2 {

    margin-top: 0;

}


.dashboard-card p {

    color: #6b7280;

}
/* =========================
   ABOUT PAGE
========================= */

.about-page {

    width: 90%;

    max-width: 1200px;

    margin: 40px auto;

}


/* Hero Section */

.about-hero {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 40px;

    align-items: center;

    margin-bottom: 60px;

}


.about-hero-text h1 {

    font-size: 42px;

    margin-bottom: 20px;

}


.about-hero-text p {

    font-size: 18px;

    line-height: 1.7;

}


.about-hero-image img {

    width: 100%;

    height: 350px;

    object-fit: cover;

    border-radius: 12px;

}


/* Main Content */

.about-content {

    line-height: 1.7;

}


.about-content h2 {

    font-size: 30px;

    margin-top: 40px;

    margin-bottom: 15px;

}


/* Features */

.about-features {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(250px, 1fr)
        );

    gap: 25px;

    margin-top: 30px;

}


.about-feature {

    padding: 25px;

    text-align: center;

    border: 1px solid #e5e7eb;

    border-radius: 10px;

}


.feature-icon {

    font-size: 40px;

    margin-bottom: 15px;

}


.about-feature h3 {

    margin-bottom: 10px;

}


.about-feature p {

    color: #6b7280;

}


/* Why Section */

.why-section {

    margin-top: 50px;

    padding: 30px;

    background-color: #f3f4f6;

    border-radius: 10px;

}


/* Mobile Responsive */

@media (max-width: 768px) {

    .about-hero {

        grid-template-columns: 1fr;

    }


    .about-hero-text h1 {

        font-size: 32px;

    }

}
/* =====================================================
   MY LOST ITEMS PAGE
===================================================== */


/* Main page */

.my-lost-items-page {

    width: 95%;

    max-width: 1400px;

    margin: 40px auto;

    flex: 1;

}


/* Page header */

.lost-items-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 25px;

}


.lost-items-header h1 {

    margin: 0;

    color: #111827;

}


/* Back button */

.back-dashboard-button {

    display: inline-block;

    padding: 10px 16px;

    background-color: #2563eb;

    color: #ffffff;

    text-decoration: none;

    border-radius: 6px;

    font-weight: 600;

}


.back-dashboard-button:hover {

    background-color: #1d4ed8;

}


/* Table box */

.lost-items-table-box {

    width: 100%;

    overflow-x: auto;

    background-color: #ffffff;

    border: 1px solid #cbd5e1;

    border-radius: 12px;

    box-shadow:
        0 4px 15px
        rgba(0, 0, 0, 0.10);

}


/* Table */

.lost-items-data-table {

    width: 100%;

    min-width: 1100px;

    border-collapse: collapse;

    background-color: #ffffff;

}


/* Table header */

.lost-items-data-table thead th {

    padding: 16px;

    background-color: #1f2937;

    color: #ffffff;

    text-align: left;

    font-size: 14px;

    font-weight: 700;

    border: 1px solid #374151;

    white-space: nowrap;

}


/* Table body cells */

.lost-items-data-table tbody td {

    padding: 16px;

    border: 1px solid #d1d5db;

    color: #374151;

    background-color: #ffffff;

    vertical-align: middle;

}


/* Alternating rows */

.lost-items-data-table tbody tr:nth-child(even) td {

    background-color: #f8fafc;

}


/* Hover */

.lost-items-data-table tbody tr:hover td {

    background-color: #e0f2fe;

}


/* Item name */

.item-name-cell {

    font-weight: 700;

    color: #111827 !important;

}


/* Status */

.lost-status {

    display: inline-block;

    padding: 6px 12px;

    background-color: #fef3c7;

    color: #92400e;

    border-radius: 20px;

    font-size: 13px;

    font-weight: 700;

    white-space: nowrap;

}


/* Action buttons */

.lost-item-actions {

    display: flex;

    gap: 8px;

    white-space: nowrap;

}


/* Edit */

.lost-edit-button {

    display: inline-block;

    padding: 8px 14px;

    background-color: #2563eb;

    color: #ffffff !important;

    text-decoration: none;

    border-radius: 6px;

    font-size: 13px;

    font-weight: 700;

}


.lost-edit-button:hover {

    background-color: #1d4ed8;

}


/* Delete */

.lost-delete-button {

    display: inline-block;

    padding: 8px 14px;

    background-color: #dc2626;

    color: #ffffff !important;

    text-decoration: none;

    border-radius: 6px;

    font-size: 13px;

    font-weight: 700;

}


.lost-delete-button:hover {

    background-color: #b91c1c;

}


/* Empty message */

.no-lost-items {

    padding: 60px 20px;

    text-align: center;

    background-color: #ffffff;

    border: 1px solid #d1d5db;

    border-radius: 12px;

}


.report-lost-button {

    display: inline-block;

    margin-top: 15px;

    padding: 10px 18px;

    background-color: #2563eb;

    color: #ffffff;

    text-decoration: none;

    border-radius: 6px;

}


/* Mobile */

@media (max-width: 768px) {


    .lost-items-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 15px;

    }


    .lost-items-table-box {

        overflow-x: auto;

    }


    .lost-items-data-table {

        min-width: 1100px;

    }

}
/* =====================================
   EDIT LOST ITEM PAGE
===================================== */

.edit-lost-page {

    width: 100%;

    min-height: calc(100vh - 160px);

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 40px 20px;

}


.edit-lost-container {

    width: 100%;

    max-width: 700px;

    background-color: white;

    padding: 35px;

    border-radius: 12px;

    box-shadow:
        0 4px 15px
        rgba(0, 0, 0, 0.10);

}


.edit-lost-container h1 {

    margin-bottom: 25px;

    text-align: center;

}


.edit-lost-form {

    display: flex;

    flex-direction: column;

    gap: 10px;

}


.edit-lost-form label {

    font-weight: 600;

    margin-top: 10px;

}


.edit-lost-form input,

.edit-lost-form textarea,

.edit-lost-form select {

    width: 100%;

    padding: 12px;

    border: 1px solid #cbd5e1;

    border-radius: 6px;

    font-size: 15px;

    box-sizing: border-box;

}


.edit-lost-form textarea {

    min-height: 120px;

    resize: vertical;

}


.edit-form-buttons {

    display: flex;

    gap: 12px;

    margin-top: 25px;

}


.update-button,

.cancel-button {

    flex: 1;

    padding: 12px;

    border: none;

    border-radius: 6px;

    text-align: center;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    text-decoration: none;

}


.update-button {

    background-color: #16a34a;

    color: white;

}


.update-button:hover {

    background-color: #15803d;

}


.cancel-button {

    background-color: #6b7280;

    color: white;

}


.cancel-button:hover {

    background-color: #4b5563;

}
/* =====================================
   FOUND ITEM PAGE
===================================== */

.found-item-page {

    width: 100%;

    min-height: calc(100vh - 160px);

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 40px 20px;

}


.found-item-container {

    width: 100%;

    max-width: 700px;

    background-color: white;

    padding: 35px;

    border-radius: 12px;

    box-shadow:
        0 4px 15px
        rgba(0, 0, 0, 0.10);

}


.found-item-container h1 {

    text-align: center;

    margin-bottom: 25px;

    color: #111827;

}


.found-item-form {

    display: flex;

    flex-direction: column;

    gap: 10px;

}


.found-item-form label {

    font-weight: 600;

    color: #374151;

    margin-top: 10px;

}


.found-item-form input,

.found-item-form select,

.found-item-form textarea {

    width: 100%;

    padding: 12px;

    border: 1px solid #cbd5e1;

    border-radius: 6px;

    font-size: 15px;

    box-sizing: border-box;

}


.found-item-form input:focus,

.found-item-form select:focus,

.found-item-form textarea:focus {

    outline: none;

    border-color: #2563eb;

    box-shadow:
        0 0 0 3px
        rgba(37, 99, 235, 0.15);

}


.found-item-form textarea {

    min-height: 120px;

    resize: vertical;

}


.found-submit-button {

    margin-top: 25px;

    padding: 13px;

    border: none;

    border-radius: 6px;

    background-color: #16a34a;

    color: white;

    font-size: 16px;

    font-weight: 600;

    cursor: pointer;

}


.found-submit-button:hover {

    background-color: #15803d;

}


/* Mobile */

@media (max-width: 768px) {

    .found-item-page {

        padding: 25px 15px;

    }


    .found-item-container {

        padding: 25px 20px;

    }

}
.match-button {

    background-color: #2563eb;

    color: white;

    padding: 10px 14px;

    border-radius: 6px;

    text-decoration: none;

    font-weight: bold;

}


.match-button:hover {

    background-color: #1d4ed8;

}
/* ===============================
   CLAIM PAGE
================================ */

.claim-page {

    min-height: calc(100vh - 160px);

    padding: 40px 20px;

    display: flex;

    justify-content: center;

}


.claim-container {

    width: 100%;

    max-width: 750px;

    background-color: white;

    padding: 35px;

    border-radius: 12px;

    box-shadow:
        0 4px 15px
        rgba(0, 0, 0, 0.10);

}


.claim-container h1 {

    text-align: center;

    margin-bottom: 25px;

}


.claim-item-summary {

    background-color: #f8fafc;

    padding: 20px;

    border-radius: 8px;

    margin-bottom: 20px;

}


.claim-item-summary h2 {

    margin-top: 0;

}


.claim-warning {

    background-color: #fff7ed;

    border: 1px solid #fdba74;

    border-left: 5px solid #f97316;

    padding: 20px;

    border-radius: 8px;

    margin-bottom: 25px;

}


.claim-warning h3 {

    color: #c2410c;

    margin-top: 0;

}


.claim-warning ul {

    margin-bottom: 15px;

}


.claim-form {

    display: flex;

    flex-direction: column;

    gap: 12px;

}


.claim-form label {

    font-weight: bold;

}


.claim-form textarea {

    width: 100%;

    box-sizing: border-box;

    padding: 14px;

    border: 1px solid #cbd5e1;

    border-radius: 7px;

    font-size: 15px;

    resize: vertical;

}


.claim-form textarea:focus {

    outline: none;

    border-color: #2563eb;

}


.submit-claim-button {

    padding: 14px;

    border: none;

    border-radius: 7px;

    background-color: #2563eb;

    color: white;

    font-size: 16px;

    font-weight: bold;

    cursor: pointer;

}


.submit-claim-button:hover {

    background-color: #1d4ed8;

}


.claim-error {

    color: #b91c1c;

    background-color: #fee2e2;

    padding: 12px;

    border-radius: 6px;

}
.claim-status {

    display: inline-block;

    padding: 8px 14px;

    border-radius: 20px;

    font-weight: bold;

    white-space: nowrap;

}


.claim-status.pending {

    background-color: #fef3c7;

    color: #92400e;

}


.claim-status.accepted {

    background-color: #dcfce7;

    color: #166534;

}


.claim-status.rejected {

    background-color: #fee2e2;

    color: #991b1b;

}


.claim-status.returned {

    background-color: #dbeafe;

    color: #1e40af;

}
/* =================================
   CLAIM REQUESTS PAGE
================================= */

.claim-requests-page {

    width: 100%;

    min-height: calc(100vh - 160px);

    padding: 40px 20px;

    box-sizing: border-box;

}


.claim-requests-container {

    width: 100%;

    max-width: 1400px;

    margin: auto;

}


.claim-requests-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 25px;

}


.claim-requests-header h1 {

    margin: 0;

}


.back-button {

    text-decoration: none;

    font-weight: bold;

}


.claim-requests-table-box {

    width: 100%;

    overflow-x: auto;

    background-color: white;

    border-radius: 10px;

    box-shadow:

        0 4px 15px

        rgba(0, 0, 0, 0.10);

}


.claim-requests-table {

    width: 100%;

    min-width: 900px;

    border-collapse: collapse;

}


.claim-requests-table th {

    background-color: #1f2937;

    color: white;

    padding: 18px;

    text-align: left;

    border: 1px solid #000000;

}


.claim-requests-table td {

    padding: 18px;

    border: 1px solid #d1d5db;

}


.claim-requests-table tbody tr:nth-child(even) {

    background-color: #f8fafc;

}


.claim-requests-table tbody tr:hover {

    background-color: #e0f2fe;

}


.view-claim-button {

    display: inline-block;

    padding: 9px 14px;

    background-color: #2563eb;

    color: white;

    text-decoration: none;

    border-radius: 6px;

    font-weight: bold;

}


.view-claim-button:hover {

    background-color: #1d4ed8;

}


.no-claim-requests {

    background-color: white;

    padding: 50px;

    text-align: center;

    border-radius: 10px;

    box-shadow:

        0 4px 15px

        rgba(0, 0, 0, 0.10);

}


/* Claim status */

.claim-status {

    display: inline-block;

    padding: 7px 12px;

    border-radius: 20px;

    font-weight: bold;

    white-space: nowrap;

}


.claim-status.pending {

    background-color: #fef3c7;

    color: #92400e;

}


.claim-status.accepted {

    background-color: #dcfce7;

    color: #166534;

}


.claim-status.rejected {

    background-color: #fee2e2;

    color: #991b1b;

}


.claim-status.returned {

    background-color: #dbeafe;

    color: #1e40af;

}


@media (max-width: 768px) {

    .claim-requests-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 15px;

    }

}
.claim-requests-button {

    display: inline-block;

    padding: 8px 12px;

    background-color: #2563eb;

    color: white;

    text-decoration: none;

    border-radius: 6px;

    font-weight: bold;

}


.claim-requests-button:hover {

    background-color: #1d4ed8;

}
.action-buttons {
    display: flex;
    gap: 10px;
}
.delete-button {

    display: inline-block;

    padding: 8px 12px;

    background-color: #dc2626;

    color: white;

    text-decoration: none;

    border-radius: 6px;

    font-weight: bold;

}


.delete-button:hover {

    background-color: #b91c1c;

}
/* =================================
   VIEW CLAIM PAGE
================================= */

.view-claim-page {

    width: 100%;

    min-height: calc(100vh - 160px);

    padding: 40px 20px;

    box-sizing: border-box;

}


.view-claim-container {

    width: 100%;

    max-width: 850px;

    margin: auto;

}


.view-claim-container h1 {

    text-align: center;

    margin-bottom: 30px;

}


.claim-details-card {

    background-color: white;

    padding: 25px;

    margin-bottom: 20px;

    border-radius: 10px;

    box-shadow:

        0 4px 15px

        rgba(0, 0, 0, 0.10);

}


.claim-details-card h2 {

    margin-top: 0;

    margin-bottom: 20px;

}


.claim-message-box {

    background-color: #f8fafc;

    border-left: 5px solid #2563eb;

    padding: 25px;

    margin-bottom: 25px;

    border-radius: 8px;

}


.claim-message-box h2 {

    margin-top: 0;

}


.claim-message-box p {

    line-height: 1.7;

    white-space: normal;

}


.claim-current-status {

    margin-bottom: 25px;

    font-size: 18px;

}


.claim-action-buttons {

    display: flex;

    gap: 15px;

    margin-bottom: 25px;

}


.accept-claim-button,

.reject-claim-button {

    display: inline-block;

    padding: 12px 20px;

    color: white;

    text-decoration: none;

    border-radius: 6px;

    font-weight: bold;

}


.accept-claim-button {

    background-color: #16a34a;

}


.accept-claim-button:hover {

    background-color: #15803d;

}


.reject-claim-button {

    background-color: #dc2626;

}


.reject-claim-button:hover {

    background-color: #b91c1c;

}


@media (max-width: 600px) {

    .claim-action-buttons {

        flex-direction: column;

    }

}
.contact-information-box {

    background-color: #ecfdf5;

    border: 1px solid #86efac;

    padding: 25px;

    margin-top: 25px;

    margin-bottom: 25px;

    border-radius: 10px;

}


.contact-information-box h2 {

    color: #166534;

    margin-top: 0;

}


.contact-information-box h3 {

    margin-top: 20px;

}


.safety-warning {

    background-color: #fef3c7;

    border: 1px solid #f59e0b;

    color: #92400e;

    padding: 15px;

    margin: 20px 0;

    border-radius: 8px;

    line-height: 1.6;

}
.finder-contact-box {

    margin-top: 15px;

    padding: 15px;

    background-color: #ecfdf5;

    border: 1px solid #86efac;

    border-radius: 8px;

}

.finder-contact-box h4 {

    margin-top: 0;

    color: #166534;

}
.finder-contact-box {

    margin-top: 15px;

    padding: 15px;

    background-color: #ecfdf5;

    border: 1px solid #86efac;

    border-radius: 8px;

}


.finder-contact-box h4 {

    margin-top: 0;

    color: #166534;

}


.finder-contact-box p {

    margin: 8px 0;

}


.safety-warning {

    margin-top: 15px;

    padding: 12px;

    background-color: #fef3c7;

    border: 1px solid #f59e0b;

    border-radius: 6px;

    color: #92400e;

    font-size: 13px;

    line-height: 1.5;

}
.matched-card-link {
    text-decoration: none;
    color: inherit;
}

.matched-card-link:hover {
    text-decoration: none;
    color: inherit;
}

.matched-card-link .stat-card {
    color: inherit;
}
/* Matched Items Table */

.matched-items-table {

    width: 100%;

    border-collapse: collapse;

    background-color: white;

    border: 1px solid #d1d5db;

}


/* Table Header */

.matched-items-table th {

    background-color: #1f2937;

    color: white;

    padding: 14px;

    text-align: left;

    border: 1px solid #374151;

}


/* Table Data */

.matched-items-table td {

    padding: 14px;

    border: 1px solid #d1d5db;

    color: #374151;

}


/* Row Hover */

.matched-items-table tbody tr:hover {

    background-color: #f3f4f6;

}


/* Accepted Status */

.matched-items-table .status-accepted {

    background-color: #dcfce7;

    color: #166534;

    padding: 6px 12px;

    border-radius: 20px;

    font-weight: bold;

}
.show-more-button {

    display: inline-block;

    padding: 7px 12px;

    background-color: #2563eb;

    color: white;

    text-decoration: none;

    border-radius: 6px;

    font-size: 13px;

    font-weight: 600;

    white-space: nowrap;

}


.show-more-button:hover {

    background-color: #1d4ed8;

    color: white;

    text-decoration: none;

}