// Partner Unified Detail — side-nav + view/edit content

.pud-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.pud-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 13px;
  color: var(--gb-color-text-tertiary, #aab4cc);
}

.pud-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}

// ── View / Edit toggle bar ────────────────────────────────────────────────────
.pud-ve-bar {
  display: flex;
  border-bottom: 1px solid var(--gb-color-border, rgba(255, 255, 255, 0.08));
  flex-shrink: 0;
  background: var(--gb-color-surface-raised, rgba(255, 255, 255, 0.02));
}

.pud-ve-btn {
  flex: 1;
  padding: 10px 14px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  color: var(--gb-color-text-secondary, #6b7494);
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.18s;

  &:hover { color: var(--gb-color-text-primary, #eef0f6); background: var(--gb-color-surface-hover, rgba(255, 255, 255, 0.04)); }

  &--active {
    color: var(--gb-color-primary, #3d7fff);
    border-bottom-color: var(--gb-color-primary, #3d7fff);
    background: var(--gb-color-surface-raised, rgba(255, 255, 255, 0.03));
  }
}

.pud-edit-warn {
  font-size: 10.5px;
  color: var(--gb-color-warning, #f59e0b);
  padding: 2px 7px;
  background: var(--gb-color-warning-subtle, rgba(245, 158, 11, 0.10));
  border-radius: 20px;
  border: 1px solid rgba(245, 158, 11, 0.3);
  display: none;

  // Show only when edit tab is active
  .pud-ve-btn--active & { display: inline-flex; }
}

// ── Body: side-nav + content ──────────────────────────────────────────────────
.pud-body {
  display: grid;
  grid-template-columns: 164px 1fr;
  flex: 1;
  overflow: hidden;
}

// ── Side navigation ───────────────────────────────────────────────────────────
.pud-snav {
  background: var(--gb-color-surface-raised, rgba(255, 255, 255, 0.02));
  border-right: 1px solid var(--gb-color-border, rgba(255, 255, 255, 0.08));
  overflow-y: auto;
  padding: 10px 8px;
}

.pud-sn {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  color: var(--gb-color-text-secondary, #6b7494);
  background: none;
  border: none;
  border-left: 2px solid transparent;
  font-family: inherit;
  transition: all 0.15s;
  margin-bottom: 1px;
  text-align: left;

  &:hover { background: var(--gb-color-surface-hover, rgba(255, 255, 255, 0.04)); color: var(--gb-color-text-primary, #eef0f6); }
  &--active { background: var(--gb-color-primary-subtle, rgba(61, 127, 255, 0.08)); color: var(--gb-color-primary, #3d7fff); border-left-color: var(--gb-color-primary, #3d7fff); }

  &--dirty {
    color: var(--gb-color-warning, #f59e0b);
    .pud-sn__dot { background: var(--gb-color-warning, #f59e0b); }
  }
}

.pud-sn__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
  flex-shrink: 0;
  margin-left: auto;
  transition: background 0.15s;
}

// ── Content ───────────────────────────────────────────────────────────────────
.pud-content {
  overflow-y: auto;
  flex: 1;
}

.pud-section {
  padding: 16px 18px;
  border-bottom: 1px solid var(--gb-color-border-subtle, rgba(255, 255, 255, 0.04));

  &:last-child { border-bottom: none; }
}

.pud-section__title {
  font-size: 10px;
  font-weight: 700;
  color: var(--gb-color-text-tertiary, #aab4cc);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}

// ── Info grid (view mode) ─────────────────────────────────────────────────────
.pud-ig {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.pud-ir {
  padding: 7px 0;
  border-bottom: 1px solid var(--gb-color-border-subtle, rgba(255, 255, 255, 0.03));

  &:nth-child(odd)  { padding-right: 16px; border-right: 1px solid var(--gb-color-border-subtle, rgba(255, 255, 255, 0.03)); }
  &:nth-child(even) { padding-left: 16px; }
  &:nth-last-child(-n+2) { border-bottom: none; }
}

.pud-il {
  font-size: 10px;
  font-weight: 700;
  color: var(--gb-color-text-tertiary, #aab4cc);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 2px;
}

.pud-iv {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--gb-color-text-primary, #eef0f6);

  &--code {
    font-family: var(--gb-font-mono, monospace);
    font-size: 12px;
    color: var(--gb-color-primary, #3d7fff);
  }
}

// ── Edit fields ───────────────────────────────────────────────────────────────
.pud-field {
  margin-bottom: 11px;

  &__label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--gb-color-text-secondary, #b0b8d0);
    margin-bottom: 5px;
  }

  &__input {
    width: 100%;
    background: var(--gb-color-surface-raised, rgba(255, 255, 255, 0.04));
    border: 1.5px solid var(--gb-color-border, rgba(255, 255, 255, 0.10));
    border-radius: 8px;
    padding: 7px 10px;
    color: var(--gb-color-text-primary, #eef0f6);
    font-family: inherit;
    font-size: 12.5px;
    outline: none;
    transition: border-color 0.15s;

    &:focus { border-color: var(--gb-color-primary, #3d7fff); }
    &::placeholder { color: var(--gb-color-text-tertiary, #aab4cc); }
  }
}

// ── Edit footer ───────────────────────────────────────────────────────────────
.pud-edit-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--gb-color-border, rgba(255, 255, 255, 0.08));
  background: var(--gb-color-surface, #111520);
  flex-shrink: 0;

  &__actions {
    margin-left: auto;
    display: flex;
    gap: 8px;
  }
}

.pud-unsaved {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--gb-color-warning, #f59e0b);
  padding: 3px 9px;
  background: var(--gb-color-warning-subtle, rgba(245, 158, 11, 0.10));
  border-radius: 8px;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.pud-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: 1.5px solid transparent;
  font-family: inherit;
  transition: all 0.15s;

  &:disabled { opacity: 0.45; cursor: not-allowed; }
  &--primary { background: var(--gb-color-primary, #3d7fff); color: #fff; border-color: var(--gb-color-primary-dark, #2a63d4); &:hover:not(:disabled) { background: var(--gb-color-primary-dark, #2a63d4); } }
  &--ghost { background: transparent; color: var(--gb-color-text-secondary, #6b7494); border-color: var(--gb-color-border, rgba(255,255,255,.10)); &:hover { background: var(--gb-color-surface-hover, rgba(255,255,255,.06)); } }
}

// ── Spinner ───────────────────────────────────────────────────────────────────
.pud-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--gb-color-border, rgba(255, 255, 255, 0.10));
  border-top-color: var(--gb-color-primary, #3d7fff);
  border-radius: 50%;
  animation: pud-spin 0.7s linear infinite;

  &--sm { width: 11px; height: 11px; border-top-color: currentColor; }
}

@keyframes pud-spin { to { transform: rotate(360deg); } }

// ── RTL support ───────────────────────────────────────────────────────────────
[dir="rtl"] {
  .pud-body { grid-template-columns: 1fr 164px; }
  .pud-snav { border-right: none; border-left: 1px solid var(--gb-color-border, rgba(255, 255, 255, 0.08)); }
  .pud-sn { border-left: none; border-right: 2px solid transparent; text-align: right; &--active { border-right-color: var(--gb-color-primary, #3d7fff); } }
  .pud-sn__dot { margin-left: 0; margin-right: auto; }
  .pud-edit-footer { flex-direction: row-reverse; &__actions { margin-left: 0; margin-right: auto; } }
  .pud-ir {
    &:nth-child(odd)  { padding-right: 0; padding-left: 16px; border-right: none; border-left: 1px solid var(--gb-color-border-subtle, rgba(255,255,255,.03)); }
    &:nth-child(even) { padding-left: 0; padding-right: 16px; }
  }
}