/* Board MIS — the Business Overview layout, scoped to #app.
   style.css is shared with the Internal MIS and defines .card, .g2 and
   .tot differently; scoping under #app stops the two fighting, and keeps
   the passcode gate (which sits outside #app) on the shared styles. */
#app *, #app *::before, #app *::after{box-sizing:border-box;margin:0;padding:0}
#app{--red:#E62420;--red-dk:#B01C19;--red-lt:#FCE8E7;--blue:#456EB5;--blue-lt:#EAF0FA;--blue-dk:#2E4F8A; --green:#1E8449;--green-lt:#D5F5E3;--amber:#D68910;--amber-lt:#FEF9E7;--teal:#0E6655;--purple:#6C3483; --text:#1A1A1A;--muted:#6B7280;--border:#E5E7EB;--bg:#F7F8FA;--card:#FFF; --sh:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04)}
#app{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.55}
#app .wrap{max-width:1180px;margin:0 auto;padding:0 1.5rem 3rem}
#app .hero{background:var(--red);color:#fff;padding:26px 0 70px;margin-bottom:0}
#app .hero-in{max-width:1180px;margin:0 auto;padding:0 1.5rem}
#app .hero-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
#app .hero-top img{height:40px;width:auto;max-width:100%}
#app .hero-meta{text-align:right;font-size:12px;opacity:.85;line-height:1.4}
#app .hero-h1{font-size:26px;font-weight:800;letter-spacing:-.4px;margin-bottom:3px}
#app .hero-sub{font-size:13.5px;opacity:.85;max-width:760px}
#app .kband{position:relative;z-index:2;display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:-46px 0 1.5rem}
#app .kb{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:14px 16px; box-shadow:0 6px 18px rgba(0,0,0,.10),0 1px 3px rgba(0,0,0,.06)}
#app .kb-l{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
#app .kb-v{font-size:23px;font-weight:800;line-height:1.1;color:var(--text)}
#app .kb-s{font-size:10.5px;color:var(--muted);margin-top:3px}
@media(max-width:900px){
#app .kband{grid-template-columns:repeat(2,1fr)}
}
#app .sec{margin-bottom:1.5rem}
#app .sec-h{display:flex;align-items:baseline;gap:10px;margin-bottom:.75rem}
#app .sec-h h2{font-size:15px;font-weight:700;letter-spacing:-.2px;white-space:nowrap}
#app .sec-h .n{font-size:11.5px;color:var(--muted)}
#app .sec-h .ln{flex:1;height:1px;background:var(--border)}
#app .card{background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:var(--sh);overflow:hidden}
#app .card-h{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:10px}
#app .card-t{font-size:12.5px;font-weight:600}
#app .card-s{font-size:11px;color:var(--muted)}
#app .card-b{padding:14px 16px}
#app .g2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#app .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:900px){
#app .g2, #app .g3{grid-template-columns:1fr}
}
#app .hl{background:var(--card);border:1px solid var(--border);border-left:4px solid var(--green); border-radius:0 10px 10px 0;padding:15px 18px;box-shadow:var(--sh)}
#app .hl.amber{border-left-color:var(--amber)}
#app .hl.blue{border-left-color:var(--blue)}
#app .hl-t{font-size:13px;font-weight:700;margin-bottom:5px}
#app .hl p{font-size:13px;color:#374151;line-height:1.6}
#app .t{width:100%;border-collapse:collapse}
#app .t th{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted); padding:9px 12px;background:var(--bg);border-bottom:1px solid var(--border);text-align:left;white-space:nowrap}
#app .t th:not(:first-child){text-align:right}
#app .t td{padding:9px 12px;border-bottom:1px solid var(--border);font-size:12.5px}
#app .t td:not(:first-child){text-align:right}
#app .t tr:last-child td{border-bottom:none}
#app .nm{font-weight:600}
#app .pos{color:var(--text);font-weight:600}
#app .neg{color:var(--text);font-weight:600}
#app .tot{background:var(--blue-lt);font-weight:700}
#app .chip{display:inline-block;font-size:10px;font-weight:700;padding:2px 7px;border-radius:4px;white-space:nowrap}
#app .c-g{background:var(--bg);color:var(--text)}
#app .c-a{background:var(--bg);color:var(--text)}
#app .c-r{background:var(--bg);color:var(--text)}
#app .c-b{background:var(--blue-lt);color:var(--blue-dk)}
#app .c-n{background:var(--bg);color:var(--muted)}
#app .rg{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
@media(max-width:900px){
#app .rg{grid-template-columns:repeat(2,1fr)}
}
#app .rc{background:var(--card);border:1px solid var(--border);border-radius:9px;padding:12px 10px;text-align:center;box-shadow:var(--sh)}
#app .rc-v{font-size:23px;font-weight:800;line-height:1.1}
#app .rc-l{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-top:3px}
#app .rc-d{font-size:10px;margin-top:4px}
#app .pl{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
@media(max-width:900px){
#app .pl{grid-template-columns:repeat(2,1fr)}
}
#app .pc{background:var(--card);border:1px solid var(--border);border-radius:9px;padding:12px;box-shadow:var(--sh);position:relative}
#app .pc-d{font-size:10px;font-weight:700;color:var(--red);text-transform:uppercase;letter-spacing:.05em}
#app .pc-n{font-size:13px;font-weight:700;margin:3px 0 2px}
#app .pc-l{font-size:11px;color:var(--muted)}
#app .cw{position:relative;width:100%}
#app .ft{margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--border); display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:11px;color:var(--muted)}
#app .fn{background:var(--card);border:1px solid var(--border);border-top:4px solid var(--text);border-radius:10px;box-shadow:var(--sh);padding:14px 20px}
#app .fn-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:2px}
#app .fn-t{font-size:15px;font-weight:800;letter-spacing:-.2px}
#app .fn-s{font-size:11px;color:var(--muted)}
#app .fn-i{display:flex;gap:11px;padding:7px 0;border-bottom:1px solid var(--border)}
#app .fn-i:last-child{border-bottom:none;padding-bottom:0}
#app .fn-n{width:20px;height:20px;border-radius:50%;background:var(--text);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
#app .fn-i p{font-size:12.5px;color:#374151;line-height:1.5}
#app .fn-i p b{color:var(--text)}
@media print{
#app{background:#fff}
#app .card, #app .rc, #app .pc, #app .hl{break-inside:avoid}
}