#transparencyApp {
    --teal: #208E8E;
    --teal-2: #1b7a7a;
    --gold: #C1AF5C;
    --brown: #9a7a3a;
    --ink: #1e2c32;
    --muted: #6b7b86;
    --paper: #ffffff;
    --bg: #f2f5f6;
    --dash: #9fb0b8;
    --pill: #e9eef0;
    font-family: "Cairo", system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
    color: var(--ink);
}

    #transparencyApp.tinf-lang-en {
        font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    }

    #transparencyApp * {
        box-sizing: border-box;
    }

    /* A4-ish canvas */
    #transparencyApp .tinf-sheet {
        max-width: 1100px;
        margin: 18px auto;
        padding: 12px;
    }

    #transparencyApp .tinf-paper {
        background: linear-gradient(180deg, rgba(193,175,92,.10), transparent 18%), repeating-linear-gradient(135deg, rgba(0,0,0,.02) 0 10px, rgba(0,0,0,.00) 10px 22px);
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 16px 32px rgba(0,0,0,.09);
        border: 1px solid rgba(0,0,0,.06);
    }

    /* Header (green) */
    #transparencyApp .tinf-hero {
        background: linear-gradient(90deg, var(--teal), var(--teal-2));
        color: #fff;
        padding: 12px 16px;
    }

    #transparencyApp .tinf-hero-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    #transparencyApp .tinf-hero-title {
        font-weight: 800;
        font-size: 26px;
        line-height: 1.1;
        margin: 0;
        letter-spacing: .2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #transparencyApp .tinf-hero-right {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 280px;
        justify-content: flex-end;
    }

    #transparencyApp .tinf-uni-name {
        display: flex;
        flex-direction: column;
        gap: 2px;
        align-items: flex-end;
        text-align: end;
    }

        #transparencyApp .tinf-uni-name .ar {
            font-weight: 800;
            font-size: 14px;
            opacity: .95
        }

        #transparencyApp .tinf-uni-name .en {
            font-weight: 700;
            font-size: 11px;
            opacity: .9;
            direction: ltr
        }

    #transparencyApp .tinf-logo {
       /* width: 76px;*/
        height: auto;
        background: rgba(255,255,255,.10);
        border: 1px solid rgba(255,255,255,.18);
        border-radius: 14px;
        padding: 8px;
    }

    /* Beige strip */
    #transparencyApp .tinf-subhero {
        background: #d7c08b;
        padding: 8px 16px;
        color: #1f2a30;
        font-weight: 800;
        font-size: 14px;
        letter-spacing: .3px;
    }

    /* Language toolbar */
    #transparencyApp .tinf-toolbar {
        display: flex;
        gap: 8px;
        justify-content: flex-start;
        padding: 10px 12px;
        background: rgba(255,255,255,.55);
        border-bottom: 1px solid rgba(0,0,0,.05);
    }

    #transparencyApp .tinf-btn {
        border: 1px solid rgba(32,142,142,.35);
        background: rgba(255,255,255,.9);
        color: var(--teal);
        border-radius: 10px;
        padding: 7px 10px;
        cursor: pointer;
        font-weight: 800;
        font-family: inherit;
    }

        #transparencyApp .tinf-btn.active {
            background: var(--teal);
            color: #fff;
            border-color: var(--teal);
        }

    #transparencyApp .tinf-hint {
        margin: 0;
        color: var(--muted);
        font-size: 12px;
        font-weight: 700;
        align-self: center;
    }

    /* Main 3-column layout */
    #transparencyApp .tinf-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 0;
        padding: 10px 14px 14px;
        position: relative;
    }

        /* vertical dashed separators */
        #transparencyApp .tinf-grid::before,
        #transparencyApp .tinf-grid::after {
            content: "";
            position: absolute;
            top: 10px;
            bottom: 14px;
            width: 0;
            border-left: 2px dashed rgba(159,176,184,.9);
            pointer-events: none;
        }

        #transparencyApp .tinf-grid::before {
            left: calc(33.333% + 7px);
        }

        #transparencyApp .tinf-grid::after {
            left: calc(66.666% + 7px);
        }

    #transparencyApp .tinf-col {
        padding: 0 14px;
        display: flex;
        flex-direction: column;
    }

    /* Each section (block) */
    #transparencyApp .tinf-block {
        padding: 10px 0;
        border-bottom: 2px dashed rgba(159,176,184,.9);
       
    }

        #transparencyApp .tinf-block:last-child {
            border-bottom: none;
        }

    #transparencyApp .tinf-block-head {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 8px;
    }

    #transparencyApp .tinf-num {
        background: #a8873f;
        color: #fff;
        font-weight: 900;
        border-radius: 6px;
        padding: 4px 8px;
        min-width: 34px;
        text-align: center;
        font-size: 13px;
        line-height: 1;
    }

    #transparencyApp .tinf-title {
        margin: 0;
        font-weight: 800;
        font-size: 13px;
        color: var(--brown);
        line-height: 1.25;
        flex: 1;
    }

    #transparencyApp .tinf-subtitle {
        margin-top: -2px;
        margin-bottom: 6px;
        color: var(--muted);
        font-size: 12px;
        font-weight: 800;
    }

    #transparencyApp .tinf-block-body {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
      
    }

    #transparencyApp .tinf-values {
        flex: 1;
        min-width: 0;
    }

    #transparencyApp .tinf-rows {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-top: 2px;
    }

    #transparencyApp .tinf-r {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    #transparencyApp .tinf-year {
        background: rgba(255,255,255,.85);
        border: 2px solid rgba(32,142,142,.65);
        color: #1f2a30;
        border-radius: 9px;
        padding: 2px 10px;
        font-weight: 900;
        min-width: 64px;
        text-align: center;
        font-size: 12px;
        direction: ltr;
    }

    #transparencyApp .tinf-val {
        background: var(--teal);
        color: #fff;
        font-weight: 900;
        border-radius: 10px;
        padding: 3px 12px;
        direction: ltr;
        display: inline-block;
        min-width: 56px;
        text-align: center;
    }

    #transparencyApp .tinf-valbox {
        background: var(--teal);
        color: #fff;
        font-weight: 900;
        border-radius: 10px;
        padding: 3px 12px;
        direction: ltr;
        display: inline-block;
        min-width: 56px;
        text-align: center;
    }

  
    #transparencyApp .tinf-iconbox {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        min-width: 170px;
    }

    #transparencyApp .tinf-ico {
        width: 150px; 
        height: auto;
        display: block;
        filter: drop-shadow(0 6px 10px rgba(0,0,0,.10));
    }

   
    #transparencyApp .tinf-gender-top .tinf-ico {
        width: 100px;
    }

    /* total pill */
    #transparencyApp .tinf-pill-total {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--teal);
        color: #fff;
        font-weight: 900;
        border-radius: 10px;
        padding: 4px 10px;
        font-size: 12px;
        gap: 8px;
        white-space: nowrap;
    }

    /* gender blocks */
    #transparencyApp .tinf-gender-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    #transparencyApp .tinf-gender-card {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    #transparencyApp .tinf-gender-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    #transparencyApp .tinf-total-line {
        margin-top: 6px;
        display: flex; 
        align-items: center;
       /* justify-content: space-between;*/
        gap: 30px;
    }

    #transparencyApp .tinf-total-label {
        color: var(--muted);
        font-weight: 800;
        font-size: 12px;
    }

    #transparencyApp .tinf-total-val {
        background: var(--teal);
        color: #fff;
        font-weight: 900;
        border-radius: 10px;
        padding: 4px 10px;
        direction: ltr;
    }
    /* FIX: show both gender icons clearly (02 & 13) */
    #transparencyApp .tinf-gender-top {
        display: flex !important;
        flex-direction: column !important; /* icon above text */
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 6px !important;
    }

        /* make sure icon is not too large inside gender cards */
        #transparencyApp .tinf-gender-top .tinf-ico {
            width: 90px !important; /* عدّلها 80-110 حسب رغبتك */
            max-width: 100% !important;
        }

    /* prevent clipping */
    #transparencyApp .tinf-gender-card {
        overflow: visible !important;
    }
    /* list blocks (19, 20) */
    #transparencyApp .tinf-bullets {
        margin: 0;
        padding: 0 18px 0 0;
        font-size: 12px;
        line-height: 1.6;
        color: #1f2a30;
    }

        #transparencyApp .tinf-bullets li {
            margin: 5px 0;
            list-style: disc;
        }



    /* pills style (12, 15) */
    #transparencyApp .tinf-pills {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    #transparencyApp .tinf-pillrow {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

    #transparencyApp .tinf-yearpill,
    #transparencyApp .tinf-valpill {
        background: rgba(255,255,255,.85);
        border: 2px solid rgba(32,142,142,.65);
        border-radius: 10px;
        padding: 2px 10px;
        font-weight: 900;
        min-width: 64px;
        text-align: center;
        direction: ltr;
    }

    #transparencyApp .tinf-yearpill {
        font-size: 12px;
    }

    #transparencyApp .tinf-valpill {
        font-size: 13px;
    }

   
    #transparencyApp .tinf-iconbox-stack {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        min-width: 170px;
    }

        #transparencyApp .tinf-iconbox-stack .tinf-pill-total {
            width: 120px;
            justify-content: center;
        }

    /* footer strip */
    #transparencyApp .tinf-footer-strip {
        height: 38px;
        background: linear-gradient(90deg, var(--teal), var(--teal-2));
    }


    /* =========================================================
   FIX EN layout for 12 & 15 (years_pills):
   force 3 columns in a row (no wrapping)
   ========================================================= */

    #transparencyApp .tinf-block[data-id="12"] .tinf-pillrow,
    #transparencyApp .tinf-block[data-id="15"] .tinf-pillrow {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    /* pills should stretch instead of min-width pushing wrap */
    #transparencyApp .tinf-block[data-id="12"] .tinf-yearpill,
    #transparencyApp .tinf-block[data-id="12"] .tinf-valpill,
    #transparencyApp .tinf-block[data-id="15"] .tinf-yearpill,
    #transparencyApp .tinf-block[data-id="15"] .tinf-valpill {
        min-width: 0 !important;
        width: 100%;
        padding: 2px 8px;
    }

    /* shrink iconbox only for 12 & 15 so values have enough width */
    #transparencyApp .tinf-block[data-id="12"] .tinf-iconbox-stack,
    #transparencyApp .tinf-block[data-id="15"] .tinf-iconbox-stack {
        min-width: 140px !important;
    }

    /* make icons a bit smaller only for 12 & 15 */
    #transparencyApp .tinf-block[data-id="12"] .tinf-ico,
    #transparencyApp .tinf-block[data-id="15"] .tinf-ico {
        width: 110px !important;
    }

    /* OPTIONAL: English list indentation fix */
    #transparencyApp.tinf-lang-en .tinf-bullets {
        padding-left: 18px;
        padding-right: 0;
        text-align: left;
    }

    /*  Fix card 12 & 15 spacing in EN/AR= */

  
    #transparencyApp .tinf-block[data-id="12"] .tinf-block-body,
    #transparencyApp .tinf-block[data-id="15"] .tinf-block-body {
        align-items: center !important;
    }


    #transparencyApp .tinf-block[data-id="12"] .tinf-iconbox-stack,
    #transparencyApp .tinf-block[data-id="15"] .tinf-iconbox-stack {
        gap: 6px !important;
        justify-content: center !important;
        padding-top: 0 !important;
    }

     
        #transparencyApp .tinf-block[data-id="12"] .tinf-iconbox-stack .tinf-pill-total,
        #transparencyApp .tinf-block[data-id="15"] .tinf-iconbox-stack .tinf-pill-total {
            margin-top: 0 !important;
        }

 
    #transparencyApp .tinf-block[data-id="12"] .tinf-pills,
    #transparencyApp .tinf-block[data-id="15"] .tinf-pills {
        margin-top: 0 !important;
    }

    #transparencyApp .tinf-block[data-id="12"] .tinf-pillrow,
    #transparencyApp .tinf-block[data-id="15"] .tinf-pillrow {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }


    #transparencyApp .tinf-block[data-id="12"] .tinf-yearpill,
    #transparencyApp .tinf-block[data-id="12"] .tinf-valpill,
    #transparencyApp .tinf-block[data-id="15"] .tinf-yearpill,
    #transparencyApp .tinf-block[data-id="15"] .tinf-valpill {
        padding: 2px 8px !important;
        min-width: 0 !important;
        width: 100% !important;
    }
/* Responsive */
@media (max-width: 980px) {
    #transparencyApp .tinf-grid {
        grid-template-columns: 1fr;
    }

        #transparencyApp .tinf-grid::before,
        #transparencyApp .tinf-grid::after {
            display: none;
        }

    #transparencyApp .tinf-col {
        padding: 0 12px;
    }

    #transparencyApp .tinf-hero-title {
        font-size: 22px;
    }

    #transparencyApp .tinf-hero-right {
        min-width: auto;
    }
}

@media print {
    #transparencyApp .tinf-sheet {
        max-width: 100%;
        margin: 0;
    }

    #transparencyApp .tinf-paper {
        box-shadow: none;
    }

    #transparencyApp .tinf-toolbar {
        display: none;
    }
}
/* =========================
   LTR (English) - Fix dashed column separators
   ========================= */
#transparencyApp[dir="ltr"] .tinf-grid::before {
    left: calc(33.333% - 7px) !important;
}

#transparencyApp[dir="ltr"] .tinf-grid::after {
    left: calc(66.666% - 7px) !important;
}



/* 19/20: icon + title on same row in header, content below */
#transparencyApp .tinf-block[data-id="19"] .tinf-block-head,
#transparencyApp .tinf-block[data-id="20"] .tinf-block-head {
    align-items: center;
    flex-wrap: nowrap;
}

#transparencyApp .tinf-block[data-id="19"] .tinf-title,
#transparencyApp .tinf-block[data-id="20"] .tinf-title {
    flex: 1;
    min-width: 0;
}

#transparencyApp .tinf-head-ico {
    width:90px;
    height: auto;
    display: block;
    flex: 0 0 auto;
    filter: none;
}

#transparencyApp .tinf-block[data-id="19"] .tinf-block-body,
#transparencyApp .tinf-block[data-id="20"] .tinf-block-body {
    display: block; /* content below */
}

/* Press animation on card click */
#transparencyApp .tinf-block {
    position: relative;
    cursor: pointer;
    transition: transform 120ms ease, filter 120ms ease, background-color 120ms ease;
}

    #transparencyApp .tinf-block.tinf-press {
        transform: scale(0.99);
        filter: drop-shadow(0 10px 18px rgba(0,0,0,.10));
    }

    
    #transparencyApp .tinf-block::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(32,142,142,.06);
        opacity: 0;
        transition: opacity 120ms ease;
        pointer-events: none;
    }

    #transparencyApp .tinf-block.tinf-press::after {
        opacity: 1;
    }