/* Group portal: the shop program's stylesheet (../app/css/app.css) with the group's colours and a few portal pieces. */
body.grp { --top: #0f1f3d; --top-ink: #f5f1e6; --accent: #1e3a6e; --accent-ink: #fff; --accent-soft: #e3e9f5; --gold: #d4a72c; --bg: #f3f4f7; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.grp { --accent: #6d8fd1; --accent-ink: #0b1426; --accent-soft: #18233a; --bg: #0c111b; --card: #141b29; --line: #232d40; --soft: #1a2333; } }
body.grp #top { background: linear-gradient(90deg, var(--top), color-mix(in srgb, var(--top) 80%, #1e3a6e)); border-bottom: 3px solid var(--gold); }
body.grp #top .brand img.own { background: #fff; padding: 2px; object-fit: contain; }
body.grp #side .sd-lab { margin: 12px 10px 4px; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
body.grp #side .sd-lock { background: var(--top); }

/* sign-in */
.g-lock .lock-card { border-top: 5px solid var(--gold); }
.g-tag { margin: 0 0 4px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: .75rem; color: var(--gold); }
.g-cos { display: flex; justify-content: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

/* company logo or icon in a round badge */
.g-logo { width: 34px; height: 34px; border-radius: 10px; object-fit: contain; background: #fff; border: 1px solid var(--line); flex-shrink: 0; }
.g-logo.ic { display: inline-grid; place-items: center; font-size: 1.1rem; background: color-mix(in srgb, var(--cc) 14%, var(--card)); border-color: color-mix(in srgb, var(--cc) 40%, transparent); }

/* change against the comparison period */
.g-ch { font-weight: 700; font-size: .82rem; white-space: nowrap; } .g-ch.up { color: var(--ok); } .g-ch.down { color: var(--bad); } .g-ch.flat { color: var(--muted); }
.vz-hero .g-ch.up { color: #86efac; } .vz-hero .g-ch.down { color: #fca5a5; }

/* the group hero */
body.grp .vz-hero { background: linear-gradient(135deg, var(--top), color-mix(in srgb, var(--top) 55%, #24467f)); border-bottom: 4px solid var(--gold); }
.g-hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 18px; position: relative; z-index: 1; margin-top: 10px; }
.g-hero-grid div small { opacity: .75; font-size: .72rem; } .g-hero-grid div b { display: block; font-size: 1.3rem; font-variant-numeric: tabular-nums; }

/* company cards */
.g-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); gap: 12px; margin-bottom: 14px; }
.g-card { text-align: left; background: var(--card); border: 1px solid var(--line); border-top: 5px solid var(--cc); border-radius: 16px; padding: 14px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px; color: inherit; font: inherit; min-width: 0; }
.g-card:hover { border-color: var(--cc); transform: translateY(-1px); }
.g-card .hd { display: flex; gap: 10px; align-items: center; } .g-card .hd b { display: block; font-size: 1.02rem; } .g-card .hd small { color: var(--muted); font-size: .8rem; }
.g-card .big { font-size: 1.55rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.g-card .mini { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; font-size: .8rem; } .g-card .mini span { color: var(--muted); display: block; font-size: .72rem; } .g-card .mini b { font-variant-numeric: tabular-nums; }
.g-card .foot { display: flex; gap: 6px; flex-wrap: wrap; } .g-card .foot i { font-style: normal; font-size: .75rem; padding: 2px 8px; border-radius: 999px; background: var(--soft); }
.g-card .foot i.w { background: var(--warn-soft); color: var(--warn); } .g-card .foot i.b { background: var(--bad-soft); color: var(--bad); }
.g-card .vz-spark { width: 100%; height: 30px; } .g-card .vz-spark .ln { stroke: var(--cc); } .g-card .vz-spark .ar { fill: color-mix(in srgb, var(--cc) 14%, transparent); }

/* share of the group: one bar split by company */
.g-share { display: flex; height: 14px; border-radius: 999px; overflow: hidden; margin: 8px 0 6px; background: var(--soft); }
.g-share i { display: block; height: 100%; }
.g-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .8rem; } .g-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--cc); margin-right: 5px; vertical-align: -1px; }

/* company page header */
.g-co-head { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--cc) 92%, #000), color-mix(in srgb, var(--cc) 70%, #000)); color: #fff; margin-bottom: 14px; border-bottom: 4px solid var(--ca, var(--gold)); }
.g-co-head .g-logo { width: 52px; height: 52px; border-radius: 14px; }
.g-co-head h2 { font-size: 1.35rem; } .g-co-head small { opacity: .85; } .g-co-head .grow { flex: 1; min-width: 0; }
.g-co-head .btn { background: rgb(255 255 255 / .14); color: #fff; border-color: rgb(255 255 255 / .3); }

/* Group Desk */
.g-req { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; text-align: left; width: 100%; background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--cc); border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; box-shadow: var(--shadow); color: inherit; font: inherit; }
.g-req b { display: block; } .g-req small { color: var(--muted); } .g-req .amt { font-weight: 800; font-size: 1.1rem; text-align: right; white-space: nowrap; } .g-req .amt small { display: block; font-weight: 500; }
.g-req .urg { display: inline-block; font-size: .7rem; font-weight: 800; color: #fff; background: var(--bad); border-radius: 999px; padding: 1px 7px; margin-left: 6px; vertical-align: 1px; }
.g-steps { list-style: none; margin: 8px 0; padding: 0; border-left: 3px solid var(--line); }
.g-steps li { position: relative; padding: 4px 0 8px 16px; } .g-steps li::before { content: ""; position: absolute; left: -7px; top: 9px; width: 11px; height: 11px; border-radius: 50%; background: var(--accent); }
.g-steps li small { color: var(--muted); display: block; }
.g-status { display: inline-block; font-size: .78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--soft); }
.g-status.chair, .g-status.review { background: var(--warn-soft); color: var(--warn); } .g-status.approved { background: var(--accent-soft); color: var(--ok); } .g-status.rejected { background: var(--bad-soft); color: var(--bad); }

/* finance statement */
.g-stmt td.r, .g-stmt th.r { text-align: right; } .g-stmt tr.tot td { font-weight: 800; border-top: 2px solid var(--ink); } .g-stmt tr.sub td { font-weight: 700; background: var(--soft); }
.g-stmt tr.elim td { color: var(--muted); font-style: italic; } .g-stmt td.neg { color: var(--bad); }
.g-age { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; height: 10px; border-radius: 6px; overflow: hidden; }
.g-age i:nth-child(1) { background: #22c55e; } .g-age i:nth-child(2) { background: #eab308; } .g-age i:nth-child(3) { background: #f97316; } .g-age i:nth-child(4) { background: #dc2626; }

@media (max-width: 700px) { .g-req { grid-template-columns: 1fr; } .g-req .amt { text-align: left; } .g-co-head { flex-wrap: wrap; } }
@media print { #top, #side, .no-print { display: none !important; } body.grp { background: #fff; } .page { max-width: none; padding: 0; } }

@media (max-width: 600px) { body.grp #syncPill { display: none; } body.grp #top .chip { max-width: 28vw; padding: 7px 9px; } body.grp #brandName { display: none; } }

/* people, budgets, petty cash and operations: tiles on Group home, budget meters */
.g-erps { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 10px; }
.g-erp { display: flex; gap: 10px; align-items: flex-start; text-align: left; min-width: 0; padding: 12px; border-radius: 14px; border: 1px solid var(--line); border-left: 5px solid var(--accent); background: var(--card); color: var(--ink); }
.g-erp:not([disabled]) { cursor: pointer; } .g-erp:not([disabled]):hover { border-color: var(--accent); }
.g-erp[disabled] { opacity: 1; cursor: default; }
.g-erp.warn { border-left-color: var(--warn); } .g-erp.bad { border-left-color: var(--bad); }
.g-erp .ic { font-size: 1.5rem; } .g-erp > span:last-child { min-width: 0; display: grid; gap: 2px; }
.g-erp b { font-size: 1.35rem; font-variant-numeric: tabular-nums; } .g-erp small { color: var(--muted); overflow-wrap: anywhere; }
.g-budgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 12px; margin: 12px 0; }
.g-budcard { border-top: 4px solid var(--cc, var(--accent)); min-width: 0; }
.g-bud { margin: 8px 0; } .g-bud .hd { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; margin-bottom: 4px; }
.g-bud .hd > span:first-child { flex: 1 1 100%; font-weight: 700; } .g-bud .hd b { font-variant-numeric: tabular-nums; }
.g-bud .tag { margin-left: auto; }
.g-people .vz-kpis, .g-ops .vz-kpis, .g-petty .vz-kpis, .g-budgets .vz-kpis { grid-template-columns: repeat(auto-fit, minmax(min(150px, 45%), 1fr)); }
.xp-btns { display: inline-flex; gap: 6px; flex-wrap: wrap; }

/* the board report is a sheet of paper: always white with dark ink, in light and dark mode (it prints the same) */
.g-paper { background: #fff !important; color: #111 !important; border-color: #d9dde5 !important; padding: 28px 32px; max-width: 980px; margin-inline: auto; box-shadow: 0 18px 40px -22px rgb(0 0 0 / .55); color-scheme: light; }
.g-paper .g-board h3 { color: #111; }
.g-paper .g-board th { color: #111; }
@media (max-width: 600px) { .g-paper { padding: 16px 14px; } .g-paper table { font-size: 11px; } }