/* ============================================================
   MACHINESENS — COMPONENTS
   components.css — Buttons, chips, badges, cards, search, etc.
   ============================================================ */

/* ── Live Badge ──────────────────────────────────────────────── */
.live-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--green-bg);
  border: 1px solid var(--green-border);
  color: var(--green);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 500;
  user-select: none;
}

.live-dot {
  width: 6px;
  height: 6px;
  background: var(--green);
  border-radius: 50%;
  animation: livePulse 2s ease-in-out infinite;
}

/* ── Icon Button ─────────────────────────────────────────────── */
.icon-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: background 0.12s, color 0.12s;
  position: relative;
}

.icon-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.icon-btn .notification-dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 6px;
  height: 6px;
  background: var(--red);
  border-radius: 50%;
  border: 1.5px solid var(--bg-base);
}

/* ── Search Bar ──────────────────────────────────────────────── */
.search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0 12px;
  height: 34px;
  width: 240px;
  transition: border-color 0.2s, box-shadow 0.2s, width 0.2s var(--ease-out);
}

.search-bar:focus-within {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--accent-glow);
  width: 280px;
}

.search-bar input {
  background: none;
  border: none;
  outline: none;
  font-size: 13px;
  color: var(--text-primary);
  width: 100%;
}

.search-bar input::placeholder { color: var(--text-tertiary); }

.search-icon {
  color: var(--text-tertiary);
  flex-shrink: 0;
}

/* ── Chip ────────────────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 11.5px;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  user-select: none;
  white-space: nowrap;
}

.chip-default {
  background: var(--bg-overlay);
  color: var(--text-secondary);
  border-color: var(--border-subtle);
}

.chip-default:hover {
  background: var(--bg-active);
  color: var(--text-primary);
  border-color: var(--border-default);
}

.chip-active {
  background: var(--accent-muted);
  color: var(--accent-primary);
  border-color: rgba(124, 106, 247, 0.3);
}

/* ── Status Pill ─────────────────────────────────────────────── */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}

.status-pill .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.status-pill.complete  { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); }
.status-pill.warning   { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-border); }
.status-pill.critical  { background: var(--red-bg);   color: var(--red);   border: 1px solid var(--red-border); }

/* ── Card ────────────────────────────────────────────────────── */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
  gap: 12px;
}

.card-header-left { min-width: 0; }

.card-title {
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.card-subtitle {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 1px;
}

.card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* ── Skeleton Loader ─────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-elevated) 25%,
    var(--bg-overlay)  50%,
    var(--bg-elevated) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

/* ── Divider ─────────────────────────────────────────────────── */
.divider {
  height: 1px;
  background: var(--border-subtle);
}

/* ── Empty State ─────────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 20px;
  gap: 10px;
  color: var(--text-disabled);
}

.empty-icon {
  font-size: 28px;
  opacity: 0.4;
}

.empty-text { font-size: 13.5px; }
.empty-sub  { font-size: 12.5px; color: var(--text-disabled); }

/* ── Loading Spinner ─────────────────────────────────────────── */
.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-default);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* ============================================================
   LIGHT THEME — surgical overrides
   Fixes hardcoded values in layout.css + dashboard.css that
   the token swap alone cannot reach.
   ============================================================ */

/* ── Theme toggle button ─────────────────────────────────── */
.icon-btn#themeToggleBtn {
  color: var(--text-tertiary);
}
.icon-btn#themeToggleBtn:hover {
  color: var(--text-primary);
}
html.theme-light .icon-btn#themeToggleBtn {
  color: var(--text-secondary);
}

/* ── Sidebar — slight tint to separate from white cards ──── */
html.theme-light .sidebar {
  background: #fafafe;
  border-right-color: var(--border-subtle);
}

/* Remove the dark-mode purple gradient overlay on sidebar */
html.theme-light .sidebar::after {
  background: none;
}

/* ── Brand mark — keep gradient, add light-appropriate shadow */
html.theme-light .brand-mark {
  box-shadow: 0 2px 8px rgba(91, 77, 224, 0.25),
              0 0 0 1px rgba(91, 77, 224, 0.15);
}

/* ── Avatar — gradient stays, shadow adjusted ─────────────── */
html.theme-light .avatar {
  background: linear-gradient(135deg, #5b4de0, #8b7ff0);
  box-shadow: 0 1px 4px rgba(91, 77, 224, 0.3);
}

/* ── Topbar ──────────────────────────────────────────────── */
html.theme-light .topbar {
  background: #ffffff;
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: 0 1px 0 var(--border-subtle);
}

/* ── Search bar focus ring ───────────────────────────────── */
html.theme-light .search-bar:focus-within {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(91, 77, 224, 0.10);
}

/* ── Nav active item ─────────────────────────────────────── */
html.theme-light .nav-item.active {
  background: rgba(91, 77, 224, 0.08);
  color: #5b4de0;
}
html.theme-light .nav-item.active .nav-icon {
  color: #5b4de0;
  opacity: 1;
}

/* ── Metric cards — white surface, real shadow depth ──────── */
html.theme-light .metric-card {
  background: #ffffff;
  box-shadow: var(--shadow-sm);
  border-color: var(--border-subtle);
}
html.theme-light .metric-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-default);
}

/* ── Metric value colors — remap to light theme status ──── */
html.theme-light .metric-value.purple { color: #5b4de0; }
html.theme-light .metric-value.green  { color: #15803d; }
html.theme-light .metric-value.red    { color: #b91c1c; }
html.theme-light .metric-value.amber  { color: #92400e; }

/* ── Metric icon backgrounds ────────────────────────────── */
html.theme-light .metric-icon.purple { background: rgba(91,77,224,0.08);  color: #5b4de0; }
html.theme-light .metric-icon.green  { background: #f0fdf4;               color: #15803d; }
html.theme-light .metric-icon.red    { background: #fff1f1;               color: #b91c1c; }
html.theme-light .metric-icon.amber  { background: #fffbeb;               color: #92400e; }

/* ── Cards ───────────────────────────────────────────────── */
html.theme-light .card {
  background: #ffffff;
  box-shadow: var(--shadow-sm);
  border-color: var(--border-subtle);
}

/* ── Table rows — clean zebraless style with hover ────────── */
html.theme-light .tenant-row:hover,
html.theme-light .tenant-row.expanded {
  background: rgba(15, 15, 40, 0.03);
}
html.theme-light .site-row:hover {
  background: rgba(15, 15, 40, 0.025);
}
html.theme-light .site-row:hover .row-title {
  color: var(--text-primary);
}

/* ── Gateway items ───────────────────────────────────────── */
html.theme-light .gateway-item {
  background: #f8f8fc;
  border-color: var(--border-subtle);
}
html.theme-light .gateway-item:hover {
  border-color: var(--border-default);
  background: #ffffff;
}

/* ── Device panel background ─────────────────────────────── */
html.theme-light .device-panel {
  background: #f8f8fc;
}

/* ── Health ring — green maps to light theme green ──────── */
html.theme-light .ring-fill {
  stroke: #15803d;
}
html.theme-light .ring-pct {
  color: #15803d;
}

/* ── Live badge ──────────────────────────────────────────── */
html.theme-light .live-badge {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #15803d;
}
html.theme-light .live-dot {
  background: #15803d;
}

/* ── Status pills ────────────────────────────────────────── */
html.theme-light .status-pill.complete {
  background: #f0fdf4;
  color: #15803d;
  border-color: #bbf7d0;
}
html.theme-light .status-pill.warning {
  background: #fffbeb;
  color: #92400e;
  border-color: #fde68a;
}
html.theme-light .status-pill.critical {
  background: #fff1f1;
  color: #b91c1c;
  border-color: #fecaca;
}

/* ── Chips ───────────────────────────────────────────────── */
html.theme-light .chip-default {
  background: #f0f0f5;
  color: var(--text-secondary);
  border-color: var(--border-default);
}
html.theme-light .chip-default:hover {
  background: #e8e8f0;
  color: var(--text-primary);
}
html.theme-light .chip-active {
  background: rgba(91, 77, 224, 0.09);
  color: #5b4de0;
  border-color: rgba(91, 77, 224, 0.25);
}

/* ── Nav badges ──────────────────────────────────────────── */
html.theme-light .nav-badge.alert {
  background: #fff1f1;
  color: #b91c1c;
  border-color: #fecaca;
}
html.theme-light .nav-badge.neutral {
  background: #f0f0f5;
  color: var(--text-tertiary);
  border-color: var(--border-default);
}

/* ── Site count badge ────────────────────────────────────── */
html.theme-light .site-count-badge {
  background: #f0f0f5;
  border-color: var(--border-default);
  color: var(--text-tertiary);
}

/* ── Toast ───────────────────────────────────────────────── */
html.theme-light .toast {
  background: #ffffff;
  border-color: var(--border-default);
  box-shadow: var(--shadow-lg);
}

/* ── Skeleton shimmer — lighter base, still visible ──────── */
html.theme-light .skeleton {
  background: linear-gradient(
    90deg,
    #ebebf0 25%,
    #f5f5f9 50%,
    #ebebf0 75%
  );
  background-size: 200% 100%;
}

/* ── Scrollbar — subtle on light ────────────────────────── */
html.theme-light * {
  scrollbar-color: #d4d4de transparent;
}
html.theme-light *::-webkit-scrollbar-thumb {
  background: #d4d4de;
}