/* ECOMEN-E-Office colour theme: brand green sidebar, colour-coded status words, coloured actions. */
:root {
  --c-approved: #1B6B3A;  /* dark green */
  --c-rejected: #C62828;  /* red */
  --c-pending: #E8A202;   /* amber */
  --c-returned: #E0631A;  /* orange */
  --c-forward: #1E63C4;   /* blue */
  --c-running: #00838F;   /* teal */
  --c-hold: #7B4DB5;      /* purple */
  --c-upcoming: #3F51B5;  /* indigo */
  --brand-1: #0E4D33; --brand-2: #12704A;
}

/* Status words: solid, colour per meaning */
.pill { color: #fff; background: #6B7780; letter-spacing: .01em; }
.pill.Approved, .pill.Completed, .pill.Submitted, .pill.Complete { background: var(--c-approved); color: #fff; }
.pill.Rejected, .pill.Missing, .pill.Urgent { background: var(--c-rejected); color: #fff; }
.pill.Pending, .pill.Draft, .pill.Partial { background: var(--c-pending); color: #231A00; }
.pill.Returned { background: var(--c-returned); color: #fff; }
.pill.Forwarded { background: var(--c-forward); color: #fff; }
.pill.Running, .pill.Ongoing { background: var(--c-running); color: #fff; }
.pill.On-hold { background: var(--c-hold); color: #fff; }
.pill.Upcoming { background: var(--c-upcoming); color: #fff; }
.pill.Normal { background: #6B7780; color: #fff; }

/* Decision and action buttons in the same colours */
.btn.ok { background: var(--c-approved); border-color: var(--c-approved); color: #fff; }
.btn.bad { background: var(--c-rejected); border-color: var(--c-rejected); color: #fff; }
.btn.warn { background: var(--c-returned); border-color: var(--c-returned); color: #fff; }
.btn.ok:hover, .btn.bad:hover, .btn.warn:hover { filter: brightness(1.1); border-color: transparent; }
.btn.primary { background: linear-gradient(135deg, var(--brand-2), var(--accent)); border-color: transparent; color: #fff; }
.okmark { color: var(--c-approved); }
.badmark { color: var(--c-rejected); }
.form-msg { color: var(--c-rejected); }
.form-msg.ok { color: var(--c-approved); }
.toast.err { background: var(--c-rejected); }

/* Brand sidebar */
.nav { background: linear-gradient(180deg, var(--brand-1), var(--brand-2) 70%, #0D6876); border-right: 0; color: #EAF6EF; }
.nav-brand strong { color: #fff; letter-spacing: .01em; }
.nav-brand small, .nav-user small { color: rgba(234, 246, 239, .72); }
.nav-list button { color: rgba(234, 246, 239, .82); }
.nav-list button:hover { background: rgba(255, 255, 255, .10); color: #fff; }
.nav-list button.is-on { background: #fff; color: var(--brand-1); font-weight: 700; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.nav-last { border-top-color: rgba(255, 255, 255, .2) !important; }
.count { background: var(--c-pending); color: #231A00; font-weight: 700; }
.nav-user { border-top-color: rgba(255, 255, 255, .2); }
.nav-user strong { color: #fff; }
.nav .btn { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .28); color: #fff; }
.nav .btn:hover { background: rgba(255, 255, 255, .2); }
.seal { background: linear-gradient(135deg, #F2A900, #E0631A); color: #fff; font-size: .82rem; letter-spacing: .02em; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
@media (max-width: 880px) { .nav { background: linear-gradient(90deg, var(--brand-1), var(--brand-2)); } }

/* Sign-in page and loading screen */
.auth { background: radial-gradient(circle at 15% 10%, rgba(242, 169, 0, .18), transparent 40%), radial-gradient(circle at 85% 90%, rgba(18, 112, 74, .25), transparent 45%), var(--bg); }
.auth-card { border-top: 5px solid var(--brand-2); box-shadow: 0 18px 40px rgba(14, 77, 51, .12); }
.auth-brand h1 { color: var(--brand-2); }
.auth-tab.is-on { border-color: var(--brand-2); color: var(--brand-2); }
.boot-mark { color: var(--brand-2); }

/* Coloured headings, tiles and tables */
.eyebrow { color: var(--brand-2); }
.kpi { border-top: 4px solid var(--c-forward); }
.kpi:nth-child(4n+2) { border-top-color: var(--c-approved); }
.kpi:nth-child(4n+3) { border-top-color: var(--c-pending); }
.kpi:nth-child(4n+4) { border-top-color: var(--c-hold); }
.panel-head h2 { color: var(--brand-1); }
th { background: color-mix(in srgb, var(--brand-2) 9%, var(--surface)); color: var(--brand-1); }
.tabs button.is-on { color: var(--brand-2); border-color: var(--brand-2); }
.bell-count { background: var(--c-rejected); }
.topbar { border-bottom: 3px solid transparent; border-image: linear-gradient(90deg, var(--brand-2), #F2A900, var(--c-forward)) 1; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .panel-head h2, :root:not([data-theme="light"]) th, :root:not([data-theme="light"]) .eyebrow, :root:not([data-theme="light"]) .auth-brand h1 { color: #7FD3A5; }
  :root:not([data-theme="light"]) th { background: color-mix(in srgb, #12704A 22%, var(--surface)); }
}
@media print { .pill { border: 1px solid currentColor; } }

/* Access-rights checkboxes */
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.check { display: flex; gap: 10px; align-items: center; padding: 9px 11px; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; background: var(--surface); }
.check:has(input:checked) { border-color: var(--c-approved); background: color-mix(in srgb, var(--c-approved) 8%, var(--surface)); }
.check input { width: 18px; height: 18px; flex: none; accent-color: var(--c-approved); }

/* Office calendar */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-h { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--brand-1); text-align: center; padding: 4px 0; }
.cal-d { min-height: 78px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 7px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); text-align: left; font: inherit; color: inherit; min-width: 0; }
button.cal-d { cursor: pointer; }
button.cal-d:hover { border-color: var(--brand-2); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-2) 25%, transparent); }
.cal-blank { border: 0; background: transparent; }
.cal-d.is-work { background: color-mix(in srgb, var(--c-approved) 7%, var(--surface)); }
.cal-d.is-hol { background: color-mix(in srgb, var(--c-rejected) 12%, var(--surface)); border-color: color-mix(in srgb, var(--c-rejected) 35%, var(--line)); }
.cal-d.is-custom { box-shadow: inset 0 -3px 0 var(--c-pending); }
.cal-d.is-today .cal-n { background: var(--brand-2); color: #fff; border-radius: 50%; width: 24px; height: 24px; display: grid; place-items: center; }
.cal-n { font-weight: 700; font-size: .95rem; }
.cal-t { font-size: .78rem; font-weight: 600; }
.is-work .cal-t { color: var(--c-approved); }
.is-hol .cal-t { color: var(--c-rejected); }
.cal-note { font-size: .72rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.cal-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 12px; }
.cal-key { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--line); }
.cal-key.is-work { background: color-mix(in srgb, var(--c-approved) 18%, var(--surface)); }
.cal-key.is-hol { background: color-mix(in srgb, var(--c-rejected) 25%, var(--surface)); }
.cal-key.is-custom { background: var(--c-pending); }
@media (max-width: 640px) { .cal { gap: 3px; } .cal-d { min-height: 58px; padding: 4px; } .cal-note { display: none; } .cal-t { font-size: .68rem; } }
.mp-figs { margin-top: 10px; border-color: color-mix(in srgb, var(--c-approved) 40%, var(--line)); }
.mp-figs b { color: var(--c-approved); }

/* Project health (RAG) */
.pill.rag-Red { background: var(--c-rejected); color: #fff; }
.pill.rag-Amber { background: var(--c-pending); color: #231A00; }
.pill.rag-Green { background: var(--c-approved); color: #fff; }
.psheet .health { border-left: 4px solid var(--c-approved); padding: 10px 14px; border-radius: 0 8px 8px 0; background: color-mix(in srgb, var(--c-approved) 7%, var(--surface)); }
.psheet .health-Red { border-left-color: var(--c-rejected); background: color-mix(in srgb, var(--c-rejected) 8%, var(--surface)); }
.psheet .health-Amber { border-left-color: var(--c-pending); background: color-mix(in srgb, var(--c-pending) 10%, var(--surface)); }
.health ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pcard-top .chips { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
/* Finance tab */
table.fin tr.sect td { background: color-mix(in srgb, var(--brand-2) 9%, var(--surface)); color: var(--brand-1); font-weight: 700; text-transform: uppercase; font-size: .72rem; letter-spacing: .07em; }
table.fin tr.strong td { font-weight: 700; }
.neg { color: var(--c-rejected); }
.posv { color: var(--c-approved); }
.pill.Paid { background: var(--c-approved); color: #fff; }
.pill.Partly-paid { background: var(--c-pending); color: #231A00; }
.pill.Overdue { background: var(--c-rejected); color: #fff; }
.pill.Issued { background: var(--c-forward); color: #fff; }

/* Search code */
.scode { font-family: var(--f-mono); font-weight: 700; color: var(--brand-2); letter-spacing: .04em; }
.pcard .scode { background: color-mix(in srgb, var(--brand-2) 12%, var(--surface)); padding: 1px 6px; border-radius: 4px; }
.scode-btn { font: 700 .74rem var(--f-mono); background: var(--brand-2); color: #fff; border: 0; border-radius: 10px; padding: 1px 6px; margin-right: 6px; cursor: pointer; }
.tag b.scode { margin-right: 6px; }
.projsearch { flex: 1 1 360px; }
.pcard[hidden] { display: none; }

/* Dashboards: charts (palette validated for light + dark; every chart has labels and a table view) */
:root { --ch1: #2a78d6; --ch2: #eb6834; --ch3: #1baf7a; }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) { --ch1: #3987e5; --ch2: #d95926; --ch3: #199e70; } }
:root[data-theme="dark"] { --ch1: #3987e5; --ch2: #d95926; --ch3: #199e70; }
.kpis.kpis6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1100px) { .kpis.kpis6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .kpis.kpis6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi b.neg { color: var(--c-rejected); }
.chartfig { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.chartfig figcaption { display: flex; flex-direction: column; gap: 2px; }
.chartfig figcaption strong { color: var(--brand-1); font-family: var(--f-display); font-size: 1rem; }
.chartfig figcaption span { color: var(--muted); font-size: .82rem; }
svg.chart { width: 100%; height: auto; display: block; overflow: visible; font-family: var(--f-body); }
svg.chart text { font-size: 12px; fill: var(--muted); }
svg.chart text.lbl { fill: var(--ink); }
svg.chart text.val { fill: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
svg.chart text.val.sm { font-size: 10.5px; font-weight: 500; fill: var(--muted); }
svg.chart text.endlbl { fill: var(--ink); font-weight: 600; }
svg.chart .grid { stroke: var(--line); stroke-width: 1; }
svg.chart .hit, svg.chart .hover { fill: transparent; }
svg.chart g:hover .hit, svg.chart .hover:hover { fill: color-mix(in srgb, var(--ink) 5%, transparent); }
svg.chart .clk { cursor: pointer; }
svg.chart .track { fill: var(--sunk); }
svg.chart .target { stroke: var(--ink); stroke-width: 2.5; }
svg.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
svg.chart .dot { stroke: var(--surface); stroke-width: 2; }
.bar.s1, .dot.s1, i.sw.s1 { fill: var(--ch1); background: var(--ch1); }
.bar.s2, .dot.s2, i.sw.s2 { fill: var(--ch2); background: var(--ch2); }
.bar.s3, .dot.s3, i.sw.s3 { fill: var(--ch3); background: var(--ch3); }
.line.s1 { stroke: var(--ch1); } .line.s2 { stroke: var(--ch2); } .line.s3 { stroke: var(--ch3); }
.bar.rag-a, .seg.rag-a, i.sw.rag-a { fill: var(--c-pending); background: var(--c-pending); }
.bar.rag-r, .seg.rag-r, i.sw.rag-r { fill: var(--c-rejected); background: var(--c-rejected); }
.seg.rag-g, i.sw.rag-g { background: var(--c-approved); }
.seg.rag-c, i.sw.rag-c { background: #6B7780; }
.clegend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .84rem; color: var(--ink); }
.clegend span { display: inline-flex; align-items: center; gap: 6px; }
i.sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.parts { display: flex; height: 34px; border-radius: 6px; overflow: hidden; gap: 2px; background: var(--surface); }
.seg { display: grid; place-items: center; color: #fff; font-weight: 700; font-size: .85rem; min-width: 4px; }
.seg.rag-a { color: #231A00; }
.tview summary { cursor: pointer; color: var(--brand-2); font-size: .84rem; }
.tview .tablewrap { margin-top: 8px; }
.cempty { padding: 20px 0; text-align: center; }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .chartfig figcaption strong { color: #7FD3A5; } }
:root[data-theme="dark"] .chartfig figcaption strong { color: #7FD3A5; }
/* Phones: the menu row scrolls sideways instead of widening the page */
@media (max-width: 880px) { .app { grid-template-columns: minmax(0, 1fr); } .nav, .nav-list, .work, .main { min-width: 0; max-width: 100vw; } .nav-list { overflow-x: auto; } }

/* Approval routing + hierarchy tree */
.routebox { margin: 0; padding: 10px 12px; border-radius: 8px; background: color-mix(in srgb, var(--brand-2) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--brand-2) 30%, var(--line)); }
.routebox.warnbox { background: color-mix(in srgb, var(--c-pending) 14%, var(--surface)); border-color: var(--c-pending); }
.htree { overflow-x: auto; }
.htree ul { list-style: none; margin: 0; padding-left: 26px; position: relative; }
.htree > ul { padding-left: 0; }
.htree li { position: relative; padding: 6px 0 6px 0; }
.htree ul ul li::before { content: ""; position: absolute; left: -16px; top: 0; bottom: 0; border-left: 2px solid var(--line); }
.htree ul ul li:last-child::before { bottom: calc(100% - 26px); }
.htree ul ul li::after { content: ""; position: absolute; left: -16px; top: 26px; width: 14px; border-top: 2px solid var(--line); }
.hnode { display: inline-flex; flex-direction: column; gap: 1px; padding: 8px 12px; border: 1px solid var(--line); border-left: 4px solid var(--brand-2); border-radius: 8px; background: var(--surface); min-width: 220px; }
.hnode.me { border-left-color: var(--c-pending); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-pending) 30%, transparent); }
.hnode small { color: var(--muted); font-size: .78rem; }
.hcount { font-size: .72rem; color: var(--brand-2); font-weight: 700; }
.check[hidden] { display: none; }