/* Project 360 («ملف المشروع الشامل») — scoped under .p360.
   Visual direction: the HOMEi 360 design language (navy hero, orange = warning only, one
   positive green, 12/8/999 radii, 11–21px type scale) with the HOMEi identity tokens
   #122E5F / #F28127 / #FFFFFF. Typography = the app's global IBM Plex Sans Arabic stack. */
.p360 { --navy:#122e5f; --navy-deep:#152f61; --navy-tint:#eef1f7; --orange:#F28127; --orange-deep:#a04c08; --orange-tint:#fdf0e4; --orange-tint-2:#fdf9f5; --orange-border:#f6dcc4;
  --good:#0f6b4f; --good-tint:#e6f2ed; --red:#b3261e; --red-tint:#fbe4e1; --red-border:#f2b8b8; --verify:#5546c9; --verify-tint:#eeebfd; --verify-border:#cfc8f7;
  --bg:#f2f5fa; --surface:#fff; --surface-2:#f7f9fc; --border:#e2e8f2; --border-soft:#edf1f7; --border-strong:#d7dfec;
  /* WCAG 1.4.3 (2026-09-09), light theme only — the dark values below are
     unchanged and already passed. --muted was #6b7d9e: 4.16:1 on white, 3.94:1
     on --surface-2 and as low as 3.5:1 on the health-badge tints, for text at
     10.5–13px that never qualifies as large. #586887 clears 4.5 on every
     background it sits on inside .p360 (4.62:1 at worst, on --red-tint). It now
     sits a hair darker than --t3 (5.61 vs 5.36) — the ladder t2 > t3 > muted >
     faint compresses at that step, which is the price of the threshold.
     --faint is only used by .p360-stat .n, on --surface and --orange-tint-2. */
  --ink:#122e5f; --t2:#3c4d70; --t3:#5a6b8c; --muted:#586887; --faint:#61718d; --on-navy-muted:#9db0d4; --on-navy-soft:#c8d6ee;
  --amber-tint:#fff5d6; --amber-ink:#7a5c00; --amber-border:#f5e3a0; --reserved-tint:#fff3c4; --override:#7a3e9d; --override-tint:#f1e8f7; --override-border:#d9c3ea;
  --good-solid-tint:#d7ecdf; --good-edge:#bfe6cc; --grey-tint:#e6e9f0; --avail-ink:#b9c4da; --hero-a:#122e5f; --hero-b:#1c3d78;
  /* ink that sits ON a solid accent fill — it flips with the accent, not with the surface */
  /* White on the identity orange is 2.64:1. The fill is the brand colour and
     does not move; the ink on it darkens instead — which is what the dark
     theme already does with this same token. */
  --on-navy:#fff; --on-orange:#3a1c02; --on-good:#fff; --on-navy-chip:rgba(255,255,255,.22);
  --shadow:rgba(18,46,95,.12); --shadow-focus:rgba(18,46,95,.25); --shadow-menu:rgba(18,46,95,.14); --shadow-soft:rgba(18,46,95,.08);
  color: var(--t2); font-size: 13px; display: flex; flex-direction: column; gap: 14px; max-width: 1560px; }
.p360 * { box-sizing: border-box; min-width: 0; }
.p360 a { color: inherit; }
.p360-nums, .p360-date { font-variant-numeric: tabular-nums; white-space: nowrap; }
.p360-ltr { direction: ltr; unicode-bidi: isolate; }
.p360 .c-red { color: var(--red); } .p360 .c-orange { color: var(--orange-deep); } .p360 .c-good { color: var(--good); } .p360 .c-muted { color: var(--muted); } .p360 .c-verify { color: var(--verify); } .p360 .c-navy { color: var(--navy); }

/* breadcrumb + switcher */
.p360-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.p360-crumbs a { color: var(--navy); text-decoration: none; font-weight: 600; }
.p360-crumbs span { margin: 0 6px; }
.p360-switch { display: inline-flex; align-items: center; gap: 8px; }
.p360-switch select { height: 34px; border: 1px solid var(--border-strong); border-radius: 8px; padding: 0 10px; background: var(--surface); color: var(--t2); font-size: 12.5px; max-width: 320px; }
.p360-ro { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--t3); background: var(--navy-tint); border-radius: 8px; padding: 4px 9px; }

/* header (approved mockup: light card · project photo · code/status · progress · two date tiles) */
.p360-head { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; }
.p360-head-main { display: grid; grid-template-columns: 168px minmax(0, 1fr) minmax(220px, 300px) minmax(340px, 420px); gap: 18px; align-items: start; }
.p360-photo-tile { width: 168px; height: 118px; border-radius: 10px; overflow: hidden; background: var(--navy-tint); border: 1px solid var(--border); position: relative; display: flex; align-items: center; justify-content: center; }
.p360-photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p360-photo-tile:not(.is-placeholder) b, .p360-photo-tile:not(.is-placeholder) span, .p360-photo-tile:not(.is-placeholder) i { display: none; }
.p360-photo-tile.is-placeholder { background: linear-gradient(135deg, var(--hero-a) 0%, var(--hero-b) 100%); color: #fff; flex-direction: column; gap: 6px; text-align: center; padding: 10px; }
.p360-photo-tile.is-placeholder b { font-size: 20px; letter-spacing: .02em; color: #fff; }
.p360-photo-tile.is-placeholder span { font-size: 10.5px; color: var(--on-navy-soft); line-height: 1.3; }
.p360-photo-tile.is-placeholder i { position: absolute; inset-inline-start: 0; bottom: 0; width: 100%; height: 4px; background: var(--orange); }
.p360-ident { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.p360-code-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.p360-code { font-size: 24px; font-weight: 700; color: var(--ink); line-height: 1.15; }
.p360-name { font-size: 15px; font-weight: 500; color: var(--t2); }
.p360-loc { font-size: 13px; color: var(--t3); display: flex; flex-wrap: wrap; gap: 4px 10px; }
.p360-health { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 700; }
.p360-health i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; }
.p360-health--red { background: var(--red-tint); color: var(--red); border: 1px solid var(--red-border); } .p360-health--amber { background: var(--orange-tint); color: var(--orange-deep); border: 1px solid var(--orange-border); }
.p360-health--green { background: var(--good-tint); color: var(--good); } .p360-health--unknown { background: var(--surface-2); color: var(--muted); border: 1px dashed var(--border-strong); }
.p360-health--lg { font-size: 15px; padding: 8px 16px; }
.p360-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.p360-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--navy-tint); color: var(--navy); border-radius: 8px; padding: 3px 9px; font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; border: 1px solid transparent; }
a.p360-chip:hover, a.p360-chip:focus-visible { border-color: var(--navy); outline: none; }
.p360 .p360-chip--orange { background: var(--orange); color: var(--on-orange); } .p360-chip--good { background: var(--good-tint); color: var(--good); } .p360-chip--grey { background: var(--surface-2); color: var(--t3); border-color: var(--border); }
.p360-progress { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); min-width: 0; }
.p360-progress .k { font-size: 11.5px; font-weight: 600; color: var(--muted); display: flex; justify-content: space-between; gap: 8px; }
.p360-progress .v { font-size: 22px; font-weight: 700; color: var(--navy); line-height: 1.1; font-variant-numeric: tabular-nums; }
.p360-bar { height: 8px; background: var(--navy-tint); border-radius: 999px; overflow: hidden; } .p360-bar i { display: block; height: 100%; background: var(--navy); border-radius: 999px; }
.p360-progress .n { font-size: 11.5px; color: var(--t3); }
.p360-date-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.p360-dtile { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: var(--surface); display: flex; flex-direction: column; gap: 3px; min-width: 0; text-decoration: none; color: inherit; position: relative; }
.p360-dtile .k { font-size: 11.5px; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.p360-dtile .v { font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.2; font-variant-numeric: tabular-nums; }
.p360-dtile .n { font-size: 11.5px; color: var(--t3); white-space: normal; }
.p360-dtile.is-late .v { color: var(--red); } .p360-dtile.is-ok .v { color: var(--good); }
.p360-dtile .p360-ic { color: var(--navy); }
.p360-ic { width: 18px; height: 18px; flex: none; }
/* KPI cards (six, white, icon, clickable cue) */
.p360-kcards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.p360-kcard { position: relative; display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: var(--surface); color: inherit; text-decoration: none; min-width: 0; transition: border-color .15s, box-shadow .15s; }
.p360-kcard .ic { width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--navy-tint); color: var(--navy); }
.p360-kcard.tone-orange .ic { background: var(--orange-tint); color: var(--orange-deep); } .p360-kcard.tone-red .ic { background: var(--red-tint); color: var(--red); } .p360-kcard.tone-good .ic { background: var(--good-tint); color: var(--good); } .p360-kcard.tone-amber .ic { background: var(--amber-tint); color: var(--amber-ink); }
.p360-kcard .b { min-width: 0; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.p360-kcard .k { font-size: 11.5px; font-weight: 600; color: var(--muted); white-space: normal; }
.p360-kcard .v { font-size: 22px; font-weight: 700; color: var(--ink); line-height: 1.15; font-variant-numeric: tabular-nums; }
.p360-kcard .v.c-red { color: var(--red); } .p360-kcard .v.c-orange { color: var(--orange-deep); } .p360-kcard .v.c-good { color: var(--good); }
.p360-kcard .n { font-size: 11px; color: var(--t3); white-space: normal; line-height: 1.35; }
.p360-kcard .n a { color: var(--navy); font-weight: 600; text-decoration: none; }
.p360-kcard .n a:hover, .p360-kcard .n a:focus-visible { text-decoration: underline; outline: none; }
.p360-cue { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--navy); margin-top: 3px; }
.p360-cue::after { content: '›'; font-size: 14px; line-height: 1; }
[dir="rtl"] .p360-cue::after { content: '‹'; }
.p360-kcard.is-link { cursor: pointer; }
.p360-kcard.is-link:hover, .p360-kcard.is-link:focus-visible { border-color: var(--navy); box-shadow: 0 2px 10px var(--shadow); outline: none; }
.p360-kcard.is-link:focus-visible { box-shadow: 0 0 0 3px var(--shadow-focus); }
.p360-kcard.is-locked { background: var(--surface-2); border-style: dashed; color: var(--muted); }
.p360-kcard .mini { height: 5px; background: var(--navy-tint); border-radius: 999px; overflow: hidden; margin-top: 4px; } .p360-kcard .mini i { display: block; height: 100%; background: var(--navy); border-radius: 999px; }
.p360-kcard.tone-good .mini i { background: var(--good); } .p360-kcard.tone-amber .mini i { background: var(--orange); }
/* generic clickable affordance for tiles / stats */
a.p360-stat { position: relative; transition: border-color .15s, box-shadow .15s; }
a.p360-stat:hover, a.p360-stat:focus-visible { border-color: var(--navy); box-shadow: 0 2px 10px var(--shadow); outline: none; }
a.p360-stat .p360-cue, a.p360-dtile .p360-cue { margin-top: 4px; }
a.p360-dtile:hover, a.p360-dtile:focus-visible { border-color: var(--navy); box-shadow: 0 2px 10px var(--shadow); outline: none; }
.p360-ghost { border: 1px solid var(--border-strong); background: var(--surface); color: var(--navy); border-radius: 8px; padding: 6px 12px; font-size: 12px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; }
.p360-ghost:hover, .p360-ghost:focus-visible { border-color: var(--navy); outline: none; }
/* health card */
.p360-hcard { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 18px; align-items: start; }
.p360-hbadge { border-radius: 12px; padding: 18px 14px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; border: 1px solid var(--border); background: var(--surface-2); }
.p360-hbadge .big { font-size: 26px; font-weight: 700; line-height: 1.1; }
.p360-hbadge .lbl { font-size: 12px; color: var(--muted); font-weight: 600; }
.p360-hbadge.lvl-red { background: var(--red-tint); border-color: var(--red-border); color: var(--red); } .p360-hbadge.lvl-amber { background: var(--orange-tint); border-color: var(--orange-border); color: var(--orange-deep); }
.p360-hbadge.lvl-green { background: var(--good-tint); color: var(--good); } .p360-hbadge.lvl-unknown { color: var(--muted); border-style: dashed; }
.p360-hbadge .ring { width: 54px; height: 54px; border-radius: 50%; border: 5px solid currentColor; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; }
.p360-hbody { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.p360-hsum { font-size: 14px; color: var(--t2); margin: 0; }
.p360-reasons { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.p360-reasons li { display: flex; align-items: flex-start; gap: 8px; }
/* One long word — «Engineering / Construction», «الإنشاءات», «Needs verification»
   — sets the min-content width of its flex row and pushes the whole card past its
   edge. This is not a phone-only problem: an English reason overflows a desktop
   recommendation card the same way. Break the word rather than the layout. */
.p360-reasons li, .p360-comp-row, .p360-attn-m, .p360-alert .m, .p360-list li { overflow-wrap: anywhere; }
/* The aside lists are narrow by design, and «3 September 2026 14:12» does not fit
   one of their rows beside its label. A date keeps its no-wrap in tables and
   tiles, where columns depend on it; here it wraps. */
.p360-list .p360-date { white-space: normal; }
.p360-reasons li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 6px; background: var(--muted); }
.p360-reasons li.r--red::before { background: var(--red); } .p360-reasons li.r--amber::before { background: var(--orange); } .p360-reasons li.r--unknown::before { background: var(--muted); }
.p360-reasons a { color: var(--navy); font-weight: 600; text-decoration: none; }
.p360-reasons a:hover, .p360-reasons a:focus-visible { text-decoration: underline; outline: none; }
.p360-hnext { border-top: 1px solid var(--border-soft); padding-top: 10px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.p360-hnext .k { font-size: 11.5px; font-weight: 600; color: var(--muted); } .p360-hnext .v { font-size: 14px; font-weight: 700; color: var(--ink); }
/* alerts list */
.p360-alerts { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.p360-alert { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--border-soft); text-decoration: none; color: inherit; }
.p360-alert:first-child { border-top: 0; }
.p360-alert .ic { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--orange-tint); color: var(--orange-deep); }
.p360-alert.sev--red .ic { background: var(--red-tint); color: var(--red); }
.p360-alert .b { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.p360-alert .t { font-size: 13px; font-weight: 600; color: var(--ink); }
.p360-alert .d { font-size: 12px; color: var(--t3); }
.p360-alert .m { font-size: 11px; color: var(--muted); }
a.p360-alert:hover .t, a.p360-alert:focus-visible .t { text-decoration: underline; } a.p360-alert:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; border-radius: 6px; }
/* summary strip */
.p360-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.p360-sum .p360-kcard .v { font-size: 18px; }
/* tab icons */
.p360-tab svg { width: 16px; height: 16px; flex: none; }
/* units toolbar + row menu */
.p360-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.p360-search { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; padding: 0 12px; height: 38px; flex: 1 1 260px; max-width: 420px; color: var(--muted); }
.p360-search input { flex: 1; border: 0; outline: none; background: transparent; font-size: 13px; color: var(--t2); height: 100%; min-width: 0; }
.p360-search:focus-within { border-color: var(--navy); }
.p360-select { height: 38px; border: 1px solid var(--border-strong); border-radius: 10px; padding: 0 10px; background: var(--surface); color: var(--t2); font-size: 12.5px; max-width: 100%; }
.p360-menu { position: relative; display: inline-block; }
.p360-menu-btn { border: 1px solid var(--border-strong); background: var(--surface); border-radius: 8px; width: 30px; height: 28px; cursor: pointer; font-weight: 700; color: var(--t2); line-height: 1; }
.p360-menu-btn:hover, .p360-menu-btn:focus-visible { border-color: var(--navy); outline: none; }
.p360-menu-list { position: absolute; top: 100%; inset-inline-end: 0; z-index: 20; min-width: 180px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px var(--shadow-menu); padding: 6px; display: flex; flex-direction: column; margin-top: 4px; }
.p360-menu-list a, .p360-menu-list button { text-align: start; border: 0; background: transparent; padding: 7px 10px; border-radius: 7px; font-size: 12.5px; color: var(--t2); text-decoration: none; cursor: pointer; font-weight: 600; }
.p360-menu-list a:hover, .p360-menu-list button:hover, .p360-menu-list a:focus-visible, .p360-menu-list button:focus-visible { background: var(--navy-tint); color: var(--navy); outline: none; }
/* photo placeholder */
.p360-photo-box { position: relative; width: 100%; aspect-ratio: 4 / 3; min-height: 120px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.p360-photo-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p360-photo-box.is-missing::before { content: attr(data-unavailable); font-size: 11.5px; color: var(--muted); padding: 12px; text-align: center; }
.p360-photo-box.is-missing::after { content: ''; position: absolute; inset-inline-start: 0; bottom: 0; width: 100%; height: 3px; background: var(--orange); }

/* tab bar */
.p360-tabs { position: sticky; top: 0; z-index: 5; background: var(--bg); border-bottom: 1px solid var(--border); padding: 8px 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; }
.p360-tab { flex: none; border: 1px solid var(--border-strong); background: var(--surface); color: var(--t2); border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; text-decoration: none; }
.p360-tab:hover { border-color: var(--navy); }
.p360-tab.is-on { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.p360-tab .n { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 7px; background: var(--navy-tint); color: var(--t3); }
.p360-tab.is-on .n { background: var(--on-navy-chip); color: var(--on-navy); }
.p360-tab.is-deferred { color: var(--muted); border-style: dashed; }

/* layout */
.p360-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.p360-main, .p360-aside { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.p360-aside { position: sticky; top: 56px; }
.p360-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.p360-card--tint { background: var(--orange-tint-2); border-color: var(--orange-border); }
.p360-card-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.p360-card-h h3 { font-size: 15px; font-weight: 600; color: var(--ink); margin: 0; display: flex; align-items: center; gap: 10px; }
.p360-card-h h3::before { content: ''; width: 3px; height: 17px; border-radius: 2px; background: var(--navy); flex: none; }
.p360-card-h h3.acc-orange::before { background: var(--orange); } .p360-card-h h3.acc-good::before { background: var(--good); }
.p360-card-h p, .p360-hint { font-size: 12px; color: var(--t3); margin: 0; }
.p360-card-h .p360-link { margin-inline-start: auto; }
.p360-link { color: var(--navy); font-weight: 600; text-decoration: none; font-size: 12.5px; }
.p360-link:hover { text-decoration: underline; }
.p360-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--t2); border-radius: 8px; padding: 7px 12px; font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; }
.p360-btn:hover { border-color: var(--navy); }
.p360 .p360-btn--primary { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.p360 .p360-btn--good { background: var(--good); border-color: var(--good); color: var(--on-good); }
.p360-btn--danger { background: var(--surface); border-color: var(--red-border); color: var(--red); }

/* attention rows (action required) */
.p360-attn { display: flex; flex-direction: column; gap: 8px; }
.p360-attn-row { display: flex; gap: 14px; align-items: flex-start; border: 1px solid var(--border); border-inline-start: 3px solid var(--navy); border-radius: 8px; padding: 12px 14px; background: var(--surface-2); }
.p360-attn-row.sev--red { border-inline-start-color: var(--orange); background: var(--orange-tint-2); }
.p360-attn-row.sev--amber { border-inline-start-color: var(--orange); background: var(--orange-tint-2); }
.p360-attn-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.p360-attn-t { font-size: 15px; font-weight: 600; color: var(--ink); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.p360-attn-d { font-size: 13px; color: var(--t3); }
.p360-attn-m { font-size: 11.5px; color: var(--muted); display: flex; gap: 6px 12px; flex-wrap: wrap; }
.p360-attn-row .p360-btn { flex: none; }

/* pills — a solid fill carries its own ink, so these selectors are scoped with
   `.p360 ` on purpose: an <a> styled as a button or a chip would otherwise lose
   to `.p360 a { color: inherit }` and paint body text on the accent. */
.p360-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 10px; white-space: normal; border: 1px solid transparent; }
.p360-pill--red { background: var(--red-tint); color: var(--red); border-color: var(--red-border); }
.p360 .p360-pill--red-solid { background: var(--orange); color: var(--on-orange); }
.p360-pill--amber { background: var(--orange-tint); color: var(--orange-deep); border-color: var(--orange-border); }
.p360-pill--good { background: var(--good-tint); color: var(--good); }
.p360-pill--navy { background: var(--navy-tint); color: var(--navy); }
.p360-pill--grey { background: var(--surface-2); color: var(--t3); border-color: var(--border); }
.p360-pill--verify { background: var(--verify-tint); color: var(--verify); border-color: var(--verify-border); }
.p360-pill--unknown { background: var(--surface-2); color: var(--muted); border-color: var(--border-strong); border-style: dashed; }
.p360-pill--override { color: var(--override); background: var(--override-tint); border-color: var(--override-border); }

/* stats / tiles */
.p360-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
/* column-count variants live here, never inline: an inline grid-template-columns
   outranks every media query, so a four-up strip stays four-up on a phone and
   clips its own labels. */
.p360-stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.p360-stat { border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; background: var(--surface); text-decoration: none; color: inherit; min-width: 0; }
a.p360-stat:hover { border-color: var(--navy); }
.p360-stat .k { font-size: 11px; font-weight: 600; color: var(--muted); }
.p360-stat .v { font-size: 21px; font-weight: 700; color: var(--ink); line-height: 1.2; font-variant-numeric: tabular-nums; }
.p360-stat .v.c-orange { color: var(--orange-deep); } .p360-stat .v.c-good { color: var(--good); } .p360-stat .v.c-red { color: var(--red); }
.p360-stat .n { font-size: 11px; color: var(--faint); }
.p360-stat.is-warn { background: var(--orange-tint-2); border-color: var(--orange-border); }

/* filters */
.p360-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.p360-filter { border: 1px solid var(--border-strong); background: var(--surface); color: var(--t2); border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; text-decoration: none; }
.p360-filter.is-on { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.p360-filter .n { font-size: 10.5px; opacity: .8; }

/* tables */
.p360-scroll { overflow-x: auto; max-width: 100%; }
.p360-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.p360-table th { text-align: start; font-size: 11px; font-weight: 700; color: var(--t3); padding: 9px 10px; background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap; }
.p360-table td { padding: 10px; border-top: 1px solid var(--border-soft); vertical-align: top; }
.p360-table tr.is-warn td { background: var(--orange-tint-2); }
.p360-table tr.is-selected td { background: var(--navy-tint); }
.p360-table td a { color: var(--navy); font-weight: 600; text-decoration: none; }
.p360-table td a:hover { text-decoration: underline; }
.p360-note { display: block; font-size: 10.5px; color: var(--muted); margin-top: 2px; white-space: normal; }
.p360-pager { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }

/* description lists / timeline / lists */
.p360-dl { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 6px 12px; margin: 0; font-size: 12.5px; }
.p360-dl--narrow { grid-template-columns: 90px minmax(0, 1fr); }
.p360-dl dt { color: var(--muted); } .p360-dl dd { margin: 0; color: var(--t2); }
.p360-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.p360-list li { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border-soft); font-size: 12.5px; }
.p360-list li:first-child { border-top: 0; }
.p360-list li a { color: var(--navy); text-decoration: none; font-weight: 600; }
.p360-timeline { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.p360-timeline li { position: relative; padding: 0 0 12px 0; padding-inline-start: 18px; font-size: 12.5px; }
.p360-timeline li::before { content: ''; position: absolute; inset-inline-start: 0; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--navy); }
.p360-timeline li::after { content: ''; position: absolute; inset-inline-start: 3.5px; top: 15px; bottom: 0; width: 1px; background: var(--border); }
.p360-timeline li:last-child::after { display: none; }
.p360-timeline .t { font-weight: 600; color: var(--ink); } .p360-timeline .m { font-size: 11.5px; color: var(--muted); display: block; }
.p360-timeline .tag { font-size: 10.5px; }

/* completeness */
.p360-comp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
.p360-comp-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border-soft); font-size: 12.5px; }
.p360-comp-row a { color: var(--navy); font-weight: 600; text-decoration: none; }
.p360-comp-bar { height: 8px; background: var(--navy-tint); border-radius: 999px; overflow: hidden; } .p360-comp-bar i { display: block; height: 100%; background: var(--navy); border-radius: 999px; }

/* building grid (units by floor) */
.p360-building { display: flex; flex-direction: column-reverse; gap: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
.p360-floor { display: flex; align-items: center; gap: 6px; min-height: 32px; }
/* a level name sits on one line; only a name wider than the column (the unmatched-floor label) wraps at its spaces and the row grows with it */
.p360-floor-l { width: 76px; flex: none; font-size: 11px; line-height: 1.2; color: var(--muted); font-weight: 600; white-space: normal; overflow-wrap: normal; }
.p360-floor.has-evidence .p360-floor-l { color: var(--good); }
.p360-u { height: 32px; min-width: 40px; max-width: 56px; flex: 1; border-radius: 8px; border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; cursor: pointer; text-decoration: none; }
.p360-u.is-selected { outline: 2px solid var(--navy); outline-offset: 1px; }
.p360 .p360-u--handed_over { background: var(--hu-done-bg); color: var(--hu-done-ink); }
.p360-u--ho_active { background: var(--navy-tint); color: var(--navy); border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.p360-u--ho_blocked { background: var(--orange-tint); color: var(--orange-deep); border-color: var(--orange-border); }
.p360-u--candidate { background: var(--navy-tint); color: var(--navy); border-color: var(--border-strong); }
.p360-u--needs_verification { background: var(--verify-tint); color: var(--verify); border-color: var(--verify-border); }
.p360-u--not_candidate { background: var(--grey-tint); color: var(--t3); }
.p360-u--reserved { background: var(--reserved-tint); color: var(--amber-ink); border-color: var(--amber-border); }
.p360-u--available { background: var(--surface); color: var(--avail-ink); border-color: var(--border-strong); }
.p360-u--ownership_conflict { background: var(--red-tint); color: var(--red); border-color: var(--red-border); }
/* Completed with remarks only; a refused delivery uses ho_blocked. */
.p360-u--remarks { position: relative; background: var(--good); color: var(--on-good); border-color: var(--amber-border); }
.p360-u--remarks::after { content: '!'; position: absolute; inset-inline-end: -3px; top: -5px; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; background: var(--amber-border); color: var(--amber-ink); font-size: var(--ho-text-xs); line-height: 1; font-style: normal; }
.p360-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 11.5px; color: var(--t3); }
.p360-legend span { display: inline-flex; align-items: center; gap: 5px; }
.p360-legend .p360-u { width: 14px; min-width: 14px; height: 14px; border-radius: 3px; flex: none; }

/* unit panel + forms */
.p360-unit { border: 1px solid var(--border); border-radius: 10px; padding: 14px; background: var(--surface-2); display: flex; flex-direction: column; gap: 10px; }
.p360-unit-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; font-weight: 700; color: var(--ink); }
.p360-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.p360-form { background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 12px; display: flex; flex-direction: column; gap: 8px; font-size: 12px; }
.p360-form label { display: flex; flex-direction: column; gap: 3px; color: var(--t3); }
.p360-form input, .p360-form select, .p360-form textarea { border: 1px solid var(--border-strong); border-radius: 7px; padding: 7px 8px; font-size: 12.5px; background: var(--surface); color: var(--t2); }
.p360-form .chk { flex-direction: row; align-items: center; gap: 6px; }
.p360-history { margin: 0; padding-inline-start: 18px; font-size: 12px; display: flex; flex-direction: column; gap: 3px; }

/* photos */
.p360-photos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.p360-photo { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface); display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.p360-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--surface-2); }
.p360-photo div { padding: 8px 10px; font-size: 11.5px; color: var(--t3); display: flex; flex-direction: column; gap: 2px; }
.p360-photo b { color: var(--ink); font-size: 12px; }

/* empty / deferred */
.p360-empty { border: 1px dashed var(--border-strong); border-radius: 10px; padding: 26px; text-align: center; color: var(--muted); font-size: 13px; }
.p360-deferred { border: 1px dashed var(--border-strong); background: var(--surface-2); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--t3); }
.p360-deferred b { color: var(--ink); font-size: 13px; }
.p360-locked { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }

/* directory (entry page) */
.p360-dir-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.p360-title { font-size: 24px; font-weight: 700; color: var(--ink); margin: 0; line-height: 1.2; }
.p360-search { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; padding: 0 12px; height: 40px; flex: 1 1 300px; max-width: 460px; color: var(--muted); }
.p360-search input { flex: 1; border: 0; outline: none; background: transparent; font-size: 13px; color: var(--t2); height: 100%; }
.p360-dir { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 10px; }
.p360-dir-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; display: flex; justify-content: space-between; gap: 10px; align-items: center; text-decoration: none; color: inherit; }
.p360-dir-card:hover { border-color: var(--navy); }
.p360-dir-card .code { font-size: 18px; font-weight: 700; color: var(--ink); }
.p360-dir-card .meta { font-size: 11.5px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 3px; }
.p360-dir-card .num { font-size: 11px; font-weight: 700; color: var(--on-navy); background: var(--navy); border-radius: 6px; padding: 2px 7px; }
.p360-dir-card .go { color: var(--navy); font-weight: 700; font-size: 12px; white-space: nowrap; }

/* tablet ≤ 1180px */
@media (max-width: 1180px) {
  .p360-grid { grid-template-columns: minmax(0, 1fr); } .p360-aside { position: static; }
  .p360-head-main { grid-template-columns: 140px minmax(0, 1fr); } .p360-photo-tile { width: 140px; }
  .p360-head-main .p360-progress { grid-column: 1 / -1; } .p360-head-main .p360-date-tiles { grid-column: 1 / -1; }
  .p360-kcards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .p360-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* mobile ≤ 767px — summary rows, never a page-level horizontal scroll */
@media (max-width: 767px) {
  .p360 { font-size: 12.5px; gap: 12px; }
  .p360-head { padding: 14px; gap: 12px; }
  .p360-head-main { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .p360-photo-tile { width: 100%; height: 150px; }
  .p360-code { font-size: 21px; }
  .p360-kcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p360-kcard { padding: 10px 12px; gap: 10px; } .p360-kcard .v { font-size: 19px; } .p360-kcard .ic { width: 32px; height: 32px; }
  .p360-hcard { grid-template-columns: minmax(0, 1fr); }
  .p360-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p360-search { max-width: none; flex-basis: 100%; }
  .p360-tabs { top: 0; padding: 6px 0; }
  .p360-card { padding: 13px 14px; }
  .p360-stats, .p360-stats--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p360-comp { grid-template-columns: minmax(0, 1fr); }
  .p360-dl, .p360-dl--narrow { grid-template-columns: minmax(0, 1fr); gap: 2px; } .p360-dl dt { margin-top: 6px; }
  .p360-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p360-attn-row { flex-direction: column; gap: 8px; } .p360-attn-row .p360-btn { align-self: flex-start; }
  .p360-switch select { max-width: 100%; }
  .p360-table thead { display: none; }
  .p360-table, .p360-table tbody, .p360-table tr, .p360-table td { display: block; width: 100%; }
  .p360-table tr { border: 1px solid var(--border); border-radius: 10px; padding: 6px 10px; margin-bottom: 8px; background: var(--surface); }
  .p360-table tr.is-warn { background: var(--orange-tint-2); }
  .p360-table td { border: 0; padding: 5px 0; display: flex; gap: 10px; justify-content: space-between; align-items: flex-start; text-align: end; }
  .p360-table td::before { content: attr(data-l); color: var(--muted); font-size: 11px; font-weight: 600; flex: none; text-align: start; }
  .p360-table td[data-l=""]::before { display: none; }
  .p360-table td.p360-nums { white-space: normal; }
  /* a chip carrying a construction item name is longer than a phone is wide —
     it must wrap inside its card rather than run past the edge */
  .p360-chips .p360-chip { white-space: normal; }
  /* «18 August 2026 15:40» does not fit a half-width tile or a list row on a
     phone. A date wraps here; a money figure keeps its no-wrap so digits stay
     together. */
  .p360-date { white-space: normal; }
}
@media (max-width: 400px) {
  .p360-kcard .v { font-size: 17px; } .p360-kcards { gap: 8px; }
  .p360-u { min-width: 30px; max-width: 40px; height: 28px; font-size: 11.5px; }
  /* «Ground» needs 40px — never clip a floor label, break it if it must */
  .p360-floor-l { width: 60px; }
}

/* utility */
.p360 .is-hidden { display: none !important; }

/* ───────────── Phase 2 — financials · tasks · documents ───────────── */
.p360 .p360-h4 { margin: 4px 0 0; font-size: 13px; font-weight: 600; color: var(--ink); }
.p360-fin-views .p360-chip { cursor: pointer; font-family: inherit; }
.p360-fin-views .p360-chip.is-on { background: var(--navy); color: var(--on-navy); border-color: var(--navy); }
.p360-fin-views .p360-chip b { background: var(--on-navy-chip); border-radius: 6px; padding: 0 5px; font-size: 11px; }
.p360-fin-views .p360-chip:not(.is-on) b { background: var(--surface); color: var(--navy); }
/* Six across while the container allows it — but never a card so narrow that a
   real amount cannot sit in it, which is what `minmax(0, 1fr)` used to permit. */
.p360-kcards.is-fin { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
/* The overview strip is the tightest money grid in the product: six cards inside
   the main column, beside the aside. Only in that desktop layout does it trade a
   little padding and type size for room — below 1181px the cards are wide again
   and the amounts return to the sizes above. Budget at 1440: a 103px value box
   against 95px for «999,999,999», the largest figure this business can plausibly
   report (today's real maximum on DEV is 57,371,500). */
@media (min-width: 1181px) {
  .p360-kcards.is-fin.is-tight .p360-kcard { padding-inline: 10px; }
  .p360-kcards.is-fin.is-tight .p360-kcard .v { font-size: 13px; }
}
/* Money is never truncated. A KPI amount previously carried
   `overflow:hidden; text-overflow:ellipsis`, which turned «13,517,000 ج.م» into
   «13,517,0…» — a figure a manager cannot act on. The value now stays whole:
   the amount itself is one unbreakable token (number_format has no spaces), so
   the only place a line can break is between the amount and its currency word,
   and the size steps down before that becomes necessary. */
.p360-kcards.is-fin .p360-kcard .v, .p360-kcards.is-out .p360-kcard .v {
  font-size: 15px; white-space: normal; max-width: 100%;
  overflow: visible; text-overflow: clip;   /* stated, not merely omitted */
  overflow-wrap: normal; word-break: keep-all; font-variant-numeric: tabular-nums;
}
.p360-kcards.is-out { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.p360-kcard.is-unavailable { border-style: dashed; background: var(--surface-2); color: var(--t3); }
.p360-kcard.is-unavailable .v { font-size: 13px !important; color: var(--muted); }
.p360-out-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); gap: 10px; }
.p360-fin-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.p360-fin-summary, .p360-fin-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.p360-dl--fin { grid-template-columns: 200px minmax(0, 1fr); font-size: 13px; }
.p360-dl--fin dd a { color: var(--navy); font-weight: 700; text-decoration: none; }
.p360-dl--fin dd a:hover { text-decoration: underline; }
.p360-big { font-size: 26px; font-weight: 700; color: var(--ink); margin: 0; }
.p360-donut-wrap { display: flex; align-items: center; gap: 16px; border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: var(--surface); }
.p360-donut { --pct: 0; width: 96px; height: 96px; border-radius: 50%; flex: none; display: grid; place-items: center; background: conic-gradient(var(--good) calc(var(--pct) * 1%), var(--navy-tint) 0); position: relative; }
.p360-donut::before { content: ''; position: absolute; inset: 14px; background: var(--surface); border-radius: 50%; }
.p360-donut span { position: relative; font-weight: 700; font-size: 15px; color: var(--ink); }
.p360-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--t2); min-width: 0; }
.p360-legend li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .p360-legend b { color: var(--ink); }
.p360-legend .sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; } .sw-good { background: var(--good); } .sw-navy { background: var(--navy-tint); border: 1px solid var(--navy); }
.p360-cf { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: var(--surface); display: flex; flex-direction: column; gap: 8px; }
.p360-cf-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 12px; }
.p360-cf-row .l { color: var(--t3); } .p360-cf-row .v { color: var(--ink); font-weight: 600; white-space: nowrap; } .p360-cf-row .v small { color: var(--muted); font-weight: 400; }
.p360-cf-row .bar { height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; } .p360-cf-row .bar i { display: block; height: 100%; background: var(--navy); border-radius: 4px; } .p360-cf-row .bar i.is-red { background: var(--orange); }
.p360-cashpos { border: 1px dashed var(--border-strong); border-radius: 10px; padding: 12px 14px; background: var(--surface-2); display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.p360-cashpos b { color: var(--ink); } .p360-cashpos .v { color: var(--muted); }
/* the CONSTRUCTION_PAYABLE_SOURCE_MISSING token is one long word — it must break, never overflow its card */
.p360-cashpos .v, .p360-deferred span, .p360-kcard.is-unavailable .n { overflow-wrap: anywhere; word-break: break-word; }
.p360-deferred.is-info { border-style: solid; border-color: var(--border); background: var(--navy-tint); color: var(--t2); }
.p360-deferred.is-info b { color: var(--navy); }
/* an English long-form date ("28 February 2028") must wrap inside its tile on a phone, never clip */
@media (max-width: 480px) { .p360-dtile .v.p360-date { white-space: normal; font-size: 15.5px; } }
.p360-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.p360-tile { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: var(--surface); text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; }
.p360-tile:hover, .p360-tile:focus-visible { border-color: var(--navy); box-shadow: 0 2px 10px var(--shadow-soft); outline: none; }
.p360-tile.is-on { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.p360-tile .v { font-size: 22px; font-weight: 700; color: var(--ink); } .p360-tile .k { font-size: 12px; color: var(--t3); }
.p360-tile.tone-red .v { color: var(--red); } .p360-tile.tone-good .v { color: var(--good); }
.p360-form--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.p360-form--grid .span2 { grid-column: 1 / -1; }
.p360-form--grid b { color: var(--ink); font-size: 13px; }
.p360-form-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.p360-btn--xs { padding: 4px 8px; font-size: 11.5px; border-radius: 7px; }
.p360 .p360-btn--good { background: var(--surface); border-color: var(--good); color: var(--good); } /* outline variant; the solid rule above left green-on-green and an unreadable «اعتماد» */
.p360-inline { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.p360-subrow td { background: var(--surface-2); }
.p360-alerts li { display: flex; flex-direction: column; gap: 6px; }
.p360-alert-fu { display: flex; justify-content: flex-end; }
.p360-alert-fu .p360-chip { cursor: pointer; font-family: inherit; }
.p360-tstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.p360-tstat { display: flex; flex-direction: column; align-items: center; gap: 2px; border: 1px solid var(--border); border-radius: 9px; padding: 8px 6px; text-decoration: none; color: inherit; background: var(--surface); }
.p360-tstat b { font-size: 18px; color: var(--ink); } .p360-tstat span { font-size: 11px; color: var(--t3); text-align: center; }
.p360-tstat.is-red b { color: var(--red); } .p360-tstat:hover, .p360-tstat:focus-visible { border-color: var(--navy); outline: none; }
@media (max-width: 1180px) {
  .p360-kcards.is-fin { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* fewer columns = a wider card, so the amount can grow back */
  .p360-kcards.is-fin .p360-kcard .v, .p360-kcards.is-out .p360-kcard .v { font-size: 16px; }
  .p360-kcards.is-out { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .p360-out-row { grid-template-columns: minmax(0, 1fr); }
  .p360-fin-grid { grid-template-columns: minmax(0, 1fr); }
  .p360-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .p360-kcards.is-fin, .p360-kcards.is-out { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p360-kcards.is-fin .p360-kcard .v, .p360-kcards.is-out .p360-kcard .v { font-size: 14px; }
  .p360-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p360-form--grid { grid-template-columns: minmax(0, 1fr); }
  .p360-dl--fin { grid-template-columns: minmax(0, 1fr); }
  .p360-cf-row { grid-template-columns: 90px minmax(0, 1fr); } .p360-cf-row .v { grid-column: 1 / -1; }
  .p360-donut-wrap { flex-direction: column; align-items: flex-start; }
  .p360-tstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p360-table td.p360-inline { justify-content: flex-start; }
}
@media (max-width: 400px) {
  .p360-kcards.is-fin, .p360-kcards.is-out { grid-template-columns: minmax(0, 1fr); }
}

/* ───────────── Phase 3 — monthly construction planning ───────────── */
.mcp { display: flex; flex-direction: column; gap: 14px; }
.mcp-head { display: flex; flex-direction: column; gap: 12px; }
.mcp-head-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.mcp-title { font-size: 21px; font-weight: 700; color: var(--ink); margin: 0; }
.mcp-sub { font-size: 12.5px; color: var(--t3); margin: 4px 0 0; max-width: 78ch; }
.mcp-switch { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.mcp-switch select { height: 36px; border: 1px solid var(--border-strong); border-radius: 9px; padding: 0 10px; background: var(--surface); color: var(--t2); font-size: 12.5px; max-width: 260px; }
.mcp-plan-bar { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--border-soft); padding-top: 10px; }
.mcp-plan-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; }
.mcp-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mcp-note { flex: 1 1 280px; min-width: 0; height: 34px; border: 1px solid var(--border-strong); border-radius: 8px; padding: 0 10px; font-size: 12.5px; background: var(--surface); color: var(--t2); }
.mcp-nostate { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; border: 1px dashed var(--border-strong); border-radius: 10px; padding: 14px 16px; background: var(--surface-2); }
.mcp-tabs { margin-bottom: 0; }
.mcp-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.mcp-completion { display: grid; grid-template-columns: auto minmax(120px, 1fr) auto; gap: 10px; align-items: center; border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: var(--surface); font-size: 12.5px; }
.mcp-completion .k { color: var(--t3); font-weight: 600; }
.mcp-completion .bar { height: 10px; background: var(--surface-2); border-radius: 5px; overflow: hidden; }
.mcp-completion .bar i { display: block; height: 100%; background: var(--good); border-radius: 5px; }
.mcp-completion b { font-size: 18px; color: var(--ink); font-variant-numeric: tabular-nums; }
.mcp-completion .p360-note { grid-column: 1 / -1; }
.mcp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.mcp-card { border: 1px solid var(--border); border-left: 3px solid var(--border-strong); border-radius: 10px; padding: 13px 15px; background: var(--surface); display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.mcp-card.pri--critical { border-left-color: var(--red); } .mcp-card.pri--high { border-left-color: var(--orange); }
.mcp-card.pri--medium { border-left-color: var(--navy); } .mcp-card.pri--unknown { border-left-color: var(--muted); border-left-style: dashed; }
[dir="rtl"] .mcp-card { border-left: 1px solid var(--border); border-right: 3px solid var(--border-strong); }
[dir="rtl"] .mcp-card.pri--critical { border-right-color: var(--red); } [dir="rtl"] .mcp-card.pri--high { border-right-color: var(--orange); }
[dir="rtl"] .mcp-card.pri--medium { border-right-color: var(--navy); } [dir="rtl"] .mcp-card.pri--unknown { border-right-color: var(--muted); border-right-style: dashed; }
.mcp-card-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.mcp-sku { font-size: 15px; color: var(--ink); }
.mcp-card-f { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border-top: 1px solid var(--border-soft); padding-top: 9px; }
.mcp-signals { grid-template-columns: 120px minmax(0, 1fr); font-size: 12px; }
.mcp-suggested { display: flex; flex-direction: column; gap: 5px; border-top: 1px solid var(--border-soft); padding-top: 8px; }
.mcp-suggested .k { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.mcp-plan-project { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; background: var(--surface); display: flex; flex-direction: column; gap: 10px; }
.mcp-plan-project.is-out { background: var(--surface-2); opacity: .85; }
.mcp-rationale { font-size: 12.5px; color: var(--t2); margin: 0; }
.mcp-items { display: flex; flex-direction: column; gap: 8px; }
.mcp-items .k { font-size: 12px; font-weight: 600; color: var(--muted); }
@media (max-width: 1180px) { .mcp-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mcp-cards { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) {
  .mcp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mcp-completion { grid-template-columns: minmax(0, 1fr); }
  .mcp-head-top { flex-direction: column; } .mcp-switch { width: 100%; } .mcp-switch select { max-width: 100%; flex: 1; }
  .mcp-signals { grid-template-columns: minmax(0, 1fr); }
  .mcp-title { font-size: 18px; }
}

/* ───────────── dark mode — token remap only, one source of truth ─────────────
   Filament stamps `.dark` on <html>. Everything above paints through the tokens,
   so the whole workspace (Project 360 + monthly planning, both share `.p360`)
   flips here and nowhere else. Two rules govern the values:
     · surfaces darken, ink lightens — a card must never stay white on a dark page;
     · an accent used as TEXT lightens (navy #122e5f is unreadable on near-black),
       while the ink that sits ON a solid accent fill darkens to stay legible. */
.dark .p360 {
  --bg:#09090b; --surface:#18181b; --surface-2:#212127; --border:#3f3f46; --border-soft:#2e2e35; --border-strong:#52525b;
  --ink:#f4f4f5; --t2:#d4d4d8; --t3:#a1a1aa; --muted:#a1a1aa; --faint:#8b8b95;
  --navy:#8fb2ee; --navy-deep:#a6c2f2; --navy-tint:#1e2a42;
  --orange:#f0913f; --orange-deep:#f2a55f; --orange-tint:#3a2a17; --orange-tint-2:#241d15; --orange-border:#5e4321;
  --good:#5cc9a0; --good-tint:#14352b; --good-solid-tint:#173a2e; --good-edge:#2f6350;
  --red:#f2938b; --red-tint:#3b1f1d; --red-border:#6d3532;
  --verify:#b3a8f7; --verify-tint:#262046; --verify-border:#463c74;
  --amber-tint:#3b3016; --amber-ink:#e8c76e; --amber-border:#5e4b21; --reserved-tint:#3b3016;
  --override:#cba6e2; --override-tint:#2d2139; --override-border:#4c3b5e;
  --grey-tint:#2a2a31; --avail-ink:#6f7480; --hero-a:#16305c; --hero-b:#0f2244;
  --on-navy-muted:#7d90b4; --on-navy-soft:#b9c9e6;
  --on-navy:#0d1626; --on-orange:#241403; --on-good:#052018; --on-navy-chip:rgba(0,0,0,.2);
  --shadow:rgba(0,0,0,.5); --shadow-focus:rgba(143,178,238,.35); --shadow-menu:rgba(0,0,0,.6); --shadow-soft:rgba(0,0,0,.45);
}
/* the sticky tab strip paints the page ground so rows cannot show through it */
.dark .p360-tabs { background: var(--bg); }
/* a native control keeps the OS light palette unless its scheme is stated */
.dark .p360 select, .dark .p360 input, .dark .p360 textarea { color-scheme: dark; }

/* ───────────── Monthly planning — work selection (2026-09-11, reference layout) ─────────────
   Layout follows the approved mockups: compact title + month/tabs bar, three indicator cards in one
   row, the work table in a white surface with an inline items box, a sticky impact aside on the
   INLINE-END side (left in RTL) sized ~24% of the workspace, and an on-demand detail drawer.
   Responsiveness is driven by the CONTENT width (container query), not the viewport, so the sidebar
   never pushes the aside under the table. Tokens only — no new colour. */
@font-face { font-family: 'Cairo'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/cairo/Cairo-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Cairo'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/cairo/Cairo-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Cairo'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/cairo/Cairo-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Cairo'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/cairo/Cairo-Bold.ttf') format('truetype'); }
/* Module design tokens (the mockup's executable spec). The p360 tokens are re-pointed INSIDE .mcp only,
   so every rule below reads the module palette while the rest of the system keeps its own. */
.mcp {
  /* identity */
  --mcp-navy: #163469; --mcp-orange: #FC821F;
  /* semantic — light */
  --mcp-bg: #F6F8FC; --mcp-surface: #FFFFFF; --mcp-surface-2: #F6F8FC; --mcp-panel: #FFFFFF;
  --mcp-text: #163469; --mcp-text-2: #2F3F5F; --mcp-muted: #71809C;
  --mcp-border: #E2E8F2; --mcp-border-soft: #EDF1F7; --mcp-border-strong: #D5DDEA;
  --mcp-selected: #EDF3FC; --mcp-hover: #F1F5FB; --mcp-focus: #FC821F;
  --mcp-input-bg: #FFFFFF; --mcp-navy-ink: #163469; --mcp-navy-soft: #EDF3FC; --mcp-on-navy: #FFFFFF; --mcp-on-orange: #FFFFFF;
  --mcp-orange-ink: #B85A0A; --mcp-orange-bg: #FFF1E4; --mcp-orange-border: #F9D6B5;
  --mcp-red: #C62828; --mcp-red-bg: #FBE9E7; --mcp-green: #168565; --mcp-green-bg: #E6F4EF; --mcp-green-border: #BFE3D3;
  --mcp-warn: #FFF7E8; --mcp-warn-border: #F5DFB8; --mcp-warn-ink: #8A5A00; --mcp-verify: #5546C9; --mcp-verify-bg: #EEEBFD;
  --mcp-shadow: rgba(22, 52, 105, .08); --mcp-shadow-menu: rgba(22, 52, 105, .12); --mcp-disabled: .45;
  --mcp-font: 'Cairo', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --mcp-fs-title: 30px; --mcp-fs-section: 20px; --mcp-fs-kpi: 32px; --mcp-fs-strong: 16px; --mcp-fs-body: 14px; --mcp-fs-small: 12.5px;
  --mcp-ic-btn: 20px; --mcp-ic-nav: 24px; --mcp-ic-kpi: 28px; --mcp-stroke: 1.75;
  /* the p360 vocabulary the rules below read — re-pointed INSIDE the module only */
  --navy: var(--mcp-navy-ink); --navy-deep: var(--mcp-navy-ink); --ink: var(--mcp-text); --orange: var(--mcp-orange); --orange-deep: var(--mcp-orange-ink);
  --orange-tint: var(--mcp-orange-bg); --orange-tint-2: var(--mcp-warn); --orange-border: var(--mcp-orange-border); --red: var(--mcp-red); --red-tint: var(--mcp-red-bg);
  --good: var(--mcp-green); --good-tint: var(--mcp-green-bg); --good-edge: var(--mcp-green-border);
  --muted: var(--mcp-muted); --t3: var(--mcp-muted); --t2: var(--mcp-text-2); --faint: var(--mcp-muted); --border: var(--mcp-border); --border-soft: var(--mcp-border-soft); --border-strong: var(--mcp-border-strong);
  --navy-tint: var(--mcp-selected); --surface: var(--mcp-surface); --surface-2: var(--mcp-surface-2); --bg: var(--mcp-bg); --amber-tint: var(--mcp-warn); --amber-border: var(--mcp-warn-border); --amber-ink: var(--mcp-warn-ink);
  --verify: var(--mcp-verify); --verify-tint: var(--mcp-verify-bg); --on-navy: var(--mcp-on-navy); --on-orange: var(--mcp-on-orange); --shadow: var(--mcp-shadow); --shadow-soft: var(--mcp-shadow); --shadow-menu: var(--mcp-shadow-menu);
  font-family: var(--mcp-font); font-size: var(--mcp-fs-body); line-height: 1.5; color: var(--t2);
  container-type: inline-size; gap: 12px; max-width: none;
}
/* dark — the system's `.dark` on <html> (Filament); same icons, sizes and order, only the tokens change.
   Navy is never used as text on the dark ground: navy-as-ink becomes a light blue, the filled navy stays a fill. */
.dark .mcp {
  --mcp-bg: #0B1220; --mcp-surface: #131C2E; --mcp-surface-2: #1A2538; --mcp-panel: #131C2E;
  --mcp-text: #E8EEF8; --mcp-text-2: #C3CEE0; --mcp-muted: #93A3BF;
  --mcp-border: #2A3650; --mcp-border-soft: #22304A; --mcp-border-strong: #3B4A66;
  --mcp-selected: #1E2E4D; --mcp-hover: #1A2538; --mcp-focus: #FC821F;
  --mcp-input-bg: #0F1829; --mcp-navy-ink: #8FB2EE; --mcp-navy-soft: #1E2E4D; --mcp-on-navy: #FFFFFF; --mcp-on-orange: #1A1206;
  --mcp-orange-ink: #FFA45C; --mcp-orange-bg: #3A2712; --mcp-orange-border: #5E4321;
  --mcp-red: #F28B82; --mcp-red-bg: #3A1A1A; --mcp-green: #5AD3A9; --mcp-green-bg: #12352B; --mcp-green-border: #1F5A47;
  --mcp-warn: #332612; --mcp-warn-border: #5E4321; --mcp-warn-ink: #F5C26B; --mcp-verify: #B3A7F5; --mcp-verify-bg: #2A2650;
  --mcp-shadow: rgba(0, 0, 0, .35); --mcp-shadow-menu: rgba(0, 0, 0, .5);
}
.dark .mcp .mcp-btn--navy, .dark .mcp .mcp-seg button.is-on, .dark .mcp .mcp-pages button.is-on { background: var(--mcp-navy); border-color: var(--mcp-navy); color: #fff; }
.dark .mcp .mcp-progress .bar i { background: var(--mcp-navy-ink); }
.dark .mcp .mcp-tab.is-on { color: var(--mcp-orange-ink); }
.mcp .mcp-check { accent-color: var(--mcp-navy-ink); }
.mcp button, .mcp input, .mcp select { font-family: var(--mcp-font); }
.mcp .mcp-ic { width: var(--mcp-ic-btn); height: var(--mcp-ic-btn); flex: none; stroke-width: var(--mcp-stroke); }
.mcp .mcp-ic--nav { width: var(--mcp-ic-nav); height: var(--mcp-ic-nav); }
.mcp .mcp-ic--kpi { width: var(--mcp-ic-kpi); height: var(--mcp-ic-kpi); }
.mcp .p360-pill { font-family: var(--mcp-font); font-size: 12px; font-weight: 600; }
.mcp-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; padding: 4px 2px 0; }
.mcp-title { font-size: var(--mcp-fs-title); font-weight: 700; color: var(--ink); margin: 0; line-height: 1.3; }
.mcp-sub { font-size: var(--mcp-fs-body); color: var(--t3); margin: 2px 0 0; font-weight: 500; }
.mcp-top-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mcp-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 12px; padding: 6px; }
.mcp-month { display: inline-flex; align-items: center; gap: 8px; padding: 0 10px; font-size: 15px; font-weight: 700; color: var(--ink); }
.mcp-month .mcp-ic { color: var(--navy); }
.mcp-month select { height: 34px; border: 0; background: transparent; color: var(--ink); color-scheme: light dark; font: inherit; font-weight: 700; padding: 0 4px; max-width: 220px; cursor: pointer; }
.mcp-tabs2 { display: flex; align-items: stretch; gap: 4px; flex-wrap: wrap; }
.mcp-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 10px; font-size: var(--mcp-fs-body); font-weight: 600; color: var(--t2); background: transparent; border: 1px solid transparent; cursor: pointer; font-family: inherit; position: relative; }
.mcp-tab .mcp-ic { width: 17px; height: 17px; color: var(--t3); }
.mcp-tab:hover { background: var(--surface); }
.mcp-tab.is-on { background: var(--surface); color: var(--orange-deep); border-color: var(--border); box-shadow: 0 1px 3px var(--shadow-soft); }
.mcp-tab.is-on .mcp-ic { color: var(--orange); }
.mcp-tab.is-on::after { content: ''; position: absolute; inset-inline: 14px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--orange); }
.mcp-tab .n { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 7px; background: var(--navy-tint); color: var(--navy); }
.mcp-tab .n--orange { background: var(--orange); color: var(--on-orange); }
.mcp-tab:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }
.mcp-more { position: relative; }
.mcp-more-menu { position: absolute; inset-inline-start: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; padding: 6px; display: flex; flex-direction: column; min-width: 200px; z-index: 30; box-shadow: 0 6px 20px var(--shadow-menu); }
.mcp-more-menu button { text-align: start; background: none; border: 0; padding: 9px 12px; border-radius: 8px; font: inherit; font-size: 13px; color: var(--t2); cursor: pointer; display: flex; justify-content: space-between; gap: 10px; }
.mcp-more-menu button:hover, .mcp-more-menu button.is-on { background: var(--navy-tint); color: var(--navy); }
/* indicator cards */
.mcp-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mcp-kpi { display: grid; grid-template-columns: minmax(0, 1fr) 64px; gap: 12px; align-items: center; border: 1px solid var(--border); border-radius: 14px; padding: 14px 18px; background: var(--surface); text-align: start; cursor: pointer; color: inherit; min-width: 0; font: inherit; }
.mcp-kpi:hover { border-color: var(--navy); box-shadow: 0 2px 10px var(--shadow); } .mcp-kpi:focus-visible { outline: 2px solid var(--mcp-focus); outline-offset: 2px; }
.mcp-kpi.is-on { border-color: var(--orange); box-shadow: 0 0 0 2px var(--orange-tint); }
.mcp-kpi.is-static { cursor: default; } .mcp-kpi.is-static:hover { border-color: var(--border); box-shadow: none; }
.mcp-kpi .b { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mcp-kpi .k { font-size: var(--mcp-fs-body); font-weight: 600; color: var(--ink); white-space: normal; }
.mcp-kpi .v { font-size: var(--mcp-fs-kpi); font-weight: 700; color: var(--ink); line-height: 1.1; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 6px; }
.mcp-kpi .v small { font-size: 13px; font-weight: 600; color: var(--t3); }
.mcp-kpi .n { font-size: var(--mcp-fs-small); color: var(--t3); white-space: normal; }
.mcp-kpi .ic { width: 64px; height: 64px; border-radius: 50%; background: var(--navy-tint); color: var(--navy); display: inline-flex; align-items: center; justify-content: center; }
.mcp-kpi .ic .mcp-ic { width: var(--mcp-ic-kpi); height: var(--mcp-ic-kpi); }
.mcp-kpi.tone-orange .ic { background: var(--orange-tint); color: var(--orange); }
.mcp-kpi.tone-good .ic { background: var(--good-tint); color: var(--good); }
.mcp-kpi.tone-red .ic { background: var(--red-tint); color: var(--red); }
.mcp-kpi--wide { grid-column: span 1; grid-template-columns: minmax(0, 1fr); }
.mcp-progress { display: grid; grid-template-columns: auto minmax(60px, 1fr); gap: 10px; align-items: center; margin-top: 4px; }
.mcp-progress b { font-size: 24px; color: var(--ink); font-variant-numeric: tabular-nums; }
.mcp-progress .bar { height: 12px; background: var(--surface-2); border-radius: 6px; overflow: hidden; }
.mcp-progress .bar i { display: block; height: 100%; background: var(--navy); border-radius: 6px; }
/* workspace grid: table + aside */
.mcp-grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(260px, 24%, 320px); gap: 14px; align-items: start; }
.mcp-main { min-width: 0; }
.mcp-aside { position: sticky; top: 64px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mcp-surface { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mcp-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mcp-seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 10px; overflow: hidden; flex: none; background: var(--surface); }
.mcp-seg button { border: 0; background: transparent; color: var(--t2); padding: 9px 16px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 6px; }
.mcp-seg button.is-on { background: var(--navy); color: var(--on-navy); }
.mcp-seg button:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
.mcp-search { display: flex; align-items: center; gap: 8px; background: var(--mcp-input-bg); border: 1px solid var(--border-strong); border-radius: 10px; padding: 0 12px; height: 40px; flex: 1 1 240px; color: var(--muted); min-width: 0; }
.mcp-search input { flex: 1; border: 0; outline: none; background: transparent; font-size: 13px; color: var(--t2); height: 100%; min-width: 0; font-family: inherit; }
.mcp-search:focus-within { border-color: var(--navy); }
.mcp-sort { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border-strong); border-radius: 10px; height: 40px; padding: 0 10px; background: var(--mcp-input-bg); color: var(--t2); flex: none; }
.mcp-sort select { border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--t2); max-width: 220px; cursor: pointer; }
.mcp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mcp-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: var(--surface-2); color: var(--t2); border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
.mcp-chip b { font-weight: 700; color: var(--t3); }
.mcp-chip.is-on { background: var(--orange-tint); border-color: var(--orange); color: var(--orange-deep); }
.mcp-chip.is-on b { color: var(--orange-deep); }
.mcp-chip:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }
/* the table */
.mcp-tablewrap { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); }
.mcp-table { width: 100%; border-collapse: collapse; font-size: var(--mcp-fs-body); }
.mcp-table th { text-align: start; font-size: var(--mcp-fs-body); font-weight: 700; color: var(--ink); padding: 12px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap; }
.mcp-table td { padding: 12px 14px; border-top: 1px solid var(--border-soft); vertical-align: middle; }
.mcp-table tr.is-selected td { background: var(--mcp-selected); }
.mcp-table tbody tr:hover td { background: var(--mcp-hover); } .mcp-table tbody tr.is-selected:hover td { background: var(--mcp-selected); }
.mcp-table tr.is-inplan td { background: var(--good-tint); }
.mcp-td-check { width: 44px; text-align: center; }
.mcp-td-check input, .mcp-check { width: 18px; height: 18px; accent-color: var(--navy); cursor: pointer; vertical-align: middle; }
.mcp .mcp-hit { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; cursor: pointer; }
.mcp-td-details { width: 64px; text-align: center; }
.mcp-proj { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mcp-sku { font-size: var(--mcp-fs-strong); font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mcp-sku > .mcp-ic + * , .mcp-sku { white-space: nowrap; }
.mcp-sku .mcp-ic { width: 16px; height: 16px; color: var(--t3); flex: none; }
.mcp-proj-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11.5px; color: var(--t3); }
.mcp-kind { display: inline-flex; align-items: center; border-radius: 6px; padding: 2px 8px; font-size: 11px; font-weight: 700; background: var(--navy-tint); color: var(--navy); white-space: nowrap; }
.mcp-kind--permit { background: var(--verify-tint); color: var(--verify); }
.mcp-why { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--t2); }
.mcp-why b { font-weight: 600; color: var(--ink); }
.mcp-why .more { background: none; border: 0; padding: 0; color: var(--navy); font-weight: 700; font-size: 12px; cursor: pointer; text-align: start; font-family: inherit; }
.mcp-why .more:hover, .mcp-why .more:focus-visible { text-decoration: underline; outline: none; }
.mcp-delay { display: flex; flex-direction: column; gap: 2px; }
.mcp-delay b { font-size: var(--mcp-fs-strong); font-weight: 700; color: var(--red); font-variant-numeric: tabular-nums; }
.mcp-delay b.is-soon { color: var(--orange-deep); }
.mcp-delay b.is-none { color: var(--muted); font-size: 14px; }
.mcp-delay span { font-size: 11px; color: var(--t3); }
.mcp-money { background: none; border: 0; padding: 0; text-align: start; cursor: pointer; font: inherit; display: flex; flex-direction: column; gap: 2px; color: inherit; font-family: inherit; }
.mcp-money b { font-size: var(--mcp-fs-strong); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.mcp-money span { font-size: 11.5px; color: var(--t3); }
.mcp-money:hover b, .mcp-money:focus-visible b { text-decoration: underline; } .mcp-money:focus-visible { outline: none; }
.mcp-money.is-muted b { color: var(--muted); font-weight: 600; }
.mcp .p360-chip--navy { background: var(--navy-tint); color: var(--navy); border-color: transparent; }
.mcp-money b small { font-size: 11px; font-weight: 600; color: var(--t3); margin-inline-start: 4px; }
.mcp-iconbtn { width: 34px; height: 34px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--navy); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.mcp-iconbtn .mcp-ic { width: 18px; height: 18px; transition: transform .15s; }
.mcp-iconbtn[aria-expanded="true"] .mcp-ic { transform: rotate(180deg); }
.mcp-iconbtn:hover, .mcp-iconbtn:focus-visible { border-color: var(--navy); outline: none; }
/* inline items box */
.mcp-row-items > td { background: var(--surface-2); padding: 10px 14px 14px; }
.mcp-items-box { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.mcp-items-h { display: flex; flex-direction: column; gap: 2px; }
.mcp-items-h b { font-size: 14px; color: var(--ink); }
.mcp-items-h span { font-size: 11.5px; color: var(--t3); }
.mcp-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 6px; border-top: 1px solid var(--border-soft); font-size: 13px; }
.mcp-item:first-of-type { border-top: 0; }
.mcp-item.is-selected { background: var(--navy-tint); border-radius: 8px; }
.mcp-item .lbl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; min-width: 0; }
.mcp-item .lbl small { font-weight: 400; color: var(--t3); font-size: 11.5px; }
.mcp-item .aux { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--t3); white-space: nowrap; }
.mcp-item .aux b { color: var(--red); font-variant-numeric: tabular-nums; }
.mcp-item .aux .mcp-money b { font-size: 12.5px; color: var(--ink); }
.mcp-item .done { color: var(--good); font-weight: 700; }
.mcp-pager { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px 2px; }
.mcp-pages { display: flex; gap: 4px; }
.mcp-pages button { min-width: 32px; height: 32px; border: 1px solid var(--border-strong); background: var(--surface); border-radius: 8px; color: var(--t2); font: inherit; font-size: 13px; cursor: pointer; }
.mcp-pages button.is-on { background: var(--navy); color: var(--on-navy); border-color: var(--navy); }
.mcp-pages button:disabled { opacity: var(--mcp-disabled); cursor: default; }
.mcp-foot { font-size: 11.5px; color: var(--t3); }
/* aside */
.mcp-aside-h { display: flex; align-items: center; gap: 8px; font-size: var(--mcp-fs-section); font-weight: 700; color: var(--ink); }
.mcp-aside-h .mcp-ic { width: 20px; height: 20px; color: var(--navy); }
.mcp-picked { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 150px; overflow: auto; }
.mcp-picked li { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--t2); background: var(--surface-2); border-radius: 8px; padding: 5px 8px; }
.mcp-picked li b { color: var(--ink); flex: none; }
.mcp-picked li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.mcp-unselect { border: 0; background: none; color: var(--red); font-size: 15px; cursor: pointer; flex: none; line-height: 1; font-family: inherit; }
.mcp-stat { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: center; padding: 4px 0; }
.mcp-stat .ic { width: 36px; height: 36px; border-radius: 10px; background: var(--navy-tint); color: var(--navy); display: inline-flex; align-items: center; justify-content: center; }
.mcp-stat .ic .mcp-ic { width: 20px; height: 20px; }
.mcp-stat .v { font-size: 20px; font-weight: 700; color: var(--ink); line-height: 1.15; font-variant-numeric: tabular-nums; }
.mcp-stat .b { display: flex; flex-direction: column; min-width: 0; }
.mcp-stat .k { font-size: 11.5px; color: var(--t3); }
.mcp-stat--btn { background: none; border: 0; width: 100%; text-align: start; cursor: pointer; font: inherit; font-family: inherit; color: inherit; }
.mcp-stat--btn:hover .v, .mcp-stat--btn:focus-visible .v { text-decoration: underline; } .mcp-stat--btn:focus-visible { outline: none; }
.mcp-stat .v small { font-size: 11px; font-weight: 600; color: var(--t3); }
.mcp-substat { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 2px 0 2px; padding-inline-start: 48px; font-size: 12px; color: var(--t3); }
.mcp-substat b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mcp-effect-btn { background: none; border: 0; padding: 0; font: inherit; font-family: inherit; color: inherit; cursor: pointer; } .mcp-effect-btn:hover b { text-decoration: underline; }
.mcp-detail-sub { margin: 14px 0 6px; font-size: 14px; font-weight: 700; color: var(--ink); }
.mcp-caution { display: flex; gap: 8px; align-items: flex-start; background: var(--navy-tint); border-radius: 10px; padding: 10px 12px; font-size: 11.5px; color: var(--t2); }
.mcp-caution .mcp-ic { width: 16px; height: 16px; color: var(--navy); flex: none; margin-top: 2px; }
.mcp-cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; border: 0; border-radius: 10px; padding: 12px 14px; background: var(--orange); color: var(--on-orange); font: inherit; font-size: var(--mcp-fs-body); font-weight: 700; cursor: pointer; font-family: inherit; }
.mcp-cta:hover { filter: brightness(.97); } .mcp-cta:focus-visible { outline: 3px solid var(--mcp-focus); outline-offset: 2px; }
.mcp-cta:disabled { opacity: var(--mcp-disabled); cursor: not-allowed; }
.mcp-link-card { display: flex; align-items: center; gap: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; text-align: start; cursor: pointer; font: inherit; color: inherit; width: 100%; font-family: inherit; }
.mcp-link-card:hover, .mcp-link-card:focus-visible { border-color: var(--navy); outline: none; }
.mcp-link-card .mcp-ic { width: 18px; height: 18px; flex: none; color: var(--good); }
.mcp-link-card .b { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.mcp-link-card .b b { font-size: 13px; color: var(--ink); }
.mcp-link-card .b span { font-size: 12px; color: var(--t3); }
.mcp-link-card .chev { color: var(--navy); font-size: 18px; flex: none; }
.mcp-warn-card { background: var(--amber-tint); border: 1px solid var(--amber-border); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--t2); }
.mcp-warn-card .h { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--amber-ink); font-size: 13px; }
.mcp-warn-card .h .mcp-ic { width: 18px; height: 18px; color: var(--orange-deep); }
.mcp-warn-card .h .n { margin-inline-start: auto; font-size: 11px; background: var(--surface); border-radius: 999px; padding: 1px 8px; color: var(--amber-ink); }
.mcp-warn-card .go { background: none; border: 0; padding: 0; color: var(--navy); font-weight: 700; font-size: 12.5px; cursor: pointer; text-align: start; font-family: inherit; }
.mcp-warn-card.is-ok { background: var(--good-tint); border-color: var(--good-edge); } .mcp-warn-card.is-ok .h { color: var(--good); } .mcp-warn-card.is-ok .h .mcp-ic { color: var(--good); }
.mcp-aside-toggle { display: none; }
/* drawers (detail · review · print preview) */
.mcp-drawer-backdrop { position: fixed; inset: 0; background: var(--shadow); z-index: 70; }
.mcp-drawer { position: fixed; top: 0; bottom: 0; inset-inline-end: 0; width: min(640px, 100vw); background: var(--mcp-panel); z-index: 71; display: flex; flex-direction: column; box-shadow: 0 0 30px var(--shadow-menu); color: var(--t2); font-size: 13px; }
.mcp-drawer--print { width: min(720px, 100vw); background: var(--bg); }
.mcp-drawer-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--border); background: var(--surface); }
.mcp-drawer-h h3 { margin: 0; font-size: 15px; color: var(--ink); }
.mcp-drawer-b { flex: 1; overflow: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; }
.mcp-drawer-f { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 18px; border-top: 1px solid var(--border); font-size: 12px; background: var(--surface-2); }
.mcp-detail-dl { grid-template-columns: 120px minmax(0, 1fr); }
.mcp-detail-dl dd { display: flex; flex-direction: column; gap: 3px; }
.mcp-detail-dl .p360-link, .mcp-review-list .p360-link { background: none; border: 0; padding: 0; cursor: pointer; text-align: start; font-family: inherit; }
.mcp-subtable { font-size: 12px; } .mcp-subtable th { padding: 6px 8px; } .mcp-subtable td { padding: 7px 8px; } .mcp-subtable tr.is-delivered td { color: var(--muted); }
.mcp-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.mcp-review-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; }
.mcp-review-list li { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; }
.mcp-review-list li.sev--advisory { color: var(--t3); border-style: dashed; }
.mcp-a4 { position: relative; width: 100%; overflow: hidden; border: 1px solid var(--border-strong); background: #fff; box-shadow: 0 6px 24px var(--shadow); }
.mcp-a4 iframe { position: absolute; top: 0; left: 0; border: 0; display: block; transform-origin: 0 0; background: #fff; }
.mcp-print-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mcp-print-actions a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px; padding: 12px; font-size: 14px; font-weight: 800; text-decoration: none; }
.mcp-print-actions .pdf { background: var(--orange); color: var(--on-orange); }
.mcp-print-actions .print { border: 1px solid var(--orange); color: var(--orange-deep); background: var(--surface); }
/* plan view */
.mcp-plan-table td { vertical-align: top; }
.mcp-state { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); font-size: 13px; }
.mcp-state i { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); flex: none; }
.mcp-state.st-completed i { background: var(--good); } .mcp-state.st-started i { background: var(--navy); } .mcp-state.st-overdue i, .mcp-state.st-blocked i { background: var(--red); }
.mcp-srcbtn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: var(--navy-tint); color: var(--navy); border-radius: 8px; padding: 6px 12px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; white-space: nowrap; }
.mcp-srcbtn .mcp-ic { width: 15px; height: 15px; }
.mcp-effect { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; background: var(--surface); font-size: var(--mcp-fs-strong); color: var(--ink); }
.mcp-effect .h { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; padding-inline-end: 14px; border-inline-end: 1px solid var(--border); }
.mcp-effect .h .mcp-ic { width: 20px; height: 20px; color: var(--navy); }
.mcp-effect .sep { color: var(--orange); font-weight: 800; }
.mcp-effect .p360-note { flex-basis: 100%; }
.mcp-meet { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--amber-tint); border: 1px solid var(--amber-border); border-radius: 12px; padding: 12px 16px; font-size: 13px; color: var(--t2); }
.mcp-meet .h { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--amber-ink); padding-inline-end: 12px; border-inline-end: 1px solid var(--amber-border); }
.mcp-meet .h .mcp-ic { width: 18px; height: 18px; color: var(--orange-deep); }
.mcp-meet .go { margin-inline-start: auto; background: none; border: 0; padding: 0; color: var(--navy); font-weight: 700; cursor: pointer; font-family: inherit; font-size: 13px; }
.mcp-meet.is-ok { background: var(--good-tint); border-color: var(--good-edge); } .mcp-meet.is-ok .h { color: var(--good); border-color: var(--good-edge); }
.mcp-btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink); border-radius: 10px; padding: 10px 16px; font-size: var(--mcp-fs-body); font-weight: 600; cursor: pointer; font-family: inherit; white-space: nowrap; }
.mcp-btn .mcp-ic { width: 17px; height: 17px; }
.mcp-btn:hover, .mcp-btn:focus-visible { border-color: var(--navy); outline: none; }
.mcp-btn--navy { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.mcp-btn--orange { border-color: var(--orange); color: var(--orange-deep); }
.mcp-btn:disabled { opacity: var(--mcp-disabled); cursor: not-allowed; }
.mcp-btn.is-on { background: var(--navy-tint); border-color: var(--navy); }
.mcp-saved { display: inline-flex; align-items: center; gap: 6px; background: var(--good-tint); color: var(--good); border-radius: 8px; padding: 6px 12px; font-size: 13px; font-weight: 700; }
.mcp-saved .mcp-ic { width: 16px; height: 16px; }
.mcp-edit-box { border: 1px dashed var(--border-strong); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; background: var(--surface-2); }
.mcp-edit-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mcp-mini-select { height: 32px; border: 1px solid var(--border-strong); border-radius: 8px; padding: 0 8px; font-size: 12px; background: var(--mcp-input-bg); color: var(--t2); }
.mcp-gov { font-size: 12.5px; }
.mcp-gov summary { cursor: pointer; color: var(--t3); font-weight: 600; font-size: 12px; list-style: none; }
.mcp-gov .mcp-plan-meta, .mcp-gov .mcp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.mcp-note { flex: 1 1 260px; min-width: 0; height: 34px; border: 1px solid var(--border-strong); border-radius: 8px; padding: 0 10px; font-size: 12.5px; background: var(--mcp-input-bg); color: var(--t2); }
.mcp-nostate { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; border: 1px dashed var(--border-strong); border-radius: 12px; padding: 16px; background: var(--surface-2); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[x-cloak] { display: none !important; }
/* content-width responsiveness (the sidebar never decides this) */
.mcp-kpis--plan { grid-template-columns: 1fr 1fr 1fr 1.5fr; }
@container (max-width: 1080px) { .mcp-aside-h { font-size: 16px; } .mcp-stat .v { font-size: 17px; } .mcp-kpi .v { font-size: 26px; } .mcp-kpi .ic { width: 52px; height: 52px; } .mcp-grid { grid-template-columns: minmax(0, 1fr) clamp(224px, 26%, 300px); } .mcp-table th, .mcp-table td { padding: 10px 10px; } .mcp-kpis--plan { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* below ~860px of CONTENT width (a 1024 viewport with the sidebar open) the table keeps its full width and the impact panel becomes a bottom sheet */
@container (max-width: 860px) {
  .mcp-grid { grid-template-columns: minmax(0, 1fr); }
  .mcp-aside { position: fixed; bottom: var(--mcp-nav-h, 0px); inset-inline: 0; top: auto; z-index: 35; background: var(--surface); border-top: 1px solid var(--border-strong); box-shadow: 0 -6px 20px var(--shadow); padding: 8px 12px 10px; gap: 8px; max-height: 80vh; overflow: auto; }
  .mcp-aside-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; background: none; border: 0; padding: 4px 0; font: inherit; font-family: inherit; color: var(--ink); font-weight: 700; cursor: pointer; }
  .mcp-aside-toggle span { font-weight: 400; color: var(--t3); font-size: 12px; }
  .mcp-aside:not(.is-open) > :not(.mcp-aside-toggle):not(.mcp-cta) { display: none; }
  .mcp-main { padding-bottom: 140px; }
  .mcp-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .mcp-kpi { padding: 10px 12px; grid-template-columns: minmax(0, 1fr); } .mcp-kpi .ic { display: none; }
}
/* filters panel (phones): search stays visible, filters + sort open in a sheet with the active count */
.mcp-filters-btn { display: none; }
.mcp-filters-panel { display: contents; }
.mcp-filters-panel > .mcp-chips { flex-basis: 100%; }
@container (max-width: 620px) {
  .mcp-top { flex-direction: column; gap: 8px; } .mcp-title { font-size: 24px; } .mcp-top-actions { width: 100%; flex-wrap: wrap; }
  .mcp-bar { flex-direction: column; align-items: stretch; gap: 6px; padding: 6px; }
  .mcp-month { justify-content: flex-start; height: 44px; }
  .mcp-tabs2 { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .mcp-tabs2::-webkit-scrollbar { display: none; }
  .mcp-tab { padding: 10px 14px; min-height: 44px; flex: none; }
  .mcp-kpis { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .mcp-kpis::-webkit-scrollbar { display: none; }
  .mcp-kpi { flex: 0 0 min(72%, 260px); grid-template-columns: minmax(0, 1fr) 44px; padding: 10px 12px; gap: 8px; }
  .mcp-kpi .v { font-size: 24px; } .mcp-kpi .ic { width: 44px; height: 44px; } .mcp-kpi .ic .mcp-ic { width: 22px; height: 22px; }
  .mcp-kpis--plan { display: flex; } .mcp-kpi--wide { flex-basis: min(88%, 320px); }
  .mcp-surface { padding: 12px; border-radius: 12px; }
  .mcp-toolbar { flex-wrap: nowrap; } .mcp-seg { display: none; }
  .mcp-search { flex: 1 1 auto; height: 44px; }
  .mcp-filters-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--mcp-input-bg); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; flex: none; }
  .mcp-filters-btn .n { background: var(--orange); color: var(--on-orange); border-radius: 999px; padding: 0 7px; font-size: 12px; font-weight: 700; }
  .mcp-filters-panel { display: none; position: fixed; inset: 0; z-index: 72; background: var(--mcp-panel); padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); overflow: auto; flex-direction: column; gap: 14px; }
  .mcp-filters-panel.is-open { display: flex; }
  .mcp-filters-panel .mcp-seg { display: inline-flex; width: 100%; } .mcp-filters-panel .mcp-seg button { flex: 1; justify-content: center; min-height: 44px; }
  .mcp-filters-panel .mcp-sort { width: 100%; height: 44px; } .mcp-filters-panel .mcp-sort select { width: 100%; max-width: none; }
  .mcp-filters-panel > .mcp-chips { flex: 0 0 auto; align-content: flex-start; }
  .mcp-filters-panel .mcp-chip { min-height: 44px; border-radius: 12px; }
  .mcp-filters-h { display: flex; justify-content: space-between; align-items: center; font-size: var(--mcp-fs-section); font-weight: 700; color: var(--ink); }
  /* the comparison rows become compact cards with the SAME cells: project + pick · why · delay + installments · details */
  .mcp-tablewrap { border: 0; background: transparent; overflow: visible; }
  .mcp-table thead { display: none; }
  .mcp-table, .mcp-table tbody { display: block; width: 100%; }
  /* three columns: the money cell shares the third row with the delay cell at half width — a seven-digit amount stays on one line, no font shrink */
  .mcp-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; grid-template-areas: "proj proj check" "why why why" "delay inst inst" "details details details"; gap: 6px 10px; align-items: start; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px; margin-bottom: 10px; }
  .mcp-table tbody tr.is-selected { background: var(--mcp-selected); border-color: var(--navy); }
  .mcp-table tbody tr.is-selected td, .mcp-table tbody tr:hover td { background: transparent; }
  .mcp-table td { display: block; padding: 0; border: 0; }
  .mcp-td-check { grid-area: check; width: auto; display: flex; align-items: flex-start; justify-content: flex-end; }
  .mcp-td-check input { width: 24px; height: 24px; margin: 6px; }
  .mcp-td-proj { grid-area: proj; }
  .mcp-td-why { grid-area: why; padding-top: 4px; border-top: 1px solid var(--border-soft); }
  .mcp-td-delay { grid-area: delay; } .mcp-td-inst { grid-area: inst; text-align: end; }
  .mcp-td-inst .mcp-money { align-items: flex-end; }
  .mcp-td-details { grid-area: details; width: auto; text-align: start; }
  .mcp-td-details .mcp-iconbtn { width: 100%; height: 44px; justify-content: center; gap: 8px; font: inherit; font-weight: 600; color: var(--navy); }
  .mcp-td-details .mcp-iconbtn .lbl { display: inline; }
  .mcp-row-items { display: block !important; padding: 0 !important; background: transparent !important; border: 0 !important; margin-top: -4px; }
  .mcp-row-items > td { padding: 0; } .mcp-items-box { border-radius: 12px; }
  .mcp-item { grid-template-columns: 44px minmax(0, 1fr); min-height: 44px; } .mcp-item .aux { grid-column: 2; white-space: normal; justify-content: flex-start; }
  .mcp-item .mcp-check { width: 24px; height: 24px; margin: 6px; }
  .mcp-plan-table tbody tr { grid-template-columns: minmax(0, 1fr); grid-template-areas: "proj" "why" "delay" "details"; }
  .mcp-td-inst .mcp-money b { white-space: nowrap; }
  .mcp-item .aux .mcp-money b { font-size: 14px; }
  .mcp-td-state { grid-area: delay; }
  .mcp-pager { flex-direction: column; align-items: stretch; gap: 6px; } .mcp-pages { justify-content: center; } .mcp-pages button { min-width: 44px; height: 44px; }
  .mcp-drawer { width: 100vw; } .mcp-drawer-h { padding: 12px 14px; flex-wrap: wrap; } .mcp-drawer-h > div:first-child { flex: 1 1 0; min-width: 0; } .mcp-drawer-b { padding: 12px 14px; }
  .mcp-drawer .mcp-seg { display: inline-flex; order: 3; flex-basis: 100%; } .mcp-drawer .mcp-seg button { flex: 1; justify-content: center; min-height: 44px; }
  .mcp-drawer .mcp-iconbtn { width: 44px; height: 44px; }
  .mcp-print-actions { grid-template-columns: 1fr; } .mcp-print-actions a { min-height: 44px; }
  .mcp-effect, .mcp-meet { flex-direction: column; align-items: flex-start; gap: 6px; } .mcp-effect .h, .mcp-meet .h { border: 0; padding: 0; } .mcp-meet .go { margin-inline-start: 0; min-height: 44px; }
  .mcp-srcbtn, .mcp-btn { min-height: 44px; }
  /* the sheet sits on top of the app's phone navigation and the list clears both: heights are measured at runtime (--mcp-nav-h / --mcp-sheet-h on <html>), never assumed */
  .mcp-main { padding-bottom: calc(var(--mcp-sheet-h, 64px) + var(--mcp-nav-h, 0px) + 16px + env(safe-area-inset-bottom, 0px)); }
  .mcp-aside { bottom: var(--mcp-nav-h, 0px); padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 65; }
  /* the phone keyboard (visual viewport shrinks) steps the sheet aside so it never covers a field or the last card */
  .mcp-aside.is-kbd { transform: translateY(110%); transition: transform .15s; }
  .mcp-aside-toggle { min-height: 44px; }
  /* phone typography floor: no text below 14px (secondary text sits at 14px, never smaller) */
  .mcp :is(.p360-note, .p360-hint, small, .c-muted, .mcp-foot, .mcp-kind, .p360-pill, .p360-chip, .p360-link, .more, summary, .k, .n, .mcp-proj-sub, .mcp-sub, td, th, option, .p360-nums, .p360-btn--xs, .mcp-chip, .mcp-chip b, .mcp-why b, .mcp-delay span, .mcp-money span, .mcp-items-h span, .mcp-caution span, .mcp-aside-toggle span, .mcp-more-menu button, .mcp-picked li, .mcp-picked li *, .mcp-stat .b *, .aux b, .lbl small, .p360-deferred *, .p360-empty) { font-size: 14px; }
  /* 44×44 touch targets for every small control (checkbox hit area, × buttons, inline links) */
  .mcp .mcp-hit { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -8px; cursor: pointer; }
  .mcp-td-check input, .mcp-item .mcp-check, .mcp .mcp-hit input { width: 24px; height: 24px; margin: 0; }
  .mcp .p360-btn--xs, .mcp-unselect { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .mcp .p360-link, .mcp .more { min-height: 44px; display: inline-flex; align-items: center; }
}
/* the phone keyboard: while the search field is focused the bottom sheet steps aside */
.mcp:has(.mcp-search input:focus) .mcp-aside { transform: translateY(110%); transition: transform .15s; }
@media (min-width: 0) { .mcp .mcp-td-details .mcp-iconbtn .lbl { display: none; } }
@container (max-width: 620px) { .mcp .mcp-td-details .mcp-iconbtn .lbl { display: inline; } }
/* ───────────── TP-QUICK-1 «متابعة الجداول الزمنية»: the schedule list beside the quick update ─────────────
   The monthly-planning module skin (.p360 .mcp tokens) — no new palette: navy titles, orange primary and
   active tab, light blue-grey ground, white cards with light-blue borders, red = late/error, green = success. */
/* the module's page ground, on this page only (same values as the monthly-planning page) */
body:has([data-testid="tpq"]), body:has([data-testid="tpq"]) .fi-main-ctn { background: #F6F8FC; }
.dark body:has([data-testid="tpq"]), .dark body:has([data-testid="tpq"]) .fi-main-ctn { background: #0B1220; }
/* a compact page header so the list and the quick update both start on the first screen */
.fi-page:has([data-testid="tpq"]) .fi-header-heading { font-size: 26px; line-height: 1.3; }
.fi-page:has([data-testid="tpq"]) .fi-header-subheading { font-size: 14px; margin-top: 2px; }
.tpq-form .fi-sc.fi-sc-has-gap { row-gap: 12px; }
.tpq-switch { display: none; }
.tpq-grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(340px, 34%, 440px); gap: 14px; align-items: start; }
.tpq-pane { min-width: 0; }
.tpq-pane--quick { position: sticky; top: 76px; }
.tpq .fi-ta-ctn { border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 1px 3px var(--shadow); background: var(--surface); }
.tpq .fi-ta-header-cell { background: var(--surface-2); }
.tpq .fi-ta-header-cell, .tpq .fi-ta-header-cell * { color: var(--ink); font-weight: 700; }
.tpq .fi-ta-cell { vertical-align: middle; }
.tpq-proj-cell { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; padding: 2px 0; }
.tpq-proj-link, .tpq-proj-name { font-weight: 700; color: var(--ink); font-size: 14.5px; text-decoration: none; overflow-wrap: anywhere; }
.tpq-proj-link:hover, .tpq-proj-link:focus-visible { color: var(--navy); text-decoration: underline; outline: none; }
.tpq-add-btn { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 3px 12px; border: 1px solid var(--orange-border); border-radius: 999px; background: var(--orange-tint); color: var(--orange-deep); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.tpq-add-btn:hover { border-color: var(--orange); }
.tpq-add-btn:focus-visible { outline: 2px solid var(--mcp-focus); outline-offset: 2px; }
/* the card fits the first screen (its top sits ~200px down) and scrolls inside; «حفظ» is its sticky footer */
.tpq-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 1px 3px var(--shadow); padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; max-height: max(440px, calc(100dvh - 210px)); overflow-y: auto; overscroll-behavior: contain; }
.tpq-card .tpq-actions { position: sticky; bottom: -14px; z-index: 3; margin: 0 -16px -14px; padding: 10px 16px 14px; background: var(--surface); border-top: 1px solid var(--border-soft); box-shadow: 0 -8px 14px -12px var(--shadow); }
.tpq-card-h .mcp-aside-h { margin: 0; font-size: 18px; }
.tpq-sub { margin: 2px 0 0; font-size: var(--mcp-fs-small); color: var(--t3); }
.tpq-tabs { display: flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 12px; padding: 4px; }
.tpq-tabs .mcp-tab { flex: 1 1 0; justify-content: center; gap: 6px; padding: 8px 6px; min-height: 42px; font-size: 13px; line-height: 1.25; text-align: center; min-width: 0; }
.tpq-tabs .mcp-tab .mcp-ic { width: 16px; height: 16px; flex: none; }
.tpq-tabs .mcp-tab .n--red { background: var(--red-tint); color: var(--red); }
.tpq-views { margin-bottom: 10px; }
.tpq-views .mcp-tab .n { background: var(--navy-tint); color: var(--navy); }
.tpq-views .mcp-tab.is-on .n { background: var(--orange-tint); color: var(--orange-deep); }
.tpq-panel { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tpq-panel[hidden] { display: none; }
/* the reference search is sized for a row toolbar (flex-basis 240px); in this column panel it keeps its own height */
.tpq-panel > .mcp-search { flex: none; }
.tpq-status, .tpq-note { display: flex; align-items: flex-start; gap: 8px; margin: 0; border-radius: 10px; padding: 10px 12px; font-size: 13px; font-weight: 600; line-height: 1.5; }
.tpq-status .mcp-ic, .tpq-note .mcp-ic { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.tpq-status.is-success { background: var(--good-tint); color: var(--good); border: 1px solid var(--good-edge, var(--good)); }
.tpq-status.is-error { background: var(--red-tint); color: var(--red); border: 1px solid var(--red); }
.tpq-note.is-warn { background: var(--amber-tint); color: var(--amber-ink); border: 1px solid var(--amber-border); }
.tpq-form { min-width: 0; }
.tpq-phrases { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tpq-phrases-k { font-size: 12px; font-weight: 600; color: var(--t3); }
.tpq-phrase { padding: 5px 12px; min-height: 34px; }
.tpq-phrase:hover { border-color: var(--navy); color: var(--ink); }
.tpq-phrase.is-blocker { border-color: var(--red); color: var(--red); background: var(--red-tint); }
.tpq-auto { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; color: var(--t3); }
.tpq-auto .mcp-ic { width: 15px; height: 15px; flex: none; }
.tpq-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tpq-actions .mcp-btn { flex: 1 1 160px; justify-content: center; white-space: normal; text-align: center; line-height: 1.3; min-width: 0; }
/* icon beside its label (preflight makes svg block); the wire:loading label keeps Livewire's own display toggle */
.tpq-actions .mcp-btn > span:not([wire\:loading]) { display: inline-flex; align-items: center; gap: 8px; }
/* «حفظ» = the module's orange primary; navy ink on orange keeps AA contrast (white on this orange does not) */
.tpq-btn-save { background: var(--mcp-orange); border-color: var(--mcp-orange); color: var(--mcp-navy); font-weight: 700; }
.tpq-btn-save:hover, .tpq-btn-save:focus-visible { border-color: var(--mcp-navy); box-shadow: 0 0 0 2px var(--orange-tint); }
.tpq-btn-more { border-color: var(--orange-border); color: var(--orange-deep); }
.tpq-uploading { margin: 0; font-size: 12.5px; color: var(--amber-ink); }
.tpq-list-note { margin: 0; font-size: 12.5px; color: var(--t3); }
.tpq-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tpq-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; align-items: center; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--surface); }
.tpq-row-b { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tpq-row-t { color: var(--ink); font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.tpq-row-s { color: var(--t3); font-size: 12.5px; overflow-wrap: anywhere; }
.tpq-row-c { display: inline-flex; align-items: flex-start; gap: 4px; font-size: 12.5px; color: var(--t2); }
.tpq-row-c .mcp-ic { width: 14px; height: 14px; flex: none; margin-top: 3px; }
.tpq-row-c.is-red { color: var(--red); font-weight: 700; }
.tpq-row-c.is-warn { color: var(--amber-ink); }
.tpq-row-side { display: flex; align-items: center; gap: 10px; }
.tpq-row-btn { padding: 6px 12px; min-height: 36px; font-size: 13px; border-color: var(--orange-border); color: var(--orange-deep); }
.tpq-kind { align-self: flex-start; display: inline-flex; border-radius: 6px; padding: 1px 8px; font-size: 11px; font-weight: 700; background: var(--red-tint); color: var(--red); }
.tpq-kind.is-project { background: var(--navy-tint); color: var(--navy); }
.tpq-days { display: flex; flex-direction: column; align-items: center; min-width: 52px; line-height: 1.1; }
.tpq-days b { font-size: 20px; font-weight: 700; color: var(--red); font-variant-numeric: tabular-nums; }
.tpq-days span { font-size: 11px; color: var(--t3); }
.tpq-days.is-unknown b { color: var(--amber-ink); }
.tpq-sub-items { grid-column: 1 / -1; border-top: 1px dashed var(--border-strong); padding-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.tpq-sub-k { font-size: 12px; font-weight: 600; color: var(--t3); }
.tpq-sub-items ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tpq-sub-items li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; background: var(--surface-2); border-radius: 10px; padding: 8px 10px; }
.tpq-empty { border: 1px dashed var(--border-strong); border-radius: 12px; padding: 18px 14px; text-align: center; font-size: 13px; color: var(--t3); background: var(--surface-2); }
.tpq-empty.is-good { color: var(--good); border-color: var(--good-edge, var(--border-strong)); background: var(--good-tint); }
[dir="rtl"] .tpq-flip { transform: scaleX(-1); }
.tpq .mcp-pages button.is-on { cursor: default; min-width: 56px; }
/* narrow content: the list and the quick update become two tabs of the same page */
@container (max-width: 980px) {
  .tpq-switch { display: flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 12px; padding: 4px; }
  .tpq-switch .mcp-tab { flex: 1 1 0; justify-content: center; min-height: 44px; }
  .tpq-grid { grid-template-columns: minmax(0, 1fr); }
  .tpq-pane { display: none; }
  .tpq-pane.is-on { display: block; }
  .tpq-pane--quick { position: static; }
  .tpq-card { max-height: none; overflow: visible; }
  /* the page scrolls naturally here; a sticky row would slide under the app's phone navigation */
  .tpq-card .tpq-actions { position: static; margin: 0; padding: 0; border-top: 0; box-shadow: none; background: none; }
}
@container (max-width: 620px) {
  .tpq-card { padding: 12px; border-radius: 12px; }
  /* phones: «+ تحديث» under the name so project · last update · edit fit without a sideways scroll */
  .tpq-proj-cell { flex-direction: column; align-items: flex-start; gap: 6px; max-width: 42cqi; white-space: normal; }
  .tpq-proj-link, .tpq-proj-name { white-space: normal; }
  .tpq .fi-ta-row .fi-ta-actions, .tpq .fi-ta-row > td:last-child { padding-inline: 8px; }
  .tpq-tabs .mcp-tab { min-height: 52px; padding: 6px 4px; flex-direction: column; gap: 2px; }
  .tpq-row { grid-template-columns: minmax(0, 1fr); }
  .tpq-row-side { justify-content: space-between; }
  .tpq-row-btn, .tpq-add-btn, .tpq-phrase { min-height: 44px; }
  .tpq-sub-items li { grid-template-columns: minmax(0, 1fr); }
  .tpq-sub-items .tpq-row-btn { width: 100%; justify-content: center; }
  .tpq-actions .mcp-btn { flex-basis: 100%; }
  .tpq :is(.tpq-row-s, .tpq-row-c, .tpq-list-note, .tpq-auto, .tpq-sub, .tpq-phrases-k, .tpq-days span, .tpq-kind, .tpq-sub-k, .tpq-tabs .mcp-tab) { font-size: 14px; }
}
/* «سجل البند» in the schedule's modal (a Filament surface: own light/dark values, same palette) */
.tpq-log { display: flex; flex-direction: column; gap: 10px; max-height: 45vh; overflow-y: auto; padding-inline-end: 4px; }
.tpq-log-entry { border: 1px solid #E2E8F2; border-radius: 12px; padding: 10px 12px; background: #FFFFFF; display: flex; flex-direction: column; gap: 6px; }
.tpq-log-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tpq-log-badge { border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 700; background: #EDF3FC; color: #163469; }
.tpq-log-badge.is-reviewing { background: #FFF7E8; color: #8A5A00; }
.tpq-log-badge.is-approved { background: #E6F4EF; color: #168565; }
.tpq-log-badge.is-rejected { background: #FBE9E7; color: #C62828; }
.tpq-log-meta { font-size: 12.5px; color: #5A6B8C; }
.tpq-log-note { margin: 0; font-size: 14px; color: #163469; white-space: pre-line; overflow-wrap: anywhere; }
.tpq-log-internal { border-inline-start: 3px solid #5546C9; background: #EEEBFD; border-radius: 8px; padding: 6px 10px; font-size: 13px; color: #2F3F5F; }
.tpq-log-internal b { display: inline-flex; align-items: center; gap: 4px; color: #5546C9; font-size: 12px; }
.tpq-log-internal p { margin: 2px 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.tpq-log-ic { width: 14px; height: 14px; }
.tpq-log-media { display: flex; flex-wrap: wrap; gap: 6px; }
.tpq-log-media img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid #E2E8F2; display: block; }
.tpq-log-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 4px 10px; border-radius: 8px; border: 1px solid #D5DDEA; color: #163469; font-size: 12.5px; font-weight: 600; text-decoration: none; }
.tpq-log-chip.is-missing { border-style: dashed; color: #5A6B8C; }
.tpq-log-empty { margin: 0; padding: 14px; text-align: center; color: #5A6B8C; border: 1px dashed #D5DDEA; border-radius: 12px; }
.dark .tpq-log-entry { background: #131C2E; border-color: #2A3650; }
.dark .tpq-log-badge { background: #1E2E4D; color: #8FB2EE; }
.dark .tpq-log-badge.is-reviewing { background: #332612; color: #F5C26B; }
.dark .tpq-log-badge.is-approved { background: #12352B; color: #5AD3A9; }
.dark .tpq-log-badge.is-rejected { background: #3A1A1A; color: #F28B82; }
.dark .tpq-log-meta, .dark .tpq-log-empty, .dark .tpq-log-chip.is-missing { color: #93A3BF; }
.dark .tpq-log-note { color: #E8EEF8; }
.dark .tpq-log-internal { background: #2A2650; border-color: #B3A7F5; color: #C3CEE0; }
.dark .tpq-log-internal b { color: #B3A7F5; }
.dark .tpq-log-media img, .dark .tpq-log-chip, .dark .tpq-log-empty { border-color: #3B4A66; }
.dark .tpq-log-chip { color: #8FB2EE; }

/* Monthly BOQ selection: preserve HOMEi tokens and content-width breakpoints. */
.mcp .mcp-next-body{display:flex;flex-direction:column;gap:5px;font-size:14px;min-width:145px}
.mcp .mcp-cost-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:12px 0}
.mcp .mcp-blocks{list-style:none;margin:0 0 8px;padding:10px 12px;border:1px solid var(--red-border);background:var(--red-tint,#FDECEC);border-radius:10px;font-size:13px;color:var(--ink);display:flex;flex-direction:column;gap:6px}
.mcp .mcp-blocks .h{display:flex;align-items:center;gap:6px;font-weight:700;color:var(--red)} .mcp .mcp-blocks .h .mcp-ic{width:18px;height:18px}
.mcp .mcp-blocks li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px} .mcp .mcp-blocks .mcp-srcbtn{margin-inline-start:auto}
.mcp .mcp-srcbtn--danger{background:var(--surface);border-color:var(--red-border);color:var(--red);margin-inline-start:8px}
.mcp .mcp-btn--danger{border-color:var(--red-border);color:var(--red);background:var(--surface)}
.mcp .mcp-cost-toolbar select,.mcp .mcp-cost-toolbar input{border:1px solid var(--line,#dfe6f3);border-radius:8px;padding:8px;background:var(--card,#fff);color:inherit;max-width:100%;min-height:44px}
.mcp .mcp-cost-toolbar input{width:120px}
.mcp .mcp-cost-item{display:grid;grid-template-columns:32px minmax(95px,1.2fr) repeat(3,minmax(90px,1fr)) minmax(100px,1fr);gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line,#dfe6f3);font-size:14px}
.mcp .mcp-cost-item small{display:block;color:var(--muted,#7181a3);font-size:14px}
.mcp .mcp-path-summary{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;background:var(--soft,#f2f6fc);padding:10px;border-radius:8px}
.mcp .mcp-picked-groups{max-height:48vh;overflow-y:auto}
.mcp .mcp-picked-project,.mcp .mcp-picked-title{display:flex;align-items:center;gap:8px;justify-content:space-between}
.mcp .mcp-picked-project{padding:12px 8px;background:var(--soft,#f2f6fc);border-radius:8px}
.mcp .mcp-picked-card{padding:12px 8px;border:1px solid var(--line,#dfe6f3);border-radius:8px;margin:8px 0;font-size:14px;line-height:1.8}
.mcp .mcp-picked-title{flex-wrap:wrap;font-size:16px}
.mcp .mcp-tender{display:flex;flex-wrap:wrap;gap:5px;align-items:center;font-size:14px}
.mcp .mcp-cost-total{display:flex;flex-direction:column;gap:10px;padding:12px;background:var(--soft,#f2f6fc);border-radius:10px;margin-top:12px}
.mcp .mcp-cost-total .mcp-substat{width:100%;text-align:start}
@container (max-width:860px){.mcp .mcp-cost-item{grid-template-columns:32px 1fr 1fr}.mcp .mcp-picked-groups{max-height:40vh}}
.dark .mcp .mcp-cost-toolbar select,.dark .mcp .mcp-cost-toolbar input,.dark .mcp .mcp-path-summary,.dark .mcp .mcp-picked-project,.dark .mcp .mcp-cost-total{background:#19283e;color:#e3eaf5}

/* Engineering extracts: HOMEi construction surface; scoped to the resource. */
.homei-extracts { --ext-ink:#183568; --ext-accent:#ff801a; --ext-line:#e1e8f3; --ext-muted:#7c8ba7; --ext-surface:#fff; --ext-soft:#f5f7fb; }
.homei-extracts .fi-main { color:var(--ext-ink); }
.homei-extracts .fi-header-heading {color:var(--ext-ink);font-size:28px;font-weight:800;}
.homei-extracts .fi-header {gap:16px;align-items:center;}
.homei-extracts .fi-section,.homei-extracts .fi-ta-ctn {border:1px solid var(--ext-line);border-radius:16px;box-shadow:none;background:var(--ext-surface);}
.homei-extracts .fi-section-header {border-bottom:1px solid var(--ext-line);padding:16px 20px;}
.homei-extracts .fi-section-header-heading {color:var(--ext-ink);font-size:18px;}
.homei-extracts .fi-ta-header-cell {background:var(--ext-soft);color:var(--ext-ink);padding-block:16px;}
.homei-extracts .fi-ta-text-item,.homei-extracts .fi-in-text-item {color:var(--ext-ink);font-size:15px;}
.homei-extracts .fi-ta-row {border-bottom:1px solid var(--ext-line);}
.homei-extracts .fi-ta-row:hover {background:var(--ext-soft);}
.homei-extracts .fi-input-wrp {border-radius:10px;box-shadow:0 0 0 1px var(--ext-line);}
.homei-extracts .fi-fo-field-wrp-label,.homei-extracts .fi-in-entry-wrp-label {color:var(--ext-muted);font-size:14px;}
.homei-extracts .fi-btn {min-height:44px;border-radius:10px;}
.homei-extracts .fi-btn.fi-color-primary {background:var(--ext-accent);color:white;}
.homei-extracts .fi-icon-btn {min-height:44px;min-width:44px;}
.homei-extracts .fi-section-content {padding:20px;}
.homei-extracts .fi-ta-content {overflow-x:auto;}
.dark.homei-extracts, .dark .homei-extracts {--ext-ink:#e1eafa;--ext-line:#33435d;--ext-muted:#adbad0;--ext-surface:#192337;--ext-soft:#202e44;}
@media(max-width:640px) {
 .homei-extracts .fi-header-heading {font-size:22px;}
 .homei-extracts .fi-header-actions {flex-wrap:wrap;gap:8px;}
 .homei-extracts .fi-section-content {padding:14px;}
 .homei-extracts .fi-ta-text-item {white-space:nowrap;}
}

@container (max-width:620px) { .mcp .mcp-next {grid-area:why;} .mcp .mcp-next-body {padding:12px;background:var(--surface-alt);border-radius:10px;min-width:0;} }

@container (max-width:860px) {
 .mcp .mcp-cost-item {grid-template-columns:32px minmax(0,1fr) minmax(0,1fr);align-items:start;}
 .mcp .mcp-cost-item > :nth-child(2) {grid-column:2 / -1;align-self:center;}
 .mcp .mcp-cost-item > :nth-child(3), .mcp .mcp-cost-item > :nth-child(5) {grid-column:2;}
 .mcp .mcp-cost-item > :nth-child(4), .mcp .mcp-cost-item > :nth-child(6) {grid-column:3;}
 .mcp .mcp-cost-item > * {min-width:0;}
 .mcp .mcp-cost-item .mcp-money > b {white-space:nowrap;}
}

.homei-extracts .fi-tabs-item[aria-selected="true"] {background:#fff1e5;color:#a94800;border-bottom:2px solid var(--ext-accent);}
.homei-extracts .fi-header-heading {min-width:220px;}
@media(max-width:640px){.homei-extracts .fi-header-heading {min-width:0;}}

/* Budget spreadsheet: compact rows, logical sticky name, raised active search. */
.homei-budgets .homei-budget-items {container-type:normal;display:block;overflow:auto;max-width:100%;isolation:isolate;padding-bottom:12px;}
.homei-budgets .homei-budget-items > table {display:table;width:max-content;min-width:100%;border-collapse:separate;border-spacing:0;}
.homei-budgets .homei-budget-items > table > thead {display:table-header-group;}
.homei-budgets .homei-budget-items > table > tbody {display:table-row-group;}
.homei-budgets .homei-budget-items > table > tbody > tr {display:table-row;padding:0;}
.homei-budgets .homei-budget-items > table > tbody > tr > td:not(.fi-hidden) {display:table-cell;padding:6px 10px;min-width:150px;vertical-align:middle;}
.homei-budgets .homei-budget-items :is(td,th):first-of-type {position:sticky;inset-inline-start:0;min-width:280px;background:var(--ext-surface);z-index:2;box-shadow:-2px 0 4px #18356812;}
.homei-budgets .homei-budget-items td:first-of-type:focus-within {z-index:40;}
.homei-budgets .homei-budget-items th {background:var(--ext-soft);color:var(--ext-ink);padding:12px 10px;}
.homei-budgets .homei-budget-items .fi-dropdown-panel {z-index:50;text-align:start;}
.homei-budgets .homei-budget-items [role="option"] {white-space:normal;line-height:1.6;}
.homei-budgets .fi-tabs-item[aria-selected="true"] {color:var(--ext-ink);background:#fff1e5;border-bottom:2px solid var(--ext-accent);}

@media(max-width:640px){.homei-budgets .homei-budget-items :is(td,th):first-of-type {min-width:220px;max-width:220px;}.homei-budgets .fi-section-content {padding:10px;}}

.homei-budgets .homei-budget-items td :is(.fi-fo-field-label-content,.fi-in-entry-label) {display:none;}
.homei-budgets .homei-budget-items td :is(.fi-fo-field,.fi-in-entry) {row-gap:0;}