/* LGP Directories: components on top of the Bill Pay Manager visual system (bp.css). No white surfaces. */
/* page heading */
.pagehead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 16px;margin:0 0 6px}
.pagehead h1{margin-bottom:14px}.pagehead h1 small{display:block;font-size:13px;font-weight:500;color:#33475a;letter-spacing:0;margin-top:4px}
.pagehead p{margin:0 0 14px}.lead{color:#33475a;margin:-6px 0 16px;max-width:900px}
/* legacy class adapters so the older pages share the look */
.panel{background:var(--rd3-card);border:1px solid var(--rd3-edge);border-top:3px solid var(--lgp-blue);border-radius:12px;box-shadow:0 1px 2px rgba(0,46,99,.10),0 8px 22px rgba(0,46,99,.12);padding:18px 20px;margin:0 0 18px;min-width:0;overflow-x:auto}
.panelhead h2,.panel>h2:first-child{color:var(--lgp-navy);padding-bottom:8px;border-bottom:1px solid #b4c9e3;margin:0 0 12px}
.two{display:grid;gap:16px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}.two>.panel:nth-child(2){background:var(--rd3-card-pink);border-color:#d8b5bb;border-top-color:#c2455c}
@media(max-width:900px){.two{grid-template-columns:1fr}}
.banner,.banner-warn{background:#f6dfa8;border:1px solid #e3c37a;border-left:5px solid #b45309;color:#5e3100;padding:10px 14px;border-radius:8px;margin:0 0 14px}
.okmsg{background:#c6e8d1;border:1px solid #9fd2b0;color:#0f4d25;padding:6px 12px;border-radius:8px;display:inline-block;margin:0 0 12px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:16px;background:var(--rd3-input);border:1px solid var(--rd3-edge);color:var(--lgp-navy);text-decoration:none;font-size:13px;margin:2px}
a.chip:hover{background:var(--rd3-hover)}.chip.on{background:var(--lgp-navy);border-color:var(--lgp-navy);color:#fff}
.pillbtn,button.pillbtn,a.pillbtn,.stack button,form.stack>button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:7px 14px;border-radius:8px;border:1px solid var(--lgp-navy);background:var(--lgp-navy);color:#fff;font:600 13.5px var(--lgp-font);text-decoration:none;cursor:pointer;box-shadow:0 2px 6px rgba(0,46,99,.18)}
.pillbtn:hover,.stack button:hover{background:var(--lgp-blue-dark)}.pillbtn.exp,.pillbtn.alt{background:var(--rd3-input);color:var(--lgp-navy);border-color:#9fb8d6;box-shadow:none}.pillbtn.exp:hover,.pillbtn.alt:hover{background:var(--rd3-hover)}
.pillbtn[disabled],button[disabled]{background:#7d8fa6!important;border-color:#7d8fa6!important;color:#eef2f7!important;cursor:not-allowed;box-shadow:none}
.stack{display:flex;flex-direction:column;gap:2px}.stack label{display:block}.stack label input,.stack label select,.stack label textarea{margin-top:4px}
.formpanel{max-width:none}
.filters{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:flex-end}.filters label{margin:0;font-size:12.5px}.filters label input,.filters label select{margin-top:4px;min-width:140px}
.filters>div,.filters>label{min-width:140px}
.tag{display:inline-block;padding:1px 7px;border-radius:4px;border:1px solid #b5c0cf;background:#d3dae4;color:#2f3b4a;font:600 11.5px/1.55 var(--lgp-font);white-space:nowrap}
.acc-public{background:#c6e8d1;color:#0f4d25;border-color:#9fd2b0}.acc-login{background:#f6dfa8;color:#5e3100;border-color:#e3c37a}.acc-member_only,.acc-tos_forbids{background:#f3c4c8;color:#7a000a;border-color:#e09aa1}
.st-managed{background:#ddd3f6;color:#3f1786;border-color:#c2b2ee}
.missing{color:#8f000e;font-style:italic}.napv{font-weight:600;user-select:all}.nowrap{white-space:nowrap}.small{font-size:12px}
.compliance{background:#f6dfa8;border:1px solid #e3c37a;border-left:5px solid #b45309;border-radius:8px;padding:9px 14px;margin:0 0 14px;font-size:13px;line-height:1.5;color:#3d2400}
pre.joblog{background:#0f1b2a;color:#d6e2f0;padding:10px;border-radius:8px;max-height:60vh;overflow:auto;font-size:12px;white-space:pre-wrap}
.kpis{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin:0 0 16px}
.kpis .kpi{display:block;text-decoration:none;color:inherit;border-radius:12px;padding:14px 16px;border:1px solid #93b1d6;border-left:4px solid var(--lgp-navy);background:linear-gradient(135deg,#bcd2ea 0,#a9c4e2 100%);box-shadow:0 1px 2px rgba(0,46,99,.10),0 8px 22px rgba(0,46,99,.12)}
.kpis .kpi:nth-child(even){background:linear-gradient(135deg,#e9cdd2 0,#dfbcc3 100%);border-color:#cfa2aa;border-left-color:#b3263f}
.kpis .kpi b{display:block;font-size:26px;line-height:1.15;color:#001f45}.kpis .kpi span{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#1f3550;font-weight:600}
table.grid{display:table}
/* tables */
.tbl td.num,.tbl th.num{text-align:right;white-space:nowrap}.tbl td.wrap{white-space:normal;min-width:220px;max-width:460px}
.tbl td.url{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbl th{white-space:nowrap}.tbl th .th-sort{padding:8px 10px}.tbl th:has(.th-sort){padding:0}
.tbl td{padding:8px 10px}.tbl tr.row-bad td{background:var(--rd3-rose)!important}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* KPI tiles: Bill Pay .grid>.lgp-card.kpi with link + sub line */
.grid.kpi-grid{grid-template-columns:repeat(auto-fit,minmax(165px,1fr));margin:0 0 18px}
a.lgp-card.kpi{text-decoration:none;color:inherit;display:block}a.lgp-card.kpi:hover{filter:brightness(1.03)}
.kpi .sub{font-size:12px;color:#1f3550;margin-top:2px}
.kpi.live .v::after{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:#16a34a;margin-left:8px;vertical-align:middle;animation:pulse 1.6s infinite}
/* badges (frontier / stage) */
.b-ok{background:#c6e8d1;color:#0f4d25;border-color:#9fd2b0}.b-run{background:#c3d6ef;color:#08325f;border-color:#9ab9e0}
.b-warn{background:#f6dfa8;color:#5e3100;border-color:#e3c37a}.b-bad{background:#f3c4c8;color:#7a000a;border-color:#e09aa1}
.b-new{background:#ddd3f6;color:#3f1786;border-color:#c2b2ee}.b-off{background:#d3dae4;color:#2f3b4a;border-color:#b5c0cf}
.b-dec{background:#ecbec2;color:#7a000a;border-color:#d39197}
/* live status strip */
.live-strip{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;padding:10px 14px;border-radius:10px;margin:0 0 16px;font-size:14px;border:1px solid #9fd2b0;background:#c9e6d2;color:#0f3d21}
.live-strip.off{background:var(--rd3-rose);border-color:#cf9198;color:#4a0a12}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#16a34a;margin-right:6px;vertical-align:middle;animation:pulse 1.6s infinite}
.live-strip.off .dot{background:#b91c1c;animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(22,163,74,.55)}70%{box-shadow:0 0 0 8px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}
@media(prefers-reduced-motion:reduce){.dot,.kpi.live .v::after{animation:none}}
.htmx-request .refreshing{opacity:1}.refreshing{opacity:.55;font-size:12px}
/* progress bar */
.bar{height:8px;border-radius:5px;background:#bcd2ea;overflow:hidden;min-width:90px}.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--lgp-navy),var(--lgp-blue))}
.bar.red>i{background:linear-gradient(90deg,#b3263f,var(--lgp-red))}
.score{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:26px;padding:0 8px;border-radius:7px;color:#fff;font-weight:700;font-size:13px}
.score.s5{background:#15803d}.score.s4{background:#4d7c0f}.score.s3{background:#b45309}.score.s2{background:#c2410c}.score.s1{background:#7d8fa6}
/* activity feed */
.feed{list-style:none;margin:0;padding:0;max-height:520px;overflow:auto}
.feed li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;padding:8px 2px;border-bottom:1px solid #c9d9ec;font-size:13.5px}
.feed li:last-child{border-bottom:0}.feed time{color:#33475a;font-size:12px;white-space:nowrap}.feed .who{font-weight:600;color:var(--lgp-navy)}
.feed .ev{display:inline-block;margin-right:6px}
/* charts */
.chart-box{position:relative;height:260px}.chart-box.sm{height:230px}
.charts{margin:0 0 18px}
/* module cards on overview */
.mod-grid{display:grid;gap:18px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}@media(max-width:900px){.mod-grid{grid-template-columns:1fr}}
.mod-grid>.lgp-card:nth-child(2){background:var(--rd3-card-pink);border-color:#d8b5bb;border-top-color:#c2455c}
.mini-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:8px 0 14px}
.mini-kpis div{background:rgba(255,255,255,.35);border:1px solid var(--rd3-edge);border-radius:9px;padding:8px 10px}
.mini-kpis b{display:block;font-size:20px;color:#001f45}.mini-kpis span{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:#1f3550;font-weight:600}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
/* kv + forms */
dl.kv{grid-template-columns:minmax(120px,190px) 1fr}dl.kv dd{word-break:break-word}
.form-grid{display:grid;gap:4px 16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.form-grid .full{grid-column:1/-1}
textarea{min-height:64px;resize:vertical}
.ver{border:1px solid var(--rd3-edge);border-radius:10px;padding:10px 14px;margin:0 0 10px;background:var(--rd3-row-blue)}
.ver:nth-child(even){background:var(--rd3-row-pink)}.ver h4{margin:0 0 6px;color:var(--lgp-navy);font-size:14px}
.chg{color:#7a000a;font-weight:600}
code,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}
pre.api{background:#cddcee;border:1px solid var(--rd3-edge);border-radius:8px;padding:10px;white-space:pre-wrap;font-size:12.5px}
/* kit */
.kit{line-height:1.55}.kit h2{margin-top:1.6em;border-bottom:1px solid #b4c9e3;padding-bottom:.2em}
.kit table{border-collapse:collapse;width:100%;margin:.6em 0 1.2em;font-size:.9em}.kit th,.kit td{border:1px solid var(--rd3-edge);padding:.35em .5em;vertical-align:top;text-align:left}
.kit th{background:var(--rd3-head)}.kit td{background:var(--rd3-row-blue)}.kit tr:nth-child(even) td{background:var(--rd3-row-pink)}
.kit pre{white-space:pre-wrap;background:#cddcee;border:1px solid var(--rd3-edge);border-radius:8px;padding:.7em;font-size:.92em}
.kitlink{border-left:4px solid var(--lgp-red)}
.lgp-btn-sm{min-height:32px;padding:5px 11px;font-size:13px}
.pager{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0}
@media(max-width:720px){.feed li{grid-template-columns:1fr;gap:2px}.subnav{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}.subnav a{white-space:nowrap}.kpis .kpi b,.kpi .v{font-size:22px}}
.tbl th:has(a.sortlink){padding:0}.tbl th a.sortlink{display:flex;gap:6px;align-items:center;padding:8px 10px;color:#001f45;text-decoration:none;font:600 12px var(--lgp-font);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.tbl th a.sortlink:hover,.tbl th.sorted{background:#a9c4e2}.tbl th a.sortlink::after{content:"↕";opacity:.55;font-size:11px}.tbl th.sorted a.sortlink::after{content:""}.sortarrow{color:var(--lgp-red);font-size:11px}
.filters .row{align-self:flex-end}
.filters>input,.filters>select{width:auto;min-width:160px;flex:1 1 160px}.filters>button{min-height:38px}
.two>.lgp-card:nth-child(2){background:var(--rd3-card-pink);border-color:#d8b5bb;border-top-color:#c2455c}
.two>.lgp-card{min-width:0}
@media(max-width:720px){.grid.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}.grid.kpi-grid .lgp-card.kpi{padding:12px}.kpi .v{font-size:21px}.kpi .l{font-size:10.5px}.chart-box{height:240px}}
a.lgp-btn{text-decoration:none}.tbl td.reason{min-width:420px;max-width:560px;white-space:normal}
.tbl td.reason{min-width:380px;max-width:520px}.tbl td.reason summary{cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:500px}