/* Adakode console - UX prototype styling.
 * Light content area, fixed left rail, and the black-and-lime brand taken from
 * the Adakode wordmark (#66ec01 lime, #000 black).
 */

:root {
  --brand: #66ec01;
  --brand-weak: #eafcd9;
  --brand-tint: #f2fbe0; /* the headline card surface: lighter than the weak tint */
  --brand-line: #dcf3bd; /* the tint's edge, so a lime card is not outlined in grey */
  --ink: #000000;
  --ink-2: #40454d;
  --ink-3: #8a919f;
  --line: #ececf1;
  --line-2: #f2f3f7;
  --bg: #f7f8fa;
  --card: #ffffff;
  --ok: #17a673;
  --warn: #e0902b;
  --stop: #e5484d;
  --radius: 14px;
  --rail: 232px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 6px 16px rgba(16, 24, 40, 0.05);
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.app {
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  min-height: 100vh;
}

/* -- rail ----------------------------------------------------------------- */

.rail {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  background: var(--card);
  border-right: 1px solid var(--line);
  padding: 18px 12px;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* The real Adakode wordmark, cropped to its ink box so the height is the height
 * it draws. It heads the panel, above the five nav items. */
.rail-brand {
  padding: 4px 8px 16px;
}

.rail-brand img {
  display: block;
  height: 24px;
  width: auto;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--ink);
  text-decoration: none;
  font-size: 15px;
  font-weight: 550;
  position: relative;
  transition: background-color 120ms ease, color 120ms ease;
}

/* The icon is a shade quieter than its label, and comes up to full ink on the
 * tab that is open or under the pointer, so the active tab reads by weight as
 * well as by its tint. */
.nav-item svg {
  color: var(--ink-3);
  transition: color 120ms ease;
}

.nav-item:hover svg,
.nav-item.active svg {
  color: var(--ink);
}

.nav-item:hover {
  background: var(--line-2);
  color: var(--ink);
}

.nav-item.active {
  background: var(--brand-weak);
  color: var(--ink);
  font-weight: 600;
}

/* Keyboard focus, so the rail and the cards' controls are usable without a
 * pointer. The lime brand is too light to read as a ring on white. */
.nav-item:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.nav-item.active::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--brand);
}

.nav-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--warn);
  margin-left: auto;
}

/* -- topbar + page -------------------------------------------------------- */

.main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(247, 248, 250, 0.9);
  backdrop-filter: saturate(1.4) blur(6px);
  border-bottom: 1px solid var(--line);
  padding: 14px 28px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.topbar h1 {
  font-size: 20px;
  font-weight: 650;
  margin: 0;
}

.topbar .sub {
  color: var(--ink-3);
  font-size: 13px;
}

.topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.page {
  padding: 22px 28px 48px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 1180px;
}

/* -- controls ------------------------------------------------------------- */

select,
.btn {
  font: inherit;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  padding: 7px 12px;
  cursor: pointer;
  box-shadow: var(--shadow);
}

.btn.primary {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--ink);
  font-weight: 600;
}

.btn.ghost {
  background: transparent;
  box-shadow: none;
}

/* The quiet outlined control: Help and Manage plan in the Billing topbar, and the
 * one control in the Plan card's corner. Border and no fill, so it reads as
 * secondary to the filled .btn.primary. */
.btn.secondary {
  background: var(--card);
  color: var(--ink-2);
  box-shadow: none;
}

.btn.secondary:hover {
  color: var(--ink);
  border-color: #d5d9e2;
  background: var(--line-2);
}

/* The Plan card's corner control: a small pill, so it reads as a tag on the card
 * rather than a second full-width button. */
.btn.sm {
  padding: 4px 12px;
  font-size: 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn.sm svg {
  flex: none;
  opacity: 0.8;
}

/* The only destructive control on the console, and it is only ever red inside
 * the confirmation, never on the button that opens it. */
.btn.danger {
  border-color: var(--danger, #c0392b);
  color: var(--danger, #c0392b);
}

.link {
  font: inherit;
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.link:hover {
  color: var(--ink);
}

/* Help and Manage plan are one pair of controls: the same pill, height and type size,
 * one quiet and one solid, so the topbar reads as a single cluster rather than
 * underlined text sitting next to a button. */
.topbar-right .btn,
.topbar-right .link.help {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 14px;
  line-height: 1.2;
}

.topbar-right .btn:hover {
  border-color: #d5d9e2;
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.08);
}

.topbar-right .link.help {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-2);
  text-decoration: none;
}

.topbar-right .link.help:hover {
  background: var(--line-2);
  border-color: #d5d9e2;
  color: var(--ink);
}

.seg {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow);
}

.seg button {
  font: inherit;
  border: 0;
  background: transparent;
  padding: 7px 12px;
  color: var(--ink-2);
  cursor: pointer;
}

.seg button.on {
  background: var(--brand-weak);
  color: var(--ink);
  font-weight: 600;
}

.chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chip {
  font: inherit;
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 999px;
  padding: 5px 12px;
  color: var(--ink-2);
  cursor: pointer;
}

.chip.on {
  border-color: var(--brand);
  background: var(--brand-weak);
  color: var(--ink);
  font-weight: 600;
}

/* -- cards ---------------------------------------------------------------- */

.grid {
  display: grid;
  gap: 16px;
}

.stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Billing's band after the Ceiling card was dropped: three headline cards, and
 * the Plan card leads them because it is the one carrying a control. The band
 * still reads left to right as the plan, then the two dates a renewal turns on. */
.stats.trio {
  grid-template-columns: 1.35fr 1fr 1fr;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
}

.card h2 {
  font-size: 15px;
  font-weight: 650;
  margin: 0 0 2px;
}

.card .hint {
  color: var(--ink-3);
  font-size: 12px;
}

.card-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
}

.card-head .right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* The headline cards. They carry the lime tint so the band of figures reads as
 * the brand's own surface against the white tables below, and they are the shortest
 * cards on the screen: a label, a figure and one line of context is all a stat needs,
 * so the padding is cut back and the internal gaps are tightened to match. */
.stat {
  padding: 14px 16px;
  background: var(--brand-tint);
  border-color: var(--brand-line);
}

/* The head row every stat card opens with: the label, and -- on the Plan card --
 * the one control that belongs to it. Giving them all the same head is what keeps
 * them the same height; the control sits in the corner instead of in a row below
 * the note, which is what used to make the Plan card the tall one. */
.stat .stat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 20px;
}

.stat .stat-head .label {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.stat .value {
  font-size: 28px;
  font-weight: 680;
  margin-top: 4px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* The supporting line is --ink-2 rather than the faint grey: on the lime tint the
 * faint grey falls under 3:1, and 12px text has to stay readable. */
.stat .note {
  color: var(--ink-2);
  font-size: 12px;
  margin-top: 2px;
  line-height: 1.4;
}

/* The Plan card's one control, in the card's top-right corner. It is a small
 * secondary button: the destructive reading is kept for inside the confirmation,
 * never for the control that opens it. */
.stat .stat-action {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* On the lime card the corner pill is white, and hovering it deepens its edge
 * instead of filling it, so the card's tint stays visible behind the control. */
.stat .stat-action .btn.secondary:hover {
  background: var(--card);
  border-color: #c8e6a0;
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.08);
}

/* The confirmation stands between the stat cards and the invoice table: it is
 * read before anything else on the screen, and it goes away on either answer. */
.card.confirm {
  margin-top: 16px;
  border-color: var(--danger, #c0392b);
}

.card.confirm .confirm-text {
  margin: 0;
}

.card.confirm .confirm-actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
}

/* -- progress bars -------------------------------------------------------- */

.bar {
  height: 8px;
  border-radius: 999px;
  background: var(--line-2);
  overflow: hidden;
}

.bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--brand);
}

.bar.ok > span {
  background: var(--brand);
}
.bar.warn > span {
  background: var(--warn);
}
.bar.exhausted > span {
  background: var(--stop);
}

.bar-lg {
  height: 10px;
}

/* -- tables --------------------------------------------------------------- */

table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

th,
td {
  text-align: right;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-2);
  white-space: nowrap;
}

th:first-child,
td:first-child {
  text-align: left;
}

th {
  color: var(--ink-3);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

tbody tr:last-child td {
  border-bottom: 0;
}

tfoot td {
  font-weight: 650;
  border-top: 1px solid var(--line);
}

/* -- usage rows (what stops you) ------------------------------------------ */

.limit-rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.limit-row .top {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 13px;
}

.limit-row .win {
  font-weight: 600;
  min-width: 88px;
}

.limit-row .dir {
  color: var(--ink-3);
  min-width: 52px;
}

.limit-row .pct {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.limit-row.over .pct {
  color: var(--stop);
  font-weight: 650;
}

.tag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink-2);
}

.tag.warn {
  color: var(--warn);
  border-color: #f4dfc4;
  background: #fdf6ec;
}
.tag.exhausted {
  color: var(--stop);
  border-color: #f6d3d4;
  background: #fdf1f1;
}
.tag.ok {
  color: var(--ok);
  border-color: #cdece0;
  background: #f1faf6;
}
.tag.brand {
  color: var(--ink);
  border-color: #cdeea6;
  background: var(--brand-weak);
}

.callout {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid #f4dfc4;
  background: #fdf8f0;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
}

.callout .ico {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--warn);
  color: var(--ink);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 12px;
  flex: none;
}

/* -- allowance meters ----------------------------------------------------- */

.meters {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* One period: its label, then its pair of bars - input over output. */
.meter-group {
  display: grid;
  grid-template-columns: 78px 1fr;
  align-items: center;
  gap: 16px;
}

.meter-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.meter-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.meter-bar {
  display: grid;
  grid-template-columns: 30px 1fr 52px;
  align-items: center;
  gap: 10px;
}

.meter-dir {
  font-size: 12px;
  color: var(--ink-3);
}

.meter-track {
  height: 8px;
  border-radius: 999px;
  background: var(--line-2);
  overflow: hidden;
}

.meter-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--ok);
  transition: width 240ms ease, background 240ms ease;
}

.meter-bar[data-state="warn"] .meter-fill {
  background: var(--warn);
}

.meter-bar[data-state="stop"] .meter-fill {
  background: var(--stop);
}

.meter-pct {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--ink);
}

/* -- chart ---------------------------------------------------------------- */

.chart {
  width: 100%;
  height: 260px;
  display: block;
}

.legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--ink-2);
  margin-top: 8px;
}

.legend .key {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
}

.muted {
  color: var(--ink-3);
}

.right {
  text-align: right;
}

.row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.split {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 16px;
}

.plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

/* -- plan offers ---------------------------------------------------------- */

/* Two paid tiers, one line-for-line layout. Both cards are white and built the
 * same way; only the price, the volume line and the run count change, and Forge
 * alone carries the heavy frame and the filled button. */
.plan-card {
  display: flex;
  flex-direction: column;
  padding: 24px;
}

.plan-card.featured {
  border: 2px solid var(--ink);
  box-shadow: 0 10px 24px rgba(16, 24, 40, 0.1);
}

.plan-card .plan-name {
  font-size: 21px;
  font-weight: 700;
}

.plan-rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 16px 0;
}

.plan-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: var(--ink-2);
}

.plan-list li {
  position: relative;
  padding-left: 19px;
}

.plan-list li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0.6em;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--brand);
}

.plan-cta {
  width: 100%;
  margin-top: 22px;
  padding: 10px 14px;
  font-weight: 600;
}

.plan-note {
  margin: 0;
  text-align: center;
  color: var(--ink-3);
  font-size: 13px;
}

.price {
  font-size: 24px;
  font-weight: 680;
  margin: 6px 0 2px;
}

.price small {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-3);
}

.kv {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-2);
  font-size: 13px;
}

.kv:last-child {
  border-bottom: 0;
}

.kv span:first-child {
  color: var(--ink-2);
}

.empty {
  color: var(--ink-3);
  font-size: 13px;
  padding: 8px 0;
}

/* -- the refund window ----------------------------------------------------- */

/* The overlay holds whatever is drawn over the page: today, Billing's refund
 * window. It sits outside #page, which live.js replaces on every refresh, so an
 * open window survives a repaint. Empty means closed, and an empty overlay is
 * hidden, so a closed window leaves nothing over the page to swallow a click. */
.overlay:empty {
  display: none;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(16, 24, 40, 0.45);
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 41;
  width: min(660px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  overflow: auto;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(16, 24, 40, 0.28);
  padding: 22px 24px;
}

.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.modal-head h2 {
  font-size: 17px;
  font-weight: 680;
  margin: 0 0 2px;
}

.modal-head .sub {
  color: var(--ink-3);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.modal-x {
  font: inherit;
  font-size: 20px;
  line-height: 1;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  padding: 2px 7px;
  border-radius: 8px;
}

.modal-x:hover {
  background: var(--line-2);
  color: var(--ink);
}

/* Each part of the request is its own band, in the order it has to be read: the
 * note, then the reason, then the application the request is attached to. */
.modal-section {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-2);
}

.modal-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 10px;
}

.policy {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--line-2);
  padding: 12px 14px;
  font-size: 13px;
  color: var(--ink-2);
}

.policy p {
  margin: 0 0 8px;
}

.policy p:last-child {
  margin-bottom: 0;
}

.policy ul {
  margin: 0 0 8px;
  padding-left: 18px;
}

.policy li {
  margin: 2px 0;
}

/* The line under the note is a footnote, not a second card: it carries none of
 * the box the note above it sits in. */
.policy-foot {
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 12px;
}

.note-input {
  font: inherit;
  font-size: 13px;
  width: 100%;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  resize: vertical;
}

.note-input::placeholder {
  color: var(--ink-3);
}

.note-input:focus {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
  border-color: var(--brand);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

.modal .kv {
  font-size: 13px;
}

@media (max-width: 1040px) {
  .app {
    grid-template-columns: 64px 1fr;
  }
  .rail {
    padding: 14px 8px;
  }
  .nav-item span.label {
    display: none;
  }
  /* No room for the brand once the rail becomes an icon strip. */
  .rail-brand {
    display: none;
  }
  .nav-item {
    justify-content: center;
  }
  .stats,
  .plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Three cards do not halve evenly, so the leading Plan card takes the full row
   * and the two dates share the one below. */
  .stats.trio {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stats.trio .stat:first-child {
    grid-column: 1 / -1;
  }
  .split {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .stats,
  .plan-grid {
    grid-template-columns: 1fr;
  }
  /* Three cards over two columns would leave the third alone on its row, so the
   * band goes straight to one. */
  .stats.trio {
    grid-template-columns: 1fr;
  }
  .page {
    padding: 16px;
  }
}