// Partner Setup Admin — 3-column layout: partner list | detail/forms | (future: preview)

.partnersetup-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.partnersetup-page > .FormOverView {
  display: flex;
  flex: 1;
  min-width: 0;
  width: 100%;
}

.ps-layout {
  display: flex;
  flex: 1;
  width: 100%;
  min-height: calc(100vh - 0px);
  overflow: hidden;
  font-size: 13px;
  color: #1a1a2e;
}

.ps-left {
  flex: 0 0 280px;
  min-width: 260px;
  border-right: 1px solid #e0e0e0;
  display: flex;
  flex-direction: column;
  background: #fafafa;
  overflow: hidden;
}

// ── Left panel — partner list ─────────────────────────────────────────────────

.ps-left {
  width: 280px;
  min-width: 260px;
  border-right: 1px solid #e0e0e0;
  display: flex;
  flex-direction: column;
  background: #fafafa;
  overflow: hidden;
}

.ps-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px 10px;
  border-bottom: 1px solid #e0e0e0;
}

.ps-list-title {
  font-weight: 600;
  font-size: 13px;
  color: #333;
}

.ps-partner-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  overflow-y: auto;
  flex: 1;
}

.ps-partner-item {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.15s;

  &:hover { background: #f0f4ff; }
  &.ps-selected { background: #e8eeff; border-left: 3px solid #3b5bdb; }
}

.ps-partner-name {
  font-weight: 500;
  font-size: 13px;
}

.ps-partner-meta {
  font-size: 11px;
  color: #888;
  margin-top: 2px;
}

// ── Loading bar ───────────────────────────────────────────────────────────────

.ps-loading-bar {
  height: 3px;
  background: linear-gradient(90deg, #3b5bdb 40%, transparent 100%);
  animation: slide 1.2s ease-in-out infinite;
}

@keyframes slide {
  0%   { background-position: -200px 0; }
  100% { background-position: 200px 0; }
}

// ── Centre panel ──────────────────────────────────────────────────────────────

.ps-centre {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  min-width: 0;
}

.ps-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
  font-size: 14px;
}

// ── Detail header ─────────────────────────────────────────────────────────────

.ps-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e8e8e8;
}

.ps-detail-name {
  font-size: 18px;
  font-weight: 600;
}

.ps-detail-sub {
  font-size: 12px;
  color: #888;
  margin-top: 3px;
}

.ps-detail-actions {
  display: flex;
  gap: 8px;
}

// ── Section title ─────────────────────────────────────────────────────────────

.ps-section-title {
  font-weight: 600;
  font-size: 13px;
  color: #555;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ps-section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;

  .ps-section-title { margin-bottom: 0; }
}

// ── Product Lightbox (matches gb-skilldomain's modal chrome) ─────────────────

.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  padding-top: 80px;
}

.modal-content-wrapper {
  display: flex;
  justify-content: center;
  max-height: calc(100vh - 100px);
}

.modal-content {
  background-color: #fefefe;
  padding: 24px;
  border: 1px solid #ddd;
  width: min(680px, 95vw);
  max-height: 100%;
  overflow-y: auto;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

.titlecontainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.modal-title {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  margin: 0;
}

.icons {
  display: flex;
  gap: 24px;
  align-items: center;
}

.action {
  display: flex;
  gap: 12px;
  align-items: center;
}

.save {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 14px;
  height: 38px;
  border-radius: 8px;
  background: #1eae8a;
  cursor: pointer;
  transition: all 0.2s ease;

  mat-icon { color: #fff; font-size: 18px; width: 18px; height: 18px; }
  .save-label { color: #fff; font-size: 13px; font-weight: 600; }

  &:hover { background: #189b7a; transform: translateY(-1px); }
  &:active { transform: translateY(0); }
}

.add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid #818181;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;

  mat-icon { color: #818181; font-size: 18px; width: 18px; height: 18px; }

  &:hover { background: rgba(129, 129, 129, 0.1); transform: translateY(-1px); }
  &:active { transform: translateY(0); }
}

.closeicon {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease;

  mat-icon { width: 26px; height: 26px; font-size: 26px; color: #666; }

  &:hover { transform: scale(1.1); mat-icon { color: #333; } }
}

.modal-form-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

// ── Forms ─────────────────────────────────────────────────────────────────────

.ps-form-card {
  background: #f8f9ff;
  border: 1px solid #dde3ff;
  border-radius: 8px;
  padding: 16px 20px;
}

.ps-form-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 14px;
}

.ps-field-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.ps-field {
  flex: 1;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;

  label {
    font-size: 11px;
    font-weight: 500;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.4px;
  }

  input, select, textarea {
    border: 1px solid #ccd;
    border-radius: 5px;
    padding: 7px 10px;
    font-size: 13px;
    outline: none;
    background: #fff;
    transition: border-color 0.15s;

    &:focus { border-color: #3b5bdb; }
  }

  textarea { resize: vertical; }
}

.ps-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #e8e8e8;
}

// ── Buttons ───────────────────────────────────────────────────────────────────

.ps-btn {
  padding: 6px 14px;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  background: #fff;
  transition: background 0.15s, border-color 0.15s;

  &:hover { background: #f0f0f0; }
  &:disabled { opacity: 0.5; cursor: not-allowed; }

  &.ps-btn-primary {
    background: #834dd0;
    color: #fff;
    border-color: #834dd0;
    &:hover { background: #7040b8; }
  }

  &.ps-btn-danger {
    border-color: #e03131;
    color: #e03131;
    &:hover { background: #fff5f5; }
  }

  &.ps-btn-sm {
    padding: 3px 10px;
    font-size: 11px;
  }
}

.ps-link-btn {
  padding: 0;
  border: 0;
  background: transparent;
  color: #834dd0;
  cursor: pointer;
  font: inherit;
  text-align: left;

  &:hover { text-decoration: underline; }
}

.ps-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  margin-right: 8px;
  border: 1px solid #e3e3e8;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;

  mat-icon { color: #333; font-size: 20px; width: 20px; height: 20px; }

  &:hover { background: #f4f4f7; }
  &:disabled { opacity: 0.5; cursor: not-allowed; }

  &.ps-icon-btn-danger {
    border-color: #ffd2d2;
    mat-icon { color: #e03131; }
    &:hover { background: #fff5f5; }
  }
}

// ── Tables ────────────────────────────────────────────────────────────────────

.ps-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;

  th {
    text-align: left;
    padding: 8px 10px;
    background: #f4f6ff;
    border-bottom: 2px solid #dde3ff;
    font-weight: 600;
    color: #555;
    white-space: nowrap;
  }

  td {
    padding: 8px 10px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
  }

  tbody tr:nth-child(even) td { background: #f7f7fa; }
  tr:hover td { background: #f9f9ff; }
  tr.ps-selected td { background: #edf0ff; }
}

.ps-mono { font-family: 'Courier New', monospace; font-size: 12px; }
.ps-url  { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

// ── Badges ────────────────────────────────────────────────────────────────────

.ps-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;

  &.ps-badge-ok  { background: #d3f9d8; color: #1a7a2e; }
  &.ps-badge-off { background: #ffe3e3; color: #c92a2a; }
}

.ps-color-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  vertical-align: middle;
  margin-right: 4px;
}

// ── Tabs ──────────────────────────────────────────────────────────────────────

.ps-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid #e0e0e0;
  margin-bottom: 16px;

  button {
    padding: 8px 16px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 13px;
    color: #666;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s;

    &:hover { color: #3b5bdb; }
    &.ps-tab-active { color: #3b5bdb; border-bottom-color: #3b5bdb; font-weight: 600; }
  }
}

.ps-tab-content { padding-top: 4px; }

// ── Product section ───────────────────────────────────────────────────────────

.ps-product-detail {
  margin-top: 24px;
  border-top: 2px solid #dde3ff;
  padding-top: 16px;
}

.ps-product-header {
  margin-bottom: 14px;
}

.ps-product-title {
  font-weight: 600;
  font-size: 15px;
  color: #3b5bdb;
}

// ── Reveal banner — API Key ───────────────────────────────────────────────────

.ps-reveal-banner {
  background: #fff3bf;
  border: 1px solid #f08c00;
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 16px;
}

.ps-reveal-title {
  font-weight: 700;
  font-size: 13px;
  color: #864d00;
  margin-bottom: 10px;
}

.ps-reveal-key {
  font-family: 'Courier New', monospace;
  font-size: 13px;
  background: #fff;
  border: 1px solid #e0a800;
  border-radius: 5px;
  padding: 8px 12px;
  word-break: break-all;
  margin-bottom: 10px;
  color: #1a1a2e;
}

.ps-reveal-meta {
  font-size: 12px;
  color: #555;
  margin-bottom: 12px;
}

.ps-reveal-actions {
  display: flex;
  gap: 10px;
}

// ── Fullscreen partner editor (gb-partner) ─────────────────────────────────────

.ps-fullscreen {
  min-height: 100vh;
  width: 100%;
  background: #fff;
}

.ps-editor-shell {
  width: 100%;
  height: 100%;
}

.ps-editor-card {
  width: 100%;
}

// ── Utilities ─────────────────────────────────────────────────────────────────

.ps-mb-8  { margin-bottom: 8px; }
.ps-mb-16 { margin-bottom: 16px; }

.ps-empty {
  color: #aaa;
  font-size: 13px;
  padding: 20px 0;
  text-align: center;
}
.ps-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  width: 100%;
}

.ps-header-row .ps-section-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.ps-header-row .ps-btn {
  margin-left: auto;
}
.ps-search-bar {
    position: relative;
    margin: 12px;
}

.ps-search-bar input {
    width: 100%;
    height: 38px;
    padding-left: 42px;
    padding-right: 36px;
    border: 1px solid #d5d9e2;
    border-radius: 8px;
    outline: none;
    font-size: 13px;
    box-sizing: border-box;
    transition: all .2s ease;
    background: #fff;
}

.ps-search-bar input:focus {
    border-color: #2f80ed;
    box-shadow: 0 0 0 2px rgba(47,128,237,.15);
}

.ps-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #8a8a8a;
    font-size: 20px;
    width: 20px;
    height: 20px;
    pointer-events: none;
}

.ps-clear-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.ps-clear-btn mat-icon {
    font-size: 18px;
    color: #8a8a8a;
}

.ps-clear-btn:hover mat-icon {
    color: #2f80ed;
}
.ps-action-cell {
    width: 60px;
    text-align: center;
}

.ps-icon-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 4px;
}

.ps-icon-btn mat-icon {
    font-size: 20px;
}

.ps-icon-btn-danger mat-icon {
    color: #d32f2f;
}

.ps-icon-btn-danger:hover mat-icon {
    color: #b71c1c;
}