/* ───────────────────────────────────────────────────────────────────────────
 * Projects Admin tab — modernized toolbar + flex-viewport table.
 * Toolbar and drawer classes (.users-table-controls, .users-toolbar-left,
 * .users-toolbar-search, .users-active-chips, .filters-drawer,
 * .filters-drawer-section*) are shared with Users/Subscriptions — see
 * admin-users.css for their definitions. The rules below only add per-tab
 * scoping, table-specific chrome, and the smart-search + operator-autocomplete
 * dropdowns.
 * ─────────────────────────────────────────────────────────────────────────── */

#mode-wrapper-projects-admin {
  /* Flex-fills body via `.mode-wrapper.selected { flex: 1 }` in style.css. */
  flex-direction: column;
  overflow: hidden;
  padding: 0 !important;
}
#mode-wrapper-projects-admin.selected { display: flex !important; }

/* Consistent horizontal insets with Users/Subscriptions (16px top / 24px sides). */
#mode-wrapper-projects-admin > #projects-admin-filters-wrapper {
  flex-shrink: 0;
  padding: 16px 24px 0;
  margin: 0 !important;
}
#mode-wrapper-projects-admin > #projects-admin-active-chips {
  flex-shrink: 0;
  margin: 8px 24px 0;
}
#mode-wrapper-projects-admin > .projects-admin-table-wrapper {
  flex: 1;
  min-height: 0;
  overflow: auto;
  margin: 8px 24px 0;
  border: 1px solid var(--sl-color-neutral-200);
  border-radius: var(--sl-border-radius-medium);
}
/* Inherits visual style from .news-pagination (see admin-data-table.css),
 * so info-text sizing / page-indicator / chevron button rhythm all match
 * News + Companies. This scoped rule only handles insets + flex layout. */
#mode-wrapper-projects-admin > .projects-admin-pagination-wrapper {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  margin: 0 !important;
  background: #fff;
  border-top: none;
}

/* ───────────────────────────────────────────────────────────────────────────
 * Table chrome — sticky thead + sticky first (gid) + last (actions) columns.
 * z-index layering matches the Users pattern:
 *   thead cells                  : 3  (sit above sticky body columns)
 *   fixed-column corner (thead)  : 4  (paint over both sticky layers)
 *   sticky body cells            : 2  (above regular scrolling cells)
 * ─────────────────────────────────────────────────────────────────────────── */
#mode-wrapper-projects-admin table {
  border-collapse: collapse;
  font-size: 13px;
  width: 100%;
}
/* Canonical admin table-header — mirrors .news-table thead th +
 * .users-table th. Keep in sync when tweaking. */
#mode-wrapper-projects-admin thead {
  position: sticky;
  top: 0;
  z-index: 3;
}
#mode-wrapper-projects-admin th {
  background: var(--sl-color-neutral-100);
  text-align: left;
  padding: 8px 12px;
  border-bottom: none;
  box-shadow: inset 0 -2px 0 var(--sl-color-neutral-300);
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
}
#mode-wrapper-projects-admin td {
  padding: 6px 12px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: middle;
  background: #fff;
}
#mode-wrapper-projects-admin tbody tr:hover td {
  background-color: #f8f9fa;
}

/* Sticky Project ID column (leftmost) — anchors scanning during horizontal
 * scroll. Sits at z-index 2 (body) / 4 (thead corner). Thead cells keep
 * the canonical gray background; body cells inherit white from the base td rule. */
#mode-wrapper-projects-admin th[data-prop="gid"],
#mode-wrapper-projects-admin td[data-prop="gid"] {
  position: sticky;
  left: 0;
  z-index: 2;
  box-shadow: 1px 0 0 var(--sl-color-neutral-200);
}
#mode-wrapper-projects-admin thead th[data-prop="gid"] {
  z-index: 4;
  /* combine sticky column shadow + canonical thead bottom border */
  box-shadow: 1px 0 0 var(--sl-color-neutral-200), inset 0 -2px 0 var(--sl-color-neutral-300);
}

/* Sticky Actions column (rightmost) — same treatment on the right edge so
 * Edit/Delete buttons stay in view without scrolling to the end. */
#mode-wrapper-projects-admin th[data-prop="actions"],
#mode-wrapper-projects-admin td[data-prop="actions"] {
  position: sticky;
  right: 0;
  z-index: 2;
  box-shadow: -1px 0 0 var(--sl-color-neutral-200);
}
#mode-wrapper-projects-admin thead th[data-prop="actions"] {
  z-index: 4;
  box-shadow: -1px 0 0 var(--sl-color-neutral-200), inset 0 -2px 0 var(--sl-color-neutral-300);
}

.projects-admin-owners-cell {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.projects-admin-alert-cell sl-tag {
  margin: 1px;
  cursor: default;
}

.projects-admin-alert-cell sl-tag sl-icon-button {
  font-size: 10px;
  margin-left: 2px;
}

.projects-admin-actions-cell {
  white-space: nowrap;
}

.projects-admin-actions-cell sl-button {
  margin: 1px;
}

/* ───────────────────────────────────────────────────────────────────────────
 * Smart-search bar — a custom autocomplete dropdown different in shape from
 * an sl-select. Retained as-is because it does entity-typed suggestions
 * (projects/operators/countries/regions/owners) that don't fit sl-select's
 * one-list model.
 * ─────────────────────────────────────────────────────────────────────────── */
.projects-admin-search-wrapper {
  position: relative;
}

.projects-admin-search-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1000;
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  max-height: 400px;
  overflow-y: auto;
  margin-top: 4px;
}

.projects-admin-search-section-header {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: #64748b;
  padding: 8px 12px 4px;
  position: sticky;
  top: 0;
  background: white;
  border-bottom: 1px solid #f1f5f9;
}

.projects-admin-search-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 13px;
  transition: background-color 0.15s;
}

.projects-admin-search-item:hover,
.projects-admin-search-item.active {
  background-color: #f1f5f9;
}

.projects-admin-search-item sl-icon {
  font-size: 14px;
  flex-shrink: 0;
}

.projects-admin-search-no-results {
  padding: 12px;
  font-size: 12px;
  color: #94a3b8;
  text-align: center;
}

/* ───────────────────────────────────────────────────────────────────────────
 * Operator autocomplete — inline inside the Filters drawer's Ownership
 * section. The results list absolutely-positions below the input.
 * ─────────────────────────────────────────────────────────────────────────── */
.projects-admin-operator-filter-inline {
  position: relative;
}

.projects-admin-operator-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1000;
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  max-height: 300px;
  overflow-y: auto;
  margin-top: 4px;
  padding: 4px;
}

.projects-admin-operator-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  cursor: pointer;
  border-radius: 4px;
  font-size: 13px;
  transition: background-color 0.15s;
}

.projects-admin-operator-item:hover,
.projects-admin-operator-item.active {
  background-color: #f1f5f9;
}

.projects-admin-operator-item sl-icon {
  font-size: 14px;
  color: #2563eb;
  flex-shrink: 0;
}

.projects-admin-operator-no-results {
  padding: 8px;
  font-size: 12px;
  color: #94a3b8;
  text-align: center;
}