/* Area C – Approvals, month close, team today (docs/AREAS.md). Only page-specific rules – shared look comes from theme.css / app.css / components.css.
   Calm cards with light borders after the mockup; colour only for status and the main action (no thick coloured left borders, no all-caps). */

/* ---------- Approvals ---------- */
.apv-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.apv-list { overflow: hidden; }
.apv-listhead { display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.apv-listhead label { gap: 8px; cursor: pointer; }
.apv-item { display: grid; grid-template-columns: 22px 40px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.apv-item:last-child { border-bottom: 0; }
.apv-check { padding-top: 10px; } .apv-check input { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }
.apv-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.apv-ic .icon { stroke: currentColor; }
.apv-ic-absence { background: var(--st-planned-bg); color: var(--st-planned); }
.apv-ic-month_close { background: var(--st-done-bg); color: var(--st-done); }
.apv-ic-correction { background: var(--st-progress-bg); color: var(--st-progress); }
.apv-main { min-width: 0; display: grid; gap: 8px; }
.apv-title { display: flex; align-items: baseline; gap: 6px 8px; flex-wrap: wrap; }
.apv-title b { font-weight: 700; }
.apv-reason { margin: 0; color: var(--text-2); font-style: italic; overflow-wrap: anywhere; }
.apv-diff { display: grid; grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: center; }
.apv-side, .apv-effect { display: grid; gap: 2px; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); min-width: 0; }
.apv-side b, .apv-effect b { font-variant-numeric: tabular-nums; font-weight: 700; }
.apv-side.new { background: var(--surface); border-color: var(--border-strong); }
.apv-side.new .chg { color: var(--primary); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.apv-side.old .chg { color: var(--text-3); text-decoration: line-through; }
.apv-arrow { color: var(--text-3); display: grid; place-items: center; }
.apv-effect b.neg { color: var(--danger); }
.apv-arbzg { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.apv-arbzg .st .icon { width: 13px; height: 13px; }
.apv-facts { display: flex; gap: 6px 16px; flex-wrap: wrap; align-items: center; font-size: var(--fs-sm); color: var(--text-2); }
.apv-facts > span { display: inline-flex; align-items: center; gap: 6px; }
.apv-facts .warn { color: var(--warning); } .apv-facts .ok { color: var(--success); } .apv-facts b.neg { color: var(--danger); }
.apv-act { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.btn.apv-reject { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }
.btn.apv-reject:hover { background: var(--danger-bg); }

/* ---------- Month close ---------- */
.mc-month .input { width: 170px; }
.mc-banner { margin-bottom: var(--gap); }
.mc-grid { align-items: start; margin-bottom: var(--gap); }
.mc-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mc-kpis > div { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); }
.mc-kpis b { font-size: 22px; font-weight: 720; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mc-kpis b.neg { color: var(--danger); } .mc-kpis b.pos { color: var(--success); }
.mc-abs { margin: 12px 0 0; }
.mc-checks, .mc-steps, .mc-dec, .mc-sub { list-style: none; margin: 0; padding: 0; }
.mc-checks { display: grid; gap: 12px; }
.mc-check { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; }
.mc-check-ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--st-done-bg); color: var(--st-done); }
.mc-check-ic .icon { stroke: currentColor; }
.mc-check.bad .mc-check-ic { background: var(--st-cancelled-bg); color: var(--st-cancelled); }
.mc-check.warn .mc-check-ic { background: var(--st-progress-bg); color: var(--st-progress); }
.mc-sub { margin-top: 6px; display: grid; gap: 4px; font-size: var(--fs-sm); }
.mc-sub li { overflow-wrap: anywhere; }
.mc-steps { display: grid; gap: 0; }
.mc-step { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding-bottom: 16px; position: relative; }
.mc-step:not(:last-child)::after { content: ''; position: absolute; left: 14px; top: 32px; bottom: 2px; width: 2px; background: var(--border); }
.mc-step-n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: var(--fs-sm); background: var(--surface-3); color: var(--text-3); }
.mc-step.done .mc-step-n { background: var(--st-done-bg); color: var(--st-done); } .mc-step.done .mc-step-n .icon { stroke: currentColor; }
.mc-step.next .mc-step-n { background: var(--primary-soft); color: var(--primary); }
.mc-reopen { margin-top: 4px; }
.mc-dec { display: grid; gap: 10px; } .mc-dec li { padding-bottom: 10px; border-bottom: 1px solid var(--border); } .mc-dec li:last-child { border-bottom: 0; padding-bottom: 0; }
.mc-ack { gap: 8px; margin: 10px 0; cursor: pointer; }

/* ---------- Team today ---------- */
.tt-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: var(--gap); }
.tt-kpi .val small { font-size: 15px; font-weight: 550; color: var(--text-3); }
.tt-kpi .meta.bad { color: var(--danger); }
.tt-kpi-ic { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; }
.tt-kpi-ic .icon { stroke: currentColor; width: 18px; height: 18px; }
.tt-kpi-ic.ok { background: var(--st-done-bg); color: var(--st-done); } .tt-kpi-ic.warn { background: var(--st-progress-bg); color: var(--st-progress); } .tt-kpi-ic.bad { background: var(--st-cancelled-bg); color: var(--st-cancelled); }
.tt-grid { align-items: start; }
.tt-person { display: inline-flex; align-items: center; gap: 10px; min-width: 0; } .tt-person > span:last-child { display: grid; min-width: 0; }
.tt-stale { color: var(--warning); }
.tt-open { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tt-open-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 6px; border-radius: var(--radius); color: inherit; text-decoration: none; }
a.tt-open-row:hover { background: var(--surface-2); }
.tt-open-row > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.tt-open-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); }
.tt-open-ic .icon { stroke: currentColor; }
.tt-open-list { display: grid; gap: 2px; font-size: var(--fs-sm); }

@media (max-width: 1100px) { .apv-diff { grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr); } .apv-effect { grid-column: 1 / -1; } }
@media (max-width: 900px) { .tt-grid, .mc-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
  .apv-item { grid-template-columns: 22px minmax(0, 1fr); gap: 10px 12px; padding: 14px; }
  .apv-ic { display: none; }
  .apv-act { grid-column: 1 / -1; justify-content: flex-start; }
  .apv-diff { grid-template-columns: minmax(0, 1fr); } .apv-arrow { display: none; }
  .tt-kpis, .mc-kpis { grid-template-columns: minmax(0, 1fr); }
  .mc-month .input { width: 100%; }
}