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

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #f4f7f8;
    color: #1f2937;
}

/* =========================
   ADVANCED LOGIN PAGE
========================= */

.login-page {
    min-height: 100vh;
    padding: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 15% 20%, rgba(23, 107, 112, 0.10), transparent 28%),
        radial-gradient(circle at 85% 80%, rgba(52, 79, 120, 0.08), transparent 30%),
        #f3f6f7;
}

/* MAIN LOGIN CONTAINER */

.login-shell {
    width: 100%;
    max-width: 1180px;
    min-height: 680px;

    display: grid;
    grid-template-columns: 1.05fr 0.95fr;

    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    overflow: hidden;

    box-shadow:
        0 30px 80px rgba(15, 23, 42, 0.12);
}

/* =========================
   LEFT BRAND PANEL
========================= */

.login-brand-panel {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 48px 52px;

    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            #123f46 0%,
            #176b70 55%,
            #1c7d82 100%
        );

    overflow: hidden;
}

/* Decorative circles */

.login-brand-panel::before {
    content: "";
    position: absolute;

    width: 430px;
    height: 430px;

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 50%;

    right: -210px;
    top: -130px;
}

.login-brand-panel::after {
    content: "";
    position: absolute;

    width: 320px;
    height: 320px;

    background: rgba(255, 255, 255, 0.035);
    border-radius: 50%;

    left: -150px;
    bottom: -150px;
}

/* LOGO / BRAND */

.login-brand-top {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    gap: 15px;
}

.login-brand-top h1 {
    font-size: 23px;
    letter-spacing: 2px;
    margin: 0;
}

.login-brand-top p {
    margin-top: 4px;

    color: rgba(255, 255, 255, 0.72);

    font-size: 12px;
}

/* MAIN BRAND MESSAGE */

.login-brand-content {
    position: relative;
    z-index: 2;

    max-width: 470px;
}

.login-eyebrow {
    display: inline-block;

    margin-bottom: 18px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.8px;

    color: #b9e1e2;
}

.login-brand-content h2 {
    margin: 0 0 22px;

    font-size: 46px;
    line-height: 1.12;
    letter-spacing: -1px;

    color: #ffffff;
}

.login-brand-content > p {
    max-width: 430px;

    color: rgba(255, 255, 255, 0.76);

    font-size: 15px;
    line-height: 1.75;
}

/* FEATURES */

/* LEFT FOOTER */

.login-brand-footer {
    position: relative;
    z-index: 2;

    color: rgba(255, 255, 255, 0.50);

    font-size: 11px;
}

/* =========================
   RIGHT LOGIN AREA
========================= */

.login-form-panel {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 55px;
    background: #ffffff;
}

.login-card {
    width: 100%;
    max-width: 410px;

    background: transparent;
    padding: 0;

    border-radius: 0;
    box-shadow: none;
}

/* Hide mobile logo on desktop */

.mobile-login-brand {
    display: none;
}

/* WELCOME */

.welcome-text {
    margin-bottom: 34px;
}

.login-small-label {
    display: inline-block;

    margin-bottom: 12px;

    color: #176b70;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.welcome-text h2 {
    margin: 0 0 9px;

    color: #18212f;

    font-size: 32px;
    letter-spacing: -0.5px;
}

.welcome-text p {
    color: #718096;

    font-size: 14px;
    line-height: 1.6;
}

/* INPUTS */

.input-group {
    margin-bottom: 21px;
}

.input-group label {
    display: block;

    margin-bottom: 8px;

    color: #344054;

    font-size: 13px;
    font-weight: 600;
}

.input-group input {
    width: 100%;
    height: 50px;

    padding: 0 15px;

    background: #fbfcfd;

    border: 1px solid #d8dee6;
    border-radius: 10px;

    color: #1f2937;

    font-family: inherit;
    font-size: 14px;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.input-group input::placeholder {
    color: #a0a8b3;
}

.input-group input:focus {
    background: #ffffff;

    border-color: #176b70;

    box-shadow:
        0 0 0 4px rgba(23, 107, 112, 0.09);
}

/* REMEMBER / SECURE */

.login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-top: 2px;
    margin-bottom: 25px;
}

.remember-login {
    display: flex;
    align-items: center;
    gap: 8px;

    color: #667085;

    font-size: 12px;

    cursor: pointer;
}

.remember-login input {
    width: 15px;
    height: 15px;

    accent-color: #176b70;
}

.secure-access {
    color: #176b70;

    font-size: 11px;
    font-weight: 700;
}

/* SIGN IN BUTTON */

.login-btn {
    width: 100%;
    height: 51px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    border: none;
    border-radius: 10px;

    background: #176b70;
    color: #ffffff;

    font-family: inherit;
    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 8px 18px rgba(23, 107, 112, 0.20);

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.login-btn span {
    font-size: 18px;

    transition: transform 0.2s ease;
}

.login-btn:hover {
    background: #125b60;

    transform: translateY(-1px);

    box-shadow:
        0 10px 24px rgba(23, 107, 112, 0.25);
}

.login-btn:hover span {
    transform: translateX(3px);
}

/* SECURITY MESSAGE */

.login-security {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    margin-top: 28px;

    color: #98a2b3;

    font-size: 11px;
}

.login-security span {
    color: #2f855a;

    font-size: 9px;
}

/* =========================
   TABLET
========================= */

@media (max-width: 900px) {

    .login-shell {
        grid-template-columns: 0.9fr 1.1fr;
    }

    .login-brand-panel {
        padding: 40px 35px;
    }

    .login-brand-content h2 {
        font-size: 36px;
    }

    .login-form-panel {
        padding: 45px 35px;
    }
}

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

@media (max-width: 700px) {

    .login-page {
        padding: 18px;
        background: #f3f6f7;
    }

    .login-shell {
        display: block;

        min-height: auto;

        border-radius: 18px;
    }

    .login-brand-panel {
        display: none;
    }

    .login-form-panel {
        padding: 35px 25px;
    }

    .mobile-login-brand {
        display: block;

        padding-bottom: 25px;
        margin-bottom: 30px;

        border-bottom: 1px solid #edf0f2;
    }

    .mobile-login-brand h1 {
        color: #176b70;

        font-size: 24px;
        letter-spacing: 2px;
    }

    .mobile-login-brand p {
        margin-top: 5px;

        color: #7a8491;

        font-size: 12px;
    }

    .welcome-text h2 {
        font-size: 27px;
    }
}
/* =========================
   FLOOR PLAN & SNAG MARKERS
   ========================= */

#planWrapper {
    position: relative;
    display: table;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
}

#uploadedPlan {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
}

#uploadedPlan {
    display: block;
    max-width: 100%;
    height: auto;
}

.snag-marker {
    position: absolute;

    width: 32px;
    height: 32px;

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

    background: #123f68;
    border: 3px solid #ffffff;

    /* Location pin shape */
    border-radius: 50% 50% 50% 0;

    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.30);

    transform: translate(-50%, -50%) rotate(-45deg);

    cursor: pointer;
    z-index: 10;

    transition: 0.2s ease;
}

/* Keep snag number upright */
.snag-marker span {
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;

    transform: rotate(45deg);
}

.snag-marker:hover {
    background: #0d3153;
    transform: translate(-50%, -50%) rotate(-45deg) scale(1.12);
}

/* =========================
   INSPECTION CHECKLIST
========================= */

.checklist-table-wrapper {
    width: 100%;
    overflow-x: auto;
    margin-top: 20px;
}

.inspection-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    font-size: 14px;
}

.inspection-table th {
    background: #1f4e78;
    color: white;
    padding: 12px 10px;
    border: 1px solid #cccccc;
    text-align: center;
}

.inspection-table th:nth-child(2) {
    text-align: left;
}

.inspection-table td {
    padding: 10px;
    border: 1px solid #d6d6d6;
    vertical-align: middle;
}

.inspection-table td:nth-child(1) {
    width: 50px;
    text-align: center;
}

.inspection-table td:nth-child(2) {
    min-width: 230px;
}

.inspection-table td:nth-child(3),
.inspection-table td:nth-child(4),
.inspection-table td:nth-child(5) {
    width: 65px;
    text-align: center;
}

.inspection-table td:nth-child(6) {
    min-width: 240px;
}

.inspection-table input[type="radio"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.checklist-remark {
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
    border: 1px solid #cccccc;
    border-radius: 4px;
}

.activity-heading td {
    background: #e9eef3;
    font-weight: bold;
    color: #1f4e78;
    padding: 10px;
}

#saveChecklistBtn {
    padding: 10px 22px;
    background: #1f4e78;
    color: white;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
}

#saveChecklistBtn:hover {
    opacity: 0.9;
}

/* =========================
   PROGRESS DASHBOARD
========================= */

/* PROGRESS BAR */

/* CHARTS */

/* SMALLER SCREENS */

/* =========================
   PROFESSIONAL DASHBOARD
========================= */

#dashboardPage {
    min-height: 100vh;
    background: #f4f6f8;
}

/* TOP HEADER */

.dashboard-header {
    height: 86px;
    background: white;
    border-bottom: 1px solid #e5e7eb;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 45px;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* BRAND AREA */

.dashboard-brand {
    display: flex;
    align-items: center;
    gap: 18px;
}

.dashboard-logo {
    width: 190px;
    height: 55px;
    object-fit: contain;
}

.system-name {
    font-size: 13px;
    color: #6b7280;
    border-left: 1px solid #d1d5db;
    padding-left: 18px;
}

/* USER AREA */

.dashboard-user {
    display: flex;
    align-items: center;
    gap: 18px;

    font-size: 14px;
    font-weight: 600;
}

#logoutBtn {
    padding: 9px 16px;

    background: white;
    color: #374151;

    border: 1px solid #d1d5db;
    border-radius: 6px;

    cursor: pointer;
}

#logoutBtn:hover {
    background: #f3f4f6;
}

/* MAIN DASHBOARD */

.dashboard-content {
    max-width: 1250px;
    margin: 0 auto;
    padding: 42px 40px 70px;
}

/* DASHBOARD TITLE */

.dashboard-title {
    margin-bottom: 35px;
}

.dashboard-title h1 {
    font-size: 30px;
    color: #1f2937;
    margin-bottom: 6px;
}

.dashboard-title p {
    color: #6b7280;
    font-size: 14px;
}

/* SECTIONS */

.dashboard-section {
    margin-bottom: 42px;
}

.dashboard-section > h2,
.section-heading h2 {
    font-size: 18px;
    color: #1f2937;
    margin-bottom: 18px;
}

/* OVERVIEW CARDS */

.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.stat-card {
    background: white;

    border: 1px solid #e5e7eb;
    border-radius: 10px;

    padding: 24px;

    display: flex;
    flex-direction: column;

    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.035);
}

.stat-number {
    font-size: 32px;
    font-weight: 700;
    color: #344f78;
    margin-bottom: 8px;
}

.stat-label {
    font-size: 13px;
    color: #6b7280;
}

/* PROJECT HEADING */

.section-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;

    margin-bottom: 15px;
}

.section-heading h2 {
    margin-bottom: 4px;
}

.section-heading p {
    color: #6b7280;
    font-size: 13px;
}

/* PROJECT CARD */

.project-card {
    background: white;

    border: 1px solid #e5e7eb;
    border-radius: 10px;

    padding: 25px 28px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.035);
}

.project-title-row {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 10px;
}

.project-title-row h3 {
    font-size: 18px;
    color: #1f2937;
}

/* PROJECT STATUS */

.project-status {
    background: #eef6f2;
    color: #34725b;

    padding: 5px 10px;

    border-radius: 20px;

    font-size: 11px;
    font-weight: 600;
}

.project-location {
    color: #6b7280;
    font-size: 13px;
}

/* OPEN PROJECT BUTTON */

.open-project-btn {
    padding: 11px 19px;

    background: #344f78;
    color: white;

    border: none;
    border-radius: 6px;

    font-weight: 600;
    cursor: pointer;

    transition: 0.2s;
}

.open-project-btn:hover {
    background: #293f61;
}

/* TABLET */

@media (max-width: 900px) {

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

}

/* MOBILE */

@media (max-width: 600px) {

    .dashboard-header {
        padding: 0 18px;
    }

    .dashboard-logo {
        width: 145px;
    }

    .system-name {
        display: none;
    }

    .dashboard-content {
        padding: 30px 18px;
    }

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

    .project-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .open-project-btn {
        width: 100%;
    }

}

/* =========================
   INSPECTION WORKSPACE
========================= */

#inspectionPage {
    min-height: 100vh;
    background: #f4f6f8;
}

/* TOP HEADER */

.inspection-header {
    height: 86px;
    background: white;
    border-bottom: 1px solid #e5e7eb;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 45px;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* LOGO AREA */

.inspection-brand {
    display: flex;
    align-items: center;
    gap: 18px;
}

.inspection-logo {
    width: 190px;
    height: 55px;
    object-fit: contain;
}

.inspection-brand p {
    font-size: 13px;
    color: #6b7280;

    border-left: 1px solid #d1d5db;
    padding-left: 18px;
}

/* BACK BUTTON */

.back-dashboard-btn {
    padding: 9px 16px;

    background: white;
    color: #374151;

    border: 1px solid #d1d5db;
    border-radius: 6px;

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;
}

.back-dashboard-btn:hover {
    background: #f3f4f6;
}

/* MAIN WORKSPACE */

#inspectionPage > main {
    max-width: 1250px;
    margin: 0 auto;
    padding: 35px 40px 70px;
}

/* PROJECT NAME */

#inspectionPage > main > h1 {
    font-size: 28px;
    color: #1f2937;
    margin-bottom: 7px;
}

#inspectionPage > main > h1 + p {
    color: #6b7280;
    font-size: 14px;
}

/* REMOVE OLD LINE */

#inspectionPage > main > hr {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 25px 0 0;
}

/* WORKSPACE NAVIGATION */

#inspectionPage nav {
    display: flex;
    gap: 5px;

    background: white;

    border: 1px solid #e5e7eb;
    border-radius: 8px;

    padding: 6px;

    margin-top: 18px;
    margin-bottom: 30px;

    overflow-x: auto;
}

/* TABS */

/* WORKSPACE CONTENT */

.workspaceSection {
    background: white;

    border: 1px solid #e5e7eb;
    border-radius: 10px;

    padding: 28px;

    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.035);
}

.workspaceSection h2 {
    font-size: 21px;
    color: #1f2937;
    margin-bottom: 7px;
}

.workspaceSection > p {
    color: #6b7280;
    font-size: 14px;
    margin-bottom: 22px;
}

/* MOBILE */

@media (max-width: 650px) {

    .inspection-header {
        padding: 0 18px;
    }

    .inspection-logo {
        width: 145px;
    }

    .inspection-brand p {
        display: none;
    }

    #inspectionPage > main {
        padding: 25px 18px 50px;
    }

    .back-dashboard-btn {
        font-size: 12px;
        padding: 8px 10px;
    }

    .workspaceSection {
        padding: 20px;
    }

}

/* =========================
   PLANS / SNAGGING SCREEN
========================= */

/* Upload Plan button */

#uploadPlanBtn {
    padding: 10px 18px;
    background: white;
    color: #344f78;
    border: 1px solid #344f78;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 22px;
}

#uploadPlanBtn:hover {
    background: #f3f6fa;
}

/* UNIT PLAN TITLE */

#plansSection h3 {
    margin-top: 5px;
    margin-bottom: 15px;
    color: #1f2937;
}

/* ADD SNAG BUTTON */

#addSnagBtn {
    padding: 10px 18px;
    background: #344f78;
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 20px;
}

#addSnagBtn:hover {
    background: #293f61;
}

/* FLOOR PLAN AREA */

#planArea {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 8px;

    padding: 20px;
    margin-top: 5px;
    margin-bottom: 25px;

    overflow-x: auto;
}

/* =========================
   ISSUE DETAILS FORM
========================= */

#issueFormPanel {
    margin-top: 25px;

    background: #ffffff;

    border: 1px solid #e1e5ea;
    border-radius: 10px;

    padding: 28px;

    max-width: 760px;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

#issueFormPanel h3 {
    font-size: 20px;
    margin-bottom: 6px;
    color: #1f2937;
}

#issueFormPanel label {
    display: block;

    font-size: 13px;
    font-weight: 600;

    color: #374151;

    margin-top: 17px;
    margin-bottom: 6px;
}

/* INPUTS */

#issueFormPanel input[type="text"],
#issueFormPanel input[type="date"],
#issueFormPanel select,
#issueFormPanel textarea {

    width: 100%;

    padding: 11px 12px;

    border: 1px solid #d1d5db;
    border-radius: 6px;

    background: white;

    font-family: inherit;
    font-size: 14px;

    outline: none;
}

#issueFormPanel textarea {
    min-height: 95px;
    resize: vertical;
}

/* FOCUS */

#issueFormPanel input:focus,
#issueFormPanel select:focus,
#issueFormPanel textarea:focus {

    border-color: #344f78;

    box-shadow:
        0 0 0 3px rgba(52, 79, 120, 0.10);
}

/* PHOTO BUTTONS */

#cameraBtn,
#galleryBtn {

    padding: 9px 14px;

    background: #f8fafc;
    color: #374151;

    border: 1px solid #d1d5db;
    border-radius: 6px;

    font-weight: 600;

    cursor: pointer;

    margin-right: 7px;
}

#cameraBtn:hover,
#galleryBtn:hover {
    background: #eef2f6;
}

/* SAVE ISSUE */

#saveIssueBtn {

    margin-top: 22px;

    padding: 11px 20px;

    background: #344f78;
    color: white;

    border: none;
    border-radius: 6px;

    font-weight: 600;

    cursor: pointer;
}

#saveIssueBtn:hover {
    background: #293f61;
}

/* CANCEL */

#cancelIssueBtn {

    margin-top: 22px;
    margin-left: 7px;

    padding: 11px 20px;

    background: white;
    color: #374151;

    border: 1px solid #d1d5db;
    border-radius: 6px;

    font-weight: 600;

    cursor: pointer;
}

#cancelIssueBtn:hover {
    background: #f3f4f6;
}

/* ISSUE ID */

#currentIssueId {
    color: #344f78;
    font-weight: 700;
}

/* MOBILE */

@media (max-width: 650px) {

    #planArea {
        padding: 10px;
    }

    #issueFormPanel {
        padding: 20px;
    }

}

/* =========================
   ISSUES / SNAGS DESIGN
========================= */

/* Each saved snag */

/* Top line of snag */

/* Text */

/* MARK CLOSED BUTTON */

/* ISSUE/SNAG AREA */

/* OPEN STATUS */

/* CLOSED STATUS */

/* PRIORITY */

/* ARROW */

/* SNAG HEADER */

/* MOBILE */

@media (max-width: 600px) {

    .issue-card {
        padding: 15px;
    }

}

/* =========================
   ISSUES / SNAGS DESIGN
========================= */

/* Each saved snag */
.issue-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 5px solid #344f78;

    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 15px;

    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);
}

/* Top line of snag */
.issue-card h3 {
    color: #344f78;
    font-size: 18px;
    margin-bottom: 10px;
}

/* Text */
.issue-card p {
    margin: 6px 0;
    color: #4b5563;
    line-height: 1.4;
}

.issue-card strong {
    color: #1f2937;
}

/* MARK CLOSED BUTTON */

.status-btn {
    margin-top: 14px;

    padding: 9px 16px;

    border: none;
    border-radius: 6px;

    background: #344f78;
    color: white;

    font-weight: 600;
    cursor: pointer;
}

.status-btn:hover {
    background: #293f61;
}

/* ISSUE/SNAG AREA */

#issuesList {
    margin-top: 20px;
}

/* OPEN STATUS */

.issue-card .status-open {
    background: #fff4e5;
    color: #b45309;

    padding: 4px 9px;
    border-radius: 20px;

    font-size: 12px;
    font-weight: bold;
}

/* CLOSED STATUS */

.issue-card .status-closed {
    background: #e7f7ee;
    color: #15803d;

    padding: 4px 9px;
    border-radius: 20px;

    font-size: 12px;
    font-weight: bold;
}

/* PRIORITY */

.issue-card .priority-critical {
    color: #dc2626;
    font-weight: 700;
}

.issue-card .priority-high {
    color: #ea580c;
    font-weight: 700;
}

.issue-card .priority-medium {
    color: #d97706;
    font-weight: 700;
}

.issue-card .priority-low {
    color: #16a34a;
    font-weight: 700;
}

/* ARROW */

/* SNAG HEADER */

/* MOBILE */

@media (max-width: 600px) {

    .issue-card {
        padding: 15px;
    }

}

/* =========================
   SNAG SUMMARY ROW
========================= */

.issue-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    padding: 14px 16px;

    background: #f8fafc;
    border-radius: 8px;

    cursor: pointer;
}

/* RIGHT SIDE */

/* PRIORITY */

/* OPEN STATUS */

.issue-status.open {
    background: #fff7ed;
    color: #c2410c;

    padding: 5px 10px;
    border-radius: 20px;

    font-size: 12px;
    font-weight: 700;
}

/* CLOSED STATUS */

.issue-status.closed {
    background: #dcfce7;
    color: #15803d;

    padding: 5px 10px;
    border-radius: 20px;

    font-size: 12px;
    font-weight: 700;
}

/* ARROW - STAYS AT FAR RIGHT */

/* =========================
   CHECKLIST POLISH
========================= */

.inspection-table tbody tr:not(.activity-heading):hover {
    background: #f7fafc;
}

.inspection-table input[type="radio"] {
    width: 19px;
    height: 19px;
    cursor: pointer;
    accent-color: #176b70;
}

.checklist-remark {
    background: #fafafa;
    border: 1px solid #d7dde2;
    border-radius: 6px;
    transition: 0.2s;
}

.checklist-remark:focus {
    outline: none;
    border-color: #176b70;
    background: white;
    box-shadow: 0 0 0 3px rgba(23, 107, 112, 0.08);
}

.activity-heading td {
    background: #edf3f5;
    color: #405665;
    font-weight: 700;
    padding: 11px;
}

#saveChecklistBtn {
    margin-top: 16px;
    padding: 11px 24px;
    background: #176b70;
    border-radius: 7px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.10);
}

#saveChecklistBtn:hover {
    background: #12575b;
}

/* =========================
   CHECKLIST RESULT COLUMNS
========================= */

/* YES column */
.inspection-table th:nth-child(3) {
    background: #2f855a;
}

/* NO column */
.inspection-table th:nth-child(4) {
    background: #c53030;
}

/* N/A column */
.inspection-table th:nth-child(5) {
    background: #718096;
}

/* YES radio */
.inspection-table td:nth-child(3) input[type="radio"] {
    accent-color: #2f855a;
}

/* NO radio */
.inspection-table td:nth-child(4) input[type="radio"] {
    accent-color: #c53030;
}

/* N/A radio */
.inspection-table td:nth-child(5) input[type="radio"] {
    accent-color: #718096;
}

/* Slight highlight when selected */
.inspection-table td:has(input[type="radio"]:checked) {
    background: #f1f5f6;
}

/* =========================
   PROFESSIONAL PROGRESS PAGE
========================= */

#progressSection {
    padding: 28px;
}

/* SUMMARY CARDS */

/* CHECKLIST PROGRESS BAR */

/* CHART CARDS */

/* RESPONSIVE */

/* =========================
   PROGRESS CARD ACCENTS
========================= */

/* Overall Progress */

/* Total Snags */

/* Open Issues */

/* Closed Issues */

/* Number colours */

/* =========================
   PRINT / PDF REPORT
========================= */

/* =========================
   ADD PROJECT BUTTON
========================= */

.projects-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 18px;
}

.projects-title-row h2 {
    margin-bottom: 4px;
}

.projects-title-row p {
    color: #6b7280;
    font-size: 13px;
}

.add-project-btn {
    background: #1f4e78;
    color: white;
    border: none;
    border-radius: 7px;
    padding: 11px 18px;
    font-weight: 600;
    cursor: pointer;
}

.add-project-btn:hover {
    opacity: 0.9;
}

/* =========================
   ADD PROJECT FORM
========================= */

.project-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 22px;
}

.project-form-grid label {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}

.project-form-grid input {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #d1d5db;
    border-radius: 7px;
    font-size: 14px;
    outline: none;
}

.project-form-grid input:focus {
    border-color: #1f4e78;
    box-shadow: 0 0 0 3px rgba(31, 78, 120, 0.08);
}

.project-form-actions {
    display: flex;
    gap: 10px;
    margin-top: 24px;
}

#saveProjectBtn {
    background: #1f4e78;
    color: white;
    border: none;
    border-radius: 7px;
    padding: 11px 20px;
    font-weight: 600;
    cursor: pointer;
}

#cancelProjectBtn {
    background: #eef1f4;
    color: #374151;
    border: none;
    border-radius: 7px;
    padding: 11px 20px;
    font-weight: 600;
    cursor: pointer;
}

#saveProjectBtn:hover,
#cancelProjectBtn:hover {
    opacity: 0.9;
}

@media (max-width: 700px) {
    .project-form-grid {
        grid-template-columns: 1fr;
    }
}
/* =========================
   SNAG PHOTO POPUP
========================= */

.photo-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.88);

    align-items: center;
    justify-content: center;
}

.photo-modal-image {
    max-width: 90%;
    max-height: 85%;
    object-fit: contain;
    border-radius: 8px;
}

.photo-modal-close {
    position: absolute;
    top: 25px;
    right: 35px;

    color: white;
    font-size: 40px;
    font-weight: bold;

    cursor: pointer;
}

/* =========================
   PROJECT FORM MODAL
========================= */

.project-modal {
    position: fixed;
    inset: 0;
    z-index: 5000;

    background: rgba(15, 23, 42, 0.55);

    align-items: center;
    justify-content: center;

    padding: 30px;
}

.project-modal-content {
    background: #ffffff;
    width: min(900px, 95%);
    max-height: 90vh;
    overflow-y: auto;

    border-radius: 14px;
    padding: 30px;

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
/* =========================
   PROJECT ACTION BUTTONS
========================= */

.project-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Edit Project */
.edit-project-btn {
    background: #ffffff;
    color: #174a6e;
    border: 1.5px solid #174a6e;

    padding: 10px 18px;
    border-radius: 8px;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;
    transition: all 0.2s ease;
}

.edit-project-btn:hover {
    background: #eef6fb;
    transform: translateY(-1px);
}

/* Keep buttons nicely aligned */
.project-actions button {
    white-space: nowrap;
}
/* =========================
   PROJECT STATUS DROPDOWN
========================= */

#newProjectStatus {
    width: 100%;
    height: 46px;
    padding: 0 14px;

    background: #ffffff;
    border: 1px solid #d7dee7;
    border-radius: 8px;

    font-size: 14px;
    color: #1f2937;

    cursor: pointer;
    outline: none;

    transition: border-color 0.2s ease,
                box-shadow 0.2s ease;
}

#newProjectStatus:hover {
    border-color: #9fb4c7;
}

#newProjectStatus:focus {
    border-color: #174a6e;
    box-shadow: 0 0 0 3px rgba(23, 74, 110, 0.10);
}

/* =========================
   PROJECT STATUS COLOURS
========================= */

.project-status.status-pending {
    background: #fdecec;
    color: #b42318;
    border: 1px solid #f5b7b1;
}

.project-status.status-progress {
    background: #fff4d6;
    color: #9a6700;
    border: 1px solid #f3d37a;
}

.project-status.status-completed {
    background: #e7f6ec;
    color: #18794e;
    border: 1px solid #a7d9b8;
}

/* OVERVIEW STATUS BADGE */

#overviewStatus {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

#overviewStatus.status-pending {
    background: #fdecec;
    color: #b42318;
    border: 1px solid #f5b7b1;
}

#overviewStatus.status-progress {
    background: #fff4d6;
    color: #9a6700;
    border: 1px solid #f3d37a;
}

#overviewStatus.status-completed {
    background: #e7f6ec;
    color: #18794e;
    border: 1px solid #a7d9b8;
}

/* REPORT STATUS BADGE */

#reportProjectStatus {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

#reportProjectStatus.status-pending {
    background: #fdecec;
    color: #b42318;
    border: 1px solid #f5b7b1;
}

#reportProjectStatus.status-progress {
    background: #fff4d6;
    color: #9a6700;
    border: 1px solid #f3d37a;
}

#reportProjectStatus.status-completed {
    background: #e7f6ec;
    color: #18794e;
    border: 1px solid #a7d9b8;
}

/* =========================
   360 PROPERTY VIEW
========================= */

#panoramaViewer {
    width: 100%;
    height: 500px;
    margin-top: 20px;
    border-radius: 12px;
    overflow: hidden;
}

/* =========================
   EDIT SNAG MODAL
========================= */

.edit-issue-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);

    align-items: center;
    justify-content: center;

    padding: 20px;
}

.edit-issue-modal-box {
    width: 100%;
    max-width: 720px;
    max-height: 88vh;
    overflow-y: auto;

    background: #ffffff;
    border-radius: 18px;
    padding: 28px;

    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
}

.edit-issue-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    padding-bottom: 18px;
    margin-bottom: 22px;

    border-bottom: 1px solid #e5e7eb;
}

.edit-issue-modal-header h2 {
    margin: 0;
    font-size: 22px;
}

.edit-issue-modal-header p {
    margin: 5px 0 0;
    color: #6b7280;
    font-size: 14px;
}

#closeEditIssueModal {
    border: none;
    background: transparent;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    color: #6b7280;
}

.edit-issue-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;

    margin-top: 25px;
    padding-top: 20px;

    border-top: 1px solid #e5e7eb;
}

#cancelEditIssueModal {
    padding: 10px 18px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    cursor: pointer;
}

#saveEditIssueModal {
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    background: #111827;
    color: white;
    font-weight: 600;
    cursor: pointer;
}

#saveEditIssueModal:hover {
    opacity: 0.9;
}

/* =========================
   EDIT SNAG FORM FIELDS
========================= */

.edit-issue-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.edit-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.edit-field-full {
    grid-column: 1 / -1;
}

.edit-field label {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}

.edit-field input,
.edit-field select,
.edit-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 12px;

    border: 1px solid #d1d5db;
    border-radius: 9px;

    background: #ffffff;
    font-family: inherit;
    font-size: 14px;

    outline: none;
    transition: 0.2s;
}

.edit-field input:focus,
.edit-field select:focus,
.edit-field textarea:focus {
    border-color: #111827;
    box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.08);
}

.edit-field textarea {
    resize: vertical;
}

@media (max-width: 650px) {
    .edit-issue-form {
        grid-template-columns: 1fr;
    }

    .edit-field-full {
        grid-column: auto;
    }
}

/* =========================
   PROFESSIONAL ISSUE / SNAG CARDS
========================= */

.issue-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-left: 5px solid #111827;
    border-radius: 14px;
    margin-bottom: 16px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    transition: 0.2s ease;
}

.issue-card:hover {
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.09);
}

/* ISSUE TOP HEADER */

/* EXPANDED ISSUE INFORMATION */

.issue-details {
    padding: 22px;
    background: #fafafa;
    border-top: 1px solid #eeeeee;
}

.issue-details p {
    margin: 0 0 11px;
    font-size: 14px;
    line-height: 1.55;
    color: #4b5563;
}

.issue-details p strong {
    color: #111827;
    font-weight: 600;
}

/* ISSUE ACTION BUTTON AREA */

.issue-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #e5e7eb;
}

/* EDIT ISSUE BUTTON */

.edit-issue-btn {
    padding: 10px 16px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #ffffff;
    color: #374151;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s ease;
}

.edit-issue-btn:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

/* OPEN / CLOSED BUTTON */

.status-btn {
    padding: 10px 17px;
    border: none;
    border-radius: 8px;
    background: #111827;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s ease;
}

.status-btn:hover {
    background: #374151;
    transform: translateY(-1px);
}

/* ISSUE PHOTOS */

.issue-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.issue-photos img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 9px;
    border: 1px solid #e5e7eb;
}

/* MOBILE */

@media (max-width: 600px) {

    .issue-details {
        padding: 17px;
    }

    .issue-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .edit-issue-btn,
    .status-btn {
        width: 100%;
    }
}

/* =========================
   360 PROPERTY VIEW
========================= */

.panorama-section {
    margin-top: 28px;
    padding: 24px;

    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

/* TITLE */

.panorama-section h3 {
    margin: 0 0 7px;

    font-size: 18px;
    font-weight: 700;
    color: #111827;
}

/* DESCRIPTION */

.panorama-section p {
    margin: 0 0 18px;

    font-size: 14px;
    line-height: 1.5;
    color: #6b7280;
}

/* UPLOAD BUTTON */

#uploadPanoramaBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 11px 18px;

    border: none;
    border-radius: 8px;

    background: #111827;
    color: #ffffff;

    font-family: inherit;
    font-size: 14px;
    font-weight: 600;

    cursor: pointer;
    transition: 0.2s ease;
}

#uploadPanoramaBtn:hover {
    background: #374151;
    transform: translateY(-1px);
}

/* 360 VIEWER */

#panoramaViewer {
    width: 100%;
    height: 500px;

    margin-top: 20px;

    border-radius: 12px;
    overflow: hidden;

    border: 1px solid #e5e7eb;
    background: #f3f4f6;

    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);
}

/* MOBILE */

@media (max-width: 600px) {

    .panorama-section {
        padding: 18px;
    }

    #uploadPanoramaBtn {
        width: 100%;
    }

    #panoramaViewer {
        height: 350px;
    }
}

/* =========================
   QUALITECH LOGIN BRAND UPDATE
========================= */

/* Company blue panel */
.login-brand-panel {
    background:
        linear-gradient(
            145deg,
            #163f68 0%,
            #1f4e78 55%,
            #2b5f91 100%
        );
}

/* Actual Qualitech logo */
.login-company-logo {
    width: 210px;
    max-width: 100%;
    height: auto;
    object-fit: contain;

    background: #ffffff;
    padding: 10px 14px;
    border-radius: 10px;

    position: relative;
    z-index: 2;
}

/* Small headings change from teal to blue */
.login-small-label {
    color: #1f4e78;
}

.secure-access {
    color: #1f4e78;
}

/* Input focus */
.input-group input:focus {
    border-color: #1f4e78;
    box-shadow: 0 0 0 4px rgba(31, 78, 120, 0.09);
}

/* Checkbox */
.remember-login input {
    accent-color: #1f4e78;
}

/* Sign in button */
.login-btn {
    background: #1f4e78;
    box-shadow: 0 8px 18px rgba(31, 78, 120, 0.20);
}

.login-btn:hover {
    background: #173d60;
    box-shadow: 0 10px 24px rgba(31, 78, 120, 0.25);
}

/* =========================
   LOGIN LAYOUT FIX
========================= */

.login-shell {
    width: 100%;
    max-width: 1180px;
    min-height: 680px;

    display: grid;
    grid-template-columns: 1fr 1fr;
}

.login-brand-panel,
.login-form-panel {
    min-width: 0;
}

.login-brand-content h2 {
    font-size: 40px;
}

.login-company-logo {
    width: 215px;
    max-width: 100%;
}

@media (min-width: 701px) {

    .login-shell {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
    }

    .login-brand-panel {
        display: flex !important;
    }

    .login-form-panel {
        display: flex !important;
    }
}

/* =========================
   FORCE WIDE DESKTOP LOGIN
========================= */

@media (min-width: 800px) {

    .login-page {
        min-height: 100vh;
        padding: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .login-shell {
        width: min(1180px, 94vw) !important;
        height: 680px !important;
        min-height: 680px !important;

        display: grid !important;
        grid-template-columns: 1fr 1fr !important;

        border-radius: 24px;
        overflow: hidden;
    }

    .login-brand-panel {
        display: flex !important;
        width: auto !important;
        height: 100% !important;

        padding: 48px 52px;
    }

    .login-form-panel {
        display: flex !important;
        width: auto !important;
        height: 100% !important;

        padding: 55px;
    }

    .login-card {
        width: 100%;
        max-width: 410px;
    }

    .login-brand-content h2 {
        font-size: 40px;
    }
}

/* Login main heading size adjustment */
.login-brand-content h2 {
    font-size: 34px;
    line-height: 1.15;
    letter-spacing: -0.5px;
}

/* =========================
   MODERN DASHBOARD LAYOUT
========================= */

/* Dashboard background */
#dashboardPage {
    min-height: 100vh;
    background: #f4f7fb;
    padding-left: 245px;
}

/* =========================
   LEFT SIDEBAR
========================= */

.dashboard-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;

    width: 245px;
    padding: 28px 18px 22px;

    display: flex;
    flex-direction: column;

    background: #123f68;
    color: #ffffff;

    z-index: 1000;

    box-shadow: 5px 0 25px rgba(15, 23, 42, 0.08);
}

/* LOGO AREA */

.sidebar-brand {
    padding: 0 8px 28px;
    margin-bottom: 22px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.sidebar-logo {
    display: block;

    width: 165px;
    max-width: 100%;

    padding: 8px 10px;

    background: #ffffff;
    border-radius: 9px;

    object-fit: contain;
}

.sidebar-brand span {
    display: block;

    margin-top: 13px;

    color: rgba(255, 255, 255, 0.55);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
}

/* MENU */

.sidebar-menu {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.sidebar-item {
    width: 100%;

    display: flex;
    align-items: center;
    gap: 13px;

    padding: 12px 14px;

    border: none;
    border-radius: 9px;

    background: transparent;
    color: rgba(255, 255, 255, 0.72);

    font-family: inherit;
    font-size: 13px;
    font-weight: 500;

    text-align: left;

    cursor: pointer;

    transition: 0.2s ease;
}

.sidebar-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.sidebar-item.active {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    font-weight: 700;
}

.sidebar-icon {
    width: 25px;
    height: 25px;

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

    border-radius: 6px;

    background: rgba(255, 255, 255, 0.08);

    font-size: 14px;
}

/* SIDEBAR BOTTOM */

.sidebar-footer {
    margin-top: auto;

    padding: 18px 8px 4px;

    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.sidebar-footer p {
    margin: 0 0 5px;

    color: #ffffff;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.sidebar-footer span {
    color: rgba(255, 255, 255, 0.48);

    font-size: 10px;
    line-height: 1.5;
}

/* =========================
   EXISTING TOP HEADER
========================= */

#dashboardPage .dashboard-header {
    height: 72px;

    padding: 0 38px;

    background: #ffffff;

    border-bottom: 1px solid #e7ebf0;
    box-shadow: none;
}

/* We already have the logo in sidebar */
#dashboardPage .dashboard-brand {
    display: none;
}

#dashboardPage .dashboard-user > span {
    display: inline-block;
    margin-right: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #344054;
}

/* Keep Sign Out */
#dashboardPage #logoutBtn {
    padding: 9px 16px;

    background: #ffffff;
    color: #344054;

    border: 1px solid #d8dee7;
    border-radius: 8px;

    font-size: 12px;
    font-weight: 600;
}

#dashboardPage #logoutBtn:hover {
    background: #f7f9fb;
}

/* =========================
   DASHBOARD CONTENT
========================= */

#dashboardPage .dashboard-content {
    max-width: 1250px;

    margin: 0 auto;

    padding: 38px 42px 60px;
}

/* Current title */

#dashboardPage .dashboard-title h1 {
    color: #172033;

    font-size: 28px;
    letter-spacing: -0.5px;
}

#dashboardPage .dashboard-title p {
    color: #7b8797;

    margin-top: 6px;
}

/* Existing dashboard sections */

#dashboardPage .dashboard-section {
    margin-top: 30px;
}

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

@media (max-width: 900px) {

    #dashboardPage {
        padding-left: 0;
    }

    .dashboard-sidebar {
        display: none;
    }

    #dashboardPage .dashboard-content {
        padding: 28px 20px 50px;
    }
}
/* Keep Sign Out on top-right */
#dashboardPage .dashboard-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

#dashboardPage .dashboard-user {
    margin-left: auto;
    display: flex;
    align-items: center;
}

/* =========================
   MODERN DASHBOARD KPI CARDS
========================= */

#dashboardPage .dashboard-eyebrow {
    display: block;
    margin-bottom: 8px;

    color: #1f4e78;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

#dashboardPage .dashboard-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;

    margin-top: 18px;
}

#dashboardPage .stat-card {
    position: relative;

    min-height: 115px;
    padding: 22px 22px 20px;

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

    background: #ffffff;

    border: 1px solid #e5eaf0;
    border-radius: 14px;

    box-shadow: 0 4px 14px rgba(31, 78, 120, 0.05);

    transition: 0.2s ease;
}

#dashboardPage .stat-card:hover {
    transform: translateY(-2px);

    box-shadow: 0 8px 22px rgba(31, 78, 120, 0.09);
}

/* Small blue accent */
#dashboardPage .stat-card::before {
    content: "";

    position: absolute;
    top: 18px;
    left: 0;

    width: 4px;
    height: 35px;

    background: #1f4e78;

    border-radius: 0 4px 4px 0;
}

#dashboardPage .stat-number {
    margin-bottom: 7px;

    color: #172033;

    font-size: 29px;
    font-weight: 750;
    line-height: 1;
}

#dashboardPage .stat-label {
    color: #7a8696;

    font-size: 12px;
    font-weight: 500;
}

/* Different meaningful accent colours */

#dashboardPage .stat-card:nth-child(2)::before {
    background: #d99a28;
}

#dashboardPage .stat-card:nth-child(3)::before {
    background: #c84c4c;
}

#dashboardPage .stat-card:nth-child(4)::before {
    background: #3b8b68;
}

/* Tablet */
@media (max-width: 1100px) {

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

/* Mobile */
@media (max-width: 600px) {

    #dashboardPage .dashboard-stats {
        grid-template-columns: 1fr;
    }
}
/* =========================
   DASHBOARD ANALYTICS
========================= */

#dashboardPage .dashboard-analytics {
    margin-top: 24px;
    margin-bottom: 32px;
}

#dashboardPage .analytics-card {
    width: 100%;
    padding: 24px 26px;

    background: #ffffff;

    border: 1px solid #e5eaf0;
    border-radius: 14px;

    box-shadow: 0 4px 14px rgba(31, 78, 120, 0.05);
}

#dashboardPage .analytics-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 22px;
}

#dashboardPage .analytics-card-heading span {
    display: block;
    margin-bottom: 6px;

    color: #1f4e78;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

#dashboardPage .analytics-card-heading h2 {
    margin: 0;

    color: #172033;

    font-size: 18px;
    font-weight: 700;
}

#dashboardPage .analytics-card-heading p {
    margin: 3px 0 0;

    color: #8a94a3;

    font-size: 11px;
}

#dashboardPage .dashboard-chart-container {
    position: relative;

    width: 100%;
    height: 270px;

    padding-top: 8px;
}

#dashboardPage #dashboardStatusChart {
    width: 100% !important;
    height: 100% !important;
}

@media (max-width: 600px) {

    #dashboardPage .analytics-card {
        padding: 20px;
    }

    #dashboardPage .analytics-card-heading {
        flex-direction: column;
    }

    #dashboardPage .dashboard-chart-container {
        height: 230px;
    }
}
/* Clickable dashboard KPI cards */
#dashboardPage .stat-card {
    cursor: pointer;
}

#dashboardPage .stat-card:hover {
    transform: translateY(-3px);
    border-color: #cbd7e3;
    box-shadow: 0 10px 24px rgba(31, 78, 120, 0.10);
}

#dashboardPage .stat-card::after {
    content: "View details →";

    position: absolute;
    right: 18px;
    bottom: 14px;

    color: #98a2b3;
    font-size: 9px;
    font-weight: 600;

    opacity: 0;
    transition: 0.2s ease;
}

#dashboardPage .stat-card:hover::after {
    opacity: 1;
}

/* =========================
   DASHBOARD ISSUES PANEL
========================= */

#dashboardPage .dashboard-issues-panel {
    margin: 24px 0 32px;
    padding: 25px 26px;

    background: #ffffff;
    border: 1px solid #e5eaf0;
    border-radius: 14px;

    box-shadow: 0 4px 14px rgba(31, 78, 120, 0.05);
}

#dashboardPage .dashboard-issues-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;

    padding-bottom: 20px;
    margin-bottom: 18px;

    border-bottom: 1px solid #edf0f4;
}

#dashboardPage .dashboard-issues-header span {
    display: block;
    margin-bottom: 6px;

    color: #b42318;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

#dashboardPage .dashboard-issues-header h2 {
    margin: 0 0 5px;

    color: #172033;
    font-size: 19px;
}

#dashboardPage .dashboard-issues-header p {
    margin: 0;

    color: #7b8797;
    font-size: 12px;
}

#dashboardPage #closeDashboardIssues {
    padding: 8px 12px;

    background: #ffffff;
    color: #667085;

    border: 1px solid #d8dee7;
    border-radius: 7px;

    font-family: inherit;
    font-size: 11px;
    font-weight: 600;

    cursor: pointer;
}

#dashboardPage #closeDashboardIssues:hover {
    background: #f7f9fb;
}

/* Individual issue */

#dashboardPage .dashboard-issue-item {
    padding: 17px 18px;
    margin-bottom: 10px;

    background: #fbfcfd;

    border: 1px solid #e6eaf0;
    border-left: 4px solid #c84c4c;
    border-radius: 9px;
}

#dashboardPage .dashboard-issue-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

#dashboardPage .dashboard-issue-id {
    color: #1f4e78;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

#dashboardPage .dashboard-issue-main h3 {
    margin: 4px 0 5px;

    color: #172033;
    font-size: 14px;
}

#dashboardPage .dashboard-issue-main p {
    margin: 0;

    color: #7b8797;
    font-size: 11px;
}

#dashboardPage .dashboard-open-badge {
    padding: 5px 10px;

    background: #fdecec;
    color: #b42318;

    border: 1px solid #f5c2bd;
    border-radius: 20px;

    font-size: 9px;
    font-weight: 700;
}

#dashboardPage .dashboard-issue-meta {
    display: flex;
    gap: 28px;

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

    border-top: 1px solid #edf0f4;

    color: #7b8797;
    font-size: 10px;
}

#dashboardPage .dashboard-issue-meta strong {
    color: #344054;
    font-weight: 700;
}

#dashboardPage .dashboard-no-issues {
    padding: 30px;

    text-align: center;

    color: #7b8797;
    font-size: 12px;
}

/* Closed dashboard issues */

#dashboardPage .closed-dashboard-issue {
    border-left-color: #3b8b68;
}

#dashboardPage .dashboard-closed-badge {
    padding: 5px 10px;

    background: #e7f6ec;
    color: #18794e;

    border: 1px solid #a7d9b8;
    border-radius: 20px;

    font-size: 9px;
    font-weight: 700;
}

/* =========================
   FIX DASHBOARD KPI GRID
========================= */

#dashboardPage .dashboard-stats {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
    width: 100%;
}

#dashboardPage .dashboard-stats > .stat-card {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 115px !important;
    min-height: 115px !important;
    margin: 0 !important;
    box-sizing: border-box;
}

@media (max-width: 1100px) {
    #dashboardPage .dashboard-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 600px) {
    #dashboardPage .dashboard-stats {
        grid-template-columns: 1fr !important;
    }
}

/* =========================
   PROJECT SEARCH & FILTER
========================= */

#dashboardPage .project-filter-bar {
    display: flex;
    align-items: center;
    gap: 12px;

    margin: 18px 0 20px;
    padding: 14px;

    background: #ffffff;
    border: 1px solid #e5eaf0;
    border-radius: 12px;

    box-shadow: 0 3px 12px rgba(31, 78, 120, 0.04);
}

#dashboardPage .project-search-box {
    flex: 1;
}

#dashboardPage #projectSearchInput {
    width: 100%;
    height: 40px;

    padding: 0 14px;

    font-family: inherit;
    font-size: 12px;
    color: #344054;

    background: #f9fafb;

    border: 1px solid #dfe4ea;
    border-radius: 8px;

    outline: none;
}

#dashboardPage #projectSearchInput:focus {
    background: #ffffff;
    border-color: #1f4e78;

    box-shadow: 0 0 0 3px rgba(31, 78, 120, 0.08);
}

#dashboardPage #projectStatusFilter {
    min-width: 180px;
    height: 40px;

    padding: 0 12px;

    font-family: inherit;
    font-size: 12px;
    color: #344054;

    background: #ffffff;

    border: 1px solid #dfe4ea;
    border-radius: 8px;

    outline: none;
    cursor: pointer;
}

#dashboardPage #projectStatusFilter:focus {
    border-color: #1f4e78;
}

@media (max-width: 650px) {

    #dashboardPage .project-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    #dashboardPage #projectStatusFilter {
        width: 100%;
    }
}

/* =========================================
   MODERN DASHBOARD PROJECT CARDS
========================================= */

#dashboardPage #projectsList {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Main project card */

#dashboardPage .project-card {
    position: relative;

    width: 100%;
    padding: 22px 24px;

    background: #ffffff;

    border: 1px solid #e5eaf0;
    border-radius: 14px;

    box-shadow: 0 4px 14px rgba(31, 78, 120, 0.05);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

#dashboardPage .project-card:hover {
    transform: translateY(-2px);

    border-color: #d4dee8;

    box-shadow:
        0 9px 24px rgba(31, 78, 120, 0.09);
}

/* Project heading */

#dashboardPage .project-card h3 {
    margin: 0 0 9px;

    color: #172033;

    font-size: 17px;
    font-weight: 750;
}

/* Project information */

#dashboardPage .project-card p {
    margin: 5px 0;

    color: #667085;

    font-size: 11px;
    line-height: 1.6;
}

#dashboardPage .project-card strong {
    color: #344054;
    font-weight: 650;
}

/* Status badges */

#dashboardPage .project-status {
    display: inline-flex;
    align-items: center;

    padding: 5px 10px;

    border-radius: 20px;

    font-size: 9px;
    font-weight: 700;

    white-space: nowrap;
}

#dashboardPage .status-pending {
    background: #fff4d6;
    color: #9a6700;

    border: 1px solid #f3d37a;
}

#dashboardPage .status-progress {
    background: #eaf2f8;
    color: #1f4e78;

    border: 1px solid #bdd0e2;
}

#dashboardPage .status-completed {
    background: #e7f6ec;
    color: #18794e;

    border: 1px solid #a7d9b8;
}

/* Project action buttons */

#dashboardPage .project-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    gap: 10px;

    margin-top: 18px;
    padding-top: 16px;

    border-top: 1px solid #edf0f4;
}

/* Edit button */

#dashboardPage .edit-project-btn {
    min-width: 110px;

    padding: 9px 15px;

    background: #ffffff;
    color: #1f4e78;

    border: 1px solid #b9c9d8;
    border-radius: 8px;

    font-family: inherit;
    font-size: 11px;
    font-weight: 650;

    cursor: pointer;

    transition: 0.2s ease;
}

#dashboardPage .edit-project-btn:hover {
    background: #f3f7fa;

    border-color: #1f4e78;
}

/* Open Project button */

#dashboardPage .open-project-btn {
    min-width: 125px;

    padding: 10px 16px;

    background: #1f4e78;
    color: #ffffff;

    border: 1px solid #1f4e78;
    border-radius: 8px;

    font-family: inherit;
    font-size: 11px;
    font-weight: 650;

    cursor: pointer;

    box-shadow:
        0 4px 10px rgba(31, 78, 120, 0.15);

    transition: 0.2s ease;
}

#dashboardPage .open-project-btn:hover {
    background: #173d60;

    transform: translateY(-1px);

    box-shadow:
        0 6px 14px rgba(31, 78, 120, 0.20);
}

/* Mobile */

@media (max-width: 650px) {

    #dashboardPage .project-card {
        padding: 18px;
    }

    #dashboardPage .project-actions {
        justify-content: stretch;
    }

    #dashboardPage .edit-project-btn,
    #dashboardPage .open-project-btn {
        flex: 1;
    }
}

/* FIX ADD PROJECT BUTTON ALIGNMENT */

#dashboardPage .projects-title-row {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    width: 100% !important;
}

#dashboardPage #addProjectBtn {
    margin: 0 !important;
    align-self: flex-start !important;
    transform: translateY(-2px);
}

/* =========================================
   FINAL PROJECT HEADER ALIGNMENT
========================================= */

/* Projects heading row */
#dashboardPage .projects-title-row {
    width: 100% !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 20px !important;

    margin: 0 0 16px 0 !important;
}

/* Keep title on left */
#dashboardPage .projects-title-row > div {
    flex: 1 !important;
    min-width: 0;
}

/* Projects title */
#dashboardPage .projects-title-row h2 {
    margin: 0 0 4px 0 !important;
}

/* Subtitle */

/* Add Project stays aligned on right */
#dashboardPage #addProjectBtn {
    position: static !important;
    transform: none !important;

    flex: 0 0 auto !important;
    align-self: flex-start !important;

    margin: -6px 0 0 0 !important;

    height: 40px;
    padding: 0 18px;
}

/* Search/filter MUST take its own full row */
#dashboardPage .project-filter-bar {
    clear: both !important;

    width: 100% !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 190px !important;

    gap: 12px !important;

    margin: 0 0 20px 0 !important;

    box-sizing: border-box;
}

/* =========================
   PROJECTS TOOLBAR - ONE ROW
========================= */

#dashboardPage .projects-title-row {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 0 0 18px 0 !important;
}

/* Projects title area */
#dashboardPage .projects-title-row > div:first-child {
    flex: 0 0 auto !important;
    min-width: 190px !important;
}

#dashboardPage .projects-title-row h2 {
    margin: 0 0 2px 0 !important;
}

#dashboardPage .projects-title-row p {
    margin: 0 !important;
}

/* Add Project */
#dashboardPage #addProjectBtn {
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    align-self: center !important;
    height: 42px !important;
}

/* Search + Status */
#dashboardPage .project-filter-bar {
    flex: 1 !important;
    width: calc(100% - 24px) !important;
    margin: 0 12px !important;
    display: grid !important;
    grid-template-columns: minmax(250px, 1fr) 150px !important;
    gap: 10px !important;
    align-items: center !important;
    clear: none !important;
    box-sizing: border-box !important;
}

#dashboardPage .project-search-box,
#dashboardPage #projectSearchInput,
#dashboardPage #projectStatusFilter {
    width: 100% !important;
    box-sizing: border-box !important;
}

#dashboardPage #projectSearchInput,
#dashboardPage #projectStatusFilter {
    height: 42px !important;
}

/* FIX PROJECTS SECTION STACKING */
#dashboardPage .dashboard-section .section-heading {
    display: block !important;
    width: 100% !important;
}

#dashboardPage #projectsList {
    display: block !important;
    width: 100% !important;
    margin-top: 16px !important;
}

/* Keep search + status filter inside the dashboard */
#dashboardPage .project-filter-bar {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    grid-template-columns: minmax(0, 1fr) 150px !important;
}

#dashboardPage #projectStatusFilter {
    width: 100% !important;
    max-width: 150px !important;
    box-sizing: border-box !important;
}
/* =========================================
   INSPECTION WORKSPACE - MODERN REDESIGN
========================================= */

#inspectionPage {
    min-height: 100vh;
    background: #f4f7fb;
    color: #172033;
}

/* ---------- TOP HEADER ---------- */

#inspectionPage .inspection-header {
    height: 76px;
    background: #ffffff;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 38px;

    border-bottom: 1px solid #e4e9f0;
    box-shadow: 0 2px 10px rgba(18, 63, 104, 0.04);

    position: relative;
    z-index: 10;
}

/* Logo + company text */

#inspectionPage .inspection-brand {
    display: flex;
    align-items: center;
    gap: 18px;
}

#inspectionPage .inspection-logo {
    width: 155px;
    height: auto;
    object-fit: contain;
}

/* Vertical divider after logo */

#inspectionPage .inspection-brand::after {
    content: "";
    width: 1px;
    height: 28px;
    background: #d9e0e8;
    order: 1;
}

#inspectionPage .inspection-brand p {
    margin: 0;
    color: #53657a;
    font-size: 14px;
    font-weight: 500;
    order: 2;
}

/* ---------- BACK TO DASHBOARD ---------- */

#inspectionPage #backDashboardBtn {
    background: #ffffff;
    color: #123f68;

    border: 1px solid #b9c9da;
    border-radius: 8px;

    padding: 10px 17px;

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;
    transition: 0.2s ease;
}

#inspectionPage #backDashboardBtn:hover {
    background: #123f68;
    color: #ffffff;
    border-color: #123f68;
}

/* ---------- MAIN WORKSPACE ---------- */

/* =========================================
   QUALITECH INSPECTION WORKSPACE
========================================= */

#inspectionPage {
    min-height: 100vh;
    background: #f4f7fb !important;
}

/* Main content */
#inspectionPage .inspection-main {
    max-width: 1240px;
    margin: 0 auto;
    padding: 34px 38px 60px;
}

/* PROJECT NAME */

#inspectionPage #workspaceProjectName {
    margin: 0;
    font-size: 30px;
    font-weight: 750;
    color: #123f68;
    letter-spacing: -0.5px;
}

#inspectionPage #workspaceProjectName::before {
    content: "PROJECT";
    display: block;
    margin-bottom: 7px;

    color: #6c8299;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

#inspectionPage #workspaceProjectLocation {
    margin: 7px 0 26px;
    color: #64748b;
    font-size: 14px;
    font-weight: 500;
}

/* Hide old separator lines */

/* =========================================
   WORKSPACE NAVIGATION
========================================= */

/* Blue active tab */

/* =========================================
   OVERVIEW CARD
========================================= */

#inspectionPage #overviewSection {
    background: #ffffff;

    border: 1px solid #e3e9f0;
    border-radius: 14px;

    padding: 28px 30px;

    box-shadow: 0 6px 20px rgba(18, 63, 104, 0.06);

    min-height: 330px;
}

#inspectionPage #overviewSection h2 {
    margin: 0 0 22px;

    color: #123f68;
    font-size: 21px;
    font-weight: 750;

    padding-bottom: 15px;

    border-bottom: 1px solid #edf1f5;
}

/* Blue accent beside title */
#inspectionPage #overviewSection h2::before {
    content: "";
    display: inline-block;

    width: 4px;
    height: 22px;

    margin-right: 11px;

    background: #1f4e78;
    border-radius: 4px;

    vertical-align: -4px;
}

/* =========================================
   INSPECTION WORKSPACE SIDEBAR
========================================= */

#inspectionPage {
    padding-left: 0;
    box-sizing: border-box;
}

/* Sidebar */

#inspectionPage .inspection-sidebar {
    position: fixed;

    top: 0;
    left: 0;
    bottom: 0;

    width: 230px;

    background: #123f68;
    color: #ffffff;

    padding: 25px 16px 20px;

    display: flex;
    flex-direction: column;

    box-sizing: border-box;

    z-index: 1000;

    box-shadow: 5px 0 22px rgba(15, 23, 42, 0.08);
}

/* Logo */

#inspectionPage .inspection-sidebar-brand {
    padding: 0 7px 23px;

    border-bottom:
        1px solid rgba(255,255,255,0.12);

    margin-bottom: 22px;
}

#inspectionPage .inspection-sidebar-logo {
    width: 155px;
    max-width: 100%;

    display: block;

    background: #ffffff;

    padding: 8px 10px;

    border-radius: 8px;
}

#inspectionPage .inspection-sidebar-brand span {
    display: block;

    margin-top: 12px;

    color: rgba(255,255,255,0.55);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1.3px;
}

/* Menu */

#inspectionPage .inspection-sidebar-menu {
    display: flex;
    flex-direction: column;

    gap: 7px;
}

/* Footer */

/* Header must start AFTER sidebar */

#inspectionPage .inspection-header {
    width: 100%;
    box-sizing: border-box;
}

/* Responsive */

@media (max-width: 900px) {

    #inspectionPage {
        padding-left: 0;
    }

    #inspectionPage .inspection-sidebar {
        display: none;
    }
}

/* ========================================
   INSPECTION WORKSPACE - LEFT SIDEBAR
======================================== */

#inspectionPage {
    min-height: 100vh;
    background: #f4f7fb;
}

/* Make room for sidebar */
#inspectionPage .inspection-main {
    margin-left: 220px;
    max-width: none;
    padding: 40px 45px;
}

/* Sidebar */

/* Navigation buttons */

/* Hover */

/* Active tab */

/* Remove old horizontal nav appearance */
#inspectionPage .inspection-main > hr {
    display: none;
}

/* ===== FORCE WORKSPACE NAV INTO LEFT SIDEBAR ===== */

/* =========================================
   INSPECTION SIDEBAR - FINAL MENU DESIGN
========================================= */

#inspectionPage .inspection-sidebar-menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

#inspectionPage .inspection-side-item {
    width: 100%;
    height: 44px;

    display: flex;
    align-items: center;

    padding: 0 16px;

    border: none;
    border-radius: 8px;

    background: transparent;
    color: rgba(255, 255, 255, 0.75);

    font-family: inherit;
    font-size: 14px;
    font-weight: 500;

    text-align: left;
    cursor: pointer;

    transition: 0.2s ease;
}

#inspectionPage .inspection-side-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

#inspectionPage .inspection-side-item.active {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-weight: 700;
}

/* Hide old workspace top navigation */
#inspectionPage main > nav {
    display: none !important;
}

/* Hide the line below the old navigation */
#inspectionPage main > nav + hr {
    display: none !important;
}

/* Hide the OLD top workspace navigation only */

/* =========================================
   MODERN INSPECTION OVERVIEW
========================================= */

#inspectionPage #overviewSection {
    background: #ffffff;
    border: 1px solid #e5eaf0;
    border-radius: 14px;
    padding: 30px 34px;
    margin-top: 18px;
    box-shadow: 0 5px 18px rgba(15, 23, 42, 0.05);
}

/* Header */

/* Status */
#inspectionPage .overview-status-badge {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: 8px 14px;
    border-radius: 20px;
    background: #fff4d6;
    border: 1px solid #f3d37a;
    color: #9a6700;
    font-size: 12px;
    font-weight: 700;
}

/* Two-column information area */

/* Bottom status row */

/* Smaller screens */

/* OVERVIEW STATUS POSITION FIX */

#inspectionPage #overviewSection {
    position: relative;
}

#inspectionPage #overviewStatus {
    position: absolute;
    top: 28px;
    right: 32px;

    display: inline-flex;
    align-items: center;

    width: auto;
    padding: 7px 14px;
    border-radius: 20px;
}

/* =========================
   PLANS PAGE HEADER
========================= */

#inspectionPage .plans-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    padding: 28px 32px;
    margin-bottom: 24px;

    background: #ffffff;
    border: 1px solid #e4eaf1;
    border-radius: 14px;

    box-shadow: 0 5px 18px rgba(15, 23, 42, 0.05);
}

#inspectionPage .plans-eyebrow {
    display: block;
    margin-bottom: 7px;

    color: #1f4e78;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

#inspectionPage .plans-page-header h2 {
    margin: 0 0 8px;
    color: #172033;
    font-size: 24px;
    font-weight: 700;
}

#inspectionPage .plans-page-header p {
    margin: 0;
    max-width: 650px;

    color: #697586;
    font-size: 13px;
    line-height: 1.6;
}

#inspectionPage .plans-upload-btn {
    flex-shrink: 0;

    padding: 11px 18px;
    border: none;
    border-radius: 8px;

    background: #1f4e78;
    color: #ffffff;

    font-family: inherit;
    font-size: 13px;
    font-weight: 700;

    cursor: pointer;
    box-shadow: 0 5px 12px rgba(31, 78, 120, 0.18);
}

#inspectionPage .plans-upload-btn:hover {
    background: #173d60;
}

/* =========================
   UNIT PLAN MODERN HEADER
========================= */

#inspectionPage .unit-plan-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    padding: 24px 26px;
    margin-bottom: 24px;

    background: #ffffff;
    border: 1px solid #e5eaf0;
    border-radius: 12px;
}

#inspectionPage .unit-plan-label {
    display: block;
    margin-bottom: 6px;

    color: #1f4e78;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

#inspectionPage .unit-plan-header h3 {
    margin: 0;
    color: #172033;
    font-size: 20px;
    font-weight: 700;
}

#inspectionPage .unit-plan-header p {
    margin: 6px 0 0;
    color: #7b8797;
    font-size: 12px;
    line-height: 1.5;
}

#inspectionPage .add-snag-btn {
    flex-shrink: 0;

    padding: 11px 18px;
    border: none;
    border-radius: 8px;

    background: #1f4e78;
    color: #ffffff;

    font-family: inherit;
    font-size: 12px;
    font-weight: 700;

    cursor: pointer;
    transition: 0.2s ease;
}

#inspectionPage .add-snag-btn:hover {
    background: #173d60;
    transform: translateY(-1px);
}

/* =========================
   MODERN FLOOR PLAN AREA
========================= */

#inspectionPage #planWrapper {
    position: relative;

    width: 100%;
    min-height: 430px;

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

    padding: 30px;

    background: #f8fafc;
    border: 1px solid #e5eaf0;
    border-radius: 12px;

    box-sizing: border-box;
    overflow: hidden;
}

#inspectionPage #uploadedPlan {
    display: block;

    max-width: 720px !important;
    width: auto;
    height: auto !important;

    object-fit: contain;
}

/* =========================
   NEW SNAG / ISSUE MODAL
========================= */

#inspectionPage .issue-form-modal {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100vh;

    background: rgba(15, 23, 42, 0.48);

    align-items: center;
    justify-content: center;

    padding: 30px;
    box-sizing: border-box;

    z-index: 3000;
}

/* Popup box */
#inspectionPage .issue-form-modal-box {
    width: min(760px, 95vw);
    max-height: 88vh;
    overflow-y: auto;

    background: #ffffff;
    border-radius: 16px;

    padding: 28px 30px 30px;

    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
}

/* Top heading */
#inspectionPage .issue-form-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    padding-bottom: 18px;
    margin-bottom: 24px;

    border-bottom: 1px solid #e7ebf0;
}

#inspectionPage .issue-form-label {
    display: block;
    margin-bottom: 5px;

    color: #1f4e78;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

#inspectionPage .issue-form-modal-header h2 {
    margin: 0;

    color: #172033;
    font-size: 23px;
}

/* X button */
#inspectionPage .issue-modal-close {
    width: 36px;
    height: 36px;

    border: 1px solid #e1e6ec;
    border-radius: 8px;

    background: #f8fafc;
    color: #667085;

    font-size: 22px;
    line-height: 1;

    cursor: pointer;
}

#inspectionPage .issue-modal-close:hover {
    background: #eef2f6;
    color: #172033;
}

/* Inputs */
#inspectionPage .issue-form-modal-box input,
#inspectionPage .issue-form-modal-box select,
#inspectionPage .issue-form-modal-box textarea {
    width: 100%;
    box-sizing: border-box;

    padding: 11px 12px;

    border: 1px solid #d9e0e8;
    border-radius: 8px;

    background: #ffffff;
    font-family: inherit;
}

#inspectionPage .issue-form-modal-box input:focus,
#inspectionPage .issue-form-modal-box select:focus,
#inspectionPage .issue-form-modal-box textarea:focus {
    outline: none;
    border-color: #1f4e78;
    box-shadow: 0 0 0 3px rgba(31, 78, 120, 0.08);
}

/* Bottom buttons */

#inspectionPage #cancelIssueBtn {
    padding: 10px 18px;

    background: #ffffff;
    color: #344054;

    border: 1px solid #d5dce5;
    border-radius: 8px;

    cursor: pointer;
}

#inspectionPage #saveIssueBtn {
    padding: 10px 20px;

    background: #1f4e78;
    color: #ffffff;

    border: none;
    border-radius: 8px;

    font-weight: 700;
    cursor: pointer;
}

#inspectionPage #saveIssueBtn:hover {
    background: #173d60;
}

/* ==============================
   PROFESSIONAL NEW SNAG FORM
============================== */

#issueFormPanel .issue-form-modal-box {
    width: min(850px, 92vw);
    max-height: 88vh;
    overflow-y: auto;
    padding: 28px 32px;
    box-sizing: border-box;
}

#issueFormPanel .issue-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    row-gap: 8px;
}

#issueFormPanel .issue-form-grid input,
#issueFormPanel .issue-form-grid select,
#issueFormPanel .issue-form-grid textarea {
    width: 100%;
    box-sizing: border-box;
}

#issueFormPanel .issue-form-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid #e5e7eb;
}

#issueFormPanel #cancelIssueBtn,
#issueFormPanel #saveIssueBtn {
    min-width: 120px;
    padding: 11px 18px;
    border-radius: 7px;
    cursor: pointer;
}

@media (max-width: 700px) {
    #issueFormPanel .issue-form-grid {
        grid-template-columns: 1fr;
    }
}

#issueFormPanel .issue-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

#issueFormPanel .issue-field-full {
    grid-column: 1 / -1;
}

/* =====================================
   FINAL NEW SNAG MODAL POLISH
===================================== */

/* Keep popup properly centered */
#issueFormPanel {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 24px;
    box-sizing: border-box;
    background: rgba(15, 23, 42, 0.42);
    z-index: 5000;
}

/* JS currently opens it as display:block,
   so center the box this way */
#issueFormPanel .issue-form-modal-box {
    width: min(900px, calc(100vw - 48px));
    max-height: calc(100vh - 48px);
    overflow-y: auto;

    margin: 0 auto;

    background: #ffffff;
    border-radius: 14px;
    padding: 30px 34px;
    box-sizing: border-box;

    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.25);
}

/* Better spacing between grid fields */
#issueFormPanel .issue-form-grid {
    gap: 20px 24px;
}

#issueFormPanel .issue-field label {
    font-weight: 600;
    margin-bottom: 2px;
}

/* Inputs */
#issueFormPanel .issue-field input,
#issueFormPanel .issue-field select,
#issueFormPanel .issue-field textarea {
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #d8dee7;
    border-radius: 7px;
    background: #ffffff;
    font: inherit;
}

#issueFormPanel .issue-field textarea {
    min-height: 95px;
    resize: vertical;
}

/* Date field */
#issueDueDate {
    cursor: pointer;
}

#issueDueDate::-webkit-calendar-picker-indicator {
    cursor: pointer;
    padding: 6px;
    border-radius: 5px;
    background-color: #eef4f8;
}

/* PHOTO AREA */
#issueFormPanel .issue-photo-section {
    margin-top: 24px;
    padding: 20px;
    border: 1px dashed #bcc9d6;
    border-radius: 10px;
    background: #f8fafc;
}

#issueFormPanel .issue-photo-title {
    display: block;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 5px;
}

#issueFormPanel .issue-photo-help {
    margin: 0 0 15px;
    font-size: 13px;
    color: #64748b;
}

#issueFormPanel .issue-photo-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

#issueFormPanel .issue-photo-actions button {
    padding: 10px 15px;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    background: #ffffff;
    cursor: pointer;
    font-weight: 600;
}

/* Photo previews */
#issueFormPanel #photoPreview {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
}

/* Bottom buttons */
#issueFormPanel .issue-form-modal-actions {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
}

/* Mobile */
@media (max-width: 700px) {
    #issueFormPanel {
        padding: 12px;
    }

    #issueFormPanel .issue-form-modal-box {
        width: 100%;
        max-height: calc(100vh - 24px);
        padding: 22px 18px;
    }
}

/* ==============================
   CUSTOM DUE DATE CALENDAR
============================== */

#issueFormPanel .custom-date-field {
    position: relative;
    width: 100%;
}

#issueFormPanel .custom-date-field input {
    width: 100%;
    height: 44px;
    padding: 10px 48px 10px 12px;
    box-sizing: border-box;
    cursor: pointer;
    background: #fff;
}

#issueFormPanel .date-picker-btn {
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);

    width: 34px;
    height: 34px;
    padding: 0;

    border: none;
    border-radius: 7px;
    background: #eef4f8;
    cursor: pointer;
    font-size: 16px;
}

/* Calendar popup */

/* Month header */
#issueFormPanel .calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

#issueFormPanel .calendar-header strong {
    font-size: 15px;
    color: #123f68;
}

#issueFormPanel .calendar-header button {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 7px;
    background: #f1f5f9;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
}

/* Sun Mon Tue... */
#issueFormPanel .calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;

    margin-bottom: 7px;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
}

/* Calendar dates */
#issueFormPanel .calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

#issueFormPanel .calendar-day {
    height: 34px;
    border: none;
    border-radius: 7px;

    background: transparent;
    cursor: pointer;

    font-size: 13px;
    color: #334155;
}

#issueFormPanel .calendar-day:hover {
    background: #eaf2f8;
    color: #123f68;
}

#issueFormPanel .calendar-day.today {
    border: 1px solid #123f68;
    font-weight: 700;
}

#issueFormPanel .calendar-day.selected {
    background: #123f68;
    color: #fff;
    font-weight: 700;
}

#issueFormPanel .calendar-empty {
    height: 34px;
}
#issueFormPanel .custom-calendar {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;

    width: 310px;
    padding: 16px;
    box-sizing: border-box;

    background: #ffffff;
    border: 1px solid #dbe3ea;
    border-radius: 12px;

    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.20);

    z-index: 9999;
}

/* ONLY CENTER THE ISSUE POPUP */

#issueFormPanel .issue-form-modal-box {
    position: fixed !important;

    left: 50% !important;
    transform: translateX(-50%) !important;

    right: auto !important;
}

/* ================================
   ISSUES PAGE - NEW DESIGN
================================ */

#issuesSection {
    padding: 28px 32px;
    box-sizing: border-box;
}

/* HEADER */

.issues-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
}

.issues-page-header h2 {
    margin: 0;
    font-size: 28px;
    color: #162033;
}

.issues-page-header > div:first-child p {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 14px;
}

/* SEARCH + FILTER */

.issues-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

#issueSearch {
    width: 280px;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #dbe3ea;
    border-radius: 9px;
    background: #ffffff;
    box-sizing: border-box;
    outline: none;
}

#issueStatusFilter {
    height: 44px;
    padding: 0 35px 0 14px;
    border: 1px solid #dbe3ea;
    border-radius: 9px;
    background: #ffffff;
    cursor: pointer;
    outline: none;
}

#issueSearch:focus,
#issueStatusFilter:focus {
    border-color: #123f68;
}

/* STAT CARDS */

.issue-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 26px;
}

.issue-stat-card {
    min-height: 92px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 15px;

    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;

    box-sizing: border-box;
}

.issue-stat-icon {
    width: 46px;
    height: 46px;

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

    border-radius: 50%;
    background: #edf4fa;

    color: #123f68;
    font-size: 20px;
    font-weight: 700;
}

.issue-stat-card strong {
    display: block;
    font-size: 25px;
    line-height: 1;
    color: #162033;
}

.issue-stat-card p {
    margin: 7px 0 0;
    color: #64748b;
    font-size: 13px;
}

/* EMPTY MESSAGE */

#noIssuesMessage {
    padding: 30px;
    text-align: center;

    background: #ffffff;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;

    color: #64748b;
}

/* ==================================
   PROFESSIONAL ISSUE ROWS
================================== */

#issuesList {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#issuesList .issue-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

/* Main collapsed row */

#issuesList .issue-header {
    display: grid;
    grid-template-columns: minmax(300px, 2.4fr) 1fr 0.8fr 0.8fr 0.9fr 80px;
    align-items: center;
    gap: 18px;

    padding: 18px 20px;
    cursor: pointer;
    box-sizing: border-box;
}

/* Photo + issue information */

.issue-row-main {
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 0;
}

.issue-row-photo {
    width: 76px;
    height: 76px;
    flex: 0 0 76px;

    border-radius: 9px;
    overflow: hidden;
    background: #f1f5f9;
}

.issue-row-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
}

.issue-no-photo {
    width: 100%;
    height: 100%;

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

    color: #94a3b8;
    font-size: 22px;
}

.issue-row-info {
    min-width: 0;
}

.issue-row-id {
    display: block;
    margin-bottom: 3px;

    color: #123f68;
    font-size: 13px;
}

.issue-row-info h3 {
    margin: 0 0 4px;
    font-size: 15px;
    color: #172033;
}

.issue-row-info p {
    margin: 0 0 8px;

    max-width: 300px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    color: #64748b;
    font-size: 12px;
}

/* Small category tags */

.issue-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.issue-tags span {
    padding: 4px 8px;

    border-radius: 20px;
    background: #eef2f6;

    color: #475569;
    font-size: 10px;
    font-weight: 600;
}

/* Other columns */

.issue-row-location,
.issue-row-priority,
.issue-row-status,
.issue-row-date {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.issue-header small {
    color: #94a3b8;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.issue-row-location strong,
.issue-row-date strong {
    color: #334155;
    font-size: 12px;
}

/* Priority badges */

.priority-badge {
    width: fit-content;
    padding: 6px 10px;
    border-radius: 20px;

    font-size: 11px;
    font-weight: 700;
}

.priority-badge.low {
    background: #eaf2ff;
    color: #2563eb;
}

.priority-badge.medium {
    background: #fff4d8;
    color: #b7791f;
}

.priority-badge.high,
.priority-badge.critical {
    background: #feecec;
    color: #dc2626;
}

/* Status */

.issue-row-status .issue-status {
    width: fit-content;
    padding: 6px 10px;
    border-radius: 20px;

    font-size: 11px;
    font-weight: 700;
}

.issue-row-status .issue-status.open {
    background: #e8f7ef;
    color: #16805b;
}

.issue-row-status .issue-status.closed {
    background: #eef2f6;
    color: #64748b;
}

/* View */

.issue-row-view {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* ==========================================
   PROFESSIONAL ISSUE DETAILS POPUP
========================================== */

#issuesList .issue-expanded.issue-details-popup-open {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;

    width: min(900px, calc(100vw - 70px)) !important;
    max-height: calc(100vh - 70px) !important;

    padding: 0 !important;

    background: #ffffff;
    border: none;
    border-radius: 16px;

    box-shadow: 0 25px 70px rgba(15, 23, 42, 0.30);

    overflow-y: auto;
    box-sizing: border-box;

    z-index: 10001;
}

/* =========================
   POPUP HEADER
========================= */

.issue-popup-top {
    position: relative;

    padding: 25px 70px 20px 28px;

    background: #f8fafc;

    border-bottom: 1px solid #e2e8f0;
    border-radius: 16px 16px 0 0;
}

.issue-popup-label {
    display: block;

    margin-bottom: 5px;

    color: #2563eb;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.issue-popup-top h2 {
    margin: 0;

    color: #172033;

    font-size: 24px;
    font-weight: 700;
}

.issue-popup-top p {
    margin: 6px 0 0 !important;

    color: #64748b !important;

    font-size: 13px;
}

/* =========================
   CLOSE BUTTON
========================= */

.close-issue-details {
    position: absolute;

    top: 20px;
    right: 22px;

    width: 38px;
    height: 38px;

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

    padding: 0;

    border: none;
    border-radius: 9px;

    background: #e9eef5;

    color: #334155;

    font-size: 25px;
    line-height: 1;

    cursor: pointer;
}

.close-issue-details:hover {
    background: #dce4ed;
}

/* =========================
   ISSUE INFORMATION
========================= */

.issue-details-popup-open > p {
    display: inline-block;

    width: calc(33.333% - 35px);

    margin: 20px 0 0 28px !important;

    vertical-align: top;

    color: #334155 !important;

    font-size: 13px;

    box-sizing: border-box;
}

.issue-details-popup-open > p strong {
    display: block;

    margin-bottom: 6px;

    color: #94a3b8 !important;

    font-size: 10px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* =========================
   SAVED PHOTOS
========================= */

.issue-details-popup-open .saved-issue-photos {
    margin: 25px 28px 0;
    padding-top: 20px;

    border-top: 1px solid #e2e8f0;
}

.issue-details-popup-open .saved-issue-photos img {
    width: 145px !important;
    height: 110px !important;

    margin: 0 10px 10px 0 !important;

    object-fit: cover;

    border: 1px solid #e2e8f0;
    border-radius: 10px !important;
}

/* =========================
   BOTTOM ACTIONS
========================= */

.issue-details-popup-open .issue-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;

    margin-top: 25px;
    padding: 18px 28px;

    background: #f8fafc;

    border-top: 1px solid #e2e8f0;
    border-radius: 0 0 16px 16px;
}

.issue-details-popup-open .edit-issue-btn,
.issue-details-popup-open .status-btn {
    min-height: 42px;

    margin: 0;

    padding: 0 18px;

    border-radius: 8px;

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;
}

.issue-details-popup-open .edit-issue-btn {
    background: #ffffff;

    color: #123f68;

    border: 1px solid #123f68;
}

.issue-details-popup-open .status-btn {
    background: #123f68;

    color: #ffffff;

    border: 1px solid #123f68;
}

.issue-details-popup-open .edit-issue-btn:hover {
    background: #f1f5f9;
}

.issue-details-popup-open .status-btn:hover {
    background: #0d3153;
}

/* BIG BLUE VIEW BUTTON */

.issue-view-btn {
    min-width: 78px;
    height: 42px;

    padding: 0 18px;

    background: #123f68 !important;
    color: #ffffff !important;

    border: none !important;
    border-radius: 8px;

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

    box-shadow: 0 3px 8px rgba(18, 63, 104, 0.18);
}

.issue-view-btn:hover {
    background: #0d3153 !important;
    transform: translateY(-1px);
}

/* ================================
   ISSUE POPUP SUMMARY CARDS
================================ */

.issue-popup-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;

    padding: 22px 28px 5px;
}

.popup-summary-card {
    min-height: 72px;

    padding: 14px 16px;

    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;

    box-sizing: border-box;
}

.popup-summary-card span {
    display: block;

    margin-bottom: 8px;

    color: #94a3b8;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.7px;
}

.popup-summary-card strong {
    color: #123f68 !important;

    font-size: 15px;
    font-weight: 700;
}

/* PRIORITY CARD */

.priority-summary {
    background: #fff8e8;
    border-color: #f6dfaa;
}

.priority-summary strong {
    color: #b7791f !important;
}

/* STATUS CARD */

.status-summary {
    background: #edf9f2;
    border-color: #ccebd9;
}

.status-summary strong {
    color: #16805b !important;
}

/* ================================
   ISSUE POPUP DETAIL FIELDS
================================ */

.issue-details-popup-open > p {
    display: inline-block;

    width: calc(33.333% - 38px);

    min-height: 62px;

    margin: 16px 0 0 28px !important;
    padding: 12px 14px;

    vertical-align: top;

    background: #f8fafc;

    border: 1px solid #e7edf3;
    border-radius: 9px;

    box-sizing: border-box;

    color: #334155 !important;
    font-size: 13px;
}

.issue-details-popup-open > p strong {
    display: block;

    margin-bottom: 7px;

    color: #7c8b9d !important;

    font-size: 9px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 0.6px;
}

/* ================================
   ISSUE POPUP PHOTOS
================================ */

.issue-details-popup-open .saved-issue-photos {
    margin: 22px 28px 0;
    padding: 20px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.issue-photos-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 14px;
}

.issue-photos-heading strong {
    display: block;

    color: #172033 !important;
    font-size: 14px;
}

.issue-photos-heading span {
    display: block;

    margin-top: 3px;

    color: #94a3b8;
    font-size: 11px;
}

.issue-details-popup-open .saved-issue-photos img {
    width: 150px !important;
    height: 110px !important;

    margin: 0 10px 5px 0 !important;

    object-fit: cover;

    background: #ffffff;

    border: 1px solid #dbe3ea;
    border-radius: 9px !important;

    cursor: pointer;

    transition: 0.2s ease;
}

.issue-details-popup-open .saved-issue-photos img:hover {
    transform: translateY(-2px);

    box-shadow: 0 5px 14px rgba(15, 23, 42, 0.12);
}

/* ==========================================
   FINAL INSPECTION REPORT HEADER
========================================== */

/* ==========================================
   FINAL REPORT INSPECTION SUMMARY
========================================== */

/* KEEP GENERATED REPORT INSIDE WORKSPACE */

#reportsSection {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

#generatedReportArea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

#generatedReportArea .report-section {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* FIX FINAL REPORT POSITION BESIDE SIDEBAR */

#reportsSection {
    position: relative;
    left: 0 !important;
    margin-left: 0 !important;
}

#generatedReportArea {
    position: relative !important;
    left: 0 !important;
    margin-left: 0 !important;

    width: 100% !important;
    max-width: 100% !important;

    padding: 0 !important;
    box-sizing: border-box;
}

#generatedReportArea .report-section {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* =========================================
   FINAL INSPECTION WORKSPACE LAYOUT FIX
========================================= */

#inspectionPage .inspection-main {
    margin-left: 230px !important;
    margin-right: 0 !important;
    max-width: none !important;
    width: calc(100% - 230px) !important;
    padding: 34px 38px 60px !important;
    box-sizing: border-box !important;
}

#inspectionPage #reportsSection {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* =========================================
   PROFESSIONAL REPORT - A4 PAGE
========================================= */

.professional-report-pages {
    margin-top: 28px;
}

.report-page {
    width: 210mm;
    min-height: 297mm;
    margin: 0 auto 30px;
    background: #ffffff;
    box-sizing: border-box;
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.12);
}

/* FIX REPORT PAGE TOP ALIGNMENT */
.report-page:not(.report-cover-page) {
    padding-top: 10mm !important;
}

.report-page:not(.report-cover-page) .report-page-header {
    margin-top: 0 !important;
}

.report-page:not(.report-cover-page) .report-page-title {
    margin-top: 18px !important;
}

/* =========================================
   PAGE 1 - REPORT COVER
========================================= */

.report-cover-page {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 28mm 24mm 22mm;
    overflow: hidden;
}

/* BLUE DECORATIVE AREA */

.report-cover-page::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 42%;
    height: 16mm;
    background: #123f68;
}

.report-cover-page::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 8mm;
    background: #123f68;
}

/* BRAND */

/* MAIN COVER TITLE */

/* CLIENT / DATE / INSPECTOR */

/* COVER FOOTER */

/* =========================================
   REPORT PAGE 2 - OVERVIEW
========================================= */

/* HEADER */

.report-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 14px;
    border-bottom: 2px solid #123f68;
}

.report-page-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.report-page-brand img {
    width: 48px;
    height: 32px;
    object-fit: contain;
}

.report-page-brand div {
    display: flex;
    flex-direction: column;
}

.report-page-brand strong {
    color: #123f68;
    font-size: 15px;
    font-weight: 800;
}

.report-page-brand span {
    color: #64748b;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 1px;
}

.report-header-label {
    color: #64748b;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
}

/* PAGE TITLE */

.report-page-title {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 25px 0 24px;
}

.report-section-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    background: #123f68;
    color: #ffffff;

    border-radius: 8px;

    font-size: 16px;
    font-weight: 800;
}

.report-page-title h2 {
    margin: 0;
    color: #172033;
    font-size: 25px;
}

.report-page-title p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 11px;
}

/* CONTENT BLOCKS */

.report-content-block {
    margin-top: 22px;
}

.report-content-block h3 {
    margin: 0 0 12px;
    padding-bottom: 8px;

    color: #123f68;
    font-size: 15px;

    border-bottom: 1px solid #dbe3ea;
}

/* TABLE OF CONTENTS */

.report-toc {
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    overflow: hidden;
}

/* BODY TEXT */

.report-body-text {
    margin: 0;
    color: #475569;
    font-size: 11px;
    line-height: 1.7;
}

/* IMPORTANT NOTE */

/* PAGE FOOTER */

.report-page-footer {
    position: absolute;
    left: 20mm;
    right: 20mm;
    bottom: 12mm;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-top: 9px;

    border-top: 1px solid #cbd5e1;

    color: #64748b;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.6px;
}

/* =========================================
   REPORT PAGE 3 - INSPECTION DETAILS
========================================= */

.report-details-page {
    position: relative;
    padding: 22mm 20mm 20mm;
    overflow: hidden;
}

/* PROPERTY DETAIL GRID */

.report-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.report-detail-card {
    min-height: 58px;
    padding: 13px 15px;

    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;

    box-sizing: border-box;
}

.report-detail-card span {
    display: block;
    margin-bottom: 7px;

    color: #94a3b8;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.8px;
}

.report-detail-card strong {
    display: block;

    color: #172033;
    font-size: 12px;
    font-weight: 700;

    overflow-wrap: anywhere;
}

/* INSPECTION SUMMARY CARDS */

.report-details-page .report-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.report-summary-box {
    min-height: 78px;
    padding: 15px;

    background: #123f68;
    border-radius: 9px;

    box-sizing: border-box;
}

.report-summary-box span {
    display: block;
    margin-bottom: 12px;

    color: #dbeafe;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.7px;
}

.report-summary-box strong {
    color: #ffffff;
    font-size: 24px;
    font-weight: 800;
}

/* ISSUE PRIORITY SUMMARY */

.report-status-list {
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    overflow: hidden;
}

.report-status-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 46px;
    padding: 0 16px;

    background: #ffffff;
    border-bottom: 1px solid #e8edf2;
}

.report-status-list > div:last-child {
    border-bottom: none;
}

.report-status-list span {
    color: #475569;
    font-size: 11px;
    font-weight: 600;
}

.report-status-list strong {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 32px;
    height: 27px;

    background: #f1f5f9;
    color: #123f68;

    border-radius: 6px;

    font-size: 12px;
    font-weight: 800;
}

/* =========================================
   REPORT PAGE 4 - FLOOR PLAN
========================================= */

.report-floorplan-page {
    position: relative;
    padding: 22mm 20mm 20mm;
    overflow: hidden;
}

/* FLOOR PLAN CONTAINER */

.report-floorplan-box {
    width: 100%;
    height: 155mm;

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

    padding: 14px;

    background: #f8fafc;
    border: 1px solid #dbe3ea;
    border-radius: 10px;

    box-sizing: border-box;
    overflow: hidden;
}

/* FLOOR PLAN IMAGE */

#reportFloorPlanImage {
    display: none;

    width: 100%;
    height: 100%;

    object-fit: contain;

    background: #ffffff;
}

/* NO FLOOR PLAN MESSAGE */

.report-no-floorplan {
    width: 100%;
    height: 100%;

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

    text-align: center;
}

.report-no-floorplan strong {
    color: #334155;
    font-size: 15px;
}

.report-no-floorplan span {
    margin-top: 6px;

    color: #94a3b8;
    font-size: 10px;
}

/* FLOOR PLAN NOTE */

.report-floorplan-note {
    margin-top: 18px;
    padding: 15px 17px;

    background: #f4f7fb;
    border-left: 4px solid #123f68;
    border-radius: 6px;
}

.report-floorplan-note strong {
    color: #123f68;
    font-size: 11px;
}

.report-floorplan-note p {
    margin: 6px 0 0;

    color: #64748b;
    font-size: 10px;
    line-height: 1.6;
}

/* =========================================
   REPORT PAGE 5 - CHECKLIST SUMMARY
========================================= */

.report-checklist-page {
    position: relative;
    padding: 22mm 20mm 20mm;
    overflow: hidden;
}

/* CHECKLIST SUMMARY CARDS */

.report-checklist-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 24px;
}

.report-checklist-stats > div {
    min-height: 72px;
    padding: 14px 15px;

    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-top: 3px solid #123f68;
    border-radius: 8px;

    box-sizing: border-box;
}

.report-checklist-stats span {
    display: block;
    margin-bottom: 9px;

    color: #94a3b8;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.7px;
}

.report-checklist-stats strong {
    color: #123f68;
    font-size: 22px;
    font-weight: 800;
}

/* CHECKLIST TABLE */

.report-checklist-table-wrap {
    width: 100%;
    overflow: hidden;

    border: 1px solid #dbe3ea;
    border-radius: 8px;
}

.report-checklist-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.report-checklist-table th {
    padding: 11px 10px;

    background: #123f68;
    color: #ffffff;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.5px;

    text-align: left;
}

.report-checklist-table td {
    padding: 10px;

    color: #475569;
    font-size: 9px;
    line-height: 1.45;

    border-bottom: 1px solid #e8edf2;
    vertical-align: top;

    overflow-wrap: anywhere;
}

.report-checklist-table tbody tr:last-child td {
    border-bottom: none;
}

/* COLUMN WIDTHS */

.report-checklist-table th:nth-child(1),
.report-checklist-table td:nth-child(1) {
    width: 8%;
    text-align: center;
}

.report-checklist-table th:nth-child(2),
.report-checklist-table td:nth-child(2) {
    width: 42%;
}

.report-checklist-table th:nth-child(3),
.report-checklist-table td:nth-child(3) {
    width: 15%;
    text-align: center;
}

.report-checklist-table th:nth-child(4),
.report-checklist-table td:nth-child(4) {
    width: 35%;
}

/* RESULT BADGES */

.report-result-badge {
    display: inline-block;
    min-width: 35px;

    padding: 4px 7px;

    border-radius: 5px;

    font-size: 8px;
    font-weight: 800;

    text-align: center;
}

.report-result-yes {
    background: #e8f7ef;
    color: #16805b;
}

.report-result-no {
    background: #fdecec;
    color: #b42318;
}

.report-result-na {
    background: #eef2f6;
    color: #64748b;
}

/* =========================================
   PHOTO ANNOTATION MODAL
========================================= */

.photo-annotation-modal {
    display: none;
    position: fixed;
    inset: 0;

    background: rgba(15, 23, 42, 0.75);

    align-items: center;
    justify-content: center;

    padding: 25px;
    z-index: 99999;
}

.photo-annotation-box {
    width: min(900px, 95vw);
    max-height: 92vh;

    background: #ffffff;
    border-radius: 14px;

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.30);

    overflow: hidden;
}

.photo-annotation-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 18px 22px;

    border-bottom: 1px solid #e2e8f0;
}

.photo-annotation-header h3 {
    margin: 0;
    color: #172033;
    font-size: 18px;
}

.photo-annotation-header p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 12px;
}

#closeAnnotationBtn {
    width: 36px;
    height: 36px;

    border: none;
    border-radius: 8px;

    background: #f1f5f9;
    color: #475569;

    font-size: 24px;
    cursor: pointer;
}

/* PHOTO AREA */

.annotation-canvas-wrap {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background: #1e293b;

    max-height: 65vh;
    overflow: auto;
}

#annotationCanvas {
    display: block;

    max-width: 100%;
    max-height: 60vh;

    background: #ffffff;

    cursor: crosshair;
}

/* BUTTONS */

.annotation-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;

    padding: 16px 22px;

    border-top: 1px solid #e2e8f0;
}

.annotation-actions button {
    min-height: 40px;
    padding: 0 18px;

    border: 1px solid #cbd5e1;
    border-radius: 7px;

    background: #ffffff;
    color: #334155;

    font-weight: 700;
    cursor: pointer;
}

#saveAnnotationBtn {
    background: #123f68;
    border-color: #123f68;
    color: #ffffff;
}

#saveAnnotationBtn:hover {
    background: #0d3153;
}

/* BEAUTIFUL ANNOTATE PHOTO BUTTON */

.issue-photo-preview-box {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    gap: 7px;

    margin-top: 12px;
    margin-right: 12px;

    vertical-align: top;
}

.issue-photo-preview-box img {
    display: block;

    width: 120px !important;
    height: 120px !important;

    object-fit: cover;

    border-radius: 9px !important;
    border: 1px solid #e2e8f0;

    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.10);
}

.annotate-photo-btn {
    width: 100%;
    min-height: 34px;

    border: none;
    border-radius: 7px;

    background: #123f68;
    color: #ffffff;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2px;

    cursor: pointer;

    box-shadow: 0 2px 6px rgba(18, 63, 104, 0.18);

    transition: 0.2s ease;
}

.annotate-photo-btn::before {
    content: "↗ ";
    font-size: 14px;
}

.annotate-photo-btn:hover {
    background: #0d3153;
    transform: translateY(-1px);
}

/* =========================================
   REPORT PAGE 6+ - SNAG / ISSUE DETAILS
========================================= */

.report-snag-page {
    position: relative;
    padding: 22mm 20mm 20mm;
    overflow: hidden;
}

/* ISSUE HEADING */

.report-snag-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 18px;
    padding: 15px 17px;

    background: #f5f8fb;
    border-left: 4px solid #123f68;
    border-radius: 7px;
}

.report-snag-heading span {
    display: block;

    margin-bottom: 4px;

    color: #94a3b8;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.8px;
}

.report-snag-heading h3 {
    margin: 0;

    color: #123f68;
    font-size: 19px;
    font-weight: 800;
}

.report-snag-heading .report-snag-priority {
    margin: 0;
    padding: 7px 11px;

    background: #eaf2f8;
    color: #123f68;

    border-radius: 6px;

    font-size: 9px;
    font-weight: 800;
}

/* ISSUE INFORMATION */

/* DEFECT DESCRIPTION */

/* PHOTO SECTION */

.report-snag-photo-section {
    margin-top: 17px;
}
.report-snag-photos {
 padding-top: 25px;
}

.report-snag-section-title {
    margin-bottom: 10px;
    padding-bottom: 7px;

    color: #123f68;

    border-bottom: 1px solid #dbe3ea;

    font-size: 12px;
    font-weight: 800;
}

.report-snag-photos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 12px;
}

.report-snag-photo {
    min-height: 55mm;

    padding: 5px;

    background: #f8fafc;

    border: 1px solid #dbe3ea;
    border-radius: 7px;

    box-sizing: border-box;
    overflow: hidden;
}

.report-snag-photo img {
    display: block;

    width: 100%;
    height: auto;
    max-height: 76mm;

    object-fit: contain;

    background: #ffffff;

    border-radius: 4px;
}

/* NO PHOTO / NO SNAGS */

.report-snag-no-photo,
.report-no-snags {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 85mm;

    background: #f8fafc;

    border: 1px dashed #cbd5e1;
    border-radius: 9px;

    color: #94a3b8;

    font-size: 10px;
    text-align: center;
}

.report-no-snags strong {
    color: #334155;
    font-size: 15px;
}

.report-no-snags p {
    margin: 7px 0 0;

    color: #94a3b8;
    font-size: 10px;
}

/* =========================================
   FINAL REPORT PAGE - CONCLUSION
========================================= */

.report-conclusion-page {
    position: relative;
    padding: 22mm 20mm 20mm;
    overflow: hidden;
}

/* RECOMMENDATION BOX */

.report-conclusion-highlight {
    margin-top: 24px;
    padding: 18px 20px;

    background: #f4f7fb;
    border-left: 4px solid #123f68;
    border-radius: 7px;
}

.report-conclusion-highlight span {
    display: block;
    margin-bottom: 7px;

    color: #2563eb;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
}

.report-conclusion-highlight strong {
    display: block;

    color: #123f68;

    font-size: 16px;
    font-weight: 800;
}

.report-conclusion-highlight p {
    margin: 8px 0 0;

    color: #64748b;

    font-size: 10px;
    line-height: 1.7;
}

/* DISCLAIMER SPACING */

/* QUALITECH CLOSING BOX */

.report-closing-box {
    display: flex;
    align-items: center;
    gap: 17px;

    margin-top: 30px;
    padding: 20px;

    background: #123f68;
    border-radius: 10px;
}

.report-closing-box img {
    width: 58px;
    height: 45px;

    object-fit: contain;

    padding: 5px;

    background: #ffffff;
    border-radius: 6px;
}

.report-closing-box div {
    display: flex;
    flex-direction: column;
}

.report-closing-box strong {
    color: #ffffff;

    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.report-closing-box span {
    margin-top: 3px;

    color: #dbeafe;

    font-size: 9px;
    font-weight: 600;
}

.report-closing-box p {
    margin: 9px 0 0;

    color: #ffffff;

    font-size: 10px;
}

/* =========================================
   HIDE OLD REPORT DESIGN
   New professional A4 report is used instead
========================================= */

#generatedReportArea > .report-section {
    display: none !important;
}

/* =========================================
   PROFESSIONAL REPORTS DASHBOARD
========================================= */

#reportsSection {
    padding: 28px;
}

/* TOP HEADER */

#reportsSection .report-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 22px 24px;
    margin-bottom: 18px;

    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;

    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}

#reportsSection .report-heading h2 {
    margin: 0;

    color: #172033;
    font-size: 22px;
    font-weight: 800;
}

#reportsSection .report-heading p {
    margin: 5px 0 0;

    color: #64748b;
    font-size: 12px;
}

/* ACTION BUTTON AREA */

#reportsSection .report-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;

    gap: 9px;
}

/* ALL REPORT BUTTONS */

#reportsSection .report-actions button {
    min-height: 42px;

    padding: 0 17px;

    border-radius: 8px;

    font-size: 11px;
    font-weight: 700;

    cursor: pointer;

    transition: 0.2s ease;
}

/* GENERATE REPORT */

#generateReportBtn {
    background: #123f68;
    color: #ffffff;

    border: 1px solid #123f68;
}

#generateReportBtn:hover {
    background: #0d3153;
}

/* PDF + WORD */

.report-action-secondary {
    background: #ffffff;
    color: #123f68;

    border: 1px solid #123f68;
}

.report-action-secondary:hover {
    background: #f1f6fa;
}

/* EMAIL */

.report-action-email {
    background: #eaf2f8;
    color: #123f68;

    border: 1px solid #c9dce9;
}

.report-action-email:hover {
    background: #dceaf4;
}

/* PROJECT SUMMARY CARDS */

#reportsSection .report-summary {
    display: grid;
    grid-template-columns: repeat(5, 1fr);

    gap: 12px;

    margin-bottom: 26px;
}

#reportsSection .report-card {
    min-height: 92px;

    padding: 16px;

    background: #ffffff;

    border: 1px solid #e2e8f0;
    border-radius: 10px;

    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.04);

    box-sizing: border-box;
}

#reportsSection .report-card span {
    display: block;

    margin-bottom: 10px;

    color: #94a3b8;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.7px;

    text-transform: uppercase;
}

#reportsSection .report-card strong {
    display: block;

    color: #172033;

    font-size: 14px;
    font-weight: 800;

    line-height: 1.35;
    overflow-wrap: anywhere;
}

/* STATUS CARD */

#reportProjectStatus {
    color: #16805b !important;
}

/* RESPONSIVE */

@media (max-width: 1100px) {

    #reportsSection .report-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    #reportsSection .report-summary {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =========================================
   REPORT ACTION BUTTON LAYOUT
========================================= */

#reportsSection .report-actions {
    display: grid;

    grid-template-columns: auto auto 125px;
    grid-template-rows: 40px 40px;

    gap: 8px;

    align-items: center;
}

/* GENERATE REPORT */

#generateReportBtn {
    grid-column: 1;
    grid-row: 1 / 3;

    height: 46px;

    padding: 0 20px;

    background: #123f68;
    color: #ffffff;

    border: 1px solid #123f68;
    border-radius: 8px;
}

/* SEND TO CLIENT */

#emailReportBtn {
    grid-column: 2;
    grid-row: 1 / 3;

    height: 46px;

    padding: 0 18px;

    background: #eaf2f8;
    color: #123f68;

    border: 1px solid #c9dce9;
    border-radius: 8px;
}

/* =========================================
   REPORT DOWNLOAD BUTTONS - RIGHT SIDE
========================================= */

/* EXPORT REPORT TEXT */

/* PDF + WORD BUTTONS */

/* HOVER */

/* =========================================
   FINAL REPORT EXPORT BUTTON POSITION
========================================= */

/* Allow buttons to sit beside the report */
#generatedReportArea {
    position: relative;
}

/* Export controls - RIGHT SIDE of report */

/* Hide Export Report writing */

/* PDF + WORD BUTTONS */

/* Hover */

/* =========================================
   FINAL REPORT BUTTON POSITION
========================================= */

/* Report area becomes positioning reference */
#generatedReportArea {
    position: relative;
    padding-top: 10px;
}

/* PDF BUTTON */
#downloadProfessionalPdfBtn {
    position: absolute !important;

    top: 15px;
    right: 0;

    width: 145px !important;
    height: 40px !important;

    display: none;

    align-items: center;
    justify-content: center;

    background: #123f68 !important;
    color: #ffffff !important;

    border: none !important;
    border-radius: 8px !important;

    font-size: 11px;
    font-weight: 700;

    cursor: pointer;

    box-shadow: 0 3px 8px rgba(18, 63, 104, 0.18);

    z-index: 20;
}

/* WORD BUTTON */

/* HOVER */
#downloadProfessionalPdfBtn:hover {
    background: #0d3153 !important;
}

/* =========================================
   SEND TO CLIENT BUTTON - FINAL STYLE
========================================= */

#emailReportBtn {
    height: 46px !important;
    padding: 0 20px !important;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: #123f68 !important;
    color: #ffffff !important;

    border: none !important;
    border-radius: 8px !important;

    font-size: 11px;
    font-weight: 700;

    cursor: pointer;

    box-shadow: 0 3px 8px rgba(18, 63, 104, 0.18);

    transition: 0.2s ease;
}

#emailReportBtn:hover {
    background: #0d3153 !important;
    transform: translateY(-1px);
}

/* =========================================
   SEND REPORT TO CLIENT MODAL
========================================= */

.send-report-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 9999;

    align-items: center;
    justify-content: center;

    padding: 20px;
}

.send-report-modal-box {
    width: 100%;
    max-width: 620px;
    max-height: 90vh;
    overflow-y: auto;

    background: #ffffff;
    border-radius: 14px;

    box-shadow: 0 20px 55px rgba(15, 23, 42, 0.25);
}

/* HEADER */

.send-report-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    padding: 24px 26px 20px;

    border-bottom: 1px solid #e2e8f0;
}

.send-report-label {
    display: block;
    margin-bottom: 5px;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;

    color: #123f68;
}

.send-report-modal-header h2 {
    margin: 0 0 5px;

    font-size: 21px;
    color: #0f172a;
}

.send-report-modal-header p {
    margin: 0;

    font-size: 12px;
    color: #64748b;
}

#closeSendReportModal {
    width: 34px;
    height: 34px;

    border: none;
    border-radius: 7px;

    background: #f1f5f9;
    color: #475569;

    font-size: 22px;
    cursor: pointer;
}

/* FORM */

.send-report-form {
    padding: 22px 26px 10px;
}

.send-report-field {
    margin-bottom: 17px;
}

.send-report-field label {
    display: block;

    margin-bottom: 7px;

    font-size: 11px;
    font-weight: 700;

    color: #334155;
}

.send-report-field input,
.send-report-field textarea {
    width: 100%;
    box-sizing: border-box;

    padding: 11px 12px;

    border: 1px solid #cbd5e1;
    border-radius: 8px;

    background: #ffffff;
    color: #0f172a;

    font-family: inherit;
    font-size: 13px;

    outline: none;
}

.send-report-field input:focus,
.send-report-field textarea:focus {
    border-color: #123f68;
    box-shadow: 0 0 0 3px rgba(18, 63, 104, 0.08);
}

.send-report-field textarea {
    resize: vertical;
}

/* ATTACHMENT */

.send-report-attachment {
    margin: 0 26px 20px;
    padding: 13px 15px;

    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
}

.send-report-attachment > div {
    display: flex;
    align-items: center;
    gap: 12px;
}

.send-report-attachment > div > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border-radius: 7px;

    background: #123f68;
    color: #ffffff;

    font-size: 10px;
    font-weight: 800;
}

.send-report-attachment strong {
    display: block;

    font-size: 12px;
    color: #0f172a;
}

.send-report-attachment p {
    margin: 3px 0 0;

    font-size: 10px;
    color: #64748b;
}

/* BUTTONS */

.send-report-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;

    padding: 18px 26px 24px;

    border-top: 1px solid #e2e8f0;
}

#cancelSendReportBtn,
#confirmSendReportBtn {
    min-width: 115px;
    height: 40px;

    border-radius: 8px;

    font-size: 11px;
    font-weight: 700;

    cursor: pointer;
}

#cancelSendReportBtn {
    background: #ffffff;
    color: #475569;

    border: 1px solid #cbd5e1;
}

#confirmSendReportBtn {
    background: #123f68;
    color: #ffffff;

    border: none;
}

#confirmSendReportBtn:hover {
    background: #0d3153;
}

/* =========================================
   PROFESSIONAL REPORT - PDF PRINT
========================================= */

/* =========================================
   PROFESSIONAL REPORT - PDF PRINT
========================================= */

@media print {

    /* Hide the normal app */
    #inspectionPage .inspection-sidebar,
#inspectionPage .inspection-header,
#reportsSection > .report-heading,
#reportsSection > .report-summary,
#downloadProfessionalPdfBtn,
#emailReportBtn {
        display: none !important;
    }

    /* Keep the report path visible */
    #inspectionPage,
    #inspectionPage main,
    #reportsSection,
    #generatedReportArea,
    #professionalReportPages {
        display: block !important;
    }

    /* Remove normal website spacing */
    body,
    #inspectionPage,
    #inspectionPage main,
    #reportsSection,
    #generatedReportArea {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        background: white !important;
    }
    /* Remove inspection app/sidebar space from PDF */
#inspectionPage {
    display: block !important;
}

#inspectionPage main {
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: none !important;
}

#reportsSection {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: none !important;
}

    #professionalReportPages {
        width: 210mm !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* One report page = one PDF page */
    #professionalReportPages .report-page {
        width: 210mm !important;
        min-height: 297mm !important;
        margin: 0 !important;
        box-shadow: none !important;
        page-break-after: always !important;
        break-after: page !important;
    }

    #professionalReportPages .report-page:last-child {
        page-break-after: auto !important;
        break-after: auto !important;
    }
/* Hide inspection workspace content outside the report */
.inspection-main > #workspaceProjectName,
.inspection-main > #workspaceProjectLocation,
.inspection-main > hr {
    display: none !important;
}
/* Remove normal inspection-main layout from PDF */
#inspectionPage .inspection-main {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

#inspectionPage .inspection-main {
    grid-template-columns: 1fr !important;
    grid-template-areas: none !important;
}
#professionalReportPages {
    margin-left: 0 !important;
    left: 0 !important;
    transform: none !important;
}

#reportsSection,
#generatedReportArea {
    margin-left: 0 !important;
    padding-left: 0 !important;
}
#reportsSection.workspaceSection {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;

    width: 100% !important;
    max-width: none !important;
}

/* Reset report preview spacing for PDF */
#professionalReportPages.professional-report-pages {
    margin: 0 !important;
    padding: 0 !important;
    width: 210mm !important;
}

#professionalReportPages .report-page {
    margin: 0 !important;
    width: 210mm !important;
    min-height: 297mm !important;
}
    @page {
        size: A4;
        margin: 0;
    }
}

/* ========================================
   DASHBOARD REPORTS - PROJECT CARDS
======================================== */

#dashboardReportsSection {
    padding-bottom: 40px;
}

#dashboardReportsList {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 18px;
    margin-top: 25px;
}

/* Each report/project card */
#dashboardReportsList > div {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#dashboardReportsList > div:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.10);
}

/* Project name */
#dashboardReportsList h3,
#dashboardReportsList h4 {
    color: #123f68;
    margin: 4px 0 10px;
    font-size: 19px;
}

/* Normal report information */
#dashboardReportsList p {
    margin: 6px 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.6;
}

/* View Report button */
#dashboardReportsList button {
    margin-top: 15px;
    background: #123f68;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease;
}

#dashboardReportsList button:hover {
    background: #0d3153;
}

/* Reports heading spacing */
#dashboardReportsSection .section-heading {
    margin-bottom: 10px;
}

/* Empty reports message */
.empty-reports {
    grid-column: 1 / -1;
    padding: 35px;
    text-align: center;
    background: #ffffff;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    color: #64748b;
}

/* =====================================
   PROFESSIONAL PROJECT REPORT CARDS
===================================== */

#dashboardReportsList {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 25px;
}

.dashboard-report-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
    transition: 0.2s ease;
}

.dashboard-report-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10);
}

.report-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 14px;
}

.dashboard-report-id {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 0.5px;
}

.report-status {
    padding: 6px 10px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.report-status.pending {
    background: #fff7df;
    color: #9a6700;
}

.report-status.inspection-in-progress {
    background: #e8f1fb;
    color: #123f68;
}

.report-status.inspection-completed {
    background: #e8f7ee;
    color: #247a47;
}

.dashboard-report-info h3 {
    margin: 0 0 6px;
    color: #0f2942;
    font-size: 20px;
}

.report-property {
    margin: 0 0 20px !important;
    color: #64748b !important;
    font-size: 12px !important;
}

.report-property span {
    margin: 0 4px;
}

.report-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
    padding: 16px 0;
    border-top: 1px solid #edf1f5;
    border-bottom: 1px solid #edf1f5;
}

.report-details-grid div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.report-details-grid span {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: #94a3b8;
}

.report-details-grid strong {
    font-size: 12px;
    color: #334155;
}

.report-counts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 16px;
}

.report-count-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    padding: 10px 12px;
}

.report-count-box strong {
    display: block;
    color: #123f68;
    font-size: 20px;
}

.report-count-box span {
    color: #64748b;
    font-size: 10px;
}

.open-count strong {
    color: #b42318;
}

.dashboard-report-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 18px;
}

.report-updated {
    color: #94a3b8;
    font-size: 10px;
}

.view-project-report-btn {
    margin: 0 !important;
    padding: 9px 15px !important;
    background: #123f68 !important;
    color: white !important;
    border: none !important;
    border-radius: 7px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    cursor: pointer;
}

.view-project-report-btn:hover {
    background: #0d3153 !important;
}

@media (max-width: 900px) {
    #dashboardReportsList {
        grid-template-columns: 1fr;
    }
}
/* ==========================================
   REPORT CARDS - FINAL CLEAN DESIGN
========================================== */

#dashboardReportsList {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    margin-top: 24px !important;
    width: 100% !important;
}

/* CARD */
#dashboardReportsList .dashboard-report-card {
    background: #ffffff !important;
    border: 1px solid #e4eaf0 !important;
    border-left: 5px solid #123f68 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    box-shadow: 0 4px 14px rgba(15, 42, 68, 0.07) !important;
    min-width: 0 !important;
}

/* TOP ROW */
#dashboardReportsList .report-card-top {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
}

#dashboardReportsList .dashboard-report-id {
    color: #7b8794 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
}

/* STATUS BADGES */
#dashboardReportsList .report-status {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    padding: 5px 10px !important;
    border-radius: 20px !important;
    font-size: 9px !important;
    font-weight: 700 !important;
}

#dashboardReportsList .report-status.pending {
    background: #fff3cd !important;
    color: #8a6100 !important;
}

#dashboardReportsList .report-status.inspection-in-progress {
    background: #e4effb !important;
    color: #123f68 !important;
}

#dashboardReportsList .report-status.inspection-completed {
    background: #e2f4e8 !important;
    color: #267447 !important;
}

/* PROJECT NAME */
#dashboardReportsList .dashboard-report-info h3 {
    margin: 0 0 5px !important;
    color: #153957 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}

/* PROPERTY */
#dashboardReportsList .report-property {
    margin: 0 0 15px !important;
    color: #718096 !important;
    font-size: 11px !important;
}

/* DETAILS */
#dashboardReportsList .report-details-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px 18px !important;
    padding: 14px 0 !important;
    border-top: 1px solid #edf1f5 !important;
    border-bottom: 1px solid #edf1f5 !important;
}

#dashboardReportsList .report-details-grid div {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}

#dashboardReportsList .report-details-grid span {
    color: #94a3b8 !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    letter-spacing: 0.6px !important;
}

#dashboardReportsList .report-details-grid strong {
    color: #334155 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}

/* SNAG COUNTERS */
#dashboardReportsList .report-counts {
    display: flex !important;
    gap: 10px !important;
    margin-top: 14px !important;
}

#dashboardReportsList .report-count-box {
    flex: 1 !important;
    background: #f5f8fb !important;
    border: 1px solid #e5ebf0 !important;
    border-radius: 8px !important;
    padding: 9px 12px !important;
}

#dashboardReportsList .report-count-box strong {
    display: block !important;
    color: #123f68 !important;
    font-size: 18px !important;
    line-height: 1.1 !important;
}

#dashboardReportsList .report-count-box span {
    color: #718096 !important;
    font-size: 9px !important;
}

#dashboardReportsList .open-count strong {
    color: #b42318 !important;
}

/* BOTTOM */
#dashboardReportsList .dashboard-report-actions {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 15px !important;
    gap: 10px !important;
}

#dashboardReportsList .report-updated {
    color: #8a97a6 !important;
    font-size: 9px !important;
}

/* BUTTON */
#dashboardReportsList .view-project-report-btn {
    background: #123f68 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 7px !important;
    padding: 9px 15px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    width: auto !important;
}

/* MOBILE / TABLET */
@media (max-width: 900px) {
    #dashboardReportsList {
        grid-template-columns: 1fr !important;
    }
}

/* ========================================
   DASHBOARD FINAL REPORT VIEW
======================================== */

#inspectionPage.report-view-mode .inspection-sidebar {
    display: none !important;
}

#inspectionPage.report-view-mode .inspection-main {
    width: 100% !important;
    margin-left: 0 !important;
    grid-column: 1 / -1 !important;
}

#inspectionPage.report-view-mode #reportsSection {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 30px 40px !important;
}

#inspectionPage.report-view-mode #generatedReportArea {
    width: 100% !important;
    max-width: 900px !important;
    margin: 0 auto !important;
}

#inspectionPage.report-view-mode #professionalReportPages {
    margin: 0 auto !important;
}

/* =========================================
   REPORT PAGE SPACING - FINAL FIX
   ========================================= */

#professionalReportPages .report-page:not(.report-cover-page) {
    padding-top: 8mm !important;
}

#professionalReportPages .report-page-header {
    margin-top: 0 !important;
}

#professionalReportPages .report-page-title {
    margin-top: 14px !important;
}

/* =========================================
   REPORTS TAB - CENTER REPORT PREVIEW
   ========================================= */

#reportsSection {
    width: 100% !important;
    max-width: none !important;
}

#generatedReportArea {
    width: 100% !important;
    max-width: none !important;
}

#professionalReportPages {
    width: 100% !important;
    max-width: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

#professionalReportPages .report-page {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* =========================================
   REPORT VIEW - FULL WIDTH FIX
========================================= */

#inspectionPage:has(#reportsSection[style*="display: block"]) .inspection-main {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
}

#inspectionPage:has(#reportsSection[style*="display: block"]) #reportsSection {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

#inspectionPage:has(#reportsSection[style*="display: block"]) #generatedReportArea {
    width: 100% !important;
    max-width: none !important;
}

#inspectionPage:has(#reportsSection[style*="display: block"]) #professionalReportPages {
    width: 100% !important;
    max-width: none !important;
}

/* Fix Dashboard Reports top alignment */
#dashboardPage #dashboardReportsSection {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Keep All Status filter neatly inside */
#projectStatusFilter {
    max-width: 220px;
    width: 220px;
    box-sizing: border-box;
}

/* PDF EXPORT PAGE FIX */

.report-page {
    page-break-inside: avoid !important;
    break-inside: avoid-page !important;
}

/* Remove browser-preview spacing during PDF export */
.professional-report-pages.pdf-export-mode .report-page {
    margin: 0 auto !important;
    box-shadow: none !important;
}

/* =========================================
   FIX: KEEP SEARCH + STATUS FILTER INSIDE
========================================= */

#dashboardPage .project-filter-bar {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 20px 0 !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 200px !important;
    gap: 12px !important;

    box-sizing: border-box !important;
}

#dashboardPage #projectStatusFilter {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

@media (max-width: 650px) {
    #dashboardPage .project-filter-bar {
        grid-template-columns: 1fr !important;
    }
}

#newInspector {
    width: 100%;
    height: 46px;
    padding: 0 14px;

    background: #ffffff;
    border: 1px solid #d7dee7;
    border-radius: 8px;

    font-family: inherit;
    font-size: 14px;
    color: #1f2937;

    cursor: pointer;
    outline: none;
}

#newInspector:focus {
    border-color: #174a6e;
    box-shadow: 0 0 0 3px rgba(23, 74, 110, 0.10);
}

/* =========================================
   INSPECTORS PAGE
========================================= */

#adminInspectorsSection .inspectors-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 26px 28px;
    margin-bottom: 22px;

    background: #ffffff;
    border: 1px solid #e5eaf0;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(31, 78, 120, 0.05);
}

#adminInspectorsSection .inspectors-page-header h1 {
    margin: 0 0 6px;
    color: #172033;
    font-size: 26px;
}

#adminInspectorsSection .inspectors-page-header p {
    margin: 0;
    color: #7b8797;
    font-size: 13px;
}

#adminInspectorsSection .inspectors-add-btn {
    flex-shrink: 0;
    height: 42px;
    padding: 0 18px;

    background: #1f4e78;
    color: #ffffff;
    border: none;
    border-radius: 8px;

    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;

    box-shadow: 0 4px 10px rgba(31, 78, 120, 0.18);
    transition: 0.2s ease;
}

#adminInspectorsSection .inspectors-add-btn:hover {
    background: #173d60;
    transform: translateY(-1px);
}

/* ADD INSPECTOR FORM */

#adminInspectorsSection .add-inspector-card {
    padding: 24px 26px;
    margin-bottom: 24px;

    background: #ffffff;
    border: 1px solid #e5eaf0;
    border-top: 4px solid #1f4e78;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(31, 78, 120, 0.07);
}

#adminInspectorsSection .add-inspector-card-header h3 {
    margin: 0 0 4px;
    color: #172033;
    font-size: 18px;
}

#adminInspectorsSection .add-inspector-card-header p {
    margin: 0 0 20px;
    color: #7b8797;
    font-size: 12px;
}

#adminInspectorsSection .add-inspector-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

#adminInspectorsSection .add-inspector-field label {
    display: block;
    margin-bottom: 7px;
    color: #344054;
    font-size: 12px;
    font-weight: 600;
}

#adminInspectorsSection .add-inspector-field input {
    width: 100%;
    height: 44px;
    padding: 0 12px;

    background: #fbfcfd;
    border: 1px solid #d8dee6;
    border-radius: 8px;

    font-family: inherit;
    font-size: 13px;
    color: #1f2937;
    outline: none;
    transition: 0.2s ease;
}

#adminInspectorsSection .add-inspector-field input:focus {
    background: #ffffff;
    border-color: #1f4e78;
    box-shadow: 0 0 0 3px rgba(31, 78, 120, 0.09);
}

#adminInspectorsSection .add-inspector-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;

    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #edf0f4;
}

#adminInspectorsSection #cancelAddInspectorBtn,
#adminInspectorsSection #createInspectorBtn {
    min-width: 130px;
    height: 42px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

#adminInspectorsSection #cancelAddInspectorBtn {
    background: #ffffff;
    color: #475569;
    border: 1px solid #cbd5e1;
}

#adminInspectorsSection #createInspectorBtn {
    background: #1f4e78;
    color: #ffffff;
    border: none;
}

#adminInspectorsSection #createInspectorBtn:hover {
    background: #173d60;
}

/* TEAM LIST */

#adminInspectorsSection .inspectors-list-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

#adminInspectorsSection .inspectors-list-heading h2 {
    margin: 0;
    color: #172033;
    font-size: 18px;
}

#adminInspectorsSection #inspectorsCount {
    padding: 5px 12px;
    background: #eaf2f8;
    color: #1f4e78;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}

#adminInspectorsSection .inspectors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
}

/* INSPECTOR CARD */

#adminInspectorsSection .inspector-card {
    padding: 20px;
    background: #ffffff;
    border: 1px solid #e5eaf0;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(31, 78, 120, 0.05);
    transition: 0.2s ease;
}

#adminInspectorsSection .inspector-card:hover {
    transform: translateY(-2px);
    border-color: #cbd7e3;
    box-shadow: 0 10px 24px rgba(31, 78, 120, 0.10);
}

#adminInspectorsSection .inspector-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

#adminInspectorsSection .inspector-avatar {
    width: 48px;
    height: 48px;

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

    background: #eaf2f8;
    color: #1f4e78;
    border-radius: 50%;

    font-size: 16px;
    font-weight: 800;
}

#adminInspectorsSection .inspector-role-badge {
    padding: 5px 10px;
    background: #e7f6ec;
    color: #18794e;
    border: 1px solid #a7d9b8;
    border-radius: 20px;

    font-size: 10px;
    font-weight: 700;
    text-transform: capitalize;
}

#adminInspectorsSection .inspector-card h3 {
    margin: 0 0 4px;
    color: #172033;
    font-size: 16px;
}

#adminInspectorsSection .inspector-card h3.inspector-name-missing {
    color: #b7791f;
    font-style: italic;
}

#adminInspectorsSection .inspector-email {
    margin: 0;
    color: #7b8797;
    font-size: 12px;
    overflow-wrap: anywhere;
}

#adminInspectorsSection .inspector-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #edf0f4;

    color: #7b8797;
    font-size: 11px;
}

#adminInspectorsSection .inspector-card-footer strong {
    color: #1f4e78;
    font-size: 15px;
}

#adminInspectorsSection .inspectors-empty {
    grid-column: 1 / -1;
    padding: 30px;
    text-align: center;

    background: #ffffff;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;

    color: #7b8797;
    font-size: 13px;
}

/* MOBILE */
@media (max-width: 800px) {
    #adminInspectorsSection .inspectors-page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    #adminInspectorsSection .add-inspector-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   FLOOR PLAN - KEEP MARKERS ON THE IMAGE
========================================= */

#inspectionPage #planStage {
    position: relative;
    display: inline-block;
    max-width: 100%;
    line-height: 0;
}

#inspectionPage #planStage #uploadedPlan {
    display: block;
    max-width: 100%;
    height: auto;
}

/* =========================================
   REMOVE PHOTO BUTTON
========================================= */

.issue-photo-preview-image {
    position: relative;
}

.remove-photo-btn {
    position: absolute;
    top: -8px;
    right: -8px;

    width: 28px;
    height: 28px;
    padding: 0;

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

    background: #c53030;
    color: #ffffff;

    border: 2px solid #ffffff;
    border-radius: 50%;

    font-size: 18px;
    font-weight: 700;
    line-height: 1;

    cursor: pointer;
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.25);

    transition: 0.2s ease;
}

.remove-photo-btn:hover {
    background: #9b2c2c;
    transform: scale(1.08);
}

/* =========================================
   CLIENTS PAGE (same design as Inspectors)
========================================= */

#adminClientsSection .inspectors-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 26px 28px;
    margin-bottom: 22px;
    background: #ffffff;
    border: 1px solid #e5eaf0;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(31, 78, 120, 0.05);
}

#adminClientsSection .inspectors-page-header h1 {
    margin: 0 0 6px;
    color: #172033;
    font-size: 26px;
}

#adminClientsSection .inspectors-page-header p {
    margin: 0;
    color: #7b8797;
    font-size: 13px;
}

#adminClientsSection .inspectors-add-btn,
#adminClientsSection .people-create-btn {
    height: 42px;
    padding: 0 18px;
    background: #1f4e78;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(31, 78, 120, 0.18);
    transition: 0.2s ease;
}

#adminClientsSection .inspectors-add-btn:hover,
#adminClientsSection .people-create-btn:hover {
    background: #173d60;
}

#adminClientsSection .people-cancel-btn {
    height: 42px;
    padding: 0 18px;
    background: #ffffff;
    color: #475569;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

#adminClientsSection .add-inspector-card {
    padding: 24px 26px;
    margin-bottom: 24px;
    background: #ffffff;
    border: 1px solid #e5eaf0;
    border-top: 4px solid #1f4e78;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(31, 78, 120, 0.07);
}

#adminClientsSection .add-inspector-card-header h3 {
    margin: 0 0 4px;
    color: #172033;
    font-size: 18px;
}

#adminClientsSection .add-inspector-card-header p {
    margin: 0 0 20px;
    color: #7b8797;
    font-size: 12px;
}

#adminClientsSection .add-inspector-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

#adminClientsSection .add-inspector-field label {
    display: block;
    margin-bottom: 7px;
    color: #344054;
    font-size: 12px;
    font-weight: 600;
}

#adminClientsSection .add-inspector-field input {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    background: #fbfcfd;
    border: 1px solid #d8dee6;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    color: #1f2937;
    outline: none;
}

#adminClientsSection .add-inspector-field input:focus {
    background: #ffffff;
    border-color: #1f4e78;
    box-shadow: 0 0 0 3px rgba(31, 78, 120, 0.09);
}

#adminClientsSection .add-inspector-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #edf0f4;
}

#adminClientsSection .inspectors-list-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

#adminClientsSection .inspectors-list-heading h2 {
    margin: 0;
    color: #172033;
    font-size: 18px;
}

#adminClientsSection #clientsCount {
    padding: 5px 12px;
    background: #eaf2f8;
    color: #1f4e78;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}

#adminClientsSection .inspectors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
}

#adminClientsSection .inspector-card {
    padding: 20px;
    background: #ffffff;
    border: 1px solid #e5eaf0;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(31, 78, 120, 0.05);
    transition: 0.2s ease;
}

#adminClientsSection .inspector-card:hover {
    transform: translateY(-2px);
    border-color: #cbd7e3;
    box-shadow: 0 10px 24px rgba(31, 78, 120, 0.10);
}

#adminClientsSection .inspector-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
#adminClientsSection .inspector-avatar {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fdf3e1;
    color: #a86b12;
    border-radius: 50%;
    font-size: 16px;
    font-weight: 800;
}

#adminClientsSection .inspector-role-badge {
    padding: 5px 10px;
    background: #fdf3e1;
    color: #a86b12;
    border: 1px solid #f3d37a;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    text-transform: capitalize;
}

#adminClientsSection .inspector-card h3 {
    margin: 0 0 4px;
    color: #172033;
    font-size: 16px;
}

#adminClientsSection .inspector-email {
    margin: 0;
    color: #7b8797;
    font-size: 12px;
    overflow-wrap: anywhere;
}

#adminClientsSection .inspector-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #edf0f4;
    color: #7b8797;
    font-size: 11px;
}

#adminClientsSection .inspector-card-footer strong {
    color: #1f4e78;
    font-size: 15px;
}

#adminClientsSection .inspectors-empty {
    grid-column: 1 / -1;
    padding: 30px;
    text-align: center;
    background: #ffffff;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    color: #7b8797;
    font-size: 13px;
}

/* Client Account dropdown in the project form */
#newClientAccount {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    background: #ffffff;
    border: 1px solid #d7dee7;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    color: #1f2937;
    cursor: pointer;
    outline: none;
}

#newClientAccount:focus {
    border-color: #174a6e;
    box-shadow: 0 0 0 3px rgba(23, 74, 110, 0.10);
}

@media (max-width: 800px) {
    #adminClientsSection .inspectors-page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    #adminClientsSection .add-inspector-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   CLIENT VIEW-ONLY MODE
   (the page gets class "role-client" when a client logs in)
========================================= */

/* Hide everything that changes data */
body.role-client #addProjectBtn,
body.role-client .edit-project-btn,
body.role-client #uploadPlanBtn,
body.role-client #addSnagBtn,
body.role-client #uploadPanoramaBtn,
body.role-client .edit-issue-btn,
body.role-client .status-btn,
body.role-client #emailReportBtn,
body.role-client #inspectorsNavBtn,
body.role-client #clientsNavBtn,
body.role-client .inspection-side-item[data-section="checklistSection"],
body.role-client .inspection-side-item[data-section="progressSection"] {
    display: none !important;
}

/* Snag markers: visible, but clicking them does nothing */
body.role-client .snag-marker {
    pointer-events: none;
    cursor: default;
}

/* =========================================
   FIX: REPORTS TAB SITS NEXT TO THE SIDEBAR
========================================= */

/* Normal Reports tab: leave room for the sidebar */
#inspectionPage:has(#reportsSection[style*="display: block"]) .inspection-main {
    margin-left: 230px !important;
    width: calc(100% - 230px) !important;
}

/* "View Report" from the dashboard hides the sidebar, so use full width there */
#inspectionPage.report-view-mode:has(#reportsSection[style*="display: block"]) .inspection-main {
    margin-left: 0 !important;
    width: 100% !important;
}

/* Clients don't need the Generate button: the report opens automatically */
body.role-client #generateReportBtn {
    display: none !important;
}

/* Clients see only the report itself */
body.role-client #reportsSection .report-heading,
body.role-client #reportsSection .report-summary {
    display: none !important;
}

/* =========================================
   REPORT DOWNLOAD BUTTONS - TOP RIGHT, ABOVE THE REPORT
========================================= */

@media screen {

    /* Make room above the report for the buttons */
    #generatedReportArea {
        padding-top: 60px !important;
    }

    /* Download PDF: top right corner */
    #downloadProfessionalPdfBtn {
        top: 8px !important;
        right: 0 !important;
    }

    /* Download Word: just left of the PDF button (admins and inspectors) */

}

/* Clients only get the PDF */

/* =========================================
   CLIENT MESSAGES BOX
========================================= */

.client-messages-box {
    max-width: 210mm;
    margin: 0 auto 24px;
    padding: 22px 24px;

    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #1f4e78;
    border-radius: 12px;

    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
    box-sizing: border-box;
}

.client-messages-label {
    display: block;
    margin-bottom: 5px;

    color: #1f4e78;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

.client-messages-header h3 {
    margin: 0 0 4px;
    color: #172033;
    font-size: 18px;
}

.client-messages-header p {
    margin: 0 0 16px;
    color: #7b8797;
    font-size: 12px;
}

/* Typing area (clients only) */
.client-message-form {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 18px;
}

#clientMessageInput {
    width: 100%;
    padding: 12px;

    border: 1px solid #d8dee6;
    border-radius: 8px;
    background: #fbfcfd;

    font-family: inherit;
    font-size: 13px;
    color: #1f2937;

    resize: vertical;
    box-sizing: border-box;
    outline: none;
}

#clientMessageInput:focus {
    background: #ffffff;
    border-color: #1f4e78;
    box-shadow: 0 0 0 3px rgba(31, 78, 120, 0.09);
}

#sendClientMessageBtn {
    height: 40px;
    padding: 0 18px;

    background: #1f4e78;
    color: #ffffff;

    border: none;
    border-radius: 8px;

    font-family: inherit;
    font-size: 12px;
    font-weight: 700;

    cursor: pointer;
}

#sendClientMessageBtn:hover {
    background: #173d60;
}

#sendClientMessageBtn:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Earlier messages */
.client-messages-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.client-message-item {
    padding: 12px 14px;

    background: #f8fafc;
    border: 1px solid #e7edf3;
    border-radius: 9px;
}

.client-message-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;

    color: #7b8797;
    font-size: 11px;
}

.client-message-meta strong {
    color: #1f4e78;
}

.client-message-text {
    margin: 0;
    color: #334155;
    font-size: 13px;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.client-messages-empty {
    padding: 14px;
    text-align: center;

    color: #94a3b8;
    font-size: 12px;

    border: 1px dashed #cbd5e1;
    border-radius: 9px;
}

/* Staff don't type here, they only read */
body:not(.role-client) .client-message-form {
    display: none;
}

/* =========================================
   CLIENT MESSAGES - BUTTON + POPUP
========================================= */

/* The 💬 button sits in the same row as the download buttons */
@media screen {
    #openMessagesBtn {
        position: absolute !important;
        top: 8px !important;
        right: 314px !important;

        min-width: 145px;
        height: 40px;
        padding: 0 16px;

        align-items: center;
        justify-content: center;

        background: #ffffff;
        color: #123f68;

        border: 1px solid #123f68;
        border-radius: 8px;

        font-family: inherit;
        font-size: 11px;
        font-weight: 700;

        cursor: pointer;
        z-index: 20;
    }

    #openMessagesBtn:hover {
        background: #eaf2f8;
    }

    /* Clients have no Word button, so it moves next to Download PDF */
    body.role-client #openMessagesBtn {
        right: 157px !important;
    }
}

/* Dark background */
.client-messages-modal {
    position: fixed;
    inset: 0;
    z-index: 7000;

    align-items: center;
    justify-content: center;

    padding: 20px;
    background: rgba(15, 23, 42, 0.55);
}

/* The card inside the popup */
.client-messages-modal .client-messages-box {
    width: min(560px, 100%);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    margin: 0;

    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.30);
}

.client-messages-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.client-messages-close {
    flex-shrink: 0;

    width: 36px;
    height: 36px;

    border: none;
    border-radius: 8px;
    background: #e9eef5;
    color: #334155;

    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.client-messages-close:hover {
    background: #dce4ed;
}

/* =========================================
   REPORT POPUP (dashboard "View Report")
========================================= */

.report-popup {
    position: fixed;
    inset: 0;
    z-index: 6000;

    align-items: center;
    justify-content: center;

    padding: 24px;
    background: rgba(15, 23, 42, 0.55);
}

.report-popup-box {
    width: min(1000px, 100%);
    height: calc(100vh - 48px);

    display: flex;
    flex-direction: column;

    background: #f4f7fb;
    border-radius: 14px;
    overflow: hidden;

    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.30);
}

.report-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 16px 22px;

    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
}

.report-popup-label {
    display: block;
    margin-bottom: 4px;

    color: #1f4e78;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

.report-popup-header h2 {
    margin: 0;
    color: #172033;
    font-size: 19px;
}

.report-popup-close {
    width: 38px;
    height: 38px;

    border: none;
    border-radius: 9px;
    background: #e9eef5;
    color: #334155;

    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.report-popup-close:hover {
    background: #dce4ed;
}

.report-popup-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.report-popup-loading {
    padding: 80px 20px;
    text-align: center;
    color: #64748b;
    font-size: 14px;
}

#reportPopupBody #generatedReportArea {
    position: relative;
}

/* =========================================
   ARCHIVE / RESTORE / DELETE BUTTONS
========================================= */

.archive-project-btn,
.restore-project-btn,
.delete-project-btn {
    display: none;

    padding: 9px 15px;
    border-radius: 8px;

    font-family: inherit;
    font-size: 11px;
    font-weight: 650;

    cursor: pointer;
    transition: 0.2s ease;
}

.archive-project-btn {
    background: #ffffff;
    color: #64748b;
    border: 1px solid #cbd5e1;
}

.archive-project-btn:hover {
    background: #f1f5f9;
}

.restore-project-btn {
    background: #ffffff;
    color: #1f4e78;
    border: 1px solid #1f4e78;
}

.restore-project-btn:hover {
    background: #eaf2f8;
}

.delete-project-btn {
    background: #fdecec;
    color: #b42318;
    border: 1px solid #f5b7b1;
}

.delete-project-btn:hover {
    background: #b42318;
    color: #ffffff;
}

/* Admins: Archive on completed projects */
body.role-admin .project-card[data-archived="false"][data-status="Inspection Completed"] .archive-project-btn {
    display: inline-block;
}

/* Admins: Restore + Delete on archived projects */
body.role-admin .project-card[data-archived="true"] .restore-project-btn,
body.role-admin .project-card[data-archived="true"] .delete-project-btn {
    display: inline-block;
}

/* Archived projects can be opened (to view), but not edited */
.project-card[data-archived="true"] .edit-project-btn {
    display: none !important;
}

.project-card[data-archived="true"] {
    background: #f8fafc !important;
    border-style: dashed !important;
}

/* =========================================
   DELETE PROJECT POPUP
========================================= */

.delete-project-modal {
    position: fixed;
    inset: 0;
    z-index: 8000;

    align-items: center;
    justify-content: center;

    padding: 20px;
    background: rgba(15, 23, 42, 0.6);
}

.delete-project-box {
    width: min(480px, 100%);
    padding: 26px 28px;

    background: #ffffff;
    border-top: 5px solid #b42318;
    border-radius: 14px;

    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.30);
    box-sizing: border-box;
}

.delete-project-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.delete-project-icon {
    flex-shrink: 0;

    width: 44px;
    height: 44px;

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

    background: #fdecec;
    color: #b42318;
    border-radius: 50%;

    font-size: 22px;
    font-weight: 800;
}

.delete-project-header h3 {
    margin: 0 0 3px;
    color: #172033;
    font-size: 18px;
}

.delete-project-header p {
    margin: 0;
    color: #b42318;
    font-size: 12px;
    font-weight: 700;
}

.delete-project-summary {
    margin-bottom: 18px;
    padding: 14px 16px;

    background: #fff7f7;
    border: 1px solid #f5d0cc;
    border-radius: 9px;

    color: #475569;
    font-size: 13px;
    line-height: 1.6;
}

.delete-project-label {
    display: block;
    margin-bottom: 8px;

    color: #344054;
    font-size: 12px;
    font-weight: 600;
}

#deleteProjectConfirmName {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    margin-bottom: 14px;

    border: 1px solid #d8dee6;
    border-radius: 8px;

    font-family: inherit;
    font-size: 13px;

    box-sizing: border-box;
    outline: none;
}

#deleteProjectConfirmName:focus {
    border-color: #b42318;
    box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.10);
}

.delete-project-check {
    display: flex;
    align-items: center;
    gap: 8px;

    color: #344054;
    font-size: 12px;
    cursor: pointer;
}

.delete-project-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;

    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #edf0f4;
}

#cancelDeleteProjectBtn,
#confirmDeleteProjectBtn {
    height: 40px;
    padding: 0 18px;
    border-radius: 8px;

    font-family: inherit;
    font-size: 12px;
    font-weight: 700;

    cursor: pointer;
}

#cancelDeleteProjectBtn {
    background: #ffffff;
    color: #475569;
    border: 1px solid #cbd5e1;
}

#confirmDeleteProjectBtn {
    background: #b42318;
    color: #ffffff;
    border: none;
}

#confirmDeleteProjectBtn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Only admins see the "Archived" filter option */
body:not(.role-admin) #projectStatusFilter option[value="Archived"] {
    display: none;
}

/* =========================================
   DASHBOARD WELCOME BANNER
========================================= */

#dashboardPage .dashboard-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    padding: 30px 34px;
    margin-bottom: 30px;

    background: linear-gradient(135deg, #123f68 0%, #1f4e78 55%, #2b6a9e 100%);
    border-radius: 18px;
    overflow: hidden;

    box-shadow: 0 12px 30px rgba(18, 63, 104, 0.22);
}

#dashboardPage .dashboard-hero::before,
#dashboardPage .dashboard-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

#dashboardPage .dashboard-hero::before {
    width: 260px;
    height: 260px;
    right: -60px;
    top: -120px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

#dashboardPage .dashboard-hero::after {
    width: 180px;
    height: 180px;
    right: 160px;
    bottom: -110px;
    background: rgba(255, 255, 255, 0.06);
}

#dashboardPage .dashboard-hero-text,
#dashboardPage .dashboard-hero-date {
    position: relative;
    z-index: 1;
}

#dashboardPage .dashboard-hero-eyebrow {
    display: block;
    margin-bottom: 8px;
    color: #b9d4ea;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.6px;
}

#dashboardPage .dashboard-hero h1 {
    margin: 0 0 6px;
    color: #ffffff;
    font-size: 28px;
}

#dashboardPage .dashboard-hero p {
    margin: 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
}

#dashboardPage .dashboard-hero-date {
    flex-shrink: 0;
    padding: 12px 18px;
    text-align: right;

    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
}

#dashboardPage .dashboard-hero-date span {
    display: block;
    color: #b9d4ea;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

#dashboardPage .dashboard-hero-date strong {
    display: block;
    margin-top: 4px;
    color: #ffffff;
    font-size: 14px;
}

/* =========================================
   STAT CARD ICONS
========================================= */

#dashboardPage .stat-icon {
    position: absolute;
    top: 20px;
    right: 20px;

    width: 42px;
    height: 42px;

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

    border-radius: 12px;

    font-size: 18px;
    font-weight: 800;
}

#dashboardPage .stat-card:nth-child(1) .stat-icon { background: #eaf2f8; color: #1f4e78; }
#dashboardPage .stat-card:nth-child(2) .stat-icon { background: #fdf3e1; color: #c98a1b; }
#dashboardPage .stat-card:nth-child(3) .stat-icon { background: #fdecec; color: #c84c4c; }
#dashboardPage .stat-card:nth-child(4) .stat-icon { background: #e7f6ec; color: #3b8b68; }

@media (max-width: 650px) {
    #dashboardPage .dashboard-hero {
        flex-direction: column;
        align-items: flex-start;
        padding: 24px;
    }

    #dashboardPage .dashboard-hero-date {
        text-align: left;
    }
}

/* =========================================
   DASHBOARD: CHART + PRIORITY SIDE BY SIDE
========================================= */

#dashboardPage .dashboard-analytics {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 18px;
}

.priority-breakdown {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 6px;
}

.priority-row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 7px;
}

.priority-row-top span {
    display: flex;
    align-items: center;
    gap: 8px;

    color: #344054;
    font-size: 13px;
    font-weight: 600;
}

.priority-row-top i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.priority-row-top strong {
    color: #172033;
    font-size: 15px;
}

.priority-bar {
    height: 8px;
    background: #eef2f6;
    border-radius: 6px;
    overflow: hidden;
}

.priority-bar div {
    height: 100%;
    border-radius: 6px;
    transition: width 0.5s ease;
}

.priority-total {
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid #edf0f4;

    color: #7b8797;
    font-size: 12px;
}

.priority-empty {
    padding: 50px 10px;
    text-align: center;
    color: #7b8797;
    font-size: 13px;
}

@media (max-width: 900px) {
    #dashboardPage .dashboard-analytics {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   DASHBOARD PROJECT CARDS (redesign)
========================================= */

#dashboardPage .project-card-main {
    flex: 1;
    min-width: 0;

    display: flex;
    align-items: flex-start;
    gap: 16px;
}

#dashboardPage .project-avatar {
    flex-shrink: 0;

    width: 46px;
    height: 46px;

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

    background: #eaf2f8;
    color: #1f4e78;
    border-radius: 50%;

    font-size: 15px;
    font-weight: 800;
}

#dashboardPage .project-info {
    flex: 1;
    min-width: 0;
}

#dashboardPage .project-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 14px;
}

#dashboardPage .project-meta span {
    padding: 5px 10px;

    background: #f5f8fb;
    border: 1px solid #e5ebf0;
    border-radius: 20px;

    color: #344054;
    font-size: 11px;
}

#dashboardPage .project-meta b {
    margin-right: 4px;
    color: #94a3b8;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

#dashboardPage .project-snag-summary {
    max-width: 420px;
}

#dashboardPage .snag-summary-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

#dashboardPage .snag-summary-text {
    color: #667085;
    font-size: 12px;
}

#dashboardPage .snag-summary-text strong {
    color: #172033;
}

#dashboardPage .snag-summary-text .snag-open-count {
    color: #c84c4c;
}

#dashboardPage .snag-summary-percent {
    color: #3b8b68;
    font-size: 11px;
    font-weight: 700;
}

#dashboardPage .snag-summary-bar {
    height: 6px;
    background: #fdecec;
    border-radius: 6px;
    overflow: hidden;
}

#dashboardPage .snag-summary-bar div {
    height: 100%;
    background: #3b8b68;
    border-radius: 6px;
    transition: width 0.5s ease;
}

@media (max-width: 650px) {
    #dashboardPage .project-card-main {
        flex-direction: column;
    }
}

/* =========================================
   DASHBOARD HEADER (page title + user avatar)
========================================= */

#dashboardPage .dashboard-header {
    justify-content: space-between !important;
}

#dashboardPage .dashboard-page-title span {
    color: #172033;
    font-size: 17px;
    font-weight: 700;
}

#dashboardPage .dashboard-user {
    display: flex;
    align-items: center;
    gap: 16px;
}

#dashboardPage .header-user-chip {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 5px 14px 5px 5px;

    background: #f5f8fb;
    border: 1px solid #e5ebf0;
    border-radius: 30px;
}

#dashboardPage .header-user-avatar {
    width: 34px;
    height: 34px;

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

    background: #1f4e78;
    color: #ffffff;
    border-radius: 50%;

    font-size: 12px;
    font-weight: 800;
}

#dashboardPage .header-user-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

#dashboardPage .header-user-text strong {
    color: #172033;
    font-size: 12px;
    font-weight: 700;
}

#dashboardPage .header-user-text span {
    margin: 0 !important;
    color: #7b8797 !important;
    font-size: 10px !important;
    font-weight: 600 !important;
}

@media (max-width: 650px) {
    #dashboardPage .header-user-text {
        display: none;
    }
}

/* =========================================
   SEND REPORT: SENT HISTORY
========================================= */

.report-delivery-history {
    margin: 0 26px 20px;
}

.report-delivery-history h4 {
    margin: 0 0 8px;
    color: #344054;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.delivery-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    padding: 9px 12px;
    margin-bottom: 6px;

    background: #f8fafc;
    border: 1px solid #e7edf3;
    border-radius: 8px;

    font-size: 12px;
    color: #334155;
}

.delivery-item.failed {
    background: #fff7f7;
    border-color: #f5d0cc;
}

.delivery-item small {
    display: block;
    color: #94a3b8;
    font-size: 10px;
}

.delivery-status {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
}

.delivery-status.sent { color: #16805b; }
.delivery-status.failed { color: #b42318; }

.delivery-empty {
    color: #94a3b8;
    font-size: 12px;
}

/* =========================================
   REPORT TOOLBAR (Messages / Word / PDF in one row)
========================================= */

@media screen {

    /* No more reserved space for pinned buttons */
    #generatedReportArea {
        padding-top: 0 !important;
    }

    .report-toolbar {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 10px;

        max-width: 210mm;
        margin: 0 auto 18px;
    }

    /* All three buttons: same size, no pinning */
    #generatedReportArea .report-toolbar button {
        position: static !important;
        top: auto !important;
        right: auto !important;

        width: auto !important;
        min-width: 140px;
        height: 40px !important;
        padding: 0 18px !important;

        align-items: center;
        justify-content: center;
        gap: 6px;

        border-radius: 8px !important;

        font-family: inherit;
        font-size: 12px !important;
        font-weight: 700 !important;
        white-space: nowrap;

        cursor: pointer;
        box-shadow: none !important;
        transform: none !important;
    }

    /* Download PDF: main action */
    #generatedReportArea .report-toolbar #downloadProfessionalPdfBtn {
        background: #123f68 !important;
        color: #ffffff !important;
        border: 1px solid #123f68 !important;
    }

    #generatedReportArea .report-toolbar #downloadProfessionalPdfBtn:hover {
        background: #0d3153 !important;
    }

    /* Word + Messages: secondary */
    #generatedReportArea .report-toolbar #openMessagesBtn {
        background: #ffffff !important;
        color: #123f68 !important;
        border: 1px solid #b9c9d8 !important;
    }

    #generatedReportArea .report-toolbar #openMessagesBtn:hover {
        background: #eaf2f8 !important;
        border-color: #123f68 !important;
    }
}

/* On phones the buttons share the full width */
@media (max-width: 650px) {
    .report-toolbar {
        justify-content: stretch;
    }

    #generatedReportArea .report-toolbar button {
        flex: 1;
        min-width: 0;
    }
}

/* =========================================
   NEW COVER PAGE (Burj Khalifa skyline)
========================================= */

.report-cover-page.cover-skyline {
    position: relative;
    padding: 0 !important;
    overflow: hidden;
    background: #123f68 url("assets/cover-skyline.jpg") center bottom / cover no-repeat;
}

/* Remove the old cover decorations */
.report-cover-page.cover-skyline::before,
.report-cover-page.cover-skyline::after {
    display: none !important;
}

/* Darker on the left so the text is easy to read */
.cover-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(9, 32, 58, 0.92) 0%,
        rgba(9, 32, 58, 0.65) 45%,
        rgba(9, 32, 58, 0.05) 78%
    );
}

.cover-content {
    position: relative;
    z-index: 1;
    height: 100%;
    padding: 22mm 20mm 0;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
}

.cover-logo-card {
    align-self: flex-start;
    padding: 10px 16px;
    background: #ffffff;
    border-radius: 10px;
}

.cover-logo-card img {
    display: block;
    width: auto;
    height: 46px;
}

.cover-tagline {
    margin-top: 10px;
    color: #f2a24b;
    font-size: 12px;
    font-style: italic;
    letter-spacing: 0.3px;
}

.cover-title-line {
    width: 60px;
    height: 3px;
    margin: 30mm 0 16px;
    background: #85b7eb;
}

.cover-title {
    max-width: 120mm;
    margin: 0;

    color: #ffffff;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: 0.5px;
}

.cover-title span {
    color: #85b7eb;
}

.cover-keywords {
    margin: 14px 0 0;
    color: #b5d4f4;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.6px;
}

.cover-details {
    max-width: 95mm;
    margin-top: 20mm;

    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cover-detail {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.cover-detail svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 1px;
}

.cover-detail span {
    display: block;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
}

.cover-detail strong {
    display: block;
    margin-top: 2px;
    color: #b5d4f4;
    font-size: 12px;
    font-weight: 400;
}

.cover-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;

    display: flex;
    justify-content: space-between;

    padding: 12px 20mm;
    background: rgba(6, 22, 42, 0.9);

    color: #b5d4f4;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.2px;
}

/* =========================================
   PAGE HEADERS: LOGO ONLY
========================================= */

.report-page-brand div,
.report-header-label {
    display: none !important;
}

.report-page-brand img {
    width: auto !important;
    height: 38px !important;
    object-fit: contain;
}

/* =========================================
   PHOTOGRAPHIC EVIDENCE
========================================= */

.report-snag-section-title {
    display: flex !important;
    align-items: center;
    gap: 10px;

    margin-bottom: 4px !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;

    color: #123f68;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.3px;
}

/* Thin line that fills the rest of the row */
.report-snag-section-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #dbe3ea;
}

.evidence-icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

.evidence-count {
    padding: 3px 9px;
    border-radius: 20px;
    background: #eaf2f8;
    color: #1f4e78;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.report-photo-caption {
    display: block;
    margin-top: 4px;

    color: #64748b;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-align: center;
}

/* Photos: 3 per row, same size */
#professionalReportPages .report-snag-photos {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    padding-top: 12px !important;
}

#professionalReportPages .report-snag-photo {
    min-height: 0 !important;
    padding: 4px !important;
}

#professionalReportPages .report-snag-photo img {
    width: 100% !important;
    height: 48mm !important;
    max-height: 48mm !important;
    object-fit: contain !important;
    background: #ffffff;
}

/* "No photographs" becomes a small note */
#professionalReportPages .report-snag-no-photo {
    grid-column: 1 / -1;
    min-height: 26mm !important;
}

/* =========================================
   PDF EXPORT: each page = exactly one A4 page
========================================= */

#professionalReportPages.pdf-export-mode .report-page {
    width: 210mm !important;
    box-sizing: border-box !important;
    height: 296mm !important;
    min-height: 296mm !important;
    max-height: 296mm !important;

    margin: 0 !important;
    overflow: hidden !important;
    box-shadow: none !important;

    page-break-after: always;
    break-after: page;
}

#professionalReportPages.pdf-export-mode > .report-page:last-child {
    page-break-after: auto;
    break-after: auto;
}

/* The PDF is now built page by page: no automatic page breaks needed */
#professionalReportPages.pdf-export-mode .report-page {
    page-break-after: auto !important;
    break-after: auto !important;
}

/* =========================================
   PDF PAGES (also applies to the copies the PDF tool makes)
========================================= */

body.pdf-exporting .report-page {
    width: 210mm !important;
    height: 296mm !important;
    min-height: 296mm !important;
    max-height: 296mm !important;
    box-sizing: border-box !important;

    margin: 0 !important;
    overflow: hidden !important;
    box-shadow: none !important;
    border-radius: 0 !important;

    page-break-after: auto !important;
    break-after: auto !important;
}

/* Photos: 3 per row, same size (on screen and in the PDF) */
#professionalReportPages .report-snag-page .report-snag-photos,
body.pdf-exporting .report-snag-page .report-snag-photos {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding-top: 12px !important;
}

#professionalReportPages .report-snag-page .report-snag-photo,
body.pdf-exporting .report-snag-page .report-snag-photo {
    min-height: 0 !important;
    height: auto !important;
    padding: 4px !important;
}

#professionalReportPages .report-snag-page .report-snag-photo img,
body.pdf-exporting .report-snag-page .report-snag-photo img {
    width: 100% !important;
    height: 48mm !important;
    max-height: 48mm !important;
    object-fit: contain !important;
    background: #ffffff;
}

/* "No photographs" becomes a small note */
#professionalReportPages .report-snag-page .report-snag-no-photo,
body.pdf-exporting .report-snag-page .report-snag-no-photo {
    grid-column: 1 / -1;
    min-height: 0 !important;
    height: auto !important;
    padding: 14px !important;
}

/* =========================================
   PRIORITY COLOURS (badges + floor plan pins)
========================================= */

.report-snag-page .report-snag-priority.priority-critical {
    background: #fdecec !important;
    color: #9b1c1c !important;
    border: 1px solid #f5c2c2 !important;
}

.report-snag-page .report-snag-priority.priority-high {
    background: #fdf0ec !important;
    color: #c2410c !important;
    border: 1px solid #f8cdbb !important;
}

.report-snag-page .report-snag-priority.priority-medium {
    background: #fdf6e6 !important;
    color: #a86b12 !important;
    border: 1px solid #f3d89a !important;
}

.report-snag-page .report-snag-priority.priority-low {
    background: #e9f6ef !important;
    color: #2f7a57 !important;
    border: 1px solid #bfe3cf !important;
}

/* =========================================
   FLOOR PLAN WITH SNAG PINS
========================================= */

#reportPlanStage {
    position: relative;
    display: table;
    margin: 0 auto;
    line-height: 0;
}

#reportPlanStage #reportFloorPlanImage {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 165mm !important;
}

.report-plan-pin {
    position: absolute;
    transform: translate(-50%, -50%);

    width: 20px;
    height: 20px;

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

    border: 2px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);

    color: #ffffff;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
}

.report-plan-pin.priority-critical { background: #9b1c1c; }
.report-plan-pin.priority-high     { background: #e0533d; }
.report-plan-pin.priority-medium   { background: #e0a030; }
.report-plan-pin.priority-low      { background: #3b8b68; }

/* Legend under the plan */
#reportPlanLegend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;

    margin-top: 12px;

    color: #475569;
    font-size: 10px;
    font-weight: 600;
}

#reportPlanLegend span {
    display: flex;
    align-items: center;
    gap: 5px;
}

#reportPlanLegend i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

#reportPlanLegend i.priority-critical { background: #9b1c1c; }
#reportPlanLegend i.priority-high     { background: #e0533d; }
#reportPlanLegend i.priority-medium   { background: #e0a030; }
#reportPlanLegend i.priority-low      { background: #3b8b68; }

#reportPlanLegend em {
    flex-basis: 100%;
    text-align: center;
    color: #94a3b8;
    font-size: 9px;
    font-style: italic;
    font-weight: 400;
}

/* =========================================
   360° VIEW PLACEHOLDER + PHOTO PROCESSING
========================================= */

.panorama-load-btn {
    width: 100%;
    min-height: 120px;

    border: 1px dashed #b9c9d8;
    border-radius: 10px;
    background: #f5f8fb;

    color: #1f4e78;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;

    cursor: pointer;
}

.panorama-load-btn:hover {
    background: #eaf2f8;
}

.panorama-empty {
    padding: 30px 16px;
    text-align: center;
    color: #7b8797;
    font-size: 13px;
}

.photo-processing {
    padding: 10px 14px;
    color: #1f4e78;
    font-size: 12px;
    font-weight: 600;
}

/* 360° placeholder fills the whole viewer area */
#panoramaViewer .panorama-load-btn {
    width: 100%;
    height: 100%;
    min-height: 220px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#panoramaViewer .panorama-load-btn strong {
    color: #123f68;
    font-size: 16px;
}

#panoramaViewer .panorama-load-btn span {
    color: #7b8797;
    font-size: 12px;
    font-weight: 500;
}

#panoramaViewer .panorama-empty {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================================
   BUILT-IN CAMERA
========================================= */

.inapp-camera-modal {
    position: fixed;
    inset: 0;
    z-index: 20000;

    flex-direction: column;
    background: #000000;
}

.inapp-camera-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
}

.inapp-camera-done {
    padding: 10px 22px;
    border: none;
    border-radius: 22px;
    background: #ffffff;
    color: #123f68;
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
}

#inAppCameraVideo {
    flex: 1;
    width: 100%;
    min-height: 0;
    object-fit: contain;
    background: #000000;
}

.inapp-camera-thumbs {
    display: flex;
    gap: 8px;
    min-height: 64px;
    padding: 8px 16px;
    overflow-x: auto;
}

.inapp-camera-thumbs img {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    object-fit: cover;
    border: 2px solid #ffffff;
    border-radius: 8px;
}

.inapp-camera-controls {
    display: flex;
    justify-content: center;
    padding: 14px 0 26px;
}

.inapp-camera-shutter {
    width: 76px;
    height: 76px;
    border: 5px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    background: #ffffff;
    background-clip: padding-box;
    cursor: pointer;
}

.inapp-camera-shutter:active {
    transform: scale(0.92);
}

/* Flash effect when a photo is taken */
.inapp-camera-modal.camera-flash #inAppCameraVideo {
    opacity: 0.3;
}

/* =========================================
   PHOTO ANNOTATION TOOLBAR
========================================= */

.annotation-toolbar {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
}

.annotation-toolbar button {
    min-width: 96px;
    height: 42px;
    padding: 0 16px;

    border: 1px solid #cbd5e1;
    border-radius: 21px;
    background: #ffffff;
    color: #334155;

    font-family: inherit;
    font-size: 14px;
    font-weight: 700;

    cursor: pointer;
}

.annotation-toolbar button.active {
    background: #123f68;
    border-color: #123f68;
    color: #ffffff;
}

/* Drawing on the tablet must not scroll the page */
#annotationCanvas {
    touch-action: none;
}

/* =========================================
   ANNOTATION POPUP: fit on screen
========================================= */

/* The popup never wider or taller than the screen */
#photoAnnotationModal > * {
    max-width: calc(100vw - 32px) !important;
    max-height: calc(100vh - 32px) !important;
    overflow: auto;
}

/* The photo shrinks to fit (drawing still lands in the right spot) */
#annotationCanvas {
    display: block;
    max-width: 100% !important;
    max-height: 62vh !important;
    width: auto !important;
    height: auto !important;
    margin: 0 auto;
}

/* Toolbar sits in its own row above the photo */
.annotation-toolbar {
    padding: 12px 16px 2px;
    background: #ffffff;
}

/* =========================================
   REPORT PAGE 2: OVERVIEW (contents + purpose & scope)
========================================= */

.report-page.ov-page {
    position: relative !important;
    padding: 16mm 18mm 22mm !important;
    box-sizing: border-box !important;
}

/* Table of contents */
.ov-page .ov-heading {
    margin: 5mm 0 3mm;
    padding-bottom: 2mm;
    border-bottom: 1px solid #dbe3ea;
    color: #123f68;
    font-size: 13px;
    font-weight: 800;
}

/* Purpose & Scope title */
.ov-page .ov-ps-title {
    margin-top: 7mm;
}

.ov-page .ov-ps-title strong {
    display: block;
    color: #123f68;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.05;
}

.ov-page .ov-ps-title span {
    display: block;
    margin-top: 1.5mm;
    color: #123f68;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 4px;
}

.ov-page .ov-ps-line {
    height: 2px;
    margin-top: 3mm;
    background: #dbe3ea;
}

.ov-page .ov-ps-line i {
    display: block;
    width: 28mm;
    height: 2px;
    background: #123f68;
}

.ov-page .ov-intro {
    margin: 3.5mm 0 4mm;
    color: #334155;
    font-size: 11.5px;
    line-height: 1.55;
}

/* Panels: label | text | photo */
.ov-page .ov-panel {
    display: grid !important;
    grid-template-columns: 34mm minmax(0, 1fr) 34mm !important;
    min-height: 48mm;
    margin-bottom: 4mm;
    background: #f2f6fa;
    overflow: hidden;
}

.ov-page .ov-label {
    position: relative;
    padding: 6mm 5mm 5mm;
}

.ov-page .ov-icon,
.ov-page .ov-label-text {
    position: relative;
}

.ov-page .ov-label-text {
    margin-top: 4mm;
}

.ov-page .ov-label-text span {
    display: block;
    color: #123f68;
    font-size: 10.5px;
    letter-spacing: 0.4px;
}

.ov-page .ov-label-text strong {
    display: block;
    color: #123f68;
    font-size: 13px;
    font-weight: 800;
}

.ov-page .ov-label-text i {
    display: block;
    width: 10mm;
    height: 2px;
    margin-top: 2.5mm;
    background: #2f6aa3;
}

.ov-page .ov-text {
    padding: 5.5mm 4mm 4mm 3mm;
}

.ov-page .ov-text p {
    margin: 0 0 2.5mm;
    color: #334155;
    font-size: 10.5px;
    line-height: 1.55;
}

.ov-page .ov-photo {
    position: relative;
    overflow: hidden;
}

.ov-page .ov-photo img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
}

/* Important note */
.ov-page .ov-note {
    display: flex !important;
    align-items: center;
    gap: 4mm;
    padding: 4mm 5mm;
    background: #f2f6fa;
    border-left: 4px solid #123f68;
}

.ov-page .ov-note svg {
    flex-shrink: 0;
    padding-right: 4mm;
    border-right: 1px solid #c9d6e3;
}

.ov-page .ov-note strong {
    display: block;
    margin-bottom: 1mm;
    color: #123f68;
    font-size: 12px;
    font-weight: 800;
}

.ov-page .ov-note p {
    margin: 0;
    color: #334155;
    font-size: 10.5px;
    line-height: 1.5;
}

/* =========================================
   PAGE 2 (contents + steps) and PAGE 3 (purpose & scope): full-page sizes
========================================= */

/* ---- Page 2: steps in one column, bigger ---- */
.ov-page:not(.ov-ps-page) .ov-heading {
    margin: 7mm 0 3.5mm;
    font-size: 14px;
}

.ov-page:not(.ov-ps-page) .ov-steps {
    grid-template-columns: 1fr !important;
    gap: 0;
}

.ov-page:not(.ov-ps-page) .ov-step {
    gap: 4mm;
    padding: 2.8mm 3.5mm;
    border: none;
    border-bottom: 1px solid #edf1f5;
}

.ov-page:not(.ov-ps-page) .ov-step:nth-child(even) {
    background: #ffffff;
}

.ov-page:not(.ov-ps-page) .ov-step span {
    width: 7mm;
    height: 7mm;
    font-size: 11px;
}

.ov-page:not(.ov-ps-page) .ov-step p {
    font-size: 12px;
    line-height: 1.45;
}

/* ---- Page 3: Purpose & Scope, bigger panels ---- */
.report-page.ov-ps-page {
    padding: 16mm 18mm 22mm !important;
}

.ov-ps-page .ov-ps-title {
    margin-top: 7mm;
}

.ov-ps-page .ov-ps-title strong {
    font-size: 28px;
}

.ov-ps-page .ov-ps-title span {
    font-size: 17px;
    letter-spacing: 5px;
}

.ov-ps-page .ov-ps-line {
    margin-top: 4mm;
}

.ov-ps-page .ov-intro {
    margin: 5mm 0 6mm;
    font-size: 12px;
    line-height: 1.6;
}

.ov-ps-page .ov-panel {
    grid-template-columns: 38mm minmax(0, 1fr) 40mm !important;
    min-height: 64mm;
    margin-bottom: 6mm;
}

.ov-ps-page .ov-label {
    padding: 7mm 5mm 5mm;
}

.ov-ps-page .ov-icon {
    width: 38px;
    height: 38px;
}

.ov-ps-page .ov-label-text {
    margin-top: 5mm;
}

.ov-ps-page .ov-label-text span {
    font-size: 11.5px;
}

.ov-ps-page .ov-label-text strong {
    font-size: 14px;
}

.ov-ps-page .ov-text {
    padding: 7mm 5mm 5mm 4mm;
}

.ov-ps-page .ov-text p {
    margin-bottom: 3mm;
    font-size: 11.5px;
    line-height: 1.6;
}

.ov-ps-page .ov-note {
    padding: 5mm 6mm;
}

.ov-ps-page .ov-note strong {
    font-size: 13px;
}

.ov-ps-page .ov-note p {
    font-size: 11.5px;
    line-height: 1.55;
}

/* =========================================
   INSIDE PAGES: faded building top-right + corner design bottom-right
========================================= */

.report-page:not(.report-cover-page) {
    position: relative;
    z-index: 0;
    overflow: hidden;
}

/* Faded skyline in the top-right corner */
.report-page:not(.report-cover-page)::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;

    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;

    width: 58% !important;
    height: 44mm !important;

    background:
        linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0.8) 40%, rgba(255, 255, 255, 0.3) 100%),
        linear-gradient(0deg, #ffffff 0%, rgba(255, 255, 255, 0) 65%),
        url("assets/cover-skyline.jpg") right 35% / cover no-repeat !important;

    opacity: 0.55 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;

    z-index: -1 !important;
    pointer-events: none;
}

/* Navy + light-blue triangles in the bottom-right corner */
.report-page:not(.report-cover-page)::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;

    top: auto !important;
    left: auto !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 30mm !important;
    height: 30mm !important;

    background:
        linear-gradient(135deg, transparent 50%, #123f68 50%) right bottom / 17mm 17mm no-repeat,
        linear-gradient(135deg, transparent 50%, #b9d4ea 50%) right bottom / 30mm 30mm no-repeat !important;

    opacity: 1 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;

    z-index: -1 !important;
    pointer-events: none;
}

/* =========================================
   SNAG FORM: fields no longer used (hidden)
========================================= */

.issue-field:has(#issueType),
.issue-field:has(#assignedTo),
.issue-field:has(#issueDueDate),
.issue-field:has(#inspectionRequest),
.edit-field:has(#editType),
.edit-field:has(#editAssignedTo),
.edit-field:has(#editDueDate),
.edit-field:has(#editInspectionRequest) {
    display: none !important;
}

/* Due date column in the Issues list, and the Due Date box in the issue popup */
.issue-row-date,
.issue-popup-summary .popup-summary-card:nth-child(4) {
    display: none !important;
}

/* Pick-or-type fields look like the other inputs */
#issueClassification,
#issueCategory,
#editClassification,
#editCategory {
    width: 100%;
    box-sizing: border-box;
}

/* =========================================
   REPORT SNAG PAGE REDESIGN
========================================= */

/* Letter-spaced subtitle under "Snag / Issue Details" */
.report-snag-page .snag-subtitle {
    margin: 1mm 0 0 !important;
    color: #64748b !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 2.5px !important;
}

/* Priority badge with flag */
.report-snag-page .report-snag-priority {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 6px 12px !important;
    border-radius: 6px !important;
}

/* 4 info boxes in one row */
.report-snag-page .snag-info-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 3mm;
    margin: 5mm 0 4mm;
}

.report-snag-page .snag-info-box {
    display: flex !important;
    align-items: center;
    gap: 3mm;
    padding: 3.5mm 3mm;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.report-snag-page .snag-info-icon {
    flex-shrink: 0;
    width: 9mm;
    height: 9mm;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef3f8;
    border-radius: 7px;
}

.report-snag-page .snag-info-box span,
.report-snag-page .snag-text-box span {
    display: block;
    color: #1f4e78;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
}

.report-snag-page .snag-info-box strong {
    display: block;
    margin-top: 1mm;
    color: #172033;
    font-size: 11px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

/* Defect / comments boxes */
.report-snag-page .snag-text-box {
    display: flex !important;
    align-items: flex-start;
    gap: 3.5mm;
    margin-bottom: 3mm;
    padding: 4mm;
    background: #f5f8fb;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.report-snag-page .snag-text-box p {
    margin: 1.5mm 0 0;
    color: #334155;
    font-size: 11px;
    line-height: 1.55;
    white-space: pre-wrap;
}

/* Camera icon next to "Photographic Evidence" */
.report-snag-page .evidence-icon {
    width: 8mm;
    height: 8mm;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef3f8;
    border-radius: 6px;
}

/* =========================================
   PDF: cover fills the whole page (no white strip)
========================================= */

body.pdf-exporting {
    margin: 0 !important;
}

body.pdf-exporting .report-page,
.report-cover-page.cover-skyline {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    left: 0 !important;
    transform: none !important;
}

.report-cover-page.cover-skyline {
    margin-left: 0 !important;
    margin-right: 0 !important;
    background-position: center bottom !important;
    background-size: cover !important;
}

/* Use the pre-faded skyline (made by app.js) in the top-right corner */
.report-page:not(.report-cover-page)::before {
    background: var(--report-header-image) right top / 100% 100% no-repeat !important;
    opacity: 1 !important;
}

/* =========================================
   PAGE 2: methodology steps (numbers in navy circles)
========================================= */

.ov-page .ov-steps {
    display: flex !important;
    flex-direction: column;
}

.ov-page .ov-step {
    display: flex !important;
    align-items: center;
    gap: 4mm;
    padding: 2.8mm 3.5mm;
    border-bottom: 1px solid #edf1f5;
}

.ov-page .ov-step:nth-child(odd) {
    background: #f8fafc;
}

.ov-page .ov-step span {
    flex-shrink: 0;
    width: 7mm;
    height: 7mm;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #123f68;
    color: #ffffff;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
}

.ov-page .ov-step p {
    margin: 0;
    color: #334155;
    font-size: 12px;
    line-height: 1.45;
}

/* =========================================
   OVERVIEW SCREEN (redesign)
========================================= */

.ov2-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;

    padding: 22px 24px;
    margin-bottom: 16px;

    background: #123f68;
    border-radius: 14px;
}

.ov2-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: #85b7eb;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.ov2-hero h2 {
    margin: 0 0 4px !important;
    color: #ffffff !important;
    font-size: 24px !important;
}

.ov2-hero p {
    margin: 0 !important;
    color: #b5d4f4 !important;
    font-size: 13px !important;
}

.ov2-hero #overviewStatus {
    padding: 6px 14px;
    border-radius: 20px;
    background: #e6f1fb;
    color: #0c447c;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.ov2-hero #overviewStatus.status-completed { background: #e1f5ee; color: #085041; }
.ov2-hero #overviewStatus.status-pending   { background: #faeeda; color: #633806; }

/* Key numbers */
.ov2-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.ov2-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    background: #ffffff;
    border: 1px solid #e5eaf0;
    border-radius: 12px;
}

.ov2-stat-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    margin-bottom: 4px;
}

.ov2-blue   { background: #eaf2f8; color: #1f4e78; }
.ov2-orange { background: #fdf0ec; color: #c2410c; }
.ov2-red    { background: #fdecec; color: #a32d2d; }
.ov2-green  { background: #e7f6ec; color: #2f7a57; }

.ov2-stat strong {
    color: #172033;
    font-size: 24px;
    line-height: 1.1;
}

.ov2-stat small {
    color: #64748b;
    font-size: 12px;
}

/* Details + actions */
.ov2-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 12px;
}

.ov2-card {
    padding: 18px;
    background: #ffffff;
    border: 1px solid #e5eaf0;
    border-radius: 12px;
}

.ov2-card h3 {
    margin: 0 0 14px !important;
    color: #172033 !important;
    font-size: 15px !important;
}

.ov2-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
}

.ov2-details span {
    display: block;
    margin-bottom: 3px;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.ov2-details strong {
    color: #172033;
    font-size: 14px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

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

.ov2-action {
    min-height: 46px;
    padding: 0 16px;

    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #ffffff;
    color: #172033;

    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.ov2-action:hover {
    background: #f5f8fb;
}

.ov2-action.ov2-primary {
    background: #123f68;
    border-color: #123f68;
    color: #ffffff;
}

/* Clients can't add snags or fill the checklist */
body.role-client .ov2-action[data-then="addSnag"],
body.role-client .ov2-action[data-go="checklistSection"] {
    display: none;
}

/* Tablet portrait / phones: stack the blocks */
@media (max-width: 900px) {
    .ov2-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

/* =========================================
   OVERVIEW: remove leftover styles from the old design
========================================= */

#overviewSection .ov2-hero h2,
#overviewSection .ov2-hero p {
    border: 0 !important;
    padding: 0 !important;
    background: none !important;
}

#overviewSection .ov2-hero h2::before,
#overviewSection .ov2-hero h2::after,
#overviewSection .ov2-hero p::before,
#overviewSection .ov2-hero p::after {
    display: none !important;
}

/* Status badge sits in the header row, not pinned to the corner */
#overviewSection #overviewStatus {
    position: static !important;
    top: auto !important;
    right: auto !important;
    align-self: flex-start;
}

/* "8 / 806" on one line, same style as the other details */
#overviewSection .ov2-details strong span {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

/* =========================================
   OVERVIEW HEADER: faded skyline in the background
========================================= */

#overviewSection .ov2-hero {
    position: relative;
    overflow: hidden;
    min-height: 120px;

    background:
        linear-gradient(90deg,
            #123f68 0%,
            #123f68 35%,
            rgba(18, 63, 104, 0.75) 60%,
            rgba(18, 63, 104, 0.35) 100%),
        url("assets/cover-skyline.jpg") right 30% / cover no-repeat !important;
}

/* Keep the text and badge above the image */
#overviewSection .ov2-hero > * {
    position: relative;
    z-index: 1;
}

/* =========================================
   PROGRESS SCREEN (redesign)
========================================= */

.pg-heading h2 {
    margin: 0 0 4px !important;
    color: #172033 !important;
}

.pg-heading p {
    margin: 0 0 16px !important;
    color: #64748b !important;
}

.pg-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 12px;
    margin-bottom: 12px;
}

.pg-bottom {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.pg-card {
    padding: 18px;
    background: #ffffff;
    border: 1px solid #e5eaf0;
    border-radius: 12px;
}

.pg-card h3 {
    margin: 0 0 12px !important;
    color: #172033 !important;
    font-size: 15px !important;
}

.pg-card h3.pg-sub {
    margin-top: 20px !important;
}

/* Completion ring */
.pg-ring-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pg-ring-card h3 {
    align-self: flex-start;
}

.pg-ring {
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e6f1fb;
}

.pg-ring-inner {
    width: 116px;
    height: 116px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 50%;
}

.pg-ring-inner strong {
    color: #1f4e78;
    font-size: 28px;
    line-height: 1;
}

.pg-ring-inner span {
    margin-top: 4px;
    color: #64748b;
    font-size: 11px;
}

/* Stacked bars */
.pg-stack {
    display: flex;
    height: 14px;
    overflow: hidden;
    border-radius: 7px;
    background: #eef2f6;
}

.pg-stack div {
    height: 100%;
}

.pg-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 10px;
    color: #475569;
    font-size: 12px;
}

.pg-legend span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pg-legend i {
    width: 10px;
    height: 10px;
    display: inline-block;
    border-radius: 50%;
}

.pg-legend b {
    color: #172033;
}

/* Horizontal bars */
.pg-bars {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pg-bar-row {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 10px;
    font-size: 12px;
}

.pg-bar-label {
    color: #475569;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pg-bar-track {
    height: 9px;
    overflow: hidden;
    border-radius: 5px;
    background: #eef2f6;
}

.pg-bar-track div {
    height: 100%;
    border-radius: 5px;
}

.pg-bar-row strong {
    color: #172033;
    text-align: right;
}

.pg-empty {
    padding: 20px 0;
    text-align: center;
    color: #94a3b8;
    font-size: 13px;
}

/* Tablet portrait / phones: stack the blocks */
@media (max-width: 900px) {
    .pg-top,
    .pg-bottom {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   PROJECT PAGES: top bar stays visible while scrolling
========================================= */

.inspection-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 900 !important;

    background: #ffffff !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
}

/* =========================================
   PLANS SCREEN (redesign)
========================================= */

/* Floor plan / 360° switch */
.plans-view-switch {
    display: inline-flex;
    gap: 4px;
    margin: 0 0 14px;
    padding: 4px;
    background: #ffffff;
    border: 1px solid #e5eaf0;
    border-radius: 10px;
}

.plans-view-switch button {
    min-height: 40px;
    padding: 0 18px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #475569;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.plans-view-switch button.active {
    background: #123f68;
    color: #ffffff;
}

/* Show one view at a time */
#plansSection:not(.showing-360) .panorama-section {
    display: none !important;
}

#plansSection.showing-360 #planArea,
#plansSection.showing-360 #planEmptyState {
    display: none !important;
}

/* No floor plan yet */
.plan-empty-state {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 50px 20px;
    text-align: center;
    background: #ffffff;
    border: 1px dashed #b9c9d8;
    border-radius: 12px;
    color: #64748b;
    font-size: 13px;
}

.plan-empty-state strong {
    color: #123f68;
    font-size: 16px;
}

/* Plan + snag list side by side */
.plan-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 14px;
    align-items: start;
}

.plan-snag-list {
    max-height: 70vh;
    overflow-y: auto;
    padding: 14px;
    background: #ffffff;
    border: 1px solid #e5eaf0;
    border-radius: 12px;
}

.plan-snag-list h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    color: #172033;
    font-size: 14px;
}

.plan-snag-list h4 span {
    padding: 2px 8px;
    border-radius: 10px;
    background: #eaf2f8;
    color: #1f4e78;
    font-size: 11px;
}

.plan-snag-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    padding: 9px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: #f8fafc;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.plan-snag-item:hover {
    border-color: #cbd5e1;
    background: #f1f5f9;
}

.plan-snag-pin {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
}

.plan-snag-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.plan-snag-text strong {
    color: #172033;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.plan-snag-text small {
    color: #94a3b8;
    font-size: 11px;
}

.plan-snag-empty {
    padding: 16px 4px;
    color: #94a3b8;
    font-size: 12px;
    text-align: center;
}

/* Priority colours: list badges and pins on the plan */
.plan-snag-pin.pin-critical,
.snag-marker.pin-critical,
.snag-marker.pin-critical span { background-color: #9b1c1c !important; }

.plan-snag-pin.pin-high,
.snag-marker.pin-high,
.snag-marker.pin-high span { background-color: #e0533d !important; }

.plan-snag-pin.pin-medium,
.snag-marker.pin-medium,
.snag-marker.pin-medium span { background-color: #e0a030 !important; }

.plan-snag-pin.pin-low,
.snag-marker.pin-low,
.snag-marker.pin-low span { background-color: #3b8b68 !important; }

/* Tablet portrait / phones: list under the plan */
@media (max-width: 900px) {
    .plan-layout {
        grid-template-columns: 1fr;
    }

    .plan-snag-list {
        max-height: none;
    }
}

/* =========================================
   ISSUES SCREEN (redesign)
========================================= */

/* The old status dropdown is replaced by the chips */
#issueStatusFilter {
    display: none !important;
}

/* Filter chips */
.issue-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 14px;
}

.issue-chips button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid #cbd5e1;
    border-radius: 20px;
    background: #ffffff;
    color: #334155;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.issue-chips button span {
    padding: 1px 7px;
    border-radius: 10px;
    background: #eef2f6;
    color: #475569;
    font-size: 11px;
}

.issue-chips button.active {
    background: #123f68;
    border-color: #123f68;
    color: #ffffff;
}

.issue-chips button.active span {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

/* Coloured left edge by priority */
#issuesList .issue-card {
    border-left: 4px solid #e0a030 !important;
}

#issuesList .issue-card.prio-critical { border-left-color: #9b1c1c !important; }
#issuesList .issue-card.prio-high     { border-left-color: #e0533d !important; }
#issuesList .issue-card.prio-medium   { border-left-color: #e0a030 !important; }
#issuesList .issue-card.prio-low      { border-left-color: #3b8b68 !important; }

/* Photo count badge */
.issue-photo-count {
    background: #eaf2f8 !important;
    color: #1f4e78 !important;
}

/* Nothing matches */
.issue-no-match {
    padding: 30px 16px;
    text-align: center;
    background: #ffffff;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    color: #94a3b8;
    font-size: 13px;
}

/* Locked Inspector field (inspectors see their own name) */
#newInspector:disabled {
    background: #f1f5f9 !important;
    color: #172033 !important;
    opacity: 1 !important;
    cursor: not-allowed;
}

/* =========================================
   PDF: cover image fills the whole page, every page exactly A4
========================================= */

/* The skyline + dark fade sit on a layer slightly bigger than the page,
   so no white edge can ever show */
.report-cover-page.cover-skyline .cover-overlay {
    top: -4mm !important;
    right: -4mm !important;
    bottom: -4mm !important;
    left: -4mm !important;

    background:
        linear-gradient(
            90deg,
            rgba(9, 32, 58, 0.92) 0%,
            rgba(9, 32, 58, 0.65) 45%,
            rgba(9, 32, 58, 0.05) 78%
        ),
        url("assets/cover-skyline.jpg") center bottom / cover no-repeat !important;
}

.report-cover-page.cover-skyline {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}

/* The PDF is built page by page now, so pages can be exactly A4 (no bottom line) */
body.pdf-exporting .report-page {
    height: 296mm !important;
    min-height: 296mm !important;
    max-height: 296mm !important;
}

/* =========================================
   FLEXIBLE CHECKLIST
========================================= */

.inspection-table .chk-item-name,
.inspection-table .chk-activity-name {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    color: #1f2937;
    box-sizing: border-box;
}

.inspection-table .chk-item-name:hover,
.inspection-table .chk-item-name:focus,
.inspection-table .chk-activity-name:hover,
.inspection-table .chk-activity-name:focus {
    border-color: #cbd5e1;
    background: #ffffff;
    outline: none;
}

.chk-activity {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chk-activity-no {
    flex-shrink: 0;
    color: #1f4e78;
    font-weight: 700;
    white-space: nowrap;
}

.inspection-table .chk-activity-name {
    flex: 1;
    min-width: 0;
    font-weight: 700;
    color: #1f4e78;
}

.chk-add-item {
    flex-shrink: 0;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid #1f4e78;
    border-radius: 18px;
    background: #ffffff;
    color: #1f4e78;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.chk-add-item:hover {
    background: #eaf2f8;
}

.chk-remove {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #94a3b8;
    font-size: 15px;
    cursor: pointer;
}

.chk-remove:hover {
    background: #fdecec;
    color: #b42318;
}

.inspection-table td:last-child {
    width: 44px;
    text-align: center;
}

.chk-add-activity {
    margin: 14px 10px 0 0;
    min-height: 42px;
    padding: 0 18px;
    border: 1px dashed #1f4e78;
    border-radius: 8px;
    background: #f5f8fb;
    color: #1f4e78;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.chk-add-activity:hover {
    background: #eaf2f8;
}

/* Report: activity heading rows in the checklist table */
.report-checklist-table .report-activity-row td {
    padding: 7px 10px !important;
    background: #eaf2f8 !important;
    color: #123f68 !important;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.4px;
}

/* =========================================
   TABLET PORTRAIT: ☰ MENU
========================================= */

.menu-toggle-btn,
.menu-backdrop {
    display: none;
}

@media (max-width: 1100px) {

    /* Content uses the full width */
    #dashboardPage {
        padding-left: 0 !important;
    }

    #inspectionPage .inspection-main {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 24px 20px 60px !important;
    }

    /* Old empty side strip is not needed */

    /* Sidebars become a slide-in menu */
    .dashboard-sidebar,
    #inspectionPage .inspection-sidebar {
        display: flex !important;
        width: 270px !important;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        z-index: 3000 !important;
    }

    body.menu-open .dashboard-sidebar,
    body.menu-open #inspectionPage .inspection-sidebar {
        transform: translateX(0);
        box-shadow: 8px 0 30px rgba(15, 23, 42, 0.25);
    }

    body.menu-open {
        overflow: hidden;
    }

    .menu-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.45);
        z-index: 2900;
    }

    body.menu-open .menu-backdrop {
        display: block;
    }

    /* ☰ button */
    .menu-toggle-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 46px;
        height: 46px;
        margin-right: 6px;
        border: 1px solid #d6dee8;
        border-radius: 10px;
        background: #ffffff;
        color: #123f68;
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
    }

    .menu-toggle-btn:active {
        background: #eaf2f8;
    }

    /* Headers: ☰ on the left, buttons on the right */
    #dashboardPage .dashboard-header,
    #inspectionPage .inspection-header {
        padding: 0 16px !important;
        gap: 10px;
    }

    #inspectionPage .inspection-header {
        justify-content: flex-start !important;
    }

    #backDashboardBtn {
        margin-left: auto;
    }
}

/* =========================================
   ISSUE REGISTER
========================================= */

.ir-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.ir-tabs {
    display: inline-flex;
    padding: 4px;
    border-radius: 12px;
    background: #eef3f8;
}

.ir-tab {
    min-height: 40px;
    padding: 0 16px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: #475569;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.ir-tab b {
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 10px;
    background: #dbe5ef;
    color: #123f68;
    font-size: 11px;
}

.ir-tab.active {
    background: #ffffff;
    color: #123f68;
    box-shadow: 0 2px 8px rgba(18, 63, 104, 0.12);
}

.ir-tab.active b {
    background: #123f68;
    color: #ffffff;
}

.ir-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ir-search,
.ir-select {
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid #d6dee8;
    border-radius: 10px;
    background: #ffffff;
    font-family: inherit;
    font-size: 13px;
    color: #1f2937;
}

.ir-search {
    width: 250px;
}

.ir-search:focus,
.ir-select:focus {
    outline: none;
    border-color: #1f4e78;
    box-shadow: 0 0 0 3px rgba(31, 78, 120, 0.12);
}

.ir-count {
    margin: 4px 2px 10px;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.ir-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ir-row {
    display: grid;
    grid-template-columns: 72px 1fr auto auto;
    align-items: center;
    gap: 18px;
    padding: 14px 18px 14px 14px;
    border: 1px solid #e3e9f0;
    border-left: 4px solid #e0533d;
    border-radius: 12px;
    background: #ffffff;
    transition: box-shadow 0.15s ease;
}

.ir-row:hover {
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.07);
}

.ir-row.ir-closed {
    border-left-color: #2f7a57;
    background: #fbfdfc;
}

.ir-thumb {
    width: 72px;
    height: 72px;
    border-radius: 10px;
    overflow: hidden;
    background: #eef3f8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.ir-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ir-main {
    min-width: 0;
}

.ir-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px;
}

.ir-id {
    color: #1f4e78;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.6px;
}

.ir-tag {
    padding: 2px 8px;
    border-radius: 10px;
    background: #eef3f8;
    color: #475569;
    font-size: 10px;
    font-weight: 700;
}

.ir-main h3 {
    margin: 0 0 3px;
    color: #0f172a;
    font-size: 15px;
}

.ir-details {
    margin: 0 0 4px;
    color: #475569;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ir-where {
    margin: 0;
    color: #64748b;
    font-size: 12px;
}

.ir-where strong {
    color: #123f68;
}

.ir-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    white-space: nowrap;
}

.ir-side small {
    color: #64748b;
    font-size: 11px;
}

.ir-status {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 800;
}

.ir-status.open {
    background: #fdecea;
    color: #c0392b;
}

.ir-status.closed {
    background: #e6f4ec;
    color: #2f7a57;
}

.ir-priority {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    background: #eef3f8;
    color: #475569;
}

.ir-priority.critical { background: #9b1c1c; color: #ffffff; }
.ir-priority.high     { background: #fdecea; color: #c0392b; }
.ir-priority.medium   { background: #fff4e0; color: #a86a00; }
.ir-priority.low      { background: #e6f4ec; color: #2f7a57; }

.ir-open-btn {
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid #1f4e78;
    border-radius: 10px;
    background: #ffffff;
    color: #1f4e78;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.ir-open-btn:hover {
    background: #1f4e78;
    color: #ffffff;
}

/* Tablet portrait / narrow screens */
@media (max-width: 800px) {
    .ir-search {
        width: 100%;
    }

    .ir-filters {
        width: 100%;
    }

    .ir-select {
        flex: 1;
    }

    .ir-row {
        grid-template-columns: 64px 1fr;
        gap: 12px;
    }

    .ir-thumb {
        width: 64px;
        height: 64px;
    }

    .ir-side {
        grid-column: 2;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
    }

    .ir-open-btn {
        grid-column: 1 / -1;
        width: 100%;
    }
}

/* =========================================
   REPORTS PAGE HEADING (matches Issues page)
========================================= */

#dashboardReportsSection .section-heading {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    gap: 20px !important;

    margin: 0 0 22px !important;
    padding: 0 0 18px !important;

    border-bottom: 1px solid #e3e9f0 !important;
    background: none !important;
    box-shadow: none !important;
}

#dashboardReportsSection .section-heading span {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px !important;

    color: #1f4e78 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 1.6px !important;
    text-transform: uppercase;
}

/* Small accent bar before the label */
#dashboardReportsSection .section-heading span::before {
    content: "";
    width: 18px;
    height: 3px;
    border-radius: 2px;
    background: #b42318;
}

#dashboardReportsSection .section-heading h2 {
    margin: 0 0 6px !important;

    color: #172033 !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    letter-spacing: -0.2px;
}

#dashboardReportsSection .section-heading p {
    margin: 0 !important;

    color: #7b8797 !important;
    font-size: 13px !important;
}

/* =========================================
   DASHBOARD: TODAY AT A GLANCE
========================================= */

.glance-section {
    margin-top: 30px;
}

.glance-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.glance-heading span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    color: #1f4e78;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.6px;
}

.glance-heading span::before {
    content: "";
    width: 18px;
    height: 3px;
    border-radius: 2px;
    background: #b42318;
}

.glance-heading h2 {
    margin: 0;
    color: #172033;
    font-size: 20px;
    font-weight: 800;
}

.glance-all-btn {
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid #1f4e78;
    border-radius: 10px;
    background: #ffffff;
    color: #1f4e78;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.glance-all-btn:hover {
    background: #1f4e78;
    color: #ffffff;
}

.glance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.glance-card {
    display: flex;
    flex-direction: column;
    padding: 20px;
    border: 1px solid #e3e9f0;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

.glance-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-bottom: 12px;
    margin-bottom: 6px;
    border-bottom: 1px solid #edf0f4;
}

.glance-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: #7b8797;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

.glance-card-head h3 {
    margin: 0;
    color: #172033;
    font-size: 16px;
}

.glance-count {
    min-width: 30px;
    padding: 4px 10px;
    border-radius: 14px;
    background: #123f68;
    color: #ffffff;
    font-size: 13px;
    text-align: center;
}

.glance-list {
    display: flex;
    flex-direction: column;
}

.glance-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 60px;
    padding: 10px 6px;
    border: none;
    border-bottom: 1px solid #f1f4f8;
    border-radius: 8px;
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.glance-row:last-child {
    border-bottom: none;
}

.glance-row:hover {
    background: #f5f8fb;
}

.glance-row-static {
    cursor: default;
}

.glance-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.glance-text strong {
    color: #172033;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.glance-text small {
    color: #7b8797;
    font-size: 11.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.glance-date {
    flex-shrink: 0;
    min-width: 78px;
    padding: 6px 8px;
    border-radius: 8px;
    background: #eef3f8;
    color: #123f68;
    font-size: 11px;
    font-weight: 800;
    text-align: center;
}

.glance-date.today   { background: #123f68; color: #ffffff; }
.glance-date.soon    { background: #e6f1fb; color: #1f4e78; }
.glance-date.overdue { background: #fdecea; color: #b42318; }

.glance-tag {
    margin-left: 4px;
    padding: 1px 7px;
    border-radius: 8px;
    background: #fff4e0;
    color: #a86a00;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
}

.glance-arrow {
    color: #94a3b8;
    font-size: 22px;
}

.glance-thumb,
.glance-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    overflow: hidden;
    background: #eef3f8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.glance-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.glance-status {
    margin-left: 4px;
    padding: 1px 7px;
    border-radius: 8px;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
}

.glance-status.open   { background: #fdecea; color: #c0392b; }
.glance-status.closed { background: #e6f4ec; color: #2f7a57; }

.glance-time {
    flex-shrink: 0;
    color: #94a3b8;
    font-size: 11px;
}

.glance-btn {
    flex-shrink: 0;
    min-height: 38px;
    padding: 0 12px;
    border: none;
    border-radius: 8px;
    background: #123f68;
    color: #ffffff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.glance-btn:hover {
    background: #1f4e78;
}

.glance-empty {
    padding: 22px 6px;
    color: #94a3b8;
    font-size: 13px;
    text-align: center;
}

.glance-empty.glance-good {
    color: #2f7a57;
    font-weight: 700;
}

@media (max-width: 700px) {
    .glance-heading {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =========================================
   MOVE SNAG PINS
========================================= */

.move-pins-btn {
    min-height: 42px;
    margin-left: 10px;
    padding: 0 16px;
    border: 1px solid #1f4e78;
    border-radius: 10px;
    background: #ffffff;
    color: #1f4e78;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.move-pins-btn:hover {
    background: #eaf2f8;
}

.move-pins-btn.active {
    border-color: #2f7a57;
    background: #2f7a57;
    color: #ffffff;
}

.move-pins-hint {
    margin: 0 0 12px;
    padding: 10px 14px;
    border: 1px solid #b7dcc8;
    border-radius: 10px;
    background: #e6f4ec;
    color: #1f5c3f;
    font-size: 13px;
    font-weight: 600;
}

/* Pins look "grabbable" while moving */
body.moving-pins .snag-marker {
    cursor: grab;
    touch-action: none;
    user-select: none;
    outline: 3px dashed rgba(47, 122, 87, 0.8);
    outline-offset: 3px;
}

.snag-marker.pin-dragging {
    cursor: grabbing;
    z-index: 50 !important;
    opacity: 0.85;
    outline-color: #2f7a57;
}

.snag-marker.pin-saving {
    opacity: 0.55;
}

/* =========================================
   LOGIN: CLEAN PROFESSIONAL STYLE
========================================= */

/* ----- Left side ----- */

.login-brand-content {
    max-width: 420px;
}

.login-brand-content .login-eyebrow {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px !important;

    color: #9fd3f5 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
}

/* Small red accent line before the label */
.login-brand-content .login-eyebrow::before {
    content: "";
    width: 26px;
    height: 3px;
    border-radius: 2px;
    background: #e0533d;
}

.login-brand-content h2 {
    margin: 0 0 20px !important;

    color: #ffffff !important;
    font-size: 36px !important;
    font-weight: 800 !important;
    line-height: 1.22 !important;
    letter-spacing: -0.6px !important;
}

.login-brand-content p {
    max-width: 380px;
    margin: 0 !important;

    color: rgba(255, 255, 255, 0.78) !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
}

.login-brand-footer {
    padding-top: 18px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.14);

    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 11px !important;
    font-style: italic;
    letter-spacing: 0.3px;
}

/* ----- Right side ----- */

.login-small-label {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;

    color: #1f4e78 !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    letter-spacing: 1.8px !important;
}

.login-small-label::before {
    content: "";
    width: 18px;
    height: 3px;
    border-radius: 2px;
    background: #e0533d;
}

.welcome-text h2 {
    margin: 10px 0 8px !important;
    font-size: 30px !important;
    letter-spacing: -0.4px !important;
}

.welcome-text p {
    color: #6b7788 !important;
    font-size: 14px !important;
}

.login-security p {
    color: #8793a3 !important;
    font-size: 11.5px !important;
}

.login-security span {
    color: #2f7a57 !important;
}

/* Tablet portrait: slightly smaller heading */
@media (max-width: 1000px) {
    .login-brand-content h2 {
        font-size: 30px !important;
    }
}

/* Transparent logo (already cropped): natural sizes */
.login-company-logo {
    width: 200px !important;
    height: auto !important;
    object-fit: contain !important;
}

.sidebar-logo,
.inspection-sidebar-logo {
    width: 170px !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Report: cover and page headers */
.cover-logo-card img {
    width: 220px !important;
    height: auto !important;
    max-width: none !important;
    object-fit: contain !important;
}

.report-page-brand img {
    width: auto !important;
    height: 28px !important;
    max-width: none !important;
    object-fit: contain !important;
}

/* =========================================
   REPORT: CONCLUSION PAGE
========================================= */

.report-conclusion-page .report-body-text + .report-body-text {
    margin-top: 8px;
}

.concl-steps {
    margin: 10px 0 0;
    padding-left: 18px;
    color: #334155;
    font-size: 11.5px;
    line-height: 1.55;
}

.concl-steps li {
    margin-bottom: 5px;
    padding-left: 4px;
}

.concl-steps li::marker {
    color: #123f68;
    font-weight: 800;
}

.concl-disclaimer {
    margin: 8px 0 0;
    padding-left: 16px;
    color: #475569;
    font-size: 11px;
    line-height: 1.6;
}

.concl-disclaimer li {
    margin-bottom: 6px;
}

.concl-disclaimer li::marker {
    color: #123f68;
}

.concl-signoff {
    display: flex;
    margin: 18px 0 16px;
    border: 1px solid #e3e9f0;
    border-radius: 10px;
    overflow: hidden;
}

.concl-signoff > div {
    flex: 1;
    padding: 10px 14px;
    border-right: 1px solid #e3e9f0;
}

.concl-signoff > div:last-child {
    border-right: none;
}

.concl-signoff small {
    display: block;
    margin-bottom: 4px;
    color: #7b8797;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.concl-signoff strong {
    color: #172033;
    font-size: 12.5px;
}

.report-closing-box.concl-closing {
    display: flex !important;
    align-items: center !important;
    gap: 22px !important;
    padding: 20px 24px !important;
}

.concl-logo-card {
    flex-shrink: 0;
    padding: 14px 16px;
    border-radius: 10px;
    background: #ffffff;
}

.concl-logo-card img {
    display: block;
    width: 150px !important;
    height: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    object-fit: contain !important;
}

.concl-closing-text strong {
    display: block;
    color: #ffffff;
    font-size: 15px;
}

.concl-closing-text em {
    display: block;
    margin: 3px 0 10px;
    color: #9fd3f5;
    font-size: 11px;
}

.concl-contacts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 18px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 10.5px;
}

/* Icon + text on one line */
.concl-contacts span {
    display: flex;
    align-items: center;
    gap: 7px;
}

.concl-contacts svg {
    flex-shrink: 0;
}

/* =========================================
   ISSUES PAGE HEADING (matches Reports page)
========================================= */

#dashboardPage .dashboard-issues-header {
    align-items: flex-end !important;
    padding-bottom: 18px !important;
    margin-bottom: 20px !important;
    border-bottom: 1px solid #e3e9f0 !important;
}

#dashboardPage .dashboard-issues-header span {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px !important;

    color: #1f4e78 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 1.6px !important;
}

#dashboardPage .dashboard-issues-header span::before {
    content: "";
    width: 18px;
    height: 3px;
    border-radius: 2px;
    background: #b42318;
}

#dashboardPage .dashboard-issues-header h2 {
    margin: 0 0 6px !important;
    color: #172033 !important;
    font-size: 24px !important;
    font-weight: 800 !important;
}

#dashboardPage .dashboard-issues-header p {
    color: #7b8797 !important;
    font-size: 13px !important;
}

/* =========================================
   CAMERA: LIGHT + ZOOM
========================================= */

.inapp-camera-modal {
    overflow: hidden;
}

/* Keep the enlarged (digital zoom) picture centred */
#inAppCameraVideo {
    transform-origin: center center;
    touch-action: none;
}

/* ⚡ Light button */
.inapp-camera-torch {
    min-height: 40px;
    margin-left: auto;
    margin-right: 10px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.35);
    color: #ffffff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.inapp-camera-torch.on {
    border-color: #ffd54a;
    background: #ffd54a;
    color: #1a1a1a;
}

/* Zoom bar */
.inapp-camera-zoom {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0 auto 10px;
    padding: 8px 16px;
    border-radius: 24px;
    background: rgba(0, 0, 0, 0.45);
    width: fit-content;
    max-width: 92%;
}

.zoom-presets {
    display: flex;
    gap: 6px;
}

.zoom-presets button {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    background: transparent;
    color: #ffffff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.zoom-presets button.active {
    border-color: #ffd54a;
    background: #ffd54a;
    color: #1a1a1a;
}

#cameraZoomSlider {
    width: 160px;
    accent-color: #ffd54a;
}

#cameraZoomLabel {
    min-width: 40px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    text-align: right;
}

/* PDF buttons: room for "Preparing PDF… 12 / 39" */
#downloadProfessionalPdfBtn,
#confirmSendReportBtn {
    min-width: 220px !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
}

/* Word export hidden: the PDF is the official report */

/* =========================================
   REPORT: TABLE OF CONTENTS
========================================= */

.toc-list {
    margin-top: 14px;
    border-top: 1px solid #e3e9f0;
}

.toc-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 13px 14px;
    border-bottom: 1px solid #e3e9f0;
    background: #ffffff;
}

.toc-item:nth-child(odd) {
    background: #f6f8fb;
}

.toc-no {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #123f68;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toc-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.toc-body strong {
    color: #172033;
    font-size: 13px;
    font-weight: 700;
}

.toc-body small {
    color: #6b7788;
    font-size: 11px;
    line-height: 1.5;
}

.toc-page {
    flex-shrink: 0;
    color: #123f68;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

/* =========================================
   CHECKLIST PAGE: title, then the table directly
========================================= */

.report-checklist-page .report-checklist-stats,
.report-checklist-page .report-content-block > h3 {
    display: none !important;
}

.report-checklist-page .report-content-block {
    margin-top: 6px !important;
}

/* =========================================
   REPORT HEADINGS: no number box, Montserrat style
========================================= */

.report-page-title .report-section-number {
    display: none !important;
}

.report-page-title {
    display: block !important;
    margin: 26px 0 24px !important;
}

.report-page-title h2 {
    margin: 0 !important;
    color: #123f68 !important;
    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: 27px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase;
}

.report-page-title p {
    margin: 6px 0 0 !important;
    color: #1f4e78 !important;
    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase;
}

.report-page-title > div::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    margin-top: 12px;
    border-radius: 2px;
    background: #123f68;
}

/* =========================================
   CAMERA: full-screen picture, buttons on top
========================================= */

/* Picture fills the whole screen (nothing is cut off) */
#inAppCameraVideo {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    flex: none !important;
    object-fit: contain !important;
}

/* Top bar: photo count + Done, over a soft dark fade */
.inapp-camera-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    background: linear-gradient(rgba(0, 0, 0, 0.6), transparent);
}

/* Bottom: shutter over a soft dark fade */
.inapp-camera-controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    padding: 18px 0 28px !important;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
}

/* Zoom bar: just above the shutter */
.inapp-camera-zoom {
    position: absolute !important;
    left: 50%;
    bottom: 128px;
    transform: translateX(-50%);
    margin: 0 !important;
    z-index: 6;
}

/* Thumbnails: bottom left, next to the shutter */
.inapp-camera-thumbs {
    position: absolute;
    left: 0;
    bottom: 26px;
    max-width: 34%;
    z-index: 6;
    min-height: 0 !important;
}

/* Remove button on inspector / client cards */
.person-remove-btn {
    width: 100%;
    min-height: 38px;
    margin-top: 12px;
    border: 1px solid #f1c4c0;
    border-radius: 8px;
    background: #ffffff;
    color: #b42318;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.person-remove-btn:hover {
    background: #fdecea;
}

.person-remove-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Inspection Summary: 5 boxes in one row */
.report-details-page .report-summary-grid {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 8px !important;
}

.report-details-page .report-summary-box {
    padding: 13px 12px !important;
}

.report-details-page .report-summary-box span {
    display: block;
    min-height: 22px;
    font-size: 8px !important;
    line-height: 1.35;
    letter-spacing: 0.6px;
}

/* Rectified = amber accent, Verified = green accent */
.report-details-page .summary-rectified {
    background: #9a6a12 !important;
}

.report-details-page .summary-verified {
    background: #1f6b4a !important;
}

/* Inspection Details page: a bit more compact so it fits one page */
.report-details-page .report-summary-box {
    min-height: 0 !important;
    padding: 11px 12px !important;
}

.report-details-page .report-summary-box strong {
    font-size: 22px !important;
}

.report-details-page .report-content-block {
    margin-bottom: 14px !important;
}

.report-details-page .report-status-list > div {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
}

/* Floor plan: plan uses the full width, legend underneath */
.report-floorplan-box {
    flex-direction: column !important;
    justify-content: center !important;
    gap: 10px;
}

#reportPlanLegend {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 16px;
}

#reportPlanLegend em {
    flex-basis: 100%;
    text-align: center;
}

#reportPlanStage #reportFloorPlanImage {
    max-height: 140mm !important;
}

/* =========================================
   REPORT: SNAGS BY LOCATION
========================================= */

.loc-legend {
    display: flex;
    gap: 18px;
    margin: 0 0 12px;
    color: #475569;
    font-size: 10px;
}

.loc-legend i {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 5px;
    border-radius: 50%;
    vertical-align: -1px;
}

.loc-open      { background: #e0533d; }
.loc-rectified { background: #e0a030; }
.loc-verified  { background: #2f7a57; }

.loc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.loc-table th {
    padding: 9px 10px;
    background: #123f68;
    color: #ffffff;
    font-size: 9.5px;
    letter-spacing: 0.8px;
    text-align: left;
    text-transform: uppercase;
}

.loc-table td {
    padding: 9px 10px;
    border-bottom: 1px solid #e8edf2;
    color: #334155;
    vertical-align: middle;
}

.loc-table tbody tr:nth-child(even) td {
    background: #f7f9fc;
}

.loc-table td strong {
    color: #172033;
}

.loc-count {
    color: #123f68 !important;
    font-size: 13px;
    font-weight: 800;
}

.loc-bar {
    display: flex;
    width: 120px;
    height: 8px;
    overflow: hidden;
    border-radius: 4px;
    background: #eef3f8;
}

.loc-bar span {
    display: block;
    height: 100%;
}

.loc-chip {
    display: inline-block;
    min-width: 18px;
    margin: 1px;
    padding: 2px 5px;
    border-radius: 9px;
    color: #ffffff;
    font-size: 8.5px;
    font-weight: 800;
    text-align: center;
}

.loc-table tfoot td {
    background: #eaf2f8;
    color: #123f68;
    font-weight: 800;
}

.loc-note {
    margin-top: 12px;
    color: #7b8797;
    font-size: 10px;
    font-style: italic;
}

/* =========================================
   SNAGS BY LOCATION: margins + polished look
========================================= */

/* Same page margins as the other report pages */
.report-location-page {
    position: relative;
    padding: 22mm 20mm 20mm !important;
    overflow: hidden;
}

.report-location-page .loc-legend {
    margin: 4px 0 14px !important;
    font-size: 9.5px !important;
}

/* Table inside a rounded card */
.report-location-page .loc-table {
    border-collapse: separate !important;
    border-spacing: 0;
    border: 1px solid #e3e9f0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
    font-size: 10.5px !important;
}

.report-location-page .loc-table th {
    padding: 10px 14px !important;
    background: linear-gradient(90deg, #123f68, #1f4e78) !important;
    font-size: 8.5px !important;
    letter-spacing: 1.2px !important;
}

.report-location-page .loc-table td {
    padding: 10px 14px !important;
    border-bottom: 1px solid #eef2f6 !important;
}

.report-location-page .loc-table tbody tr:last-child td {
    border-bottom: none !important;
}

/* Small navy pin before each room name */
.report-location-page .loc-table tbody td:first-child strong {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
}

.report-location-page .loc-table tbody td:first-child strong::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #123f68;
    box-shadow: 0 0 0 3px #dbe7f3;
}

/* Snag count as a round badge */
.report-location-page .loc-count {
    width: 60px;
}

.report-location-page .loc-table tbody .loc-count {
    font-size: 0 !important;
}

.report-location-page .loc-table tbody .loc-count::after {
    content: attr(data-count);
}

/* Status bar: thicker and rounded */
.report-location-page .loc-bar {
    width: 130px !important;
    height: 10px !important;
    border-radius: 6px !important;
    background: #edf2f7 !important;
}

/* Snag number tags: smaller and neater */
.report-location-page .loc-chip {
    min-width: 16px !important;
    margin: 1.5px !important;
    padding: 2px 5px !important;
    font-size: 8px !important;
    line-height: 1.3;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

/* Total row */
.report-location-page .loc-table tfoot td {
    padding: 11px 14px !important;
    border-top: 2px solid #123f68;
    background: #f1f6fb !important;
    font-size: 10.5px !important;
    letter-spacing: 0.3px;
}

.report-location-page .loc-note {
    margin-top: 14px !important;
    font-size: 9.5px !important;
}

.report-location-page .loc-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 6px;
    border-radius: 13px;
    background: #eaf2f8;
    color: #123f68;
    font-size: 12px;
    font-weight: 800;
}

.report-location-page .loc-table tbody .loc-count {
    font-size: 12px !important;
}

.report-location-page .loc-table tbody .loc-count::after {
    content: none !important;
}

/* =========================================
   NOTIFICATION BELL
========================================= */

.notif-wrap {
    position: relative;
    margin-right: 12px;
}

.notif-bell {
    position: relative;
    width: 42px;
    height: 42px;
    border: 1px solid #e3e9f0;
    border-radius: 50%;
    background: #ffffff;
    color: #123f68;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.notif-bell:hover {
    background: #eaf2f8;
}

.notif-count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border: 2px solid #ffffff;
    border-radius: 10px;
    background: #e0533d;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    line-height: 14px;
    text-align: center;
}

.notif-panel {
    position: absolute;
    top: 52px;
    right: 0;
    z-index: 3000;
    width: 340px;
    max-height: 420px;
    overflow-y: auto;
    border: 1px solid #e3e9f0;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16);
}

.notif-head {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #edf0f4;
    background: #ffffff;
}

.notif-head strong {
    color: #172033;
    font-size: 14px;
}

.notif-read-all {
    border: none;
    background: none;
    color: #1f4e78;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.notif-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    padding: 12px 16px;
    border: none;
    border-bottom: 1px solid #f1f4f8;
    background: #ffffff;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.notif-item:hover {
    background: #f5f8fb;
}

.notif-item.unread {
    background: #f1f7fd;
    box-shadow: inset 3px 0 0 #1f4e78;
}

.notif-item span {
    color: #172033;
    font-size: 12.5px;
    line-height: 1.45;
}

.notif-item small {
    color: #94a3b8;
    font-size: 11px;
}

.notif-empty {
    padding: 26px 16px;
    color: #94a3b8;
    font-size: 13px;
    text-align: center;
}

/* =========================================
   CONTRACTORS PAGE (same design as Clients)
========================================= */

#adminContractorsSection .inspectors-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 26px 28px;
    margin-bottom: 22px;
    background: #ffffff;
    border: 1px solid #e5eaf0;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(31, 78, 120, 0.05);
}

#adminContractorsSection .inspectors-page-header h1 {
    margin: 0 0 6px;
    color: #172033;
    font-size: 26px;
}

#adminContractorsSection .inspectors-page-header p {
    margin: 0;
    color: #7b8797;
    font-size: 13px;
}

#adminContractorsSection .inspectors-add-btn,
#adminContractorsSection .people-create-btn {
    height: 42px;
    padding: 0 18px;
    background: #1f4e78;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(31, 78, 120, 0.18);
    transition: 0.2s ease;
}

#adminContractorsSection .inspectors-add-btn:hover,
#adminContractorsSection .people-create-btn:hover {
    background: #173d60;
}

#adminContractorsSection .people-cancel-btn {
    height: 42px;
    padding: 0 18px;
    background: #ffffff;
    color: #475569;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

#adminContractorsSection .add-inspector-card {
    padding: 24px 26px;
    margin-bottom: 24px;
    background: #ffffff;
    border: 1px solid #e5eaf0;
    border-top: 4px solid #1f4e78;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(31, 78, 120, 0.07);
}

#adminContractorsSection .add-inspector-card-header h3 {
    margin: 0 0 4px;
    color: #172033;
    font-size: 18px;
}

#adminContractorsSection .add-inspector-card-header p {
    margin: 0 0 20px;
    color: #7b8797;
    font-size: 12px;
}

#adminContractorsSection .add-inspector-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

#adminContractorsSection .add-inspector-field label {
    display: block;
    margin-bottom: 7px;
    color: #344054;
    font-size: 12px;
    font-weight: 600;
}

#adminContractorsSection .add-inspector-field input {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    background: #fbfcfd;
    border: 1px solid #d8dee6;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    color: #1f2937;
    outline: none;
}

#adminContractorsSection .add-inspector-field input:focus {
    background: #ffffff;
    border-color: #1f4e78;
    box-shadow: 0 0 0 3px rgba(31, 78, 120, 0.09);
}

#adminContractorsSection .add-inspector-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #edf0f4;
}

#adminContractorsSection .inspectors-list-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

#adminContractorsSection .inspectors-list-heading h2 {
    margin: 0;
    color: #172033;
    font-size: 18px;
}

#adminContractorsSection #contractorsCount {
    padding: 5px 12px;
    background: #eaf2f8;
    color: #1f4e78;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}

#adminContractorsSection .inspectors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
}

#adminContractorsSection .inspector-card {
    padding: 20px;
    background: #ffffff;
    border: 1px solid #e5eaf0;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(31, 78, 120, 0.05);
    transition: 0.2s ease;
}

#adminContractorsSection .inspector-card:hover {
    transform: translateY(-2px);
    border-color: #cbd7e3;
    box-shadow: 0 10px 24px rgba(31, 78, 120, 0.10);
}

#adminContractorsSection .inspector-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
#adminContractorsSection .inspector-avatar {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fdf3e1;
    color: #a86b12;
    border-radius: 50%;
    font-size: 16px;
    font-weight: 800;
}

#adminContractorsSection .inspector-role-badge {
    padding: 5px 10px;
    background: #fdf3e1;
    color: #a86b12;
    border: 1px solid #f3d37a;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    text-transform: capitalize;
}

#adminContractorsSection .inspector-card h3 {
    margin: 0 0 4px;
    color: #172033;
    font-size: 16px;
}

#adminContractorsSection .inspector-email {
    margin: 0;
    color: #7b8797;
    font-size: 12px;
    overflow-wrap: anywhere;
}

#adminContractorsSection .inspector-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #edf0f4;
    color: #7b8797;
    font-size: 11px;
}

#adminContractorsSection .inspector-card-footer strong {
    color: #1f4e78;
    font-size: 15px;
}

#adminContractorsSection .inspectors-empty {
    grid-column: 1 / -1;
    padding: 30px;
    text-align: center;
    background: #ffffff;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    color: #7b8797;
    font-size: 13px;
}

/* Client Account dropdown in the project form */
#newContractorAccount {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    background: #ffffff;
    border: 1px solid #d7dee7;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    color: #1f2937;
    cursor: pointer;
    outline: none;
}

#newContractorAccount:focus {
    border-color: #174a6e;
    box-shadow: 0 0 0 3px rgba(23, 74, 110, 0.10);
}

@media (max-width: 800px) {
    #adminContractorsSection .inspectors-page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    #adminContractorsSection .add-inspector-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   CONTRACTOR VIEW: they can only mark snags as rectified
========================================= */

body.role-contractor #addProjectBtn,
body.role-contractor .edit-project-btn,
body.role-contractor .archive-project-btn,
body.role-contractor .restore-project-btn,
body.role-contractor .delete-project-btn,
body.role-contractor #uploadPlanBtn,
body.role-contractor #addSnagBtn,
body.role-contractor #movePinsBtn,
body.role-contractor #uploadPanoramaBtn,
body.role-contractor .edit-issue-btn,
body.role-contractor .status-btn,
body.role-contractor #emailReportBtn,
body.role-contractor #inspectorsNavBtn,
body.role-contractor #clientsNavBtn,
body.role-contractor #contractorsNavBtn,
body.role-contractor .inspection-side-item[data-section="checklistSection"],
body.role-contractor .inspection-side-item[data-section="progressSection"],
body.role-contractor .ov2-action[data-then="addSnag"],
body.role-contractor .ov2-action[data-go="checklistSection"] {
    display: none !important;
}

/* Pins are visible, but tapping them does nothing */
body.role-contractor .snag-marker {
    pointer-events: none;
    cursor: default;
}

/* =========================================
   SNAG STATUS BADGES (3 steps)
========================================= */

.snag-status-open {
    background: #fdecea !important;
    color: #c0392b !important;
}

.snag-status-rectified {
    background: #fff4e0 !important;
    color: #a86a00 !important;
}

.snag-status-verified {
    background: #e6f4ec !important;
    color: #2f7a57 !important;
}

/* Buttons in the snag details */
.rectify-btn,
.verify-btn {
    min-height: 42px;
    padding: 0 18px;
    border: none;
    border-radius: 10px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.rectify-btn {
    background: #e0a030;
    color: #ffffff;
}

.rectify-btn:hover {
    background: #c88a1d;
}

.verify-btn {
    background: #2f7a57;
    color: #ffffff;
}

.verify-btn:hover {
    background: #25634a;
}

.verify-btn:disabled {
    opacity: 0.6;
}

.rectify-note {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 10px;
    background: #f1f5f9;
    color: #475569;
    font-size: 12.5px;
    font-weight: 700;
}

.rectify-remarks {
    margin: 12px 0;
    padding: 12px 14px;
    border-left: 4px solid #e0a030;
    border-radius: 8px;
    background: #fff8ec;
}

.rectify-remarks strong {
    display: block;
    margin-bottom: 4px;
    color: #a86a00;
    font-size: 11px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.rectify-remarks p {
    margin: 0;
    color: #334155;
    font-size: 13px;
    line-height: 1.5;
}

/* Remarks popup */
.rectify-modal {
    position: fixed;
    inset: 0;
    z-index: 25000;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, 0.55);
}

.rectify-box {
    width: 100%;
    max-width: 460px;
    padding: 24px;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
}

.rectify-label {
    color: #a86a00;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.rectify-box h3 {
    margin: 6px 0 6px;
    color: #172033;
    font-size: 18px;
}

.rectify-help {
    margin: 0 0 12px;
    color: #64748b;
    font-size: 13px;
}

#rectifyRemarks {
    width: 100%;
    padding: 12px;
    border: 1px solid #d6dee8;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
    box-sizing: border-box;
}

#rectifyRemarks:focus {
    outline: none;
    border-color: #e0a030;
    box-shadow: 0 0 0 3px rgba(224, 160, 48, 0.15);
}

.rectify-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}

.rectify-cancel,
.rectify-submit {
    min-height: 44px;
    padding: 0 20px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.rectify-cancel {
    border: 1px solid #d6dee8;
    background: #ffffff;
    color: #475569;
}

.rectify-submit {
    border: none;
    background: #e0a030;
    color: #ffffff;
}

.rectify-submit:disabled {
    opacity: 0.6;
}

/* =========================================
   CLIENT / CONTRACTOR: snag pin popup
========================================= */

/* Pins can be tapped (they only open the details) */
body.role-client .snag-marker,
body.role-contractor .snag-marker {
    pointer-events: auto !important;
    cursor: pointer !important;
}

.pin-popup {
    position: fixed;
    inset: 0;
    z-index: 24000;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, 0.55);
}

/* Big photo view must sit above the popup */
#photoModal {
    z-index: 30000 !important;
}

.pin-popup-box {
    width: 100%;
    max-width: 560px;
    max-height: 88vh;
    overflow-y: auto;
    padding: 22px 24px 24px;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
}

.pin-popup-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #edf0f4;
}

.pin-popup-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #1f4e78;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.pin-popup-label::before {
    content: "";
    width: 16px;
    height: 3px;
    border-radius: 2px;
    background: #b42318;
}

.pin-popup-head h3 {
    margin: 6px 0 0;
    color: #172033;
    font-size: 18px;
}

.pin-popup-close {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: #f1f5f9;
    color: #475569;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.pin-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 12px;
}

.pin-badges .issue-status,
.pin-priority {
    padding: 5px 12px;
    border-radius: 14px;
    font-size: 11.5px;
    font-weight: 800;
}

.pin-priority { background: #eef3f8; color: #475569; }
.pin-priority-critical { background: #9b1c1c; color: #ffffff; }
.pin-priority-high     { background: #fdecea; color: #c0392b; }
.pin-priority-medium   { background: #fff4e0; color: #a86a00; }
.pin-priority-low      { background: #e6f4ec; color: #2f7a57; }

.pin-rows {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.pin-row {
    padding: 10px 12px;
    border-radius: 10px;
    background: #f6f8fb;
}

.pin-row span,
.pin-block span {
    display: block;
    margin-bottom: 3px;
    color: #7b8797;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.pin-row strong {
    color: #172033;
    font-size: 13px;
}

.pin-block {
    margin-bottom: 10px;
    padding: 12px 14px;
    border-left: 4px solid #123f68;
    border-radius: 8px;
    background: #f6f8fb;
}

.pin-block p {
    margin: 0;
    color: #334155;
    font-size: 13px;
    line-height: 1.55;
}

.pin-block-rectified {
    border-left-color: #e0a030;
    background: #fff8ec;
}

.pin-photos-title {
    margin: 14px 0 8px;
    color: #123f68;
    font-size: 13px;
    font-weight: 800;
}

.pin-photos-title b {
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 10px;
    background: #eaf2f8;
    font-size: 11px;
}

.pin-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}

.pin-photos img {
    width: 100%;
    height: 130px;
    object-fit: cover;
    border-radius: 10px;
    cursor: zoom-in;
}

.pin-no-photos {
    margin: 0;
    color: #94a3b8;
    font-size: 13px;
}

/* =========================================
   VERIFY & CLOSE popup with "after" photos
========================================= */

.verify-modal {
    position: fixed;
    inset: 0;
    z-index: 25000;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, 0.55);
}

.verify-box {
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 24px;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
}

.verify-label {
    color: #2f7a57;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.verify-box h3 {
    margin: 6px 0 14px;
    color: #172033;
    font-size: 18px;
}

.verify-remarks {
    margin-bottom: 16px;
    padding: 12px 14px;
    border-left: 4px solid #e0a030;
    border-radius: 8px;
    background: #fff8ec;
}

.verify-remarks span {
    display: block;
    margin-bottom: 4px;
    color: #a86a00;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.verify-remarks p {
    margin: 0;
    color: #334155;
    font-size: 13px;
    line-height: 1.5;
}

.verify-photos-title {
    margin-bottom: 8px;
    color: #123f68;
    font-size: 13px;
    font-weight: 800;
}

.verify-photos-title small {
    color: #94a3b8;
    font-weight: 600;
}

.verify-photo-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.verify-photo-actions button {
    flex: 1;
    min-height: 42px;
    padding: 0 14px;
    border: 1px dashed #9fb4c8;
    border-radius: 10px;
    background: #f6f9fc;
    color: #123f68;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.verify-photo-actions button:hover {
    background: #eaf2f8;
}

.verify-photo-preview {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 10px;
}

.verify-photo-preview:empty {
    display: none;
}

.verify-thumb {
    position: relative;
}

.verify-thumb img {
    display: block;
    width: 100%;
    height: 90px;
    object-fit: cover;
    border-radius: 8px;
}

.verify-thumb button {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.75);
    color: #ffffff;
    font-size: 15px;
    line-height: 24px;
    cursor: pointer;
}

.verify-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.verify-cancel,
.verify-submit {
    min-height: 42px;
    padding: 0 18px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.verify-cancel {
    border: 1px solid #d5dde6;
    background: #ffffff;
    color: #475569;
}

.verify-submit {
    border: none;
    background: #2f7a57;
    color: #ffffff;
}

.verify-submit:hover {
    background: #25634a;
}

.verify-submit:disabled {
    opacity: 0.6;
}

/* "After rectification" photos on snag cards and in the pin popup */
.after-photos-box,
.pin-after-box {
    margin: 12px 0;
    padding: 12px 14px;
    border-left: 4px solid #2f7a57;
    border-radius: 8px;
    background: #eef8f2;
}

.after-photos-box > span,
.pin-after-box > span {
    display: block;
    margin-bottom: 8px;
    color: #2f7a57;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.after-photos-box > span b,
.pin-after-box > span b {
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 10px;
    background: #d4eedf;
}

.after-photos-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.after-photos-grid img {
    width: 110px;
    height: 85px;
    object-fit: cover;
    border-radius: 8px;
    cursor: zoom-in;
}

/* =========================================
   REPORT: rectification block on snag pages
========================================= */

.snag-rectify-block {
    margin-top: 4mm;
    padding: 4mm;
    border: 1px solid #cfe6d9;
    border-left: 4px solid #2f7a57;
    border-radius: 8px;
    background: #f3faf6;
}

.snag-rectify-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3mm;
}

.snag-rectify-head strong {
    color: #1f4e78;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.3px;
}

.rect-badge {
    padding: 1.2mm 3mm;
    border-radius: 20px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.rect-verified {
    background: #dff2e7;
    color: #2f7a57;
    border: 1px solid #bfe3cf;
}

.rect-rectified {
    background: #fff4e0;
    color: #a86a00;
    border: 1px solid #f3d89a;
}

.rect-dates {
    margin-top: 1.5mm;
    color: #64748b;
    font-size: 9.5px;
    font-weight: 700;
}

.rect-remarks {
    margin-top: 2.5mm;
    padding: 2.5mm 3mm;
    border-radius: 6px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
}

.rect-remarks span {
    display: block;
    color: #a86a00;
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 0.6px;
}

.rect-remarks p {
    margin: 1mm 0 0;
    color: #334155;
    font-size: 11px;
    line-height: 1.5;
}

/* Photos a little smaller when before + after share one page */
#professionalReportPages .report-snag-page.has-rectify .report-snag-photo img,
body.pdf-exporting .report-snag-page.has-rectify .report-snag-photo img {
    height: 40mm !important;
    max-height: 40mm !important;
}

#professionalReportPages .report-snag-page .rect-photos,
body.pdf-exporting .report-snag-page .rect-photos {
    padding-top: 3mm !important;
}

/* Contractors: no reports (they only work on Issues) */
body.role-contractor #reportsNavBtn,
body.role-contractor #dashboardReportsSection,
body.role-contractor .inspection-side-item[data-section="reportsSection"],
body.role-contractor #reportsSection,
body.role-contractor .ov2-action[data-go="reportsSection"] {
    display: none !important;
}

/* Client cards: linked project names */
.linked-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.linked-chip {
    padding: 4px 10px;
    border-radius: 20px;
    background: #eaf2f8;
    color: #1f4e78;
    font-size: 11.5px;
    font-weight: 700;
}

/* Linked project chips: on their own line under "Linked projects 2" */
.inspector-card-footer {
    flex-wrap: wrap;
}

.inspector-card-footer .linked-list,
.inspector-card .linked-list {
    flex-basis: 100%;
    width: 100%;
    margin-top: 10px;
}

/* =========================================
   RESET PASSWORD (admin)
========================================= */

.person-reset-btn {
    width: 100%;
    min-height: 38px;
    margin-top: 12px;
    border: 1px solid #c9d8e6;
    border-radius: 10px;
    background: #f5f9fc;
    color: #1f4e78;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.person-reset-btn:hover {
    background: #eaf2f8;
}

.person-reset-btn + .person-remove-btn {
    margin-top: 8px;
}

.reset-modal {
    position: fixed;
    inset: 0;
    z-index: 25000;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, 0.55);
}

.reset-box {
    width: 100%;
    max-width: 440px;
    padding: 24px;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
}

.reset-label {
    color: #1f4e78;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.reset-box h3 {
    margin: 6px 0 4px;
    color: #172033;
    font-size: 18px;
}

.reset-help {
    margin: 0 0 16px;
    color: #64748b;
    font-size: 13px;
}

.reset-box label {
    display: block;
    margin-bottom: 6px;
    color: #334155;
    font-size: 12.5px;
    font-weight: 700;
}

.reset-input-row {
    display: flex;
    gap: 8px;
}

.reset-input-row input {
    flex: 1;
    min-width: 0;
    height: 42px;
    padding: 0 12px;
    border: 1px solid #d5dde6;
    border-radius: 10px;
    font-family: Consolas, "Courier New", monospace;
    font-size: 14px;
}

.reset-input-row button {
    height: 42px;
    padding: 0 14px;
    border: 1px dashed #9fb4c8;
    border-radius: 10px;
    background: #f6f9fc;
    color: #123f68;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.reset-box .reset-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 0;
    font-weight: 600;
    cursor: pointer;
}

.reset-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
}

.reset-cancel,
.reset-save {
    min-height: 42px;
    padding: 0 18px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.reset-cancel {
    border: 1px solid #d5dde6;
    background: #ffffff;
    color: #475569;
}

.reset-save {
    border: none;
    background: #123f68;
    color: #ffffff;
}

.reset-save:disabled {
    opacity: 0.6;
}

/* Export Excel button on the Issues page */
.export-excel-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 42px;
    padding: 0 16px;
    border: 1px solid #b9dcc8;
    border-radius: 10px;
    background: #eef8f2;
    color: #1f6b47;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.export-excel-btn:hover {
    background: #dff2e7;
}

/* Clients don't need it */
body.role-client .export-excel-btn {
    display: none !important;
}

/* =========================================
   DEFECT SUGGESTIONS while typing
========================================= */

.defect-suggest {
    margin-top: 6px;
    padding: 6px;
    border: 1px solid #d5dde6;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.12);
    max-height: 280px;
    overflow-y: auto;
}

.defect-suggest-item {
    display: block;
    width: 100%;
    padding: 9px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #172033;
    font-family: inherit;
    font-size: 13.5px;
    text-align: left;
    cursor: pointer;
}

.defect-suggest-item span {
    display: inline-block;
    margin-right: 8px;
    padding: 2px 8px;
    border-radius: 10px;
    background: #eaf2f8;
    color: #1f4e78;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.3px;
    vertical-align: 1px;
}

.defect-suggest-item:hover,
.defect-suggest-item.active {
    background: #f1f6fb;
}

/* =========================================
   CONTRACTORS PAGE: Send reminders
========================================= */

.contractor-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.send-reminders-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid #c9d8e6;
    border-radius: 12px;
    background: #ffffff;
    color: #1f4e78;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
}

.send-reminders-btn:hover {
    background: #f5f9fc;
}

.send-reminders-btn:disabled {
    opacity: 0.6;
}

.remind-modal {
    position: fixed;
    inset: 0;
    z-index: 25000;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, 0.55);
}

.remind-box {
    width: 100%;
    max-width: 420px;
    padding: 30px 28px 24px;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
    text-align: center;
}

.remind-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin: 0 auto 14px;
    border-radius: 50%;
}

.remind-icon-blue { background: #eaf2f8; color: #1f4e78; }
.remind-icon-green { background: #e6f4ec; color: #2f7a57; }
.remind-icon-red { background: #fdecea; color: #b42318; }

.remind-box h3 {
    margin: 0 0 8px;
    color: #172033;
    font-size: 19px;
}

.remind-box p {
    margin: 0 0 6px;
    color: #475569;
    font-size: 13.5px;
    line-height: 1.55;
}

.remind-box .remind-note {
    color: #94a3b8;
    font-size: 12px;
}

.remind-rows {
    margin-top: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    text-align: left;
}

.remind-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid #eef2f6;
    font-size: 13px;
    color: #475569;
}

.remind-row:last-child { border-bottom: none; }
.remind-row.ok strong { color: #2f7a57; }
.remind-row.bad strong { color: #b42318; }
.remind-row.muted strong { color: #64748b; }

.remind-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.remind-cancel,
.remind-send {
    min-width: 110px;
    min-height: 42px;
    padding: 0 18px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
}

.remind-cancel {
    border: 1px solid #d5dde6;
    background: #ffffff;
    color: #475569;
}

.remind-send {
    border: none;
    background: #123f68;
    color: #ffffff;
}

.remind-spinner {
    width: 44px;
    height: 44px;
    margin: 4px auto 16px;
    border: 4px solid #eaf2f8;
    border-top-color: #1f4e78;
    border-radius: 50%;
    animation: remind-spin 0.9s linear infinite;
}

@keyframes remind-spin {
    to { transform: rotate(360deg); }
}

/* =========================================
   CONTRACTOR PERFORMANCE
========================================= */

.perf-card {
    margin: 0 0 26px;
    padding: 22px 24px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #ffffff;
}

.perf-head h2 {
    margin: 0;
    color: #172033;
    font-size: 18px;
}

.perf-head p {
    margin: 4px 0 14px;
    color: #64748b;
    font-size: 13px;
}

.perf-table-wrap {
    overflow-x: auto;
}

.perf-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.perf-table th {
    padding: 10px 12px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #64748b;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

.perf-table th:first-child,
.perf-table td:first-child {
    text-align: left;
}

.perf-table td {
    padding: 12px;
    border-bottom: 1px solid #eef2f6;
    color: #334155;
    text-align: center;
    vertical-align: middle;
}

.perf-table td:first-child {
    min-width: 190px;
}

.perf-table td strong {
    display: block;
    color: #172033;
    font-size: 13.5px;
}

.perf-table td span:not(.perf-pill) {
    display: block;
    color: #64748b;
    font-size: 12px;
}

.perf-table td small {
    color: #64748b;
    font-size: 11px;
}

.perf-bar {
    height: 6px;
    margin: 8px 0 3px;
    border-radius: 6px;
    background: #eef2f6;
    overflow: hidden;
}

.perf-bar i {
    display: block;
    height: 100%;
    border-radius: 6px;
    background: #2f7a57;
}

.perf-open { color: #c0392b; }
.perf-good { color: #2f7a57; }
.perf-bad { color: #b42318; }

.perf-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    background: #f1f5f9;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.perf-pill.perf-good { background: #e6f4ec; color: #2f7a57; }
.perf-pill.perf-mid { background: #fff4e0; color: #a86a00; }
.perf-pill.perf-bad { background: #fdecea; color: #b42318; }

.perf-note {
    margin: 12px 0 0;
    color: #94a3b8;
    font-size: 11.5px;
    line-height: 1.5;
}

.perf-empty {
    padding: 18px;
    border-radius: 10px;
    background: #f8fafc;
    color: #64748b;
    font-size: 13px;
    text-align: center;
}


/* =========================================
   NICE DATE PICKER
========================================= */

.dp-wrap {
    position: relative;
}

.dp-hidden-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.dp-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #ffffff;
    color: #172033;
    font-family: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.dp-field:hover,
.dp-field.dp-open {
    border-color: #1f4e78;
}

.dp-field.dp-open {
    box-shadow: 0 0 0 3px rgba(31, 78, 120, 0.1);
}

.dp-field.dp-empty .dp-text {
    color: #94a3b8;
}

.dp-icon {
    flex: 0 0 auto;
    color: #1f4e78;
}

.dp-pop {
    position: fixed;
    z-index: 30000;
    width: 290px;
    padding: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18);
}

.dp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.dp-head strong {
    color: #123f68;
    font-size: 14.5px;
}

.dp-nav {
    width: 32px;
    height: 32px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    color: #123f68;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.dp-nav:hover {
    background: #eaf2f8;
}

.dp-week,
.dp-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    text-align: center;
}

.dp-week span {
    padding: 4px 0;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.4px;
}

.dp-day {
    height: 34px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #1f2937;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}

.dp-day:hover {
    background: #eaf2f8;
}

.dp-day.dp-weekend {
    color: #64748b;
}

.dp-day.dp-today {
    color: #1f4e78;
    font-weight: 800;
    box-shadow: inset 0 0 0 1.5px #9fb4c8;
}

.dp-day.dp-selected,
.dp-day.dp-selected:hover {
    background: #123f68;
    color: #ffffff;
    font-weight: 800;
    box-shadow: none;
}

.dp-foot {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #eef2f6;
}

.dp-link,
.dp-today-btn {
    padding: 6px 12px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}

.dp-link {
    border: none;
    background: transparent;
    color: #64748b;
}

.dp-today-btn {
    border: 1px solid #c9d8e6;
    background: #f5f9fc;
    color: #1f4e78;
}

/* =========================================
   REPORT ON TABLETS (portrait): no sidebar gap, pages centred
========================================= */

@media (max-width: 1100px) {
    #inspectionPage:has(#reportsSection[style*="display: block"]) .inspection-main {
        margin-left: 0 !important;
        width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* Never shrink the pages while the PDF is being made */
body.pdf-exporting #professionalReportPages {
    zoom: 1 !important;
}


/* =========================
   SHOW / HIDE PASSWORD (eye button)
   ========================= */

.pw-wrap {
    position: relative;
    display: block;
    width: 100%;
}

.pw-wrap input {
    width: 100%;
    padding-right: 44px !important;
    box-sizing: border-box;
}

.pw-eye {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    box-shadow: none;
}

.pw-eye:hover {
    color: #1e3a5f;
    background: rgba(30, 58, 95, 0.08);
}

/* Hide the browser's own eye icon (Edge) so there aren't two */
input::-ms-reveal,
input::-ms-clear {
    display: none;
}


/* =========================
   NICE DROPDOWN LISTS
   ========================= */

.cs-pop {
    position: fixed;
    z-index: 100000;
    max-height: 280px;
    max-width: 360px;
    overflow-y: auto;
    padding: 6px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16), 0 2px 6px rgba(15, 23, 42, 0.06);
    font-family: inherit;
    font-size: 14px;
    animation: csFade 0.12s ease-out;
}

@keyframes csFade {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.cs-item {
    position: relative;
    padding: 9px 34px 9px 12px;
    border-radius: 8px;
    color: #1e293b;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cs-item.cs-active {
    background: #eef3f9;
}

.cs-item.cs-selected {
    color: #1e3a5f;
    font-weight: 600;
}

/* Tick next to the chosen one */
.cs-item.cs-selected::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    width: 5px;
    height: 10px;
    margin-top: -7px;
    border: solid #1e3a5f;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.cs-item.cs-disabled {
    color: #94a3b8;
    cursor: default;
}

select.cs-open {
    border-color: #1e3a5f !important;
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.12) !important;
}