/* Committee area: small additions for the "Committee menu" drawer (js/admin-drawer.js).
   The drawer itself is styled by css/portal.css, the same as the members menu. */

/* Red counts in the drawer, e.g. 2 support requests waiting */
.drawer-nav .count { margin-left: .4rem; }
.drawer-group summary .drawer-group-count { margin-left: auto; }
.drawer-group summary .drawer-group-count:not([hidden]) + .chev { margin-left: .5rem; }

/* Sign out and the help line at the bottom of the drawer */
.drawer-foot .btn-outline-ink { min-height: 44px; }

/* Small phones: "My member area" is in the drawer (Help), so leave the top bar room for the menu button */
@media (max-width: 575px) {
    .app-top .app-top-actions a[href="portal.html"] { display: none; }
}

/* ---------- Overview: what needs doing (js/admin-overview.js) ---------- */
.ov-lead { color: var(--muted); margin: -.25rem 0 1.25rem; }
.ov-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.ov-card { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; text-align: left; background: #fff;
    border: 1px solid var(--line); border-left: 5px solid var(--green); border-radius: 10px; padding: 1rem 1.1rem; min-height: 132px;
    font: inherit; color: var(--ink); cursor: pointer; }
.ov-card:hover, .ov-card:focus-visible { border-color: #9CA3AF; border-left-color: var(--green); }
.ov-urgent:not(.ov-done) { border-left-color: var(--red); }
.ov-n { font-size: 2.1rem; font-weight: 700; line-height: 1.1; color: var(--ink); min-height: 2.3rem; }
.ov-done .ov-n { width: 2.3rem; height: 2.3rem; border-radius: 50%; background: #E7F3E8
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233F8344' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 60% no-repeat; }
.ov-k { font-weight: 600; font-size: 1.02rem; }
.ov-note { color: var(--muted); font-size: .88rem; line-height: 1.4; }
.ov-h { font-size: 1.15rem; margin: 2rem 0 .8rem; }
.ov-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.ov-actions .btn { min-height: 44px; }
.ov-rules { margin-top: 2rem; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 1.1rem 1.25rem; }
.ov-rules ul { margin: 0 0 .75rem; padding-left: 1.2rem; }
.ov-rules li { margin-bottom: .35rem; }
@media (max-width: 991px) { .ov-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .ov-grid { grid-template-columns: 1fr; } .ov-card { min-height: 0; } }

/* The two-step sign-in offer: a compact strip instead of a big card, so the Overview stays on the first screen */
.mfa-offer { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .25rem 1rem; padding: .8rem 1rem !important;
    border-left: 4px solid var(--leaf, #5EB164) !important; }
.mfa-offer h2 { grid-column: 1; margin: 0; font-size: 1rem; }
.mfa-offer p { grid-column: 1; margin: 0 !important; font-size: .88rem; color: var(--muted); }
.mfa-offer .btn { grid-column: 2; grid-row: 1 / span 2; white-space: nowrap; }
@media (max-width: 575px) {
    .mfa-offer { grid-template-columns: 1fr; }
    .mfa-offer p { display: none; }
    .mfa-offer .btn { grid-column: 1; grid-row: auto; justify-self: start; margin-top: .4rem; }
}

/* =========================================================
   Committee "Today" page (October 2026 redesign)
   ========================================================= */
.today .td-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .8rem 1.2rem; margin-bottom: 1.2rem; }
.today .td-head h1 { margin-bottom: .2rem; }
.today .ov-lead { margin: 0; }
.td-acts { display: flex; flex-wrap: wrap; gap: .5rem; }
.td-acts .btn { border-radius: 999px; min-height: 44px; font-weight: 700; padding-inline: 1.1rem; }
.td-top { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.2rem; align-items: stretch; margin-bottom: 1.2rem; }
.td-inbox { margin: 0; padding: 0; border-radius: 16px; overflow: hidden; }
.td-inbox-head { padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--line-2); }
.td-inbox-head h2 { margin: 0 0 .2rem; }
.td-cases { list-style: none; margin: 0; padding: 0; }
.td-case { display: grid; grid-template-columns: 44px minmax(0, 1fr) 170px auto; gap: 1rem; align-items: center; padding: 1rem 1.3rem; border-bottom: 1px solid var(--line-2); }
.td-case-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #FDF0DC; color: #A0520B; }
.td-case.urgent .td-case-ic { background: #FBE7E7; color: #B23B35; }
.td-case-what strong { display: block; font-family: var(--font-display); }
.td-case-when { font-size: .9rem; }
.td-case.urgent .td-case-when strong { color: #B23B35; }
.td-case-when span { color: var(--muted); }
.td-late { color: #B23B35; }
.td-bar { display: block; height: 6px; border-radius: 999px; background: #EEF1EA; margin-top: .35rem; overflow: hidden; }
.td-bar > span { display: block; height: 100%; border-radius: inherit; background: #3F8344; }
.td-bar.amber > span { background: #CC9E4E; }
.td-bar.red > span { background: #B23B35; }
.btn-urgent { background: #B23B35; border-color: #B23B35; color: #fff; border-radius: 999px; font-weight: 700; padding-inline: 1rem; }
.btn-urgent:hover { background: #9C312C; color: #fff; }
.td-case .btn { border-radius: 999px; min-height: 38px; }
/* the menu counts, shown as rows under the cases */
.td-inbox .ov-grid { display: block; }
.td-inbox .ov-card { width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "n k go" "n note go"; column-gap: 1rem; align-items: center;
    border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; padding: .9rem 1.3rem; min-height: 0; background: #fff; }
.td-inbox .ov-card::after { content: "Open"; grid-area: go; border: 1px solid var(--line-2); border-radius: 999px; padding: .35rem .9rem; font-weight: 700; font-size: .85rem; color: var(--green); }
.td-inbox .ov-card:hover { background: #F7F9F4; }
.td-inbox .ov-n { grid-area: n; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #E0EEEF; color: #1B454B; font-size: 1.1rem; font-weight: 800; }
.td-inbox .ov-k { grid-area: k; font-weight: 700; font-family: var(--font-display); }
.td-inbox .ov-note { grid-area: note; color: var(--muted); font-size: .88rem; }
.td-inbox .ov-card.ov-done, .td-inbox .ov-card.td-hide { display: none; }
.td-clear { margin: 0; padding: 1.4rem 1.3rem; color: #2F6B34; font-weight: 700; }

.td-fund { position: relative; overflow: hidden; border-radius: 16px; color: #fff; padding: 1.5rem 1.4rem 1.2rem;
    background: linear-gradient(150deg, #1B454B, #10292D); }
.td-fund::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px;
    background: repeating-linear-gradient(90deg, #393B32 0 14px, #BD4A44 14px 28px, #00753A 28px 42px, #CC9E4E 42px 56px); }
.td-fund h2 { font-size: 1rem; font-weight: 600; color: #CFE0DC; margin: .2rem 0 .6rem; }
.td-fund-bal { margin: 0 0 1.1rem; }
.td-fund-bal strong { display: block; font-family: var(--font-display); font-size: clamp(2rem, 3.6vw, 2.6rem); line-height: 1.1; }
.td-fund-bal span { color: #CFE0DC; font-size: .88rem; }
.td-old { color: var(--mahindi); font-style: normal; font-weight: 700; }
.td-meter { position: relative; height: 16px; border-radius: 999px; background: rgba(255, 255, 255, .14); margin: 0 0 2.2rem; }
.td-meter-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: linear-gradient(90deg, #3F8344, #7DC383); }
.td-meter-fill.low { background: linear-gradient(90deg, #B23B35, #E07A73); }
.td-mark { position: absolute; top: -4px; bottom: -4px; width: 2px; background: #fff; }
.td-mark em { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-style: normal; font-size: .76rem; color: #CFE0DC; }
.td-mark.target em { left: auto; right: 0; transform: none; }
.td-fund-warn { background: rgba(0, 0, 0, .25); border-left: 3px solid #E07A73; border-radius: 8px; padding: .7rem .8rem; font-size: .9rem; margin: 0 0 1rem; }
.td-fund-none { color: #E3ECEA; }
.td-fund-none code { color: var(--mahindi); }
.td-fund-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.td-fund-stats div { background: rgba(255, 255, 255, .08); border-radius: 10px; padding: .6rem .7rem; }
.td-fund-stats span { display: block; font-size: .76rem; color: #CFE0DC; line-height: 1.25; }
.td-fund-stats strong { font-family: var(--font-display); font-size: 1.1rem; }
.td-fund-set { margin-top: 1rem; }
.td-fund-set summary { cursor: pointer; font-weight: 700; color: var(--mahindi); }
.td-fund-set .form-label { color: #E3ECEA; font-size: .85rem; }

.td-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.2rem; }
.td-kpi { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; text-align: left; background: #fff; border: 1px solid var(--line-2); border-radius: 16px; padding: 1rem 1.1rem; color: var(--ink); }
button.td-kpi:hover { border-color: var(--green); }
.td-kpi-k { display: flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .88rem; }
.td-kpi-k svg { color: var(--green); }
.td-kpi strong { font-family: var(--font-display); font-size: 1.7rem; line-height: 1.2; }
.td-kpi-note { color: var(--muted); font-size: .85rem; }
.td-kpi .td-bar { width: 100%; margin-top: .5rem; }

.td-bottom { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.td-bottom .panel { margin: 0; border-radius: 16px; }
.td-bottom .ov-rules { margin: 0; border-radius: 16px; }
.td-dates { list-style: none; margin: 0 0 .8rem; padding: 0; }
.td-dates li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: .9rem; align-items: center; padding: .7rem 0; border-bottom: 1px solid var(--line-2); }
.td-date { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 52px; border-radius: 12px; background: #F4F6EF; font-size: .78rem; color: var(--muted); line-height: 1.1; }
.td-date strong { font-size: 1.15rem; color: var(--ink); font-family: var(--font-display); }
.td-dates li > div strong { display: block; }
.td-days { font-size: .82rem; font-weight: 700; padding: .25rem .65rem; border-radius: 999px; background: #F4F6EF; color: var(--muted); white-space: nowrap; }
.td-days.soon { background: #FDF0DC; color: #8A4A0B; }

/* welfare requests: list or board */
.rmode { display: inline-flex; border: 1px solid var(--line-2); border-radius: 999px; overflow: hidden; background: #fff; }
.rmode button { border: 0; background: none; padding: .45rem 1rem; font-weight: 700; color: var(--muted); min-height: 40px; }
.rmode button[aria-pressed="true"] { background: #1B454B; color: #fff; }
.rboard { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.rb-col { background: #F4F6EF; border-radius: 14px; padding: .8rem; }
.rb-col h2 { font-size: 1rem; display: flex; align-items: center; justify-content: space-between; margin: .2rem .2rem .7rem; }
.rb-card { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; width: 100%; text-align: left; background: #fff; border: 1px solid var(--line-2);
    border-left: 4px solid #CC9E4E; border-radius: 10px; padding: .75rem .85rem; margin-bottom: .6rem; color: var(--ink); }
.rb-card.urgent { border-left-color: #B23B35; }
.rb-col:last-child .rb-card { border-left-color: #3F8344; }
.rb-card:hover { border-color: var(--green); }
.rb-when { font-size: .85rem; margin-top: .2rem; }
.rb-card .td-bar { width: 100%; }
#r-list .panel.flash { box-shadow: 0 0 0 3px #CC9E4E; transition: box-shadow .3s; }

@media (max-width: 1199px) {
    .td-top, .td-bottom { grid-template-columns: 1fr; }
    .td-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .td-case { grid-template-columns: 40px minmax(0, 1fr); }
    .td-case-when { grid-column: 2; }
    .td-case .btn { grid-column: 2; justify-self: start; }
    .td-kpis, .rboard { grid-template-columns: 1fr; }
    .td-fund-stats { grid-template-columns: 1fr 1fr; }
}
.td-meter { margin-top: 1.9rem; }
.td-mark.target em { top: auto; bottom: 22px; }
.rb-col h2 .count { background: #fff; color: var(--ink); border: 1px solid var(--line-2); }