/* =============================================================================
   importTool.css — Import Tool styles for School Paint
   Covers:
     • Pexels photo search panel  (#pexels-panel, .pexels-*)
     • Shared search-panel chrome  (.svgrepo-search-bar, .svgrepo-grid, …)
     • File-list loading / error states  (.import-loading, .import-error)
   The unified modal chrome (backdrop, container, header, options grid, etc.)
   lives in unifiedModals.css — nothing in here duplicates that.
   ============================================================================= */

/* ─── Pexels panel wrapper ────────────────────────────────────────────────── */
#pexels-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  width: 100%;
}

/* ─── Pexels result grid  ─────────────────────────────────────────────────── */
/* Results are landscape cards, so we override the square .svgrepo-item layout */
.pexels-item {
  flex-direction: row !important;
  align-items: center;
  gap: 10px;
  padding: 8px 10px !important;
  min-height: 0 !important;
}

.pexels-thumb {
  width: 88px;
  height: 62px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0faf8;
  border-radius: 8px;
  overflow: hidden;
}

.pexels-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Metadata column (alt text + photographer credit) */
.pexels-item-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
  min-width: 0;
}

.pexels-item-alt {
  font-size: .8rem;
  color: #1f2937;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pexels-item-credit {
  font-size: .72rem;
  color: #07a081;
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Import button */
.pexels-import-btn {
  background: #07a081;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 6px 13px;
  font-size: .82rem;
  cursor: pointer;
  transition: background .2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.pexels-import-btn:hover  { background: #059669; }
.pexels-import-btn:active { background: #047857; }

/* Attribution bar */
.pexels-attrib a { color: #07a081; }
.pexels-attrib a:hover { text-decoration: underline; }


/* =============================================================================
   Shared search-panel chrome
   These classes are reused by both the Pexels panel and any future search
   panel.  They match the names used in SchoolDrwFire's importTool.js so that
   the panel JS doesn't need to branch on app type.
   ============================================================================= */

/* Search bar container (back-button + input row) */
.svgrepo-search-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 6px;
}

/* Back button */
.svgrepo-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: #6b7280;
  font-size: .88rem;
  cursor: pointer;
  padding: 4px 2px;
  border-radius: 6px;
  width: fit-content;
  transition: color .15s;
}
.svgrepo-back-btn:hover { color: #111; }
.svgrepo-back-btn svg   { width: 18px; height: 18px; flex-shrink: 0; }

/* Input + Find button row */
.svgrepo-search-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.svgrepo-search-input {
  flex: 1;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: .9rem;
  outline: none;
  transition: border-color .2s;
  min-width: 0;
}
.svgrepo-search-input:focus { border-color: #07a081; }

.svgrepo-find-btn {
  background: #07a081;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 8px 18px;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s;
  white-space: nowrap;
  flex-shrink: 0;
}
.svgrepo-find-btn:hover  { background: #059669; }
.svgrepo-find-btn:active { background: #047857; }

/* Scrollable results area */
.svgrepo-results {
  flex: 1;
  min-height: 180px;
  max-height: 340px;
  overflow-y: auto;
  border-radius: 10px;
}

/* Hint / empty / error / blocked states */
.svgrepo-hint,
.svgrepo-empty,
.svgrepo-error,
.svgrepo-blocked {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 16px;
  gap: 10px;
  color: #6b7280;
  font-size: .9rem;
  line-height: 1.5;
}
.svgrepo-hint    span,
.svgrepo-empty   span,
.svgrepo-error   span,
.svgrepo-blocked span { font-size: 2rem; }

.svgrepo-error { color: #ef4444; }
.svgrepo-error span { color: #f97316; }

.svgrepo-blocked { color: #374151; }

/* Fallback "open in browser" link */
.svgrepo-open-link {
  color: #07a081;
  font-size: .85rem;
  text-decoration: underline;
  cursor: pointer;
}
.svgrepo-open-link:hover { color: #047857; }

/* Loading spinner state */
.svgrepo-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 36px;
  color: #6b7280;
  font-size: .9rem;
}

.svgrepo-spinner {
  width: 20px;
  height: 20px;
  border: 2.5px solid #e5e7eb;
  border-top-color: #07a081;
  border-radius: 50%;
  animation: sp-spin .65s linear infinite;
  flex-shrink: 0;
}
@keyframes sp-spin { to { transform: rotate(360deg); } }

/* Result count */
.svgrepo-count {
  font-size: .8rem;
  color: #9ca3af;
  padding: 4px 4px 8px;
  text-align: center;
}

/* Results grid */
.svgrepo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}

/* Individual result card */
.svgrepo-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border: 1.5px solid #f0f0f0;
  border-radius: 10px;
  padding: 10px 8px;
  background: #fafafa;
  transition: border-color .2s, box-shadow .2s;
}
.svgrepo-item:hover {
  border-color: #07a081;
  box-shadow: 0 2px 8px rgba(7, 160, 129, .12);
}

/* Attribution bar at the bottom of any search panel */
.svgrepo-attrib {
  font-size: .75rem;
  color: #9ca3af;
  text-align: center;
  padding: 4px 0 2px;
}
.svgrepo-attrib a { text-decoration: none; }
.svgrepo-attrib a:hover { text-decoration: underline; }


/* =============================================================================
   Cloud file list — loading / error states
   ============================================================================= */
.import-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  color: #6b7280;
  font-size: .9rem;
}

.import-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid #e5e7eb;
  border-top-color: #07a081;
  border-radius: 50%;
  animation: sp-spin .65s linear infinite;
  flex-shrink: 0;
}

.import-error {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  color: #ef4444;
  font-size: .9rem;
  text-align: center;
}

.import-error-icon { font-size: 1.2rem; }