/* ============================================================================
   Vela License Portal

   Everything here reads MudBlazor's own custom properties (--mud-palette-*),
   which VelaTheme.cs sets. That is what makes light and dark follow the theme
   without a second set of colours defined here to drift out of step.
   ============================================================================ */

/* ---------------------------------------------------------------- shell -- */

.vela-shell {
  --vela-gutter: 16px;
}

/* Full width. The old 1280px container gave back roughly 400px of table on a
   1920px screen while the table itself was cramped.

   Only the sides and bottom are set here - MudBlazor computes padding-top from
   the app bar height, and a padding shorthand would clobber it and slide the
   content under the bar. The top gutter goes on the first child instead, which
   gives every page the same spacing without each one having to opt in. */
.vela-main {
  background: var(--mud-palette-background);
  min-height: 100vh;
  padding-left: var(--vela-gutter);
  padding-right: var(--vela-gutter);
  padding-bottom: 28px;
}

.vela-main > :first-child {
  margin-top: var(--vela-gutter);
}

.vela-page {
  max-width: none;
}

.vela-bar {
  border-bottom: 1px solid var(--mud-palette-divider);
  background: var(--mud-palette-appbar-background);
  color: var(--mud-palette-appbar-text);
}

/* --------------------------------------------------------- breadcrumbs -- */

.vela-crumbs {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  overflow: hidden;
  font-size: 0.875rem;
}

.vela-crumb {
  color: var(--mud-palette-text-secondary);
  white-space: nowrap;
}

.vela-crumb.here {
  color: var(--mud-palette-text-primary);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vela-crumb-sep {
  color: var(--mud-palette-text-disabled);
}

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

.vela-rail {
  border-right: 0;
}

.vela-rail-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--mud-palette-drawer-background);
}

.vela-rail-brand {
  height: 44px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.vela-mark {
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 3px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--mud-palette-secondary), var(--mud-palette-primary));
  color: #fff;
  font-family: Inter, system-ui, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
}

.vela-rail-name {
  font-family: Inter, system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.015em;
  color: #fff;
}

.vela-rail-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.vela-rail-group {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.63rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mud-palette-drawer-icon);
  padding: 16px 16px 5px;
}

/* MudNavLink in a dark rail: the defaults assume a light drawer. */
.vela-nav .mud-nav-link {
  color: var(--mud-palette-drawer-text);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 7px 16px;
  min-height: 0;
}

.vela-nav .mud-nav-link .mud-icon-root {
  font-size: 1.05rem;
  color: var(--mud-palette-drawer-icon);
}

.vela-nav .mud-nav-link:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

/* Active state is a filled pill plus an edge marker, not a border box.

   Specificity here is deliberate. MudBlazor ships
   `.mud-navmenu.mud-navmenu-default .mud-nav-link.active` - four classes - which
   paints the active link with --mud-palette-primary. That assumes a light
   drawer; on this dark rail it renders the active item in navy on near-black,
   so the item you are on reads as dimmer than the ones you are not. These
   selectors are qualified enough to win without reaching for !important. */
.vela-rail-inner .vela-nav.mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  position: relative;
}

.vela-nav .mud-nav-link.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  bottom: 5px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: var(--mud-palette-secondary);
}

.vela-rail-inner .vela-nav.mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-icon-root {
  color: #fff;
}

.vela-rail-foot {
  flex: none;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding: 8px;
}

.vela-account {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 7px;
  border-radius: 3px;
  width: 100%;
  cursor: pointer;
}

.vela-account:hover {
  background: rgba(255, 255, 255, 0.06);
}

.vela-avatar {
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--mud-palette-primary);
  color: var(--mud-palette-primary-text);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
}

.vela-account-name {
  font-size: 0.775rem;
  color: var(--mud-palette-drawer-icon);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.vela-account-caret {
  margin-left: auto;
  color: var(--mud-palette-drawer-icon);
  font-size: 0.9rem !important;
}

/* ---------------------------------------------------------- page header -- */

.vela-page-head {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  margin-bottom: 13px;
  flex-wrap: wrap;
}

.vela-page-head-text {
  min-width: 0;
}

.vela-page-title {
  font-family: Inter, system-ui, sans-serif;
  font-size: 1.3125rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--mud-palette-text-primary);
}

.vela-page-sub {
  font-size: 0.8125rem;
  color: var(--mud-palette-text-secondary);
  margin-top: 1px;
}

.vela-page-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ------------------------------------------------------------ key cell -- */

.vela-key-wrap {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}

.vela-key {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.775rem;
  font-weight: 500;
  color: var(--mud-palette-text-primary);
  background: var(--mud-palette-background-gray);
  border: 1px solid var(--mud-palette-lines-default);
  border-radius: 2px;
  padding: 2px 7px;
}

/* The copy button only earns its space when you are on the row. */
.vela-key-copy {
  opacity: 0;
  transition: opacity 90ms ease-in;
}

tr:hover .vela-key-copy,
.vela-key-copy:focus-visible {
  opacity: 1;
}

@media (hover: none) {
  .vela-key-copy { opacity: 1; }
}

/* -------------------------------------------------------- seat meters --- */

.vela-seats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  align-items: flex-start;
}

.vela-seat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 62px;
}

.vela-seat-caps { min-width: auto; }

.vela-seat-top {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  line-height: 1.4;
}

.vela-seat-top.vela-caps { gap: 9px; }

.vela-seat-key {
  color: var(--mud-palette-text-secondary);
  text-transform: uppercase;
}

.vela-seat-val {
  color: var(--mud-palette-text-primary);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.vela-seat-val .of {
  color: var(--mud-palette-text-secondary);
  font-weight: 400;
}

.vela-meter-wrap { width: 62px; }

/* Under the threshold each segment is one seat, so they can be counted. */
.vela-meter-seg {
  display: flex;
  gap: 1.5px;
  height: 7px;
}

.vela-meter-seg i {
  flex: 1;
  min-width: 2px;
  border-radius: 1px;
  background: var(--mud-palette-lines-default);
}

/* Past the threshold, proportion replaces counting. */
.vela-meter-bar {
  height: 7px;
  border-radius: 1px;
  overflow: hidden;
  background: var(--mud-palette-lines-default);
}

.vela-meter-bar span {
  display: block;
  height: 100%;
  background: var(--mud-palette-secondary);
}

.vela-meter-seg i.on,
.vela-meter-bar span.on { background: var(--mud-palette-secondary); }

.vela-meter-seg i.hot,
.vela-meter-bar span.hot { background: var(--mud-palette-warning); }

.vela-meter-seg i.full,
.vela-meter-bar span.full { background: var(--mud-palette-error); }

/* No ceiling, so no proportion to draw - a run that does not end. */
.vela-meter-inf {
  height: 7px;
  border-radius: 1px;
  opacity: 0.85;
  background:
    repeating-linear-gradient(115deg,
      var(--mud-palette-secondary) 0 4px,
      transparent 4px 8px),
    var(--mud-palette-lines-default);
}

.vela-cap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.vela-cap i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mud-palette-lines-default);
  display: block;
}

.vela-cap.on { color: var(--mud-palette-text-primary); }
.vela-cap.on i { background: var(--mud-palette-success); }
.vela-cap.off { color: var(--mud-palette-text-disabled); }

/* Wide meter for the detail page, where there is room to show every seat. */
.vela-meter-wide {
  display: flex;
  gap: 2px;
  height: 9px;
  max-width: 260px;
}

.vela-meter-wide i {
  flex: 1;
  border-radius: 1px;
  background: var(--mud-palette-lines-default);
}

.vela-meter-wide i.on { background: var(--mud-palette-secondary); }
.vela-meter-wide i.hot { background: var(--mud-palette-warning); }
.vela-meter-wide i.full { background: var(--mud-palette-error); }

/* ---------------------------------------------------------- expiry cell -- */

.vela-exp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: 0.78125rem;
}

.vela-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
}

.vela-dot.ok { background: var(--mud-palette-success); }
.vela-dot.warn { background: var(--mud-palette-warning); }
.vela-dot.crit { background: var(--mud-palette-error); }

.vela-exp-rel {
  color: var(--mud-palette-text-secondary);
  font-size: 0.775rem;
}

/* ----------------------------------------------------------- table bits -- */

.vela-cust-name {
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.25;
}

.vela-cust-mail {
  font-size: 0.775rem;
  color: var(--mud-palette-text-secondary);
  line-height: 1.25;
}

.vela-dim { color: var(--mud-palette-text-secondary); }

/* Uppercase mono headers, so the header band reads as instrument labelling
   rather than more sentences competing with the data. */
.vela-table th {
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 500 !important;
  color: var(--mud-palette-text-secondary) !important;
  background: var(--mud-palette-background-gray);
  white-space: nowrap;
}

.vela-table td {
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Row actions stay quiet until the row is under the pointer. */
.vela-row-acts {
  display: flex;
  gap: 2px;
  justify-content: flex-end;
  opacity: 0.45;
  transition: opacity 90ms ease-in;
}

tr:hover .vela-row-acts,
.vela-row-acts:focus-within { opacity: 1; }

@media (hover: none) {
  .vela-row-acts { opacity: 1; }
}

/* --------------------------------------------------------- definitions -- */

.vela-defs {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}

.vela-def-k {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.63rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mud-palette-text-secondary);
  display: block;
  margin-bottom: 1px;
}

.vela-def-v {
  font-size: 0.875rem;
  font-weight: 500;
}

/* ------------------------------------------------------------- empties -- */

.vela-empty {
  padding: 26px 14px;
  text-align: center;
}

.vela-empty-title {
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 2px;
}

.vela-empty-sub {
  font-size: 0.8125rem;
  color: var(--mud-palette-text-secondary);
}

/* ---------------------------------------------------------- sign in ----- */

/* The ground is the rail colour, which is dark in both themes. Signing in reads
   as a threshold into the workspace rather than a page inside it. */
/* Fixed rather than min-height: this layout has no MudLayout to paint the page,
   so a 100vh block leaves the body's own background showing along the bottom.
   Centring via margin:auto on the inner rather than place-items keeps the card
   reachable when the viewport is shorter than it is. */
.vela-auth {
  position: fixed;
  inset: 0;
  display: flex;
  overflow-y: auto;
  padding: 24px;
  background: var(--mud-palette-drawer-background);
}

.vela-auth-inner {
  margin: auto;
  width: 100%;
  max-width: 380px;
}

.vela-auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
}

.vela-mark.lg {
  width: 30px;
  height: 30px;
  border-radius: 5px;
  font-size: 17px;
}

.vela-auth-name {
  font-family: Inter, system-ui, sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.015em;
  color: #fff;
}

.vela-auth-card {
  background: var(--mud-palette-surface);
  overflow: hidden;
}

.vela-auth-head {
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--mud-palette-divider-light);
}

.vela-auth-title {
  font-family: Inter, system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.15;
}

.vela-auth-sub {
  font-size: 0.8125rem;
  color: var(--mud-palette-text-secondary);
  margin-top: 2px;
}

.vela-auth-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vela-auth-foot {
  margin-top: 14px;
  text-align: center;
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  color: var(--mud-palette-drawer-icon);
}

/* ----------------------------------------------------------- form pages -- */

/* Forms get a measure. A full-width email field on a 1920px screen is a long
   way to drag the eye for twenty characters - tables want the width, forms do
   not. */
.vela-form {
  max-width: 820px;
}

.vela-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}

@media (max-width: 700px) {
  .vela-form-grid { grid-template-columns: 1fr; }
}

.vela-section-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 14px 9px;
  border-bottom: 1px solid var(--mud-palette-divider-light);
}

.vela-section-title {
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
}

.vela-section-desc {
  font-size: 0.8125rem;
  color: var(--mud-palette-text-secondary);
  margin-top: 1px;
}

.vela-section-head-end {
  margin-left: auto;
}

.vela-section-body { padding: 14px; }
.vela-section-body.flush { padding: 0; }

.vela-term-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.vela-term-picker { max-width: 220px; }

/* ------------------------------------------------- entitlement editor --- */

.vela-ent-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--mud-palette-divider-light);
}

.vela-ent-row:last-child { border-bottom: 0; }

/* A feature that is not included stays legible but recedes, so the ones that
   are granted read first. */
.vela-ent-row.off .vela-ent-main { opacity: 0.55; }

.vela-ent-toggle { flex: none; margin: 0; }

.vela-ent-main {
  flex: 1;
  min-width: 0;
}

.vela-ent-ctrl {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: flex-end;
  flex: none;
}

.vela-ent-seats {
  width: 92px;
  text-align: right;
}

.vela-ent-unlimited { margin: 0; }

@media (max-width: 700px) {
  .vela-ent-row { flex-wrap: wrap; }
  .vela-ent-ctrl { width: 100%; justify-content: flex-start; }
}

/* ---------------------------------------------------------- misc chrome -- */

.vela-card-note {
  margin-left: auto;
  font-size: 0.775rem;
  color: var(--mud-palette-text-secondary);
}

.vela-mono-num {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Action labels are two short words; letting them wrap turns a button into a
   paragraph and pulls the row out of alignment. */
.vela-nowrap { white-space: nowrap; }

/* ------------------------------------------------------------- picker --- */

/* The add-to-group dialog. A fixed-height scroll region so the dialog does not
   change size as you search, and the footer with the count stays put. */
.vela-picker-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 2px 6px;
  font-size: 0.775rem;
  color: var(--mud-palette-text-secondary);
  min-height: 32px;
}

.vela-picker-count {
  font-weight: 600;
  color: var(--mud-palette-primary);
}

.vela-picker-list {
  height: 340px;
  overflow-y: auto;
  border: 1px solid var(--mud-palette-lines-default);
  border-radius: 3px;
}

.vela-picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 10px 5px 4px;
  border-bottom: 1px solid var(--mud-palette-divider-light);
  cursor: pointer;
}

.vela-picker-row:last-child { border-bottom: 0; }

.vela-picker-row:hover { background: var(--mud-palette-action-default-hover); }

.vela-picker-row.on { background: var(--mud-palette-primary-hover); }

.vela-picker-check { flex: none; margin: 0; }

/* Takes the slack so the product chip sits hard right on every row. */
.vela-picker-main {
  flex: 1;
  min-width: 0;
}

.vela-picker-main .vela-cust-name,
.vela-picker-main .vela-cust-mail {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vela-picker-more {
  display: flex;
  justify-content: center;
  padding: 6px;
}