/**************************************************************/
/********* Baseline style of the external IDRC Portal *********/
/**************************************************************/

@import url('https://content.powerapps.com/resource/powerappsportal/fonts/poppins/v20/400.css');
@import url('https://content.powerapps.com/resource/powerappsportal/fonts/poppins/v20/400-italic.css');
@import url('https://content.powerapps.com/resource/powerappsportal/fonts/comfortaa/v40/400.css');


/* Contains foundational, site-wide styles that apply to all pages and components. */
/* E.g. Brand color palettes, logo backgrounds, theme-specific button colors, 
     dark/light mode overrides, font swaps for a particular brand. */ 
/* Should not contain branding or theme-specific overrides. */
/*
    Ownership rule:
    - Keep only cross-page/shared styles in this file.
    - Keep Form Work/MyComponent-specific styles in /css-mycomponent.css.
*/

/*
    Section map:
    1) Cross-page data row/table responsiveness (.custom-table-header, .data-row, .status-badge)
    2) Shared Projects styles (.project-title, .project-button)
    3) Shared collapsible primitives (.collapsible-*, .arrow)
*/

/* Desktop view (above 768px) */
.custom-table-header>div,
.data-row>div {
    min-width: 120px;
    padding-right: 10px;
    white-space: normal !important;
    /* <-- Allow wrapping */
    overflow: visible !important;
    /* <-- Prevent cutting off content */
    text-overflow: initial !important;
    word-wrap: break-word;
    /* <-- Support long words */
}

/* Optional: Set max widths for better control */
.custom-table-header>div:nth-child(1),
.data-row>div:nth-child(1) {
    width: 260px;
    /* Title */
}

.custom-table-header>div:nth-child(2),
.data-row>div:nth-child(2) {
    width: 180px;
    /* Type */
}

.custom-table-header>div:nth-child(3),
.data-row>div:nth-child(3) {
    width: 180px;
    /* Submitted by */
}

.custom-table-header>div:nth-child(4),
.data-row>div:nth-child(4) {
    width: 180px;
    /* Approver */
}

.custom-table-header>div:nth-child(5),
.data-row>div:nth-child(5) {
    width: 140px;
    /* Submit Date */
}

.custom-table-header>div:nth-child(6),
.data-row>div:nth-child(6) {
    width: 140px;
    /* Status */
    text-align: right;
}

/* Mobile (stacked view) — already wraps */
@media (max-width: 768px) {
    .custom-table-header {
        display: none !important;
    }

    .data-row {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .data-row>div {
        width: 100% !important;
        text-align: left !important;
        margin-bottom: 6px;
        position: relative;
        padding-left: 110px;
        white-space: normal !important;
        /* <-- Make sure text wraps on mobile too */
        word-wrap: break-word;
    }

    .data-row>div::before {
        content: attr(data-label) ": ";
        position: absolute;
        left: 0;
        font-weight: bold;
        color: #555;
    }

    .status-badge {
        flex: 1 1 150px;
        /* allows flex-grow with base width */
        max-width: 200px;
        text-align: center;
    }

    .status-label {
        display: inline-block;
        width: 100%;
        white-space: normal;
        word-break: break-word;
        background-color: #00aa3e;
        color: white;
        padding: 6px 14px;
        border-radius: 5px;
        font-weight: bold;
    }

    .status-badge {
        align-self: flex-start !important;
    }

    .status-badge span {
        white-space: nowrap !important;
    }
}

.status-badge {
    text-align: left !important;
}

.status-badge span {
    white-space: normal !important;
    word-wrap: break-word;
    display: inline-block;
    max-width: 100%;
}

/* Shared Projects page styles (EN + FR) */
.project-title {
    background-color: rgba(243, 242, 241, 0.97);
    box-shadow: 0px 0px 8px #00376D;
    border-radius: 10px;
    border: 15px solid #F3F2F1;
    font-family: Comfortaa;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
}

.project-button {
    border: 2px solid #0066B3;
    border-radius: 10px;
    background-color: rgba(0, 102, 179, 1);
    color: white;
    text-decoration: none;
    padding: 8px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: fit-content;
    font-family: Comfortaa;
    text-align: left;
}

.project-button:hover,
.project-button:focus-visible {
    background-color: #004f8a;
    color: white;
    text-decoration: none;
}

/* Projects page titles must remain left-aligned even when other page CSS sets .project-title to center. */
p.project-title.project-page-title {
    display: block !important;
    text-align: left !important;
    width: 100%;
}

/* Shared collapsible primitives (used by multiple page families) */
.collapsible-container {
    border: 1px solid #ccc;
    border-radius: 8px;
}

.collapsible-header {
    background-color: #0066b3;
    color: white;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    font-weight: 600;
    cursor: pointer;
    border-radius: 8px;
}

.collapsible-sub-header {
    background-color: white;
    color: #0066b3;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    font-weight: 600;
    cursor: pointer;
}

.arrow {
    margin-right: 10px;
    transition: transform 0.3s ease;
}

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

.collapsible-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.collapsible-content.open {
    max-height: 7000px;
    padding: 25px;
}