/* ============================================================================
 * Nitro-specific additions on top of the nanopost design system.
 * Keeps the base `components.css` pristine (copied verbatim from nanopost)
 * and layers dashboard-specific patterns here.
 * ========================================================================== */

/* Theme toggle icon visibility — show the opposite icon of the current theme
 * so the user knows what clicking will switch TO. */
html[data-np] .np-theme-icon-light { display: inline-block; }
html[data-np] .np-theme-icon-dark  { display: none; }
html[data-np][data-np-theme="dark"] .np-theme-icon-light { display: none; }
html[data-np][data-np-theme="dark"] .np-theme-icon-dark  { display: inline-block; }
@media (prefers-color-scheme: dark) {
  html[data-np]:not([data-np-theme]) .np-theme-icon-light { display: none; }
  html[data-np]:not([data-np-theme]) .np-theme-icon-dark  { display: inline-block; }
}

/* ─── HTMX progress stripe (top of viewport) ───────────────────────────── */
html[data-np] .np-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; pointer-events: none;
  z-index: var(--np-z-toast);
  background: transparent; overflow: hidden;
}
html[data-np] .np-progress::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--np-brand), var(--np-brand-300), var(--np-brand));
  transform: translateX(-100%);
}
html[data-np] .np-progress.is-active::before {
  animation: np-progress-slide 1s ease-in-out infinite;
}
@keyframes np-progress-slide {
  0%   { transform: translateX(-100%); }
  50%  { transform: translateX(25%); }
  100% { transform: translateX(100%); }
}

/* ─── Toast region ──────────────────────────────────────────────────────── */
html[data-np] .np-toast-region {
  position: fixed; bottom: var(--np-space-4); right: var(--np-space-4);
  display: flex; flex-direction: column; gap: var(--np-space-2);
  z-index: var(--np-z-toast);
  pointer-events: none;
  max-width: min(420px, calc(100vw - 32px));
}
html[data-np] .np-toast {
  display: flex; align-items: flex-start; gap: var(--np-space-3);
  padding: var(--np-space-3) var(--np-space-4);
  background: var(--np-surface-raised);
  border: 1px solid var(--np-border);
  border-left: 3px solid var(--np-ink-3);
  border-radius: var(--np-radius-md);
  box-shadow: var(--np-shadow-lg);
  font-size: var(--np-text-md);
  color: var(--np-ink);
  pointer-events: auto;
  transform: translateY(8px); opacity: 0;
  animation: np-toast-in 180ms cubic-bezier(0.2, 0.6, 0.2, 1) forwards;
}
html[data-np] .np-toast.is-leaving {
  animation: np-toast-out 300ms ease-in forwards;
}
html[data-np] .np-toast-success { border-left-color: var(--np-success); }
html[data-np] .np-toast-warn    { border-left-color: var(--np-warn); }
html[data-np] .np-toast-danger,
html[data-np] .np-toast-error   { border-left-color: var(--np-danger); }
html[data-np] .np-toast-info    { border-left-color: var(--np-info); }
html[data-np] .np-toast-close {
  margin-left: auto; border: 0; background: transparent;
  color: var(--np-ink-4); cursor: pointer; font-size: 18px;
  line-height: 1; padding: 0 4px;
}
html[data-np] .np-toast-close:hover { color: var(--np-ink); }
@keyframes np-toast-in  { to { transform: translateY(0); opacity: 1; } }
@keyframes np-toast-out { to { transform: translateY(8px); opacity: 0; } }

/* ─── Row hover → reveal copy buttons on mono cells ─────────────────────── */
html[data-np] .np-table tbody tr .np-copy {
  opacity: 0;
  transition: opacity var(--np-t-fast);
}
html[data-np] .np-table tbody tr:hover .np-copy,
html[data-np] .np-table tbody tr.is-selected .np-copy,
html[data-np] .np-copy:focus-visible,
html[data-np] .np-copy.is-copied { opacity: 1; }
html[data-np] .np-copy.is-copied { color: var(--np-success-fg); }

/* Keyboard-nav selected row */
html[data-np] [data-np-rowlist] tbody tr.is-selected { background: var(--np-brand-tint); }
html[data-np] [data-np-rowlist] tbody tr.is-selected td:first-child {
  box-shadow: inset 2px 0 0 var(--np-brand);
}

/* ─── Sidebar collapse + hamburger visibility ───────────────────────────── */
html[data-np] .np-sidebar-toggle { display: none; }
@media (max-width: 900px) {
  html[data-np] .np-sidebar-toggle { display: inline-flex; }
}
/* Backdrop when sidebar is open on mobile */
@media (max-width: 900px) {
  html[data-np] .np-shell.np-sidebar-open::after {
    content: "";
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: calc(var(--np-z-modal) - 1);
  }
}

/* ─── Stat tile row (grid) ──────────────────────────────────────────────── */
html[data-np] .np-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--np-space-3);
  margin-bottom: var(--np-space-4);
}

/* ─── Two-column grid helper ────────────────────────────────────────────── */
html[data-np] .np-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--np-space-4);
}
@media (max-width: 900px) {
  html[data-np] .np-grid-2 { grid-template-columns: 1fr; }
}

/* ─── Three-column grid helper ──────────────────────────────────────────── */
html[data-np] .np-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--np-space-4);
}
@media (max-width: 1200px) {
  html[data-np] .np-grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  html[data-np] .np-grid-3 { grid-template-columns: 1fr; }
}

/* ─── Breadcrumbs ───────────────────────────────────────────────────────── */
html[data-np] .np-breadcrumbs {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--np-space-1);
  font-size: var(--np-text-sm);
  color: var(--np-ink-3);
  margin-bottom: var(--np-space-2);
}
html[data-np] .np-breadcrumbs a { color: var(--np-ink-3); }
html[data-np] .np-breadcrumbs a:hover { color: var(--np-ink); text-decoration: none; }
html[data-np] .np-breadcrumbs .np-breadcrumb-sep { color: var(--np-ink-4); padding: 0 2px; }
html[data-np] .np-breadcrumbs .np-breadcrumb-current { color: var(--np-ink-2); }

/* ─── Devices toolbar (search + sort row) ───────────────────────────────── */
html[data-np] .np-toolbar {
  display: flex; align-items: center; gap: var(--np-space-3);
  margin-bottom: var(--np-space-3);
}
html[data-np] .np-toolbar .np-search { flex: 0 0 320px; max-width: 100%; }

/* ─── Sortable th ──────────────────────────────────────────────────────── */
html[data-np] .np-table th.np-sortable {
  cursor: pointer; user-select: none;
}
html[data-np] .np-table th.np-sortable:hover { color: var(--np-ink); }
html[data-np] .np-table th.np-sortable .np-sort-indicator {
  display: inline-block; margin-left: 4px; color: var(--np-ink-4);
}
html[data-np] .np-table th.np-sortable.is-active { color: var(--np-ink); }
html[data-np] .np-table th.np-sortable.is-active .np-sort-indicator { color: var(--np-brand); }

/* ─── Custom file picker ───────────────────────────────────────────────────
 * Native <input type="file"> is visually inconsistent across browsers and
 * ignores design-system tokens. We hide it, promote a <label> to a button
 * and render the selected filename next to it. Markup:
 *
 *   <div class="np-file">
 *     <input type="file" id="..." class="np-file-native">
 *     <label for="..." class="np-file-btn">Choose file</label>
 *     <span class="np-file-name" data-np-file-name>No file selected</span>
 *   </div>
 */
html[data-np] .np-file {
  display: flex; align-items: center; gap: var(--np-space-3);
  min-width: 0;
}
html[data-np] .np-file-native {
  /* visually hidden but still focusable via the label */
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
html[data-np] .np-file-btn {
  display: inline-flex; align-items: center; gap: var(--np-space-2);
  padding: 0 var(--np-space-3);
  height: 38px;
  border-radius: var(--np-radius-md);
  border: 1px solid var(--np-border);
  background: var(--np-surface);
  color: var(--np-ink);
  font-size: 0.875rem; font-weight: 500;
  cursor: pointer; user-select: none;
  transition: background 120ms, border-color 120ms;
  white-space: nowrap;
}
html[data-np] .np-file-btn:hover { background: var(--np-surface-hover, var(--np-surface-raised)); }
html[data-np] .np-file-native:focus-visible + .np-file-btn {
  outline: 2px solid var(--np-brand);
  outline-offset: 2px;
}
html[data-np] .np-file-name {
  color: var(--np-ink-3);
  font-size: 0.875rem;
  font-family: var(--np-font-mono);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0; flex: 1;
}
html[data-np] .np-file.is-picked .np-file-name { color: var(--np-ink); }

/* ─── Modal (native <dialog>) ───────────────────────────────────────────── */
html[data-np] dialog.np-modal {
  padding: 0;
  border: 1px solid var(--np-border);
  border-radius: var(--np-radius-lg);
  background: var(--np-surface-raised);
  color: var(--np-ink);
  max-width: 540px;
  width: calc(100vw - 32px);
  box-shadow: var(--np-shadow-lg, 0 24px 60px rgba(0,0,0,.35));
}
html[data-np] dialog.np-modal::backdrop {
  background: rgba(10, 10, 20, 0.55);
  backdrop-filter: blur(2px);
}
html[data-np] .np-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--np-space-3);
  padding: var(--np-space-3) var(--np-space-4);
  border-bottom: 1px solid var(--np-border);
}
html[data-np] .np-modal-title {
  margin: 0; font-size: 1rem; font-weight: 600; color: var(--np-ink);
}
html[data-np] .np-modal-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border: 0; background: transparent; color: var(--np-ink-3);
  border-radius: var(--np-radius-md); cursor: pointer;
  font-size: 18px; line-height: 1;
}
html[data-np] .np-modal-close:hover { background: var(--np-surface); color: var(--np-ink); }
html[data-np] .np-modal-body {
  padding: var(--np-space-4);
  display: flex; flex-direction: column; gap: var(--np-space-3);
}
html[data-np] .np-modal-footer {
  display: flex; justify-content: flex-end; gap: var(--np-space-2);
  padding: var(--np-space-3) var(--np-space-4);
  border-top: 1px solid var(--np-border);
}

/* ─── Page-header action button alignment ───────────────────────────────── */
html[data-np] .np-page-header { align-items: center; }

/* ─── Inline sparkline used on device detail ────────────────────────────── */
html[data-np] .np-spark {
  display: block; width: 100%; height: 56px;
  overflow: visible;
}