/* Shared UI pieces from core: status pill, popup menu, confirm bar, plain buttons. */

.status {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* the dot sits 6px before its text, and a touch above the middle, as in The System */
.status-dot {
  position: relative;
  top: -1px;
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: -8px;
  border-radius: 50%;
  background: var(--muted);
}

.status[data-state="saved"] .status-dot { background: var(--ok); }
.status[data-state="saving"] .status-dot { background: var(--accent); }
.status[data-state="error"] .status-dot,
.status[data-state="offline"] .status-dot { background: var(--warn); }
.status[data-state="idle"] .status-text:empty,
.status[data-state="idle"]:has(.status-text:empty) .status-dot { display: none; }

@media (max-width: 700px) {
  .status-count,
  .status-text,
  .width-btn { display: none; }
  /* the text is hidden, so nothing to pull towards: the dot keeps clear of Export */
  .status-dot { margin-right: 6px; }
}

/* The confirm bar's buttons: the same small tab as the header buttons */
.btn {
  padding: 5px 12px;
  border: 1px solid var(--tedge);
  border-bottom-width: 2px;
  border-radius: 2px;
  background: var(--tab);
  color: color-mix(in srgb, var(--fg) 80%, var(--muted));
  font: 400 12px var(--font-ui);
  cursor: pointer;
  transition: border-color .12s, color .12s;
}

@media (hover: hover) {
  .btn:hover { border-color: var(--accent); color: var(--accent); }
}
.btn:active { transform: translateY(1px); }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }

/* One bar under the header, the width of the column */
.confirm-slot[hidden] { display: none; }

.confirm {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--danger);
  border-radius: 4px;
  background: var(--sheet);
  font-size: 12px;
}

.confirm-text { flex: 1; min-width: 160px; }

.menu {
  position: fixed;
  /* 150px of items plus the padding and border, as in The System */
  box-sizing: content-box;
  z-index: 60;
  display: flex;
  flex-direction: column;
  min-width: 150px;
  padding: 4px;
  border: 1px solid var(--tedge);
  border-radius: 2px;
  background: var(--sheet);
  box-shadow: 0 6px 18px rgb(0 0 0 / .18);
}

.menu-item {
  padding: 4px 8px;
  border: none;
  background: none;
  color: var(--fg);
  font: 400 12px var(--font-ui);
  text-align: left;
  white-space: pre;
  cursor: pointer;
}

/* the item under the pointer or with focus (the first one lights as the menu opens) */
.menu-item:hover,
.menu-item:focus {
  outline: none;
  background: var(--sel-bg);
  box-shadow: inset 2px 0 0 var(--accent);
}
.menu-item.danger:hover,
.menu-item.danger:focus {
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  box-shadow: inset 2px 0 0 var(--danger);
}

.menu-item:disabled { opacity: .4; cursor: default; }
.menu-item.danger { color: var(--danger); }

.menu-head {
  padding: 4px 8px;
  color: var(--muted);
  font-size: 12px;
}

/* Shared small buttons (table bar, export bar) */
.chip-btn {
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--tedge);
  border-bottom-width: 2px;
  border-radius: 2px;
  background: var(--tab);
  color: color-mix(in srgb, var(--fg) 80%, var(--muted));
  font: 500 12px var(--font-ui);
  cursor: pointer;
  transition: border-color .12s, color .12s;
}

.chip-btn:active { transform: translateY(1px); }

@media (hover: hover) {
  .chip-btn:hover { border-color: var(--accent); color: var(--accent); }
  .chip-btn.danger:hover { border-color: var(--danger); color: var(--danger); }
}
.chip-btn[aria-pressed="true"] { border-color: var(--accent); background: var(--sel-bg); color: var(--fg); }
.chip-btn.danger { color: var(--danger); }
.chip-btn.danger.solid { border-color: var(--danger); background: var(--danger); color: #fff; }