/* NDGI PHP build: pieces the React components used to provide (buttons, dialogs, charts, staff workspace).
   Values mirror the shadcn/ui Button and Dialog classes from the Lovable build. */
:root{--chart-4:oklch(.47 .11 235)} /* raised chroma: validated for colour-blind separation (dataviz check) */

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;border-radius:calc(var(--radius) - 2px);font-size:14px;font-weight:500;cursor:pointer;transition:color .15s,background-color .15s,border-color .15s;height:36px;padding:8px 16px;background:var(--primary);color:var(--primary-foreground);box-shadow:0 1px 3px rgb(0 0 0 / .1);border:1px solid transparent;text-decoration:none}
.btn:hover{background:color-mix(in oklab,var(--primary) 90%,transparent)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 1px var(--ring)}
.btn:disabled,.btn[aria-disabled=true]{pointer-events:none;opacity:.5;cursor:not-allowed}
.btn svg{pointer-events:none;width:16px;height:16px;flex-shrink:0}
.btn-outline{border-color:var(--input);background:var(--background);color:var(--foreground);box-shadow:0 1px 2px rgb(0 0 0 / .05)}
.btn-outline:hover{background:var(--accent);color:var(--accent-foreground)}
.btn-ghost{background:transparent;color:inherit;box-shadow:none}
.btn-ghost:hover{background:var(--accent);color:var(--accent-foreground)}
.btn-link{background:transparent;color:var(--primary);box-shadow:none;text-underline-offset:4px;padding-inline:0}
.btn-link:hover{background:transparent;text-decoration:underline}
.btn-sm{height:32px;padding:0 12px;font-size:12px}
.btn-lg{height:40px;padding:0 32px}
.btn-icon{height:36px;width:36px;padding:0}
.btn-accent{background:var(--accent);color:var(--primary)}
.btn-accent:hover{background:color-mix(in oklab,var(--accent) 90%,transparent)}
.btn-on-dark{border-color:color-mix(in oklab,var(--primary-foreground) 50%,transparent);color:var(--primary-foreground);background:transparent}
.btn-on-dark:hover{background:color-mix(in oklab,var(--primary-foreground) 10%,transparent);color:var(--primary-foreground)}
.segmented .btn[aria-selected=true]{background:var(--primary);color:var(--primary-foreground)}

.skip-link{position:absolute;left:-9999px;top:8px;z-index:60;background:var(--primary);color:var(--primary-foreground);padding:8px 14px;border-radius:4px}
.skip-link:focus{left:12px}
.brand-mark{display:inline-flex}
.intro-image-wrap{position:absolute;inset:0}
.footer-soft{color:color-mix(in oklab,var(--primary-foreground) 70%,transparent)}
.footer-faint{color:color-mix(in oklab,var(--primary-foreground) 60%,transparent)}
.footer-rule{border-color:color-mix(in oklab,var(--primary-foreground) 20%,transparent)}
.footer-link:hover{color:var(--primary-foreground)}
.hero-copy{color:color-mix(in oklab,var(--primary-foreground) 85%,transparent)}
[hidden]{display:none!important}

/* Native <dialog> in place of the Radix dialog */
dialog.dialog{border:1px solid var(--border);background:var(--background);color:var(--foreground);padding:24px;max-width:32rem;width:calc(100% - 32px);box-shadow:0 10px 30px rgb(0 0 0 / .18);border-radius:8px}
dialog.dialog[open]{display:grid;gap:16px;animation:fade-in .2s ease}
dialog.dialog::backdrop{background:rgb(0 0 0 / .8)}
.dialog-close{position:absolute;right:14px;top:14px;opacity:.7;border-radius:3px;padding:2px;background:none;border:0;cursor:pointer;color:inherit}
.dialog-close:hover{opacity:1}
.dialog-close svg{width:16px;height:16px}
.dialog-title{font-size:24px;font-weight:600;line-height:1.1;padding-right:24px}
.dialog-desc{font-size:14px;color:var(--muted-foreground)}

/* Charts (replace Recharts): plain HTML bars, values always readable */
.hbar-chart{display:grid;gap:6px}
.hbar-row{display:grid;grid-template-columns:116px minmax(0,1fr) 54px;align-items:center;gap:10px;font-size:11px}
.hbar-row a{color:var(--foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbar-row a:hover{color:var(--accent-foreground)}
.hbar-track{position:relative;height:19px;background:linear-gradient(90deg,transparent calc(25% - 1px),var(--border) calc(25% - 1px),var(--border) 25%,transparent 25%,transparent calc(50% - 1px),var(--border) calc(50% - 1px),var(--border) 50%,transparent 50%,transparent calc(75% - 1px),var(--border) calc(75% - 1px),var(--border) 75%,transparent 75%)}
.hbar-fill{display:block;height:100%;border-radius:0 4px 4px 0}
.hbar-value{font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.hbar-axis{display:grid;grid-template-columns:116px minmax(0,1fr) 54px;gap:10px;font-size:11px;color:var(--muted-foreground);margin-top:6px}
.hbar-axis span{display:flex;justify-content:space-between}
.chart-legend{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:12px;margin-bottom:16px}
.chart-legend span{display:inline-flex;align-items:center;gap:8px}
.chart-legend i{width:12px;height:12px;border-radius:2px;display:inline-block}
.vbar-chart{display:grid;grid-template-columns:36px minmax(0,1fr);gap:8px;height:350px;padding:20px 10px 15px 0}
.vbar-axis{display:flex;flex-direction:column;justify-content:space-between;font-size:11px;line-height:1;color:var(--muted-foreground);text-align:right;padding-bottom:26px}
.vbar-axis span{transform:translateY(-50%)}
.vbar-axis span:last-child{transform:translateY(50%)}
.vbar-plot{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:12px;border-bottom:1px solid var(--border);position:relative;background:repeating-linear-gradient(to top,var(--border) 0 1px,transparent 1px 25%);box-shadow:inset 0 1px 0 var(--border);margin-bottom:26px}
.vbar-group{display:flex;align-items:flex-end;justify-content:center;gap:4px;position:relative}
.vbar-group>b{position:absolute;bottom:-24px;left:0;right:0;text-align:center;font-size:12px;font-weight:500}
.vbar{width:100%;max-width:32px;position:relative;border-radius:4px 4px 0 0;min-height:1px}
.vbar span{position:absolute;top:-17px;left:50%;transform:translateX(-50%);font-size:10px;font-weight:700;white-space:nowrap}
.ibar-list{display:grid;gap:14px}
.ibar-item{display:grid;grid-template-columns:155px minmax(0,1fr);gap:12px;align-items:center;font-size:11px}
.ibar-bars{display:grid;gap:2px}
.ibar-bars div{display:grid;grid-template-columns:minmax(0,1fr) 30px;align-items:center;gap:6px}
.ibar-bars .ibar-track{height:12px;background:linear-gradient(90deg,transparent calc(50% - 1px),var(--border) calc(50% - 1px),var(--border) 50%,transparent 50%)}
.ibar-bars .ibar-fill{display:block;height:100%;border-radius:0 2px 2px 0}
.ibar-bars em{font-style:normal;font-weight:700;font-size:10px;font-variant-numeric:tabular-nums}
.animate-bars .hbar-fill,.animate-bars .ibar-fill{transform-origin:left;animation:bar-grow 1.1s cubic-bezier(.2,.7,.2,1) both}
.animate-bars .vbar{transform-origin:bottom;animation:bar-rise 1.1s cubic-bezier(.2,.7,.2,1) both}
@keyframes bar-grow{from{transform:scaleX(0)}to{transform:none}}
@keyframes bar-rise{from{transform:scaleY(0)}to{transform:none}}
@media(prefers-reduced-motion:reduce){.animate-bars .hbar-fill,.animate-bars .ibar-fill,.animate-bars .vbar{animation:none}}
@media(max-width:560px){.hbar-row,.hbar-axis{grid-template-columns:92px minmax(0,1fr) 46px}}

/* Live updates (filters swap results in place) */
[data-live-target].is-loading{opacity:.55;transition:opacity .15s}

/* Staff workspace */
.staff-card{border:1px solid var(--border);background:var(--card);border-radius:6px;padding:22px}
.staff-grid{display:grid;gap:18px}
.staff-table td,.staff-table th{vertical-align:top}
.staff-status{display:inline-flex;border-radius:3px;font-size:11px;font-weight:800;padding:4px 8px;background:var(--secondary)}
.staff-status-published,.staff-status-approved{background:color-mix(in oklab,var(--tier-transforming) 18%,transparent);color:var(--tier-transforming)}
.staff-status-submitted{background:color-mix(in oklab,var(--tier-building) 20%,transparent);color:oklch(.45 .12 55)}
.staff-errors{border-left:3px solid var(--destructive);background:color-mix(in oklab,var(--destructive) 8%,transparent);padding:12px 16px;font-size:13px;line-height:1.6}
.staff-ok{border-left:3px solid var(--tier-transforming);background:color-mix(in oklab,var(--tier-transforming) 10%,transparent);padding:12px 16px;font-size:13px}
.staff-indicators{display:grid;gap:12px}
.staff-indicator{display:grid;grid-template-columns:minmax(0,1.3fr) 90px minmax(0,2fr);gap:10px;align-items:start;border-top:1px solid var(--border);padding-top:12px}
.staff-indicator .field{width:100%}
.staff-indicator textarea.field{min-height:40px}
@media(max-width:800px){.staff-indicator{grid-template-columns:1fr}}
.diff-up{color:var(--tier-transforming);font-weight:700}
.diff-down{color:var(--tier-foundation);font-weight:700}

/* Menu toggle: ghost icon button whose display stays under ndgi.css's breakpoint rules */
.nav-toggle-btn{align-items:center;justify-content:center;height:36px;width:36px;border-radius:calc(var(--radius) - 2px);background:transparent;border:0;cursor:pointer;color:inherit}
.nav-toggle-btn:hover{background:var(--accent);color:var(--accent-foreground)}
.nav-toggle-btn svg{width:16px;height:16px}