:root {

        --primary: #2c3e50;

        --secondary: #3498db;

        --success: #2ecc71;

        --warning: #f39c12;

        --danger: #e74c3c;

        --light: #ecf0f1;

        --dark: #34495e;

        --gray: #95a5a6;

        --purple: #9b59b6;

    }



    * {

        margin: 0;

        padding: 0;

        box-sizing: border-box;

        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    }



    body {

        background-color: #f5f7fa;

        color: #333;

        line-height: 1.6;

        padding: 20px;

    }



    .container {

        max-width: 1400px;

        margin: 0 auto;

        background: white;

        border-radius: 15px;

        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);

        overflow: hidden;

    }



    header {

        background: linear-gradient(135deg, var(--primary), var(--secondary));

        color: white;

        padding: 20px;

        display: flex;

        justify-content: space-between;

        align-items: center;

        flex-wrap: wrap;

        gap: 15px;

    }



    .app-title {

        display: flex;

        align-items: center;

        gap: 15px;

    }



    .app-title h1 {

        font-size: 28px;

        font-weight: 600;

    }



    .app-title i {

        font-size: 32px;

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

        padding: 12px;

        border-radius: 50%;

    }



    .program-badge {

        background: linear-gradient(135deg, #9b59b6, #8e44ad);

        padding: 8px 15px;

        border-radius: 20px;

        font-size: 14px;

        display: flex;

        align-items: center;

        gap: 8px;

    }



    .project-controls {

        display: flex;

        gap: 10px;

        flex-wrap: wrap;

    }



    .btn {

        padding: 10px 20px;

        border: none;

        border-radius: 5px;

        cursor: pointer;

        font-weight: 600;

        display: flex;

        align-items: center;

        gap: 8px;

        transition: all 0.3s ease;

    }

    .btn-danger {
        background: var(--danger);
        color: #fff;
    }


    .btn-primary {

        background: var(--secondary);

        color: white;

    }



    .btn-success {

        background: var(--success);

        color: white;

    }



    .btn-warning {

        background: var(--warning);

        color: white;

    }



    .btn-purple {

        background: var(--purple);

        color: white;

    }



    .btn:hover {

        transform: translateY(-2px);

        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

        opacity: 0.9;

    }



    .tabs {

        display: flex;

        background: #e3f2fd;

        border-bottom: 1px solid #ddd;

        overflow-x: auto;

    }



    .tab {

        padding: 15px 25px;

        cursor: pointer;

        font-weight: 600;

        color: var(--dark);

        transition: all 0.3s;

        border-bottom: 3px solid transparent;

        white-space: nowrap;

    }



    .tab.active {

        border-bottom: 3px solid var(--secondary);

        background: white;

        color: var(--secondary);

    }



    .tab-content {

        display: none;

        padding: 20px;

    }



    .tab-content.active {

        display: block;

    }



    .section-title {

        font-size: 20px;

        font-weight: 600;

        margin-bottom: 20px;

        color: var(--primary);

        display: flex;

        align-items: center;

        gap: 10px;

        padding-bottom: 10px;

        border-bottom: 2px solid var(--light);

    }



    /* Hierarchy Navigation */

    .hierarchy-nav {

        display: flex;

        align-items: center;

        gap: 10px;

        margin-bottom: 20px;

        padding: 10px 15px;

        background: #f8f9fa;

        border-radius: 8px;

        font-size: 14px;

    }



    .hierarchy-nav span {

        color: var(--secondary);

        font-weight: 600;

        cursor: pointer;

    }



    .hierarchy-nav i {

        color: var(--gray);

    }

    .pillars-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
        gap: 25px;
        margin-top: 20px;
    }

    .pillar-card {
        background: white;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        border-left: 6px solid var(--secondary);
    }

    .pillar-header {
        background: #f8f9fa;
        color: var(--primary);
        padding: 20px;
        border-bottom: 1px solid #eee;
    }

    .pillar-header h3 {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 8px;
    }

    .pillar-description {
        font-size: 14px;
        color: var(--gray);
        margin-top: 8px;
        line-height: 1.5;
    }

    .pillar-body {
        padding: 20px;
    }

    .kpi-section,
    .projects-section {
        margin-bottom: 20px;
    }

    .kpi-section h4,
    .projects-section h4 {
        font-size: 16px;
        color: var(--primary);
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .kpi-list,
    .project-list {
        list-style: none;
        padding-left: 20px;
    }

    .kpi-list li,
    .project-list li {
        margin-bottom: 8px;
        padding: 8px;
        background: #f8f9fa;
        border-radius: 6px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .kpi-list li:before {
        content: "•";
        color: var(--secondary);
        font-weight: bold;
        display: inline-block;
        width: 1em;
        margin-left: -1em;
    }

    .project-list li:before {
        content: "↳";
        color: var(--success);
        font-weight: bold;
        display: inline-block;
        width: 1em;
        margin-left: -1em;
    }



    /* Project Cards */

    .projects-grid {

        display: grid;

        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

        gap: 25px;

        margin-top: 20px;

    }



    .project-card {

        background: white;

        border-radius: 10px;

        overflow: hidden;

        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

        transition: transform 0.3s;

        border-top: 4px solid var(--secondary);

        position: relative;

    }



    .project-card:hover {

        transform: translateY(-5px);

    }



    .project-header {

        background: #f8f9fa;

        color: var(--primary);

        padding: 15px;

        border-bottom: 1px solid #eee;

    }



    .project-header h3 {

        display: flex;

        align-items: center;

        gap: 10px;

        margin-bottom: 8px;

    }



    .project-description {

        font-size: 14px;

        color: var(--gray);

        margin-top: 8px;

    }



    .project-body {

        padding: 20px;

    }



    .project-meta {

        display: flex;

        justify-content: space-between;

        margin-bottom: 15px;

        font-size: 14px;

    }



    .activity-list {

        list-style: none;

        margin-top: 15px;

    }

    .activityShort {
        height: 300px;
        overflow-y: auto;
    }

    .element {
        overflow: scroll;
        /* or overflow: auto; */
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE 10+ */
    }

    .element::-webkit-scrollbar {
        display: none;
        /* Chrome, Safari, Edge */
    }

    .activity-list li {

        padding: 10px 15px;

        margin-bottom: 8px;

        background: #f1f8ff;

        border-radius: 6px;

        cursor: pointer;

        transition: all 0.3s;

        display: flex;

        align-items: center;

        justify-content: space-between;

    }



    .activity-list li:hover {

        background: #e3f2fd;

        transform: translateX(5px);

    }



    .activity-progress {

        font-size: 12px;

        background: var(--success);

        color: white;

        padding: 2px 8px;

        border-radius: 10px;

    }



    /* Activity Detail View */

    .activity-details {

        background: white;

        border-radius: 10px;

        padding: 25px;

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

    }



    .activity-info-grid {

        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 20px;
        margin-bottom: 30px;
    }



    .info-card {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 20px;
        border-left: 4px solid var(--secondary);
    }



    .info-card h3 {

        font-size: 14px;

        color: var(--gray);

        margin-bottom: 8px;

    }



    .info-card p {

        font-size: 22px;

        font-weight: 600;

        color: var(--dark);

    }



    .editable-field {

        background: rgba(52, 152, 219, 0.1);

        padding: 5px 10px;

        border-radius: 4px;

        border: 1px dashed var(--secondary);

        cursor: pointer;

        transition: all 0.3s;

    }



    .editable-field:hover {

        background: rgba(52, 152, 219, 0.2);

    }



    .progress-container {

        margin: 30px 0;

    }



    .progress-header {

        display: flex;

        justify-content: space-between;

        margin-bottom: 10px;

        align-items: center;

    }



    .progress-percentage {

        font-size: 28px;

        font-weight: 700;

        color: var(--secondary);

    }



    .progress-bar {

        height: 20px;

        background: #e0e0e0;

        border-radius: 10px;

        overflow: hidden;

        margin-top: 10px;

    }



    .progress-fill {

        height: 100%;

        background: linear-gradient(90deg, var(--secondary), var(--success));

        border-radius: 10px;

        transition: width 0.5s ease;

    }



    .steps-container {

        margin-top: 40px;

    }



    .step-item {

        display: flex;

        align-items: center;

        padding: 15px;

        border-bottom: 1px solid #eee;

        transition: background 0.3s;

    }



    .step-item:hover {

        background: #f9f9f9;

    }



    .step-checkbox {

        margin-right: 15px;

        width: 24px;

        height: 24px;

        accent-color: var(--success);

        cursor: pointer;

    }



    .step-label {

        flex-grow: 1;

        font-size: 16px;

    }



    .step-status {

        font-size: 14px;

        font-weight: 500;

        padding: 4px 12px;

        border-radius: 20px;

    }



    .status-pending {

        background: #fff3cd;

        color: #856404;

    }



    .status-completed {

        background: #d4edda;

        color: #155724;

    }



    /* Performance Ratings */

    .ratings-container {

        background: white;

        border-radius: 10px;

        padding: 25px;

        margin-top: 25px;

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

    }



    .rating-grid {

        display: grid;

        grid-template-columns: repeat(2, 1fr);

        gap: 20px;

        margin-top: 20px;

    }



    .rating-card {

        background: #f8f9fa;

        border-radius: 8px;

        padding: 20px;

        text-align: center;

    }



    .rating-value {

        font-size: 36px;

        font-weight: 700;

        color: var(--primary);

        margin: 15px 0;

    }



    .rating-stars {

        display: flex;

        justify-content: center;

        gap: 5px;

        margin: 15px 0;

    }



    .star {

        color: #ddd;

        font-size: 24px;

    }



    .star.filled {

        color: #ffc107;

    }



    .budget-section {

        background: white;

        border-radius: 10px;

        padding: 25px;

        margin-top: 25px;

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

    }



    .budget-grid {

        display: grid;

        grid-template-columns: repeat(3, 1fr);

        gap: 20px;

        margin-top: 20px;

    }



    .budget-card {

        text-align: center;

        padding: 15px;

        border-radius: 8px;

        background: #f8f9fa;

    }



    .budget-card h3 {

        font-size: 14px;

        color: var(--gray);

        margin-bottom: 10px;

    }



    .budget-card p {

        font-size: 18px;

        font-weight: 600;

    }



    .utilization {

        color: var(--success);

    }



    .remaining {

        color: var(--warning);

    }



    .bur {

        color: var(--secondary);

    }



    /* Form Styles */

    .form-container {

        max-width: 800px;

        margin: 0 auto;

        background: white;

        border-radius: 10px;

        padding: 25px;

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

    }



    .form-group {

        margin-bottom: 20px;

    }



    .form-group label {

        display: block;

        margin-bottom: 8px;

        font-weight: 600;

        color: var(--dark);

    }



    .form-group input,

    .form-group select,

    .form-group textarea {

        width: 100%;

        padding: 12px;

        border: 1px solid #ddd;

        border-radius: 6px;

        font-size: 16px;

    }



    .form-row {

        display: flex;

        gap: 20px;

        margin-bottom: 20px;

    }



    .form-col {

        flex: 1;

    }



    .submit-btn {

        background: var(--success);

        color: white;

        border: none;

        padding: 12px 30px;

        border-radius: 6px;

        font-size: 16px;

        font-weight: 600;

        cursor: pointer;

        display: flex;

        align-items: center;

        gap: 10px;

        margin-top: 20px;

    }



    /* Instructions */

    .instructions {

        background: #e3f2fd;

        border-radius: 10px;

        padding: 25px;

        margin-top: 30px;

        border-left: 4px solid var(--secondary);

    }



    .instructions h2 {

        margin-bottom: 15px;

        color: var(--primary);

        display: flex;

        align-items: center;

        gap: 10px;

    }



    .instructions ul {

        padding-left: 25px;

    }



    .instructions li {

        margin-bottom: 10px;

        line-height: 1.6;

    }



    /* Responsive Design */

    @media (max-width: 900px) {

        .activity-info-grid,

        .rating-grid,

        .budget-grid {

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

        }



        .form-row {

            flex-direction: column;

            gap: 0;

        }

    }



    @media (max-width: 600px) {

        .activity-info-grid,

        .rating-grid,

        .budget-grid {

            grid-template-columns: 1fr;

        }



        header {

            flex-direction: column;

            text-align: center;

            gap: 15px;

        }



        .project-controls {

            justify-content: center;

        }



        .projects-grid {

            grid-template-columns: 1fr;

        }



        .tabs {

            overflow-x: auto;

            flex-wrap: nowrap;

        }

    }

    .text-danger {
        color: #e74c3c
    }

    .text-success {
        color: #2ecc71
    }

    .no-line {
        text-decoration: none;
        color: #333;
    }