/*
 * NetworkCore Polish Layer
 *
 * Loaded AFTER each page's inline <style> block so it wins the cascade
 * for legacy class names without rewriting markup. Tightens tables,
 * cards, modals, toasts, badges, and inputs to the design-token look,
 * and adds dark-mode-aware overrides for the few remaining hex colors.
 *
 * Depends on tokens.css (--nc-*).
 */

/* ─── Tables ────────────────────────────────────────────────────────────── */

.table-wrap,
.nc-table-wrap {
  background: var(--nc-surface);
  border: 1px solid var(--nc-border);
  border-radius: var(--nc-radius);
  box-shadow: var(--nc-shadow-sm);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-wrap table th,
.table-wrap table td,
table.data-table th,
table.data-table td {
  padding: 12px 16px;
}

.table-wrap table th,
table.data-table th {
  background: var(--nc-surface-2);
  color: var(--nc-text-3);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--nc-border);
  position: sticky;
  top: 0;
  z-index: 1;
}

.table-wrap table td,
table.data-table td {
  border-bottom: 1px solid var(--nc-border);
  color: var(--nc-text-2);
  font-size: 13px;
  background: transparent;
  transition: background 150ms ease;
}

.table-wrap table tr:hover td,
table.data-table tr:hover td {
  background: var(--nc-accent-50);
}

.table-wrap table tr:last-child td,
table.data-table tr:last-child td {
  border-bottom: none;
}

.td-primary { color: var(--nc-text-1); font-weight: 600; }
.td-mono    { font-family: var(--nc-font-mono); font-size: 12px; color: var(--nc-text-2); }

/* ─── Empty state — icon + title + sub ──────────────────────────────────── */

.table-empty {
  padding: 56px 24px;
  text-align: center;
  color: var(--nc-text-3);
  font-size: 13px;
  background: var(--nc-surface);
}
.table-empty::before {
  content: "";
  display: block;
  width: 48px; height: 48px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--nc-surface-2)
    /* inline svg = inbox icon */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='22 12 16 12 14 15 10 15 8 12 2 12'/><path d='M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/></svg>")
    center / 24px no-repeat;
}

/* ─── Cards ─────────────────────────────────────────────────────────────── */

.card {
  background: var(--nc-surface);
  border: 1px solid var(--nc-border);
  box-shadow: var(--nc-shadow-sm);
  transition: box-shadow 180ms ease, transform 180ms ease;
}
.card:hover { box-shadow: var(--nc-shadow); }
.card-icon { opacity: .14; }

/* Dashboard card-value emphasis */
.card-value {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

/* ─── Buttons — keep look, refine padding + focus ring ──────────────────── */

.btn {
  font-family: inherit;
  letter-spacing: .01em;
}
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--nc-accent-50);
}
.btn-primary { background: var(--nc-accent); }
.btn-primary:hover { background: var(--nc-accent-2); }
.btn-ghost { background: transparent; border: 1px solid var(--nc-border-strong); color: var(--nc-text-2); }
.btn-ghost:hover { background: var(--nc-surface-2); color: var(--nc-text-1); border-color: var(--nc-border-strong); }
.btn-danger:hover { opacity: 1; background: #dc2626; }

/* ─── Inputs / forms ────────────────────────────────────────────────────── */

input,
select,
textarea,
.form-input {
  font-family: inherit;
}
input:focus,
select:focus,
textarea:focus,
.form-input:focus {
  outline: none;
  border-color: var(--nc-accent) !important;
  box-shadow: 0 0 0 3px var(--nc-accent-50) !important;
}

/* ─── Modals ────────────────────────────────────────────────────────────── */

#modal-overlay {
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(2px);
  transition: opacity 150ms ease;
}
.modal,
#modal-box,
.modal-box {
  background: var(--nc-surface);
  border: 1px solid var(--nc-border);
  box-shadow: var(--nc-shadow-xl) !important;
  border-radius: var(--nc-radius-lg);
}

/* ─── Toasts ────────────────────────────────────────────────────────────── */

.toast {
  background: var(--nc-surface) !important;
  color: var(--nc-text-1) !important;
  border: 1px solid var(--nc-border);
  box-shadow: var(--nc-shadow-lg);
  border-radius: var(--nc-radius);
  font-weight: 500;
  font-size: 13px;
  padding: 12px 16px;
}
.toast.ok   { border-left: 3px solid var(--nc-success); }
.toast.err  { border-left: 3px solid var(--nc-danger);  }
.toast.warn { border-left: 3px solid var(--nc-warning); }

/* ─── Status badges — dark-mode-aware via rgba ─────────────────────────── */

.badge-status {
  font-weight: 600;
  font-size: 11px;
}
.s-active, .s-connected, .s-completed, .s-sent, .s-settled, .s-success,
.s-paid,   .s-processed, .s-notified,  .s-notified_complete {
  background: rgba(16, 185, 129, .12);
  color: var(--nc-success);
}
.s-pending, .s-held, .s-clearing {
  background: rgba(245, 158, 11, .12);
  color: var(--nc-warning);
}
.s-failed, .s-rejected, .s-suspended, .s-disputed,
.s-error, .s-invalid {
  background: rgba(239, 68, 68, .12);
  color: var(--nc-danger);
}
.s-processing, .s-open, .s-reviewing, .s-submitted, .s-confirmed {
  background: rgba(139, 92, 246, .12);
  color: #8b5cf6;
}
.s-void, .s-cancelled, .s-closed, .s-inactive {
  background: var(--nc-surface-2);
  color: var(--nc-text-3);
}
.s-charging, .s-in_progress {
  background: rgba(37, 99, 235, .12);
  color: var(--nc-accent);
}

/* ─── Loading + skeleton ────────────────────────────────────────────────── */

.spinner {
  border-color: var(--nc-border);
  border-top-color: var(--nc-accent);
}
.loading {
  padding: 32px;
  font-size: 13px;
  color: var(--nc-text-3);
}

/* JS-injected skeleton rows for tables and cards */
.nc-skeleton-row {
  display: block;
  height: 14px;
  margin: 8px 0;
  background: linear-gradient(90deg,
    var(--nc-surface-2) 0%,
    var(--nc-border)    50%,
    var(--nc-surface-2) 100%);
  background-size: 200% 100%;
  border-radius: var(--nc-radius-sm);
  animation: nc-shimmer 1.4s infinite;
}
.nc-skeleton-row.short { width: 40%; }
.nc-skeleton-row.med   { width: 70%; }

/* ─── Sidebar refinements ────────────────────────────────────────────────── */

.sb-item {
  border-radius: var(--nc-radius-sm);
  margin: 2px 8px;
  transition: background 150ms ease, color 150ms ease;
}
.sb-item:hover            { background: var(--nc-sb-hover-bg); }
.sb-item.active           { background: var(--nc-sb-active-bg); color: var(--nc-sb-active-fg); }

/* ─── Pagination buttons ─────────────────────────────────────────────────── */

.page-btn {
  background: var(--nc-surface);
  border: 1px solid var(--nc-border-strong);
  color: var(--nc-text-2);
  border-radius: var(--nc-radius-sm);
  transition: background 150ms ease, color 150ms ease;
}
.page-btn:hover           { background: var(--nc-surface-2); color: var(--nc-text-1); }
.page-btn.active          { background: var(--nc-accent); color: #fff; border-color: var(--nc-accent); }

/* ─── Dark-mode tweaks for hardcoded light values still in legacy CSS ──── */

[data-theme="dark"] .alert-box,
[data-theme="dark"] .planned-banner {
  background: rgba(245, 158, 11, .10);
  border-color: rgba(245, 158, 11, .35);
  color: #fcd34d;
}

[data-theme="dark"] tr:hover td,
[data-theme="dark"] .data-table tr:hover td,
[data-theme="dark"] .table-wrap table tr:hover td {
  background: rgba(37, 99, 235, .12);
}

/* The dashboard "Demo Data" yellow card stays warm in both modes */
[data-theme="dark"] #dash-demo-card {
  background: rgba(245, 158, 11, .08) !important;
  border-color: rgba(245, 158, 11, .30) !important;
  color: var(--nc-text-1) !important;
}
[data-theme="dark"] #dash-demo-card div[style*="color:#92400e"] {
  color: #fcd34d !important;
}