/* ==========================================================================
   Shushilan CMI - shared design layer
   Loaded on every page after Bootstrap. Selectors are prefixed with
   `html body` where needed so they win over older page-level styles.
   ========================================================================== */
:root {
    --cmi-delta: #0b5d8f;        /* primary - estuary blue */
    --cmi-delta-dark: #084a73;
    --cmi-delta-tint: #e8f1f7;
    --cmi-mangrove: #2f7d5b;     /* positive / completed */
    --cmi-mangrove-tint: #e7f3ed;
    --cmi-amber: #b7791f;        /* attention */
    --cmi-amber-tint: #fbf3e4;
    --cmi-brick: #b3412e;        /* problems */
    --cmi-brick-tint: #f9ebe8;
    --cmi-ink: #1d2b36;
    --cmi-ink-soft: #52616b;
    --cmi-silt: #f2f4f3;
    --cmi-rule: #d8dfe2;
    --cmi-rule-soft: #e8ecee;
    --cmi-radius: 8px;
    --cmi-font: "IBM Plex Sans", "Noto Sans Bengali", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    --bs-body-font-family: var(--cmi-font);
    --bs-primary: #0b5d8f;
    --bs-primary-rgb: 11, 93, 143;
    --bs-link-color: #0b5d8f;
    --bs-link-hover-color: #084a73;
}

html body.cmi-body {
    font-family: var(--cmi-font);
    color: var(--cmi-ink);
    background-color: var(--cmi-silt);
    padding-top: 0;               /* header is sticky, no manual offset needed */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}
html body.cmi-body > main { flex: 1 0 auto; }
html body.cmi-body :focus-visible {
    outline: 3px solid rgba(11, 93, 143, .45);
    outline-offset: 2px;
}
.cmi-skip { position: absolute; left: 1rem; top: .5rem; z-index: 2000; background: #fff; padding: .5rem 1rem; border-radius: 6px; }

/* ---------------- Header ---------------- */
html body .cmi-navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--cmi-delta);
    padding: .4rem 0;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .08);
}
html body .cmi-brand {
    display: flex; align-items: center; gap: .65rem;
    color: #fff; padding: .2rem 0; margin-right: 1.5rem;
    background: none; border-radius: 0; box-shadow: none; transform: none;
}
html body .cmi-brand:hover, html body .cmi-brand:focus { color: #fff; background: none; transform: none; box-shadow: none; }
html body .cmi-brand img {
    width: 38px; height: 38px; border-radius: 50%; object-fit: cover;
    background: #fff; border: 2px solid rgba(255, 255, 255, .6); margin: 0;
}
.cmi-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.cmi-brand-name { font-weight: 600; font-size: 1.02rem; letter-spacing: .005em; }
.cmi-brand-org { font-size: .78rem; color: rgba(255, 255, 255, .72); }
html body .cmi-navbar .nav-link {
    color: rgba(255, 255, 255, .86);
    font-weight: 500; font-size: .93rem;
    display: flex; align-items: center; gap: .45rem;
    padding: .55rem .8rem; border-radius: 6px;
}
html body .cmi-navbar .nav-link:hover { color: #fff; background: rgba(255, 255, 255, .1); }
html body .cmi-navbar .nav-link.active { color: #fff; background: rgba(0, 0, 0, .22); }
html body .cmi-navbar .cmi-logout { color: rgba(255, 255, 255, .7); }
.cmi-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem;
    border-radius: 999px; background: #f2c14e; color: #3b2a00;
    font-size: .74rem; font-weight: 700; margin-left: .15rem;
}
html body .cmi-toggler {
    border: 1px solid rgba(255, 255, 255, .45); color: #fff;
    font-size: 1.5rem; line-height: 1; padding: .3rem .55rem;
}
html body .cmi-toggler:focus { box-shadow: 0 0 0 3px rgba(255, 255, 255, .35); }
@media (max-width: 991.98px) {
    html body .cmi-navbar .navbar-collapse { padding: .5rem 0 .75rem; }
    html body .cmi-navbar .nav-link { padding: .7rem .6rem; }
    .cmi-brand-name { font-size: .95rem; }
}

/* Main content spacing */
html body .cmi-main.container { padding-top: 1.25rem; padding-bottom: 2rem; margin-top: 0 !important; }
html body .cmi-main h1, html body .cmi-main h2, html body .cmi-main h3 { color: var(--cmi-ink); font-weight: 600; }

/* ---------------- Footer ---------------- */
html body .cmi-footer {
    margin-top: 2.5rem; padding: 1rem 0;
    background: #fff; border-top: 1px solid var(--cmi-rule);
    color: var(--cmi-ink-soft); font-size: .85rem; text-align: center;
}
html body .cmi-footer p { margin: 0; }
html body .cmi-footer a { color: var(--cmi-delta); font-weight: 600; text-decoration: none; }

/* ---------------- Cards & buttons (light touch) ---------------- */
html body .cmi-main .card { border: 1px solid var(--cmi-rule); border-radius: var(--cmi-radius); box-shadow: none; }
html body .btn-primary { --bs-btn-bg: var(--cmi-delta); --bs-btn-border-color: var(--cmi-delta); --bs-btn-hover-bg: var(--cmi-delta-dark); --bs-btn-hover-border-color: var(--cmi-delta-dark); --bs-btn-active-bg: var(--cmi-delta-dark); }
html body .btn-success { --bs-btn-bg: var(--cmi-mangrove); --bs-btn-border-color: var(--cmi-mangrove); --bs-btn-hover-bg: #256548; --bs-btn-hover-border-color: #256548; }

/* ==========================================================================
   Tables - the core of this product
   ========================================================================== */
html body .cmi-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border: 1px solid var(--cmi-rule);
    border-radius: var(--cmi-radius);
    margin-bottom: 1rem;
}
/* A card body that only holds a table does not need a second frame */
html body .card-body > .cmi-table-wrap:only-child,
html body .card-body > .table-responsive.cmi-table-wrap:only-child { border: 0; border-radius: 0; margin-bottom: 0; }

html body table.cmi-table {
    --bs-table-bg: #fff;
    --bs-table-striped-bg: #f8fafa;
    --bs-table-hover-bg: #eef4f8;
    --bs-table-border-color: var(--cmi-rule-soft);
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .9rem;
    color: var(--cmi-ink);
    font-variant-numeric: tabular-nums;
    background: #fff;
}
html body table.cmi-table > thead > tr > th,
html body table.cmi-table > thead > tr > td {
    background-color: #eef3f6;
    color: var(--cmi-ink);
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: .01em;
    text-transform: none;
    vertical-align: bottom;
    white-space: nowrap;
    padding: .7rem .8rem;
    border: 0;
    border-bottom: 1px solid var(--cmi-rule);
    position: sticky;
    top: 0;
    z-index: 1;
}
/* Grouped header rows (e.g. "Age groups" spanning Male/Female) */
html body table.cmi-table > thead > tr + tr > th { top: auto; font-weight: 500; color: var(--cmi-ink-soft); }
html body table.cmi-table > thead > tr > th[colspan] { text-align: center; border-left: 1px solid var(--cmi-rule); }

html body table.cmi-table > tbody > tr > td,
html body table.cmi-table > tbody > tr > th,
html body table.cmi-table > tfoot > tr > td,
html body table.cmi-table > tfoot > tr > th {
    padding: .62rem .8rem;
    vertical-align: middle;
    border: 0;
    border-bottom: 1px solid var(--cmi-rule-soft);
    background-color: transparent;
    box-shadow: none;
}
html body table.cmi-table > tbody > tr:nth-child(even) > td { background-color: #fafbfb; }
html body table.cmi-table > tbody > tr:hover > td { background-color: #eef4f8; }
html body table.cmi-table > tbody > tr:last-child > td { border-bottom: 0; }

/* Bordered variant keeps faint column rules - useful for dense participant grids */
html body table.cmi-table.table-bordered > :not(caption) > tr > * { border-right: 1px solid var(--cmi-rule-soft); }
html body table.cmi-table.table-bordered > :not(caption) > tr > *:last-child { border-right: 0; }
html body table.cmi-table.table-sm > :not(caption) > tr > * { padding: .4rem .55rem; }

html body table.cmi-table td.num,
html body table.cmi-table th.num { text-align: right; white-space: nowrap; }

/* Totals */
html body table.cmi-table tr.cmi-total-row > td,
html body table.cmi-table tr.cmi-total-row > th,
html body table.cmi-table > tfoot > tr > td,
html body table.cmi-table > tfoot > tr > th {
    background-color: var(--cmi-delta-tint) !important;
    font-weight: 600;
    border-top: 1px solid #c9dbe7;
}
html body table.cmi-table td.cmi-empty-cell { text-align: center; color: var(--cmi-ink-soft); padding: 2rem 1rem; background: #fff; }

/* Badges inside tables read as status labels, not buttons */
html body table.cmi-table .badge { font-weight: 600; font-size: .75rem; padding: .35em .6em; border-radius: 4px; }
html body table.cmi-table .btn-sm { padding: .25rem .55rem; font-size: .8rem; }
html body table.cmi-table a:not(.btn) { color: var(--cmi-delta); text-decoration: none; font-weight: 500; }
html body table.cmi-table a:not(.btn):hover { text-decoration: underline; }

/* ---------------- Status labels used by project pages ---------------- */
.cmi-status { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 600; padding: .2rem .55rem; border-radius: 4px; white-space: nowrap; }
.cmi-status::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.cmi-status-running { color: var(--cmi-mangrove); background: var(--cmi-mangrove-tint); }
.cmi-status-closed { color: var(--cmi-ink-soft); background: #eceff1; }
.cmi-status-pending { color: #8a5a10; background: var(--cmi-amber-tint); }
.cmi-status-rejected { color: var(--cmi-brick); background: var(--cmi-brick-tint); }

/* ---------------- Shared page scaffolding for new/rebuilt pages ---------------- */
.cmi-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.cmi-page-head h1 { font-size: 1.55rem; margin: 0; }
.cmi-page-head p { margin: .25rem 0 0; color: var(--cmi-ink-soft); max-width: 70ch; }
.cmi-panel { background: #fff; border: 1px solid var(--cmi-rule); border-radius: var(--cmi-radius); margin-bottom: 1.5rem; }
.cmi-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--cmi-rule); }
.cmi-panel-head h2 { font-size: 1.05rem; margin: 0; font-weight: 600; }
.cmi-panel-head .cmi-count { color: var(--cmi-ink-soft); font-weight: 500; font-size: .9rem; }
.cmi-panel > .cmi-table-wrap { border: 0; border-radius: 0 0 var(--cmi-radius) var(--cmi-radius); margin: 0; }
.cmi-panel-body { padding: 1.1rem; }
.cmi-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--cmi-rule); margin-bottom: 1.25rem; overflow-x: auto; }
.cmi-tabs a { display: inline-flex; align-items: center; gap: .45rem; padding: .65rem 1rem; color: var(--cmi-ink-soft); text-decoration: none; font-weight: 500; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.cmi-tabs a:hover { color: var(--cmi-ink); }
.cmi-tabs a.active { color: var(--cmi-delta); border-bottom-color: var(--cmi-delta); }
.cmi-tabs .cmi-badge { margin-left: 0; }
.cmi-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.cmi-toolbar .form-control { min-width: 220px; }
.cmi-muted { color: var(--cmi-ink-soft); }
.cmi-empty { padding: 2.5rem 1rem; text-align: center; color: var(--cmi-ink-soft); }
.cmi-empty strong { display: block; color: var(--cmi-ink); margin-bottom: .25rem; }

/* Admin sub-navigation that many admin pages print: make it wrap cleanly */
html body .admin-nav .nav { flex-wrap: wrap; }

@media print {
    .cmi-navbar, .cmi-footer, .no-print { display: none !important; }
    html body table.cmi-table > thead > tr > th { position: static; }
}
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ---------------- Admin section links (rebuilt pages) ---------------- */
.cmi-subnav { display: flex; gap: .25rem; overflow-x: auto; padding: .35rem; margin-bottom: 1.5rem; background: #fff; border: 1px solid var(--cmi-rule); border-radius: var(--cmi-radius); scrollbar-width: thin; }
.cmi-subnav a { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .75rem; border-radius: 6px; color: var(--cmi-ink-soft); text-decoration: none; font-size: .88rem; font-weight: 500; white-space: nowrap; }
.cmi-subnav a:hover { background: var(--cmi-silt); color: var(--cmi-ink); }
.cmi-subnav a.active { background: var(--cmi-delta-tint); color: var(--cmi-delta); }

/* ---------------- Filters & summary strip ---------------- */
.cmi-filters { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: flex-end; }
.cmi-filters > div { min-width: 170px; }
.cmi-filters .form-label { font-size: .82rem; font-weight: 600; color: var(--cmi-ink-soft); margin-bottom: .25rem; }
.cmi-filters-grow { flex: 1 1 220px; }
.cmi-filters-actions { display: flex; gap: .25rem; min-width: 0 !important; }
.cmi-summary-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); background: #fff; border: 1px solid var(--cmi-rule); border-radius: var(--cmi-radius); margin-bottom: 1.5rem; }
.cmi-summary-strip > div { padding: .85rem 1.1rem; border-right: 1px solid var(--cmi-rule-soft); }
.cmi-summary-strip > div:last-child { border-right: 0; }
.cmi-summary-strip span { display: block; font-size: .8rem; color: var(--cmi-ink-soft); }
.cmi-summary-strip strong { display: block; font-size: 1.35rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--cmi-ink); }

/* ---------------- Participant grids ---------------- */
html body .cmi-table-tall { max-height: 72vh; overflow: auto; }
html body table.cmi-participants-table { font-size: .84rem; }
html body table.cmi-participants-table .cmi-group-start { border-left: 1px solid var(--cmi-rule) !important; }
html body table.cmi-participants-table td.cmi-zero { color: #a9b4ba; }
html body table.cmi-table .cmi-sticky-col { position: sticky; left: 0; z-index: 2; background: #fff; min-width: 210px; max-width: 280px; box-shadow: 1px 0 0 var(--cmi-rule); font-weight: 400; }
html body table.cmi-table > thead .cmi-sticky-col { z-index: 3; background: #eef3f6; }
html body table.cmi-table > tbody > tr:nth-child(even) > .cmi-sticky-col { background: #fafbfb; }
html body table.cmi-table > tbody > tr:hover > .cmi-sticky-col { background: #eef4f8; }
html body table.cmi-table > tfoot .cmi-sticky-col { background: var(--cmi-delta-tint); font-weight: 600; }
html body table.cmi-table > tfoot > tr > * { position: sticky; bottom: 0; }
.cmi-clip { display: block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------- Collapsible project blocks ---------------- */
.cmi-project-block { overflow: hidden; }
.cmi-project-summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.25rem; padding: .9rem 1.1rem; }
.cmi-project-summary::-webkit-details-marker { display: none; }
.cmi-project-summary:hover { background: #f7f9fa; }
.cmi-project-title { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.cmi-project-figures { display: flex; flex-wrap: wrap; gap: .25rem 1rem; color: var(--cmi-ink-soft); font-size: .88rem; font-variant-numeric: tabular-nums; }
.cmi-project-figures strong { color: var(--cmi-ink); }
.cmi-chevron { transition: transform .15s ease; color: var(--cmi-ink-soft); }
.cmi-project-block[open] .cmi-chevron { transform: rotate(90deg); }
.cmi-project-block[open] > .cmi-project-summary { border-bottom: 1px solid var(--cmi-rule); }
.cmi-project-block > .cmi-table-wrap { border: 0; border-radius: 0; margin: 0; }
@media print { .cmi-project-block { break-inside: avoid; } html body .cmi-table-tall { max-height: none; overflow: visible; } }
html body table.cmi-table tr.cmi-group-row > th { background: #f6f8f9 !important; color: var(--cmi-ink-soft); font-size: .78rem; font-weight: 600; padding-top: .5rem; padding-bottom: .35rem; }

/* ==========================================================================
   Sidebar layout used by the user and focal pages.
   The old layout fixed the sidebar at a hard-coded offset and pushed the
   content with margin-left inside a centred container, which overlapped
   content on phones and squeezed it on desktops. This replaces it with a
   grid on wide screens and a scrollable tab strip on narrow screens.
   ========================================================================== */
html body .cmi-main.container:has(> .sidebar) {
    max-width: 1480px;
    display: grid;
    grid-template-columns: 224px minmax(0, 1fr);
    column-gap: 1.5rem;
    row-gap: 0;
    align-items: start;
}
html body .cmi-main.container:has(> .sidebar) > * { grid-column: 2; min-width: 0; }
html body .cmi-main.container > .sidebar {
    grid-column: 1;
    grid-row: 1 / span 30;
    align-self: start;
    position: sticky !important;
    top: 76px !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    padding: .75rem !important;
    background: #fff !important;
    color: var(--cmi-ink) !important;
    border: 1px solid var(--cmi-rule);
    border-radius: var(--cmi-radius);
    box-shadow: none !important;
    z-index: 5 !important;
}
html body .sidebar h5, html body .sidebar small { color: var(--cmi-ink) !important; }
html body .sidebar .text-center { display: block !important; text-align: left !important; padding: .25rem .5rem .75rem; margin-bottom: .5rem !important; border-bottom: 1px solid var(--cmi-rule-soft); }
html body .sidebar .text-center h5 { font-size: 1rem; font-weight: 600; margin: 0; }
html body .sidebar .text-center small { color: var(--cmi-ink-soft) !important; font-size: .8rem; }
html body .sidebar .nav-link {
    display: flex !important; align-items: center; gap: .5rem;
    color: var(--cmi-ink-soft) !important;
    background: transparent !important;
    padding: .5rem .65rem !important;
    margin-bottom: 2px !important;
    border-radius: 6px !important;
    font-size: .9rem; font-weight: 500;
    white-space: nowrap;
}
html body .sidebar .nav-link i { margin: 0 !important; width: 1.1rem; text-align: center; }
html body .sidebar .nav-link span { display: inline !important; }
html body .sidebar .nav-link:hover { background: var(--cmi-silt) !important; color: var(--cmi-ink) !important; }
html body .sidebar .nav-link.active { background: var(--cmi-delta-tint) !important; color: var(--cmi-delta) !important; }
html body .main-content {
    margin-left: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    width: auto !important;
    min-width: 0;
}
html body .main-content .card:hover { transform: none; }

@media (max-width: 991.98px) {
    html body .cmi-main.container:has(> .sidebar) { display: block; }
    html body .cmi-main.container > .sidebar {
        position: sticky !important;
        top: 60px !important;
        max-height: none;
        overflow: visible;
        padding: .35rem !important;
        margin: 0 0 1rem;
        z-index: 20 !important;
    }
    html body .sidebar .text-center { display: none !important; }
    html body .sidebar .nav {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        gap: .15rem;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
                mask-image: linear-gradient(90deg, #000 88%, transparent);
    }
    html body .sidebar .nav::-webkit-scrollbar { display: none; }
    html body .sidebar .nav-link { margin: 0 !important; font-size: .85rem; padding: .45rem .6rem !important; }
}

/* Small-screen polish for the pages that live inside .main-content */
@media (max-width: 767.98px) {
    html body .cmi-main.container { padding-left: .75rem; padding-right: .75rem; }
    html body .main-content h3, html body .cmi-page-head h1 { font-size: 1.3rem; }
    html body .main-content .card-header { flex-wrap: wrap; gap: .5rem; }
    html body .main-content .filter-section .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
    html body .cmi-summary-strip > div { border-bottom: 1px solid var(--cmi-rule-soft); }
}
html body .btn-primary { background-color: var(--cmi-delta); border-color: var(--cmi-delta); }
html body .btn-primary:hover, html body .btn-primary:focus { background-color: var(--cmi-delta-dark); border-color: var(--cmi-delta-dark); }
html body .btn-outline-primary { --bs-btn-color: var(--cmi-delta); --bs-btn-border-color: var(--cmi-delta); --bs-btn-hover-bg: var(--cmi-delta); --bs-btn-hover-border-color: var(--cmi-delta); }
.cmi-actions { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: flex-end; min-width: 150px; }
.cmi-actions form { margin: 0; }
@media (min-width: 992px) { .cmi-subnav { flex-wrap: wrap; overflow: visible; } }
.cmi-panel-head form.cmi-toolbar { flex-wrap: nowrap; }
.cmi-panel-head form.cmi-toolbar .form-control { min-width: 0; width: 260px; max-width: 60vw; }
html body table.cmi-table > thead .cmi-sticky-col { font-weight: 600; }