/* /skin/mimics.css - Mimics (HMI) cosmetics layered over the compiled SPA chunks.
   Loaded from app.blade.php right after /skin/skin.css. Scoped to the mimic list / viewer containers only.
   Theme convention follows skin.js: html.dark = dark, otherwise light. */

/* 1. Viewer: the floating zoom/refresh toolbar is absolutely positioned top-centre inside .mimic-viewer
      (overflow:hidden), where it covers the diagram title. Pin it top-right on a solid surface instead. */
.mimic-viewer-view .mimic-viewer .viewer-toolbar {
  top: .5rem;
  left: auto;
  right: .75rem;
  transform: none;
  background-color: var(--mimic-toolbar-bg, #ffffff);
  opacity: 1;
}

/* 2. Mimic list, light theme: the compiled chunk hard-codes dark surfaces (#1f2937 / #374151 / #111827). */
html:not(.dark) .mimic-list-view .header-content h1 { color: #0f172a; }
html:not(.dark) .mimic-list-view .header-content p { color: #475569; }

html:not(.dark) .mimic-list-view .search-box {
  background-color: #ffffff;
  border-color: #e2e8f0;
}
html:not(.dark) .mimic-list-view .search-box svg { color: #94a3b8; }
html:not(.dark) .mimic-list-view .search-box input { color: #0f172a; }
html:not(.dark) .mimic-list-view .search-box input::placeholder { color: #94a3b8; }
html:not(.dark) .mimic-list-view .filters-bar select {
  background-color: #ffffff;
  border-color: #e2e8f0;
  color: #0f172a;
}
html:not(.dark) .mimic-list-view .favorites-toggle { color: #475569; }

html:not(.dark) .mimic-list-view .mimic-card {
  background-color: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}
html:not(.dark) .mimic-list-view .mimic-card:hover { border-color: #cbd5e1; }
html:not(.dark) .mimic-list-view .card-thumbnail { background-color: #f8fafc; }
html:not(.dark) .mimic-list-view .card-content h3 { color: #0f172a; }
html:not(.dark) .mimic-list-view .card-content p { color: #475569; }
html:not(.dark) .mimic-list-view .card-meta { color: #64748b; }
html:not(.dark) .mimic-list-view .card-actions { border-top-color: #e2e8f0; }
html:not(.dark) .mimic-list-view .action-btn { color: #64748b; }
html:not(.dark) .mimic-list-view .action-btn:hover { background-color: #f1f5f9; color: #0f172a; }
html:not(.dark) .mimic-list-view .action-btn.active { color: #d97706; }
html:not(.dark) .mimic-list-view .action-btn.danger:hover { background-color: #fee2e2; color: #dc2626; }

html:not(.dark) .mimic-list-view .device-badge {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #334155;
}
html:not(.dark) .mimic-list-view .device-badge.overflow { background: #f1f5f9; }
html:not(.dark) .mimic-list-view .summary-item { color: #64748b; }
html:not(.dark) .mimic-list-view .summary-item .count { color: #0f172a; }
html:not(.dark) .mimic-list-view .summary-item.ok { color: #16a34a; }
html:not(.dark) .mimic-list-view .summary-item.alarms { color: #d97706; }

html:not(.dark) .mimic-list-view .loading-state,
html:not(.dark) .mimic-list-view .error-state,
html:not(.dark) .mimic-list-view .empty-state { color: #475569; }
html:not(.dark) .mimic-list-view .empty-state h3 { color: #0f172a; }
html:not(.dark) .mimic-list-view .empty-state svg { color: #cbd5e1; }
html:not(.dark) .mimic-list-view .loading-spinner { border-color: #e2e8f0; border-top-color: #3b82f6; }
html:not(.dark) .mimic-list-view .pagination button {
  background-color: #ffffff;
  color: #0f172a;
  border: 1px solid #e2e8f0;
}
html:not(.dark) .mimic-list-view .pagination span { color: #475569; }

/* 3. Card thumbnail: a rendered preview when the mimic has one; otherwise an intentional grid + icon placeholder. */
.mimic-list-view .card-thumbnail img {
  background-color: #eef1f4;
  object-position: left top;
}
.mimic-list-view .placeholder-thumbnail {
  background-image:
    linear-gradient(to right, rgba(148, 163, 184, .22) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148, 163, 184, .22) 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: center center;
}
.mimic-list-view .placeholder-thumbnail svg { opacity: .9; }
html:not(.dark) .mimic-list-view .placeholder-thumbnail { color: #cbd5e1; }