/**
 * ==========================================================
 * SaatPro Workspace
 * Module : Project Health Checker
 * File   : project-health-checker.css
 *
 * Purpose:
 * Professional responsive styling for the Project Health
 * Checker application.
 *
 * Author : SaatPro
 * Version: 1.1.0
 * Date   : 27 August 2026
 * ==========================================================
 */


/* ==========================================================
   MAIN CONTAINER
========================================================== */

.project-health-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 30px 20px;
    box-sizing: border-box;
}


/* ==========================================================
   HEADER
========================================================== */

.project-health-container .spw-header {
    margin-bottom: 30px;
}

.project-health-container .spw-header h1 {
    margin: 0 0 8px;
    font-size: 32px;
    line-height: 1.25;
    font-weight: 700;
}

.project-health-container .spw-header p {
    margin: 8px 0;
    line-height: 1.7;
}


/* ==========================================================
   HEADINGS
========================================================== */

.project-health-container h2 {
    margin: 0 0 18px;
    font-size: 24px;
    line-height: 1.3;
    font-weight: 700;
}

.project-health-container h3 {
    margin: 0 0 12px;
    font-size: 18px;
}


/* ==========================================================
   AI SECTION
========================================================== */

.project-health-ai-section {
    margin-bottom: 30px;
    padding: 28px;
    border: 1px solid #dfe5ec;
    border-radius: 14px;
    background: linear-gradient(
        135deg,
        #f8fbff 0%,
        #ffffff 100%
    );
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.project-health-ai-section h2 {
    margin-bottom: 10px;
}

.project-health-ai-section p {
    margin: 0 0 18px;
    line-height: 1.7;
}

.project-health-ai-section textarea {
    width: 100%;
    min-height: 180px;
    padding: 15px 16px;
    border: 1px solid #cfd7e2;
    border-radius: 9px;
    background: #ffffff;
    resize: vertical;
    box-sizing: border-box;
    font-size: 15px;
    line-height: 1.6;
}

.project-health-ai-section textarea:focus {
    outline: none;
    border-color: #4f7cff;
    box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.12);
}


/* ==========================================================
   AI STATUS
========================================================== */

.spw-ai-status {
    margin-top: 15px;
    min-height: 22px;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 600;
}


/* ==========================================================
   PROJECT INFORMATION
========================================================== */

.project-health-project-information {
    margin-bottom: 30px;
    padding: 28px;
    border: 1px solid #dfe5ec;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}


/* ==========================================================
   FORM FIELDS
========================================================== */

.project-health-container .spw-field {
    margin-bottom: 20px;
}

.project-health-container .spw-field:last-child {
    margin-bottom: 0;
}

.project-health-container .spw-field label {
    display: block;
    margin-bottom: 7px;
    font-weight: 600;
    font-size: 14px;
}

.project-health-container .spw-required {
    margin-left: 3px;
}

.project-health-container input[type="text"],
.project-health-container input[type="date"],
.project-health-container textarea,
.project-health-container select {
    width: 100%;
    max-width: 100%;
    padding: 12px 14px;
    border: 1px solid #cfd7e2;
    border-radius: 8px;
    background: #ffffff;
    box-sizing: border-box;
    font-size: 15px;
    line-height: 1.5;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.project-health-container input[type="text"]:focus,
.project-health-container input[type="date"]:focus,
.project-health-container textarea:focus,
.project-health-container select:focus {
    outline: none;
    border-color: #4f7cff;
    box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.12);
}

.project-health-container textarea {
    min-height: 110px;
    resize: vertical;
}


/* ==========================================================
   DATE ROW
========================================================== */

.project-health-date-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}


/* ==========================================================
   BUTTONS
========================================================== */

.project-health-container .spw-button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

.project-health-container .spw-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 18px;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    transition:
        transform 0.15s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease;
}

.project-health-container .spw-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.project-health-container .spw-button:active {
    transform: translateY(0);
}

.project-health-container .spw-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.project-health-container .spw-button-secondary {
    background: #f1f3f6;
}


/* ==========================================================
   RESULTS
========================================================== */

.project-health-results {
    margin-top: 30px;
}


/* ==========================================================
   OVERALL HEALTH
========================================================== */

.project-health-overall-section {
    margin-bottom: 30px;
    text-align: center;
}

.project-health-score-card {
    max-width: 420px;
    margin: 0 auto;
    padding: 30px 25px;
    border: 1px solid #dfe5ec;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

.project-health-score {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 130px;
    height: 130px;
    margin: 0 auto 18px;
    border-radius: 50%;
    border: 8px solid #e7ebf0;
    font-size: 38px;
    font-weight: 800;
    line-height: 1;
    box-sizing: border-box;
}

.project-health-status {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 21px;
    font-weight: 700;
}

.project-health-score-card p {
    margin: 0;
    font-size: 14px;
}


/* ==========================================================
   HEALTH STATUS
========================================================== */

.project-health-score.healthy {
    border-color: #2e9d62;
}

.project-health-score.attention {
    border-color: #e0a329;
}

.project-health-score.critical {
    border-color: #d94b4b;
}

.project-health-score.not-assessed {
    border-color: #b9c1cb;
}

.project-health-status.healthy {
    color: #2e9d62;
}

.project-health-status.attention {
    color: #c58a16;
}

.project-health-status.critical {
    color: #d94b4b;
}

.project-health-status.not-assessed {
    color: #6c757d;
}


/* ==========================================================
   KPI DASHBOARD
========================================================== */

.project-health-dashboard {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 30px;
}

.project-health-kpi {
    min-height: 125px;
    padding: 22px;
    border: 1px solid #dfe5ec;
    border-radius: 12px;
    background: #ffffff;
    box-sizing: border-box;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.04);
    text-align: center;
}

.project-health-kpi-label {
    display: block;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 600;
}

.project-health-kpi strong {
    display: block;
    font-size: 32px;
    line-height: 1;
}


/* ==========================================================
   COMMON RESULT SECTIONS
========================================================== */

.project-health-assessment-section,
.project-health-findings-section,
.project-health-recommendations-section,
.project-health-summary-section,
.project-health-export-section {
    margin-bottom: 30px;
    padding: 28px;
    border: 1px solid #dfe5ec;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}


/* ==========================================================
   FINDINGS
========================================================== */

.project-health-findings-section {
    position: relative;
}

.project-health-findings-section .spw-field {
    margin-bottom: 20px;
}

.project-health-findings-section .spw-field:last-child {
    margin-bottom: 0;
}


/* Concerns */

.project-health-concerns {
    padding: 18px 20px;
    border-left: 5px solid #e0a329;
    border-radius: 8px;
    background: #fff8e6;
}

.project-health-concerns h3 {
    color: #9a6b0c;
}


/* Critical Findings */

.project-health-critical-findings {
    margin-top: 20px;
    padding: 18px 20px;
    border-left: 5px solid #d94b4b;
    border-radius: 8px;
    background: #fff0f0;
}

.project-health-critical-findings h3 {
    color: #b43737;
}


/* Strengths */

.project-health-strengths {
    margin-bottom: 20px;
    padding: 18px 20px;
    border-left: 5px solid #2e9d62;
    border-radius: 8px;
    background: #edf9f2;
}

.project-health-strengths h3 {
    color: #247b4d;
}


/* ==========================================================
   ASSESSMENT TABLE
========================================================== */

.project-health-table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #e0e5eb;
    border-radius: 10px;
}

.project-health-assessment-table {
    width: 100%;
    min-width: 1100px;
    border-collapse: collapse;
    background: #ffffff;
}

.project-health-assessment-table th,
.project-health-assessment-table td {
    padding: 13px 12px;
    border-bottom: 1px solid #e4e8ed;
    vertical-align: top;
    text-align: left;
    font-size: 14px;
    line-height: 1.5;
}

.project-health-assessment-table th {
    font-weight: 700;
    white-space: nowrap;
}

.project-health-assessment-table tr:last-child td {
    border-bottom: 0;
}

.project-health-assessment-table textarea {
    min-width: 180px;
    min-height: 80px;
    margin: 0;
    resize: vertical;
}


/* ==========================================================
   RATING / STATUS COLUMN FIX
========================================================== */

.health-rating-select {
    min-width: 165px !important;
    width: 165px !important;
    font-size: 13px !important;
    padding: 9px 10px !important;
}

.project-health-assessment-table td:nth-child(3) {
    min-width: 175px;
}

.project-health-assessment-table td:nth-child(4) {
    min-width: 155px;
}


/* ==========================================================
   STATUS BADGES
========================================================== */

.project-health-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 140px;
    max-width: 100%;
    padding: 7px 10px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;

    text-align: center;
    white-space: normal;
    overflow-wrap: break-word;
    box-sizing: border-box;
}

.project-health-status-badge.healthy {
    background: #e8f6ee;
    color: #247b4d;
}

.project-health-status-badge.attention {
    background: #fff4d8;
    color: #9b6b0c;
}

.project-health-status-badge.critical {
    background: #fde9e9;
    color: #b43737;
}

.project-health-status-badge.not-assessed {
    background: #eef1f4;
    color: #65707b;
}


/* ==========================================================
   RECOMMENDATIONS
========================================================== */

.project-health-action-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.project-health-action-item {
    display: flex;
    gap: 15px;
    padding: 17px;

    border: 1px solid #e1e6eb;
    border-left-width: 5px;

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

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

.project-health-action-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}


/* ==========================================================
   RECOMMENDATION CATEGORY COLORS
========================================================== */

/* Scope */
.project-health-action-item.scope {
    border-left-color: #4f7cff;
    background: #f5f8ff;
}

/* Schedule */
.project-health-action-item.schedule {
    border-left-color: #e0a329;
    background: #fffaf0;
}

/* Budget */
.project-health-action-item.budget {
    border-left-color: #2e9d62;
    background: #f3fbf6;
}

/* Resources */
.project-health-action-item.resources {
    border-left-color: #8b5cf6;
    background: #f8f5ff;
}

/* Risk */
.project-health-action-item.risk {
    border-left-color: #d94b4b;
    background: #fff5f5;
}

/* Issues */
.project-health-action-item.issues {
    border-left-color: #c24141;
    background: #fff3f3;
}

/* Quality */
.project-health-action-item.quality {
    border-left-color: #159a9c;
    background: #f1fbfb;
}

/* Stakeholders */
.project-health-action-item.stakeholder-engagement {
    border-left-color: #6366f1;
    background: #f5f5ff;
}

/* Communication */
.project-health-action-item.communication {
    border-left-color: #0891b2;
    background: #f1fbfd;
}

/* Governance */
.project-health-action-item.governance {
    border-left-color: #7c3aed;
    background: #f7f3ff;
}

/* Dependencies */
.project-health-action-item.dependencies {
    border-left-color: #d97706;
    background: #fff8ed;
}

/* Delivery */
.project-health-action-item.delivery-readiness {
    border-left-color: #16a34a;
    background: #f1fbf4;
}


/* ==========================================================
   ACTION CONTENT
========================================================== */

.project-health-action-number {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 34px;

    width: 34px;
    height: 34px;

    border-radius: 50%;

    background: #eef1f5;

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

.project-health-action-content {
    flex: 1;
    min-width: 0;
}

.project-health-action-content strong {
    display: block;
    margin-bottom: 3px;
    font-size: 15px;
}

.project-health-action-content span {
    display: inline-block;
    margin-bottom: 7px;
    font-size: 12px;
    font-weight: 700;
}

.project-health-action-content p {
    margin: 0;
    line-height: 1.6;
    font-size: 14px;
}


/* ==========================================================
   EXECUTIVE SUMMARY
========================================================== */

.project-health-summary-section textarea {
    width: 100%;
    min-height: 160px;
}


/* ==========================================================
   EXPORT
========================================================== */

.project-health-export-section p {
    margin: 0;
    line-height: 1.6;
}

.project-health-export-section .spw-button-group {
    margin-top: 20px;
}


/* ==========================================================
   RESET
========================================================== */

.project-health-container .spw-reset-section {
    margin: 25px 0 30px;
    text-align: center;
}


/* ==========================================================
   CUSTOMIZATION REQUEST
========================================================== */

.project-health-customization-section {
    margin-top: 30px;
    padding: 24px;
    border: 1px solid #dfe5ec;
    border-radius: 14px;
    background: #f8fafc;
    text-align: center;
}

.project-health-customization-section h3 {
    margin-bottom: 8px;
}

.project-health-customization-section p {
    margin: 0 0 15px;
    line-height: 1.6;
}

.project-health-customization-section button {
    cursor: pointer;
}


/* ==========================================================
   MOBILE — TABLET
========================================================== */

@media (max-width: 1024px) {

    .project-health-dashboard {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .project-health-container {
        padding: 25px 16px;
    }

}


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

@media (max-width: 767px) {

    .project-health-container {
        padding: 20px 12px;
    }

    .project-health-container .spw-header h1 {
        font-size: 26px;
    }

    .project-health-container h2 {
        font-size: 21px;
    }

    .project-health-ai-section,
    .project-health-project-information,
    .project-health-assessment-section,
    .project-health-findings-section,
    .project-health-recommendations-section,
    .project-health-summary-section,
    .project-health-export-section {
        padding: 20px 16px;
        border-radius: 11px;
    }

    .project-health-date-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .project-health-dashboard {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .project-health-score {
        width: 110px;
        height: 110px;
        font-size: 32px;
    }

    .project-health-status {
        font-size: 18px;
    }

    .project-health-container .spw-button-group {
        flex-direction: column;
    }

    .project-health-container .spw-button {
        width: 100%;
    }

    .project-health-action-item {
        padding: 14px;
    }

}


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

@media (max-width: 480px) {

    .project-health-container {
        padding: 15px 10px;
    }

    .project-health-container .spw-header h1 {
        font-size: 23px;
    }

    .project-health-ai-section,
    .project-health-project-information,
    .project-health-assessment-section,
    .project-health-findings-section,
    .project-health-recommendations-section,
    .project-health-summary-section,
    .project-health-export-section {
        padding: 16px 13px;
    }

    .project-health-score-card {
        padding: 22px 15px;
    }

    .project-health-kpi {
        min-height: 105px;
        padding: 18px;
    }

    .project-health-kpi strong {
        font-size: 28px;
    }

    .project-health-action-item {
        gap: 10px;
    }

    .project-health-action-number {
        flex-basis: 30px;
        width: 30px;
        height: 30px;
    }

}


/* ==========================================================
   PRINT
========================================================== */

@media print {

    .project-health-container {
        max-width: none;
        padding: 0;
    }

    .project-health-ai-section,
    .project-health-customization-section,
    .project-health-container .spw-reset-section,
    .project-health-export-section {
        display: none !important;
    }

    .project-health-project-information,
    .project-health-assessment-section,
    .project-health-findings-section,
    .project-health-recommendations-section,
    .project-health-summary-section {
        box-shadow: none;
        break-inside: avoid;
    }

    .project-health-table-wrapper {
        overflow: visible;
    }

    .project-health-assessment-table {
        min-width: 0;
    }

}