/**
 * Views - Magneto SPA
 * View-specific layouts: section headers, the connections and tools tables,
 * the skills catalogue and editor, and the admin panels.
 */

/* ─── Section headers ─── */
.view-header {
  padding: var(--space-2) 0 var(--space-6);
}

.view-header h1 {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-2);
}

.view-header p {
  color: var(--color-text-muted);
  margin: 0;
}

/* ─── Admin ─── */

.admin-panel {
  margin-bottom: var(--space-8);
}

.admin-panel > h2 {
  font-size: var(--text-xl);
  font-weight: var(--font-semi);
  margin: 0 0 var(--space-4);
}

/* Data-access roles: the first column carries two editable fields rather than static text. An
   auto-layout table sizes a column to its content, so an input's `width: 100%` resolves against a cell
   that is itself sizing to the input: both collapse to the input's intrinsic ~20-character width and
   the description clips mid-word. A floor on the column is what gives the fields room to be edited. */
.admin-roles__name {
  min-width: 10rem;
}

/* `width: 100%` on exactly one cell of an auto-layout table hands it whatever is left after the other
   columns take their intrinsic widths. That is what keeps the description roomy without a fixed floor
   competing for the same pixels: a floor wide enough for a comfortable textarea is a floor that
   overflows the card as soon as one label in one language grows. */
.admin-roles__desc {
  width: 100%;
  min-width: 12rem;
}

/* Form-sized padding makes a table row very tall once every row carries an editable field. */
.admin-roles__name .field input,
.admin-roles__desc .field textarea {
  padding: var(--space-2);
  /* An <input> contributes its size-attribute width (~20 characters) as a minimum to an auto-layout
     table, which is what decides these two columns unless it is allowed to shrink. Releasing it hands
     the decision to the column floors below, where it can be reasoned about. */
  min-width: 0;
}

.admin-roles__desc .field textarea {
  resize: vertical;
  line-height: 1.4;
}

/* Access matrix. The adapter identity column is sticky so the role columns can scroll sideways at any
   role count without the reader losing track of which row they are on. */
.access__scroll { overflow-x: auto; }

.access__table th.access__adapter {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 14rem;
  text-align: left;
  background: var(--color-bg-card);
  vertical-align: top;
}

.access__table th.access__adapter p { margin: var(--space-1) 0 0; font-size: var(--text-xs); }

.access__adapter-identity { display: flex; align-items: flex-start; gap: var(--space-3); }

/* Every header label that carries a help hint (see view-state.js `helpHint`) uses this so the "?"
   sits inline with the text instead of wrapping onto its own line in a narrow column. */
.access__col-head { display: inline-flex; align-items: center; gap: var(--space-1); }

.access__unit { white-space: nowrap; }
.access__role { white-space: nowrap; }
.access__role .code { display: block; margin-top: var(--space-1); font-size: var(--text-xs); }
.access__cell { min-width: 5rem; }

/* An unavailable adapter's grants are kept but cannot be reached, so the row reads as inert rather
   than as unchecked: an empty checkbox would invite someone to tick it and expect access. */
.access__row--off { opacity: 0.55; }
.access__cell--off { color: var(--color-text-muted); cursor: not-allowed; }

.admin-roles__slug {
  white-space: nowrap;
}

/* "2 concesiones" wraps to two lines at this column width, which makes the pill twice the height of
   the member count beside it. One line keeps the two counts reading as the same kind of control. */
.admin-roles__grants-link {
  white-space: nowrap;
}

.admin-roles__feedback {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
}

/* ─── Responsive tweaks ─── */
@media (max-width: 720px) {
  .view-header h1 { font-size: var(--text-2xl); }
}

.provider-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-hover); color: var(--color-brand); font-weight: var(--font-semi); }
.provider-icon__img { width: 40px; height: 40px; padding: 4px; object-fit: contain; border-radius: var(--radius-md); }

.provider-card { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); border-bottom: 1px solid var(--color-border); }
.provider-card:last-child { border-bottom: 0; }

.provider-card__actions { display: flex; gap: var(--space-2); }
.provider-card__meta { color: var(--color-text-muted); font-size: var(--text-sm); }

.access-denied { max-width: 560px; margin: var(--space-16) auto; text-align: center; }
.access-denied h1 { margin-bottom: var(--space-3); }
.access-denied p { margin-bottom: var(--space-6); color: var(--color-text-muted); }

/* ─── Admin view modules ─── */
.admin-view__header { align-items: flex-start; }

.admin-view__panel { padding: var(--space-5); margin-bottom: var(--space-5); }
.admin-view__panel h2 { margin: 0 0 var(--space-3); }
.admin-view__summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-5); }
.admin-view__metric { padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg-card); }
.admin-view__metric span, .admin-view__metric small { display: block; color: var(--color-text-muted); font-size: var(--text-sm); }
.admin-view__metric strong { display: block; margin: var(--space-2) 0; color: var(--color-text-primary); font-size: var(--text-2xl); }

.admin-view__placeholder { padding: var(--space-8); color: var(--color-text-muted); text-align: center; }

.admin-view__note { margin: var(--space-4) 0 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.usage-graph { margin: var(--space-4) 0 var(--space-5); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg-card); }
.usage-graph__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); }
.usage-graph__title { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-text-primary); margin: 0; }
.usage-meter { display: flex; height: 10px; width: 100%; border-radius: var(--radius-pill); overflow: hidden; background: var(--color-bg-tertiary); margin-bottom: var(--space-3); }
.usage-meter__segment { height: 100%; transition: width var(--transition-normal); }
.usage-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); list-style: none; padding: 0; margin: 0; }
.usage-legend__item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }
.usage-legend__dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.user-bar { display: block; height: 4px; border-radius: var(--radius-pill); background: var(--color-brand); margin-top: var(--space-1); opacity: 0.8; }
.usage-stat-cell { display: flex; flex-direction: column; }
.usage-stat-cell small { color: var(--color-text-muted); font-size: var(--text-xs); margin-top: 2px; }
/* A second section heading in one panel needs air above it; the base h2 rule
   has no top margin, so it otherwise sits flush against the preceding table. */
.admin-view__panel .table--wrap + h2 { margin-top: var(--space-6); }

.provider-table { overflow: hidden; }
.provider-cell { display: flex; align-items: flex-start; gap: var(--space-3); }
.provider-cell p { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: var(--text-xs); }
.provider-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.provider-icon--idp { color: #0d9488; }
.provider-cell small { display: block; margin-top: var(--space-1); color: var(--color-text-muted); }
.table__actions { text-align: center !important; white-space: nowrap; }
.table__description { text-align: left !important; }
.table-group-row__toggle { display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: 0; border: none; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.tool-row__chevron { width: 16px; height: 16px; flex: none; color: var(--color-text-muted); transition: transform 0.15s ease; }
.table-group-row.is-expanded .tool-row__chevron { transform: rotate(90deg); }
.tool-row.is-collapsed { display: none; }
.badge--tools-access { border-radius: var(--radius-sm); }

/* Auto table layout gives width to whichever column has the most content, so an upstream description
   of several hundred characters starves the other two down to a sliver. `width: 100%` on exactly one
   cell inverts that: the description takes the surplus and the short columns settle at their own
   content width, with a floor on the name and no wrapping for the access label. */
.tool-row .table__description { width: 100%; }
.tool-row__name { min-width: 12rem; }
.tool-row__access { white-space: nowrap; }
.tool-row td { vertical-align: top; }

/* A wrapping inline chip draws its border and padding around each line separately; as an inline-block
   it is one box that wraps inside, so a long namespaced id stays a single chip. */
.technical-detail { display: inline-block; }

/* Descriptions arrive from the upstream server as markdown-flavoured plain text whose newlines carry
   the structure. Keeping them is also what makes a verbose one tall enough to bury the table, so the
   text is clamped and the toggle is attached only to the rows where the clamp actually hides text. */
.tool-row__desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; white-space: pre-line; }
.tool-row__desc.is-expanded { display: block; -webkit-line-clamp: none; }
.tool-row__desc-toggle { min-height: 0; margin-top: var(--space-1); padding: 0; border: 0; background: none; color: var(--color-brand); font: inherit; font-size: var(--text-xs); cursor: pointer; }
.tool-row__desc-toggle:hover { text-decoration: underline; }
.provider-cards { display: none; }

.code-block { position: relative; }
.code-block pre.code { padding-right: var(--space-16); }
.code-block__copy {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  min-height: unset;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-secondary);
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-xs);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.code-block__copy:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }

.guide-content { padding: var(--space-6); }
.guide-content li { margin-bottom: var(--space-3); color: var(--color-text-secondary); }
.guide-content a { color: var(--color-brand-hover); }
.guide-content .card--muted { margin-top: var(--space-6); padding: var(--space-5); background: var(--color-bg-secondary); }
.guide-content pre.code { margin: var(--space-2) 0 0; }
.client-panel__intro { margin: 0 0 var(--space-4); color: var(--color-text-secondary); }
.client-panel__notes { margin-top: var(--space-5); padding: var(--space-4) var(--space-5); border-left: 3px solid var(--color-brand); border-radius: var(--radius-sm); background: var(--color-bg-secondary); }
.client-panel__notes h3 { margin: 0 0 var(--space-3); font-size: var(--text-sm); font-weight: var(--font-semi); color: var(--color-text-primary); }
.client-panel__notes ul { margin: 0; padding-left: var(--space-5); }
.client-panel__notes li:last-child { margin-bottom: 0; }

.client-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.client-tabs__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-bg-card);
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
}
.client-tabs__item:hover { color: var(--color-text-primary); background: var(--color-bg-hover); }
.client-tabs__item[aria-selected="true"] { color: var(--color-text-inverse); background: var(--color-brand); border-color: var(--color-brand); }
.client-tabs__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: var(--radius-sm);
  background: var(--color-bg-hover);
  color: var(--color-text-muted);
  font-size: 10px;
  font-weight: var(--font-semi);
}
.client-tabs__item[aria-selected="true"] .client-tabs__badge { background: rgba(255, 255, 255, 0.25); color: inherit; }
.client-panel[hidden] { display: none; }

@media (max-width: 760px) {
  
  
  .provider-table { display: none; }
  .provider-cards { display: grid; gap: var(--space-3); }
  
}

/* ─── Skills Catalogue & Editor Views ─── */
.view-header--with-action {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.skills-panel {
  padding: var(--space-5);
}

.skills-search-bar {
  margin-bottom: var(--space-5);
}

.skills-search-input {
  width: 100%;
  max-width: 480px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--text-sm);
  transition: border-color var(--transition-fast), outline var(--transition-fast);
}

.skills-search-input:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-color: var(--color-brand-border);
}

.skill-editor__breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-brand-hover);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  margin-bottom: var(--space-3);
  transition: color var(--transition-fast);
}

.skill-editor__breadcrumb:hover {
  color: var(--color-brand-hover);
}

.skill-editor__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.skill-editor__title-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.skill-editor__title-wrap h1 {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  margin: 0;
}

.skill-editor__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.skill-editor__grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--space-6);
  align-items: start;
}

.skill-editor__main {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.skill-editor__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.skill-editor__card {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.skill-editor__card h3 {
  font-size: var(--text-base);
  font-weight: var(--font-semi);
  margin: 0;
  color: var(--color-text-primary);
}

.skill-editor__textarea {
  min-height: 300px;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  resize: vertical;
}

/* Toggle Switch Component */
.toggle-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  user-select: none;
}

.toggle-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  background-color: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.toggle-slider::before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 2px;
  background-color: var(--color-fg);
  border-radius: 50%;
  transition: transform var(--transition-fast);
}

.toggle-switch input:checked + .toggle-slider {
  background-color: var(--color-brand);
  border-color: var(--color-brand);
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(20px);
  background-color: var(--color-text-inverse);
}

.toggle-switch input:focus-visible + .toggle-slider {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.toggle-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-primary);
}

/* Projections styling */
.projection-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.projection-field label {
  font-size: var(--text-xs);
  font-weight: var(--font-semi);
  text-transform: uppercase;
  letter-spacing: var(--tracking-overline);
  color: var(--color-text-muted);
}

.projection-box {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  overflow-x: auto;
}

.projection-box code {
  background: transparent;
  border: none;
  padding: 0;
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .skill-editor__grid {
    grid-template-columns: 1fr;
  }
}

/* ─── Admin pagination controls ─── */
.admin-pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-1) var(--space-1); flex-wrap: wrap; }
.admin-pagination__info { font-size: var(--text-sm); color: var(--color-text-muted); }
.admin-pagination__actions { display: inline-flex; align-items: center; gap: var(--space-2); }
.admin-pagination__page { font-size: var(--text-xs); color: var(--color-text-secondary); font-weight: var(--font-medium); padding: 0 var(--space-2); }
.admin-pagination .btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }