/* ==========================================================================
   Covan — product UI illustrations (pure HTML/CSS, light "console" theme)
   ========================================================================== */

.ui-fit { container-type: inline-size; }
.ui-fit > .ui { font-size: clamp(7.6px, 2.26cqi, 11.6px); }

.ui {
  container-type: inline-size;
  position: relative;
  display: grid;
  grid-template-columns: clamp(78px, 18.4cqi, 132px) 1fr;
  font-family: var(--font-sans);
  font-size: clamp(7.4px, 1.62cqi, 12.6px);
  line-height: 1.35;
  letter-spacing: -.008em;
  color: #1b1712;
  background: #fbf8f3;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .16) inset, 0 46px 90px -38px rgba(0, 0, 0, .86);
  isolation: isolate;
}
.ui * { min-width: 0; }

/* ---- sidebar ---- */
.ui__side {
  background: #201d19;
  background-image: radial-gradient(120% 70% at 0% 0%, rgba(255, 126, 52, .13), transparent 62%);
  color: #b9b1a5;
  padding: 1em .55em;
  display: flex; flex-direction: column; gap: .14em;
  overflow: hidden;
}
.ui__brand {
  display: flex; align-items: center; gap: .5em;
  padding: .1em .45em .95em;
  color: #f6f0e6;
  font-weight: 600; font-size: 1.12em; letter-spacing: -.03em;
}
.ui__brand span.dot { width: .46em; height: .46em; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 .18em rgba(255,106,42,.18); }
.ui__side-sec { display: none; }
.ui__side-sec-unused {
  font-family: var(--font-mono); font-size: .72em; letter-spacing: .14em; text-transform: uppercase;
  color: #6f6a61; padding: .55em .55em .3em; font-size: .68em;
}
.ui__nav-item {
  display: flex; align-items: center; gap: .62em;
  padding: .45em .5em; border-radius: .45em;
  color: #ada69b; font-size: .88em; font-weight: 500;
  position: relative;
}
.ui__nav-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui__nav-item svg { width: 1.05em; height: 1.05em; stroke: currentColor; fill: none; stroke-width: 1.7; opacity: .8; flex: none; }
.ui__nav-item.is-active {
  background: rgba(255, 255, 255, .085); color: #fff;
}
.ui__nav-item.is-active::before {
  content: ""; position: absolute; left: -.7em; top: .35em; bottom: .35em; width: .2em;
  border-radius: 0 .2em .2em 0; background: var(--ember);
}
.ui__nav-item.is-active svg { opacity: 1; color: var(--ember-2); }
.ui__side-foot { margin-top: auto; border-top: 1px solid rgba(255,255,255,.08); padding: .6em .5em 0; display: grid; gap: .3em; }
.ui__side-foot .status { display: flex; align-items: center; gap: .4em; font-size: .74em; color: #8b857b; white-space: nowrap; overflow: hidden; }
.ui__side-foot .status span:last-child { overflow: hidden; text-overflow: ellipsis; }
.ui__dot { width: .45em; height: .45em; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 .16em rgba(100,227,196,.16); }

/* ---- main ---- */
.ui__main { display: flex; flex-direction: column; background: #fbf8f3; }
.ui__top {
  display: flex; align-items: center; gap: .8em;
  padding: .7em 1em;
  border-bottom: 1px solid #e9e1d4;
  background: #fdfbf7;
}
.ui__crumb { display: flex; align-items: center; gap: .4em; font-size: .88em; color: #7c7368; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui__crumb b { color: #2b251e; font-weight: 600; }
.ui__search {
  margin-left: auto; display: flex; align-items: center; gap: .45em;
  font-size: .84em; color: #a49a8d; background: #f3ece1; border: 1px solid #e6dccd;
  border-radius: 999px; padding: .42em .8em; min-width: 12em;
}
.ui__search svg { width: 1em; height: 1em; stroke: currentColor; fill: none; stroke-width: 2; }
.ui__avatar {
  margin-left: auto;
  width: 1.9em; height: 1.9em; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(160deg, #ff8a52, #ef4d10); color: #2a0f02;
  font-size: .1em; font-weight: 700;
}
.ui__avatar { font-size: .86em; }
.ui__body { padding: 1em; display: grid; gap: .85em; align-content: start; }

/* ---- page header inside ui ---- */
.ui__pagehead { display: flex; align-items: flex-start; justify-content: space-between; gap: 1em; }
.ui__title { font-size: 1.5em; font-weight: 600; letter-spacing: -.03em; color: #17130f; }
.ui__subtitle { font-size: .84em; color: #8b8175; margin-top: .25em; }
.ui__actions { display: flex; gap: .4em; }
.ui__btn {
  display: inline-flex; align-items: center; gap: .35em;
  font-size: .8em; font-weight: 600; padding: .5em .75em; border-radius: .5em;
  border: 1px solid #dfd5c5; background: #fff; color: #3a332b; white-space: nowrap;
}
.ui__btn--primary { background: linear-gradient(180deg, #e57726, #c95c0c); border-color: #b9550a; color: #fff; }

/* ---- tabs ---- */
.ui__tabs { display: flex; gap: 1.1em; border-bottom: 1px solid #e9e1d4; overflow: hidden; }
.ui__tab { font-size: .85em; color: #8a8073; padding: .55em 0; position: relative; white-space: nowrap; }
.ui__tab.is-active { color: #c05a0b; font-weight: 600; }
.ui__tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #c05a0b; border-radius: 2px 2px 0 0; }
.ui__tab .count { font-family: var(--font-mono); font-size: .82em; opacity: .7; margin-left: .3em; }

/* ---- table ---- */
.ui__table { border: 1px solid #e9e1d4; border-radius: .6em; overflow: hidden; background: #fff; }
.ui__thead, .ui__tr {
  display: grid; align-items: center; gap: .5em;
  padding: .5em .75em;
  grid-template-columns: 1.1em 6.9em 1fr 6.4em;
}
.ui__thead { background: #f7f1e7; border-bottom: 1px solid #e9e1d4; font-size: .76em; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: #94897b; }
.ui__tr { border-bottom: 1px solid #f1eade; font-size: .85em; }
.ui__tr:last-child { border-bottom: 0; }
.ui__tr.is-hover { background: #fffaf3; }
.ui__cb { width: .85em; height: .85em; border-radius: .2em; border: 1.5px solid #d8ccba; }
.ui__id { font-family: var(--font-mono); font-size: .84em; color: #8a8073; letter-spacing: -.03em; white-space: nowrap; }
.ui__name { color: #241f19; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .96em; }
.ui__name small { display: block; color: #a1978a; font-size: .86em; }
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: .3em;
  font-size: .8em; font-weight: 600; padding: .28em .55em; border-radius: .35em;
  white-space: nowrap; border: 1px solid transparent;
}
.pill--new      { background: #e9f0fe; color: #2a5dbc; border-color: #d3e1fd; }
.pill--progress { background: #fff0d6; color: #9a5a06; border-color: #f6e0b8; }
.pill--assign   { background: #eee9ff; color: #5b46b8; border-color: #e0d8fd; }
.pill--hold     { background: #f0ece5; color: #6d6457; border-color: #e5ddcf; }
.pill--done     { background: #dcf5ea; color: #0c7350; border-color: #c4ebdc; }
.pill--risk     { background: #ffe6e3; color: #b23c22; border-color: #fbd3cd; }
.pill--ci       { background: #fdeacd; color: #924d07; border-color: #f7dcb6; }

.ui__avatarstack { display: flex; }
.ui__avatarstack i {
  width: 1.45em; height: 1.45em; border-radius: 50%; border: 1.5px solid #fff;
  margin-left: -.4em; display: grid; place-items: center; font-size: .64em; font-weight: 700; color: #fff; font-style: normal;
}

/* ---- cards / panels ---- */
.ui__panel { border: 1px solid #e9e1d4; border-radius: .6em; background: #fff; overflow: hidden; }
.ui__panel-head { display: flex; align-items: center; justify-content: space-between; gap: .6em; padding: .6em .8em; border-bottom: 1px solid #f1eade; }
.ui__panel-head h5 { font-size: .84em; font-weight: 600; color: #3a332b; letter-spacing: -.01em; }
.ui__panel-body { padding: .8em; }

.ui__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55em; }
.ui__kpi {
  border: 1px solid #e9e1d4; border-radius: .55em; padding: .65em .7em; background:
    linear-gradient(180deg, #fff, #fdf9f2);
}
.ui__kpi .k { font-size: .68em; text-transform: uppercase; letter-spacing: .08em; color: #9b9184; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui__kpi .v { font-size: 1.5em; font-weight: 600; letter-spacing: -.03em; color: #1b1712; margin-top: .1em; font-variant-numeric: tabular-nums; }
.ui__kpi .d { font-size: .74em; color: #0c7350; font-weight: 600; }
.ui__kpi .d.warn { color: #b23c22; }

/* ---- bar chart ---- */
.ui__bars { display: flex; align-items: flex-end; gap: .42em; height: 5.4em; }
.ui__bar { flex: 1; border-radius: .25em .25em 0 0; background: linear-gradient(180deg, #f2a35c, #d96a12); opacity: .86; }
.ui__bar.dim { background: #e7dccc; }
.ui__axis { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: .65em; color: #a89d8f; margin-top: .4em; }

/* ---- donut ---- */
.ui__donut { width: 4.4em; height: 4.4em; border-radius: 50%; display: grid; place-items: center; flex: none; }
.ui__donut::after { content: ""; width: 2.7em; height: 2.7em; border-radius: 50%; background: #fff; }
.ui__donut-wrap { display: flex; align-items: center; gap: .8em; }
.ui__legend { display: grid; gap: .32em; font-size: .78em; color: #6f6558; }
.ui__legend i { display: inline-block; width: .6em; height: .6em; border-radius: .15em; margin-right: .4em; }

/* ---- floating overlay card ---- */
.ui-float {
  position: absolute; z-index: 4;
  background: rgba(18, 16, 14, .92);
  color: #f4efe7;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: .9em;
  padding: .9em 1em;
  backdrop-filter: blur(14px);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .9);
  font-size: clamp(9px, 1.1cqi, 12px);
  display: grid; gap: .5em;
  width: max-content; max-width: 15em;
}
.ui-float .k { font-family: var(--font-mono); font-size: .68em; letter-spacing: .14em; text-transform: uppercase; color: #a39e96; }
.ui-float .v { font-size: 1.25em; font-weight: 600; letter-spacing: -.03em; }
.ui-float .bar { height: .3em; border-radius: 999px; background: rgba(255,255,255,.14); overflow: hidden; }
.ui-float .bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ember), var(--gold)); }
.ui-float .row-mini { display: flex; align-items: center; gap: .45em; font-size: .8em; color: #cfc7bb; }
.ui-float .dot { width: .5em; height: .5em; border-radius: 50%; background: var(--teal); flex: none; }

/* ---- graph (SVG) ---- */
.graph { width: 100%; height: auto; overflow: visible; }
.graph .edge { stroke: rgba(255, 255, 255, .2); fill: none; stroke-width: 1.4; }
.graph .edge--active { stroke: var(--ember); stroke-dasharray: 5 5; animation: dash 1.4s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -20; } }
.graph .node rect { fill: var(--panel-2); stroke: var(--line-2); }
.graph .node--hot rect { fill: #2a1a10; stroke: rgba(255, 106, 42, .5); }
.graph .node text { fill: var(--text); font-family: var(--font-sans); font-size: 11px; font-weight: 500; }
.graph .node text.sub { fill: var(--muted); font-size: 9px; font-weight: 400; }
.graph .node text[data-mono] { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .1em; fill: var(--ember-2); }

/* ---- small inline diagram (3 levels) ---- */
.hier { display: grid; gap: .5em; }
.hier__row {
  display: grid; grid-template-columns: 5.2em 1fr; align-items: center; gap: .7em;
  border: 1px solid var(--line); border-radius: 10px; padding: .6em .75em;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.008));
}
.hier__row b { font-family: var(--font-mono); font-size: .66em; letter-spacing: .13em; text-transform: uppercase; color: var(--ember-2); }
.hier__row span { font-size: .85rem; color: var(--muted); }
.hier__row:nth-child(2) { margin-left: 1.2em; }
.hier__row:nth-child(3) { margin-left: 2.4em; }


/* ---- responsive: single column, no sidebar on small screens ---- */
@media (max-width: 760px) {
  .ui { grid-template-columns: 1fr; font-size: clamp(8.4px, 2.4vw, 11px); }
  .ui__side { display: none; }
  .ui__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui__kpis > :last-child { display: none; }
}
@media (max-width: 420px) {
  .ui__top .ui__search { display: none; }
  .ui__avatar { margin-left: auto; }
  .ui__thead, .ui__tr { grid-template-columns: 1.1em 1fr 5.6em; }
  .ui__thead > :nth-child(2), .ui__tr > :nth-child(2) { display: none; }
}