/* Unrote design system: the shared components (prefix u-), built only on tokens.css. Existing apps may keep their
   own class names and take the look from the tokens; new screens use these. */
.u-base { font: 400 var(--u-fs)/1.5 var(--u-font); color: var(--u-fg); background: var(--u-bg);
  -webkit-font-smoothing: antialiased; }
.u-base :focus-visible { outline: 0; box-shadow: var(--u-focus); }

/* labels and small print: field names, statuses, times */
.u-label { font: 500 var(--u-fs-xs)/1.4 var(--u-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--u-muted); }
.u-meta { font: 400 var(--u-fs-xs)/1.4 var(--u-mono); color: var(--u-muted); }
.u-state { display: inline-flex; align-items: center; gap: 6px; font: 500 var(--u-fs-xs)/1 var(--u-mono);
  text-transform: uppercase; letter-spacing: .06em; color: var(--u-accent); }
.u-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.u-state.good { color: var(--u-good); }
.u-state.bad { color: var(--u-bad); }
.u-state.off { color: var(--u-muted); }

/* buttons: primary is the one action of a place; secondary for the rest; ghost for "decline", "cancel" */
.u-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 14px;
  border-radius: var(--u-radius); border: 1px solid var(--u-line-2); background: var(--u-surface); color: var(--u-fg);
  font: 600 13.5px/1 var(--u-font); cursor: pointer; white-space: nowrap; text-decoration: none; }
.u-btn:hover { background: var(--u-surface-2); }
.u-btn.primary { background: var(--u-accent); border-color: var(--u-accent); color: var(--u-accent-fg); }
.u-btn.primary:hover { background: var(--u-accent-hover); border-color: var(--u-accent-hover); }
.u-btn.ghost { background: transparent; border-color: transparent; color: var(--u-muted); }
.u-btn.ghost:hover { color: var(--u-fg); background: var(--u-surface-2); }
.u-btn.danger { color: var(--u-bad); border-color: var(--u-bad-line); }
.u-btn.danger:hover { background: var(--u-bad-soft); }
.u-btn.sm { height: 28px; padding: 0 10px; font-size: 12.5px; }
.u-btn.lg { height: 42px; padding: 0 18px; font-size: 15px; }
.u-btn.block { width: 100%; }
.u-btn:disabled, .u-btn.disabled { opacity: .5; pointer-events: none; }
.u-btn svg { width: 15px; height: 15px; }
.u-icon-btn { width: 32px; height: 32px; display: inline-grid; place-items: center; border: 0; border-radius: var(--u-radius);
  background: transparent; color: var(--u-muted); cursor: pointer; }
.u-icon-btn:hover { background: var(--u-surface-2); color: var(--u-fg); }

/* fields */
.u-field { display: grid; gap: 6px; }
.u-input { width: 100%; height: 36px; padding: 0 11px; border: 1px solid var(--u-line-2); border-radius: var(--u-radius);
  background: var(--u-surface); color: var(--u-fg); font: 400 var(--u-fs)/1.4 var(--u-font); }
textarea.u-input { height: auto; padding: 9px 11px; resize: vertical; }
.u-input::placeholder { color: var(--u-muted); }
.u-input:focus { outline: 0; border-color: var(--u-accent); box-shadow: var(--u-focus); }
.u-input.mono { font-family: var(--u-mono); font-size: 13px; }

/* chips and tags */
.u-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: 3px;
  border: 1px solid var(--u-line); background: var(--u-surface-2); color: var(--u-muted); font: 400 var(--u-fs-xs)/1 var(--u-mono); white-space: nowrap; }
.u-chip.accent { background: var(--u-soft); border-color: transparent; color: var(--u-soft-fg); }
.u-chip.good { background: var(--u-good-soft); border-color: transparent; color: var(--u-good); }
.u-chip.bad { background: var(--u-bad-soft); border-color: transparent; color: var(--u-bad); }
.u-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--u-good); display: inline-block; flex: none; }
.u-dot.off { background: var(--u-line-2); }
.u-dot.bad { background: var(--u-bad); }

/* cards: a header strip with an icon tile, rows of label / value, actions */
.u-card { background: var(--u-surface); border: 1px solid var(--u-line-2); border-radius: var(--u-radius-lg); overflow: hidden; }
.u-card-h { display: flex; align-items: center; gap: 12px; padding: 11px 16px; background: var(--u-surface-2); border-bottom: 1px solid var(--u-line-2); }
.u-card-h b { display: block; font: 600 15px/1.25 var(--u-font); }
.u-card-h small { display: block; font: 500 11px/1.4 var(--u-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--u-muted); }
.u-tile { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 3px; background: var(--u-navy); color: #ffffff; }
:root[data-theme="dark"] .u-tile { background: #1b3361; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .u-tile { background: #1b3361; } }
.u-card-b { padding: 12px 16px; }
.u-kv { display: grid; grid-template-columns: 150px 1fr; padding: 4px 16px 8px; }
.u-kv > * { padding: 8px 0; border-bottom: 1px solid var(--u-line); min-width: 0; }
.u-kv > :nth-child(odd) { font: 500 12px/1.6 var(--u-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--u-muted); padding-top: 9px; }
.u-kv > :nth-last-child(-n+2) { border-bottom: 0; }
.u-acts { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 16px 14px; }

/* the navy side column: brand, places, chats, the person */
.u-side { background: var(--u-brand-bg); color: var(--u-brand-fg); border-right: 1px solid var(--u-brand-line); }
.u-side .u-muted, .u-side .u-meta, .u-side .u-label { color: var(--u-brand-muted); }
.u-item { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border-radius: 3px; color: var(--u-brand-muted);
  font-size: 13.5px; text-decoration: none; position: relative; cursor: pointer; }
.u-item:hover { background: color-mix(in srgb, var(--u-brand-on) 60%, transparent); color: var(--u-brand-fg); }
.u-item.on { background: var(--u-brand-on); color: var(--u-brand-on-fg); font-weight: 600; box-shadow: inset 3px 0 0 var(--u-rail); }
.u-ava { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 4px; background: #2a4677; color: #ffffff; font: 600 12px var(--u-font); }

/* messages */
.u-msg-user { background: var(--u-user); border-left: 3px solid var(--u-navy); border-radius: var(--u-radius); padding: 9px 14px 9px 12px; }

/* tables */
.u-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.u-table th { text-align: left; font: 500 var(--u-fs-xs)/1.4 var(--u-mono); text-transform: uppercase; letter-spacing: .06em;
  color: var(--u-muted); padding: 9px 14px; border-bottom: 1px solid var(--u-line-2); background: var(--u-surface-2); }
.u-table td { padding: 10px 14px; border-bottom: 1px solid var(--u-line); }
.u-table tr:hover td { background: var(--u-surface-2); }

/* dialogs and notes */
.u-dialog { background: var(--u-surface); border: 1px solid var(--u-line-2); border-radius: var(--u-radius-xl); box-shadow: var(--u-shadow-pop); }
.u-note { display: flex; gap: 10px; padding: 11px 14px; border-radius: var(--u-radius); background: var(--u-soft); color: var(--u-fg);
  border-left: 3px solid var(--u-accent); font-size: 13.5px; }
.u-note.bad { background: var(--u-bad-soft); border-left-color: var(--u-bad); }
.u-note.good { background: var(--u-good-soft); border-left-color: var(--u-good); }