/* ============================================================================
   workspace.css — Plan 01-06
   ----------------------------------------------------------------------------
   Estilos das páginas de gestão de workspace (selector, settings, members,
   invite, accept). Consome tokens.css OKLCH herdados (dark theme MCK).

   TODO Phase 3+: revisar quando UI-SPEC light-only Linear-aesthetic for
   adotado. Hoje o painel é dark — workspace UI mantém consistência.
   ============================================================================ */

/* ============================================================================
   Workspace Selector (dropdown no header)
   ============================================================================ */
.ws-selector {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 220px;
}

.ws-selector__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-2);
  padding: var(--gap-2) var(--gap-3);
  min-height: 36px;
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  transition: var(--transition-color);
  width: 100%;
  justify-content: space-between;
}
.ws-selector__trigger:hover {
  border-color: var(--hover-border);
  background: var(--bg-surface-hover);
}
.ws-selector__trigger:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
}

.ws-selector__name {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.ws-selector__plan {
  font-size: var(--fs-xs);
  padding: 2px 8px;
  flex-shrink: 0;
}

.ws-selector__chevron {
  flex-shrink: 0;
  color: var(--text-secondary);
  transition: transform var(--duration-fast) var(--ease-out);
}
.ws-selector__chevron--open { transform: rotate(180deg); }

.ws-selector__list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  min-width: 280px;
  max-height: 380px;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: var(--gap-2);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-modal);
  z-index: var(--z-tooltip);
}

.ws-selector__item {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
  padding: var(--gap-2) var(--gap-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--fs-base);
  color: var(--text-primary);
  transition: var(--transition-color);
}
.ws-selector__item:hover,
.ws-selector__item--focus { background: var(--bg-surface-hover); }
.ws-selector__item--current { color: var(--color-accent); }
.ws-selector__item--cta {
  color: var(--color-accent);
  font-weight: var(--fw-medium);
  justify-content: center;
}

.ws-selector__item-name {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ws-selector__item-meta {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.ws-selector__item-plan {
  font-size: var(--fs-xs);
  padding: 2px 6px;
}

.ws-selector__divider {
  height: 1px;
  background: var(--border-subtle);
  margin: var(--gap-2) 0;
  list-style: none;
}

/* Badge variants por plan */
.badge--free   { background: var(--badge-cinza-bg);   color: var(--badge-cinza-text);   border: 1px solid var(--badge-cinza-border); }
.badge--solo   { background: var(--badge-azul-bg);    color: var(--badge-azul-text);    border: 1px solid var(--badge-azul-border); }
.badge--agency { background: var(--badge-roxo-bg);    color: var(--badge-roxo-text);    border: 1px solid var(--badge-roxo-border); }
.badge--scale  { background: var(--badge-verde-bg);   color: var(--badge-verde-text);   border: 1px solid var(--badge-verde-border); }

/* ============================================================================
   Workspace Pages (settings, members, invite)
   Layout comum: container + page-header + form/table
   ============================================================================ */
.ws-page {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--gap-8) var(--gap-6);
}

.ws-page__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-4);
  margin-bottom: var(--gap-6);
  padding-bottom: var(--gap-4);
  border-bottom: 1px solid var(--border-default);
}

.ws-page__title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  letter-spacing: var(--ls-tight);
}

.ws-page__subtitle {
  margin-top: var(--gap-2);
  font-size: var(--fs-base);
  color: var(--text-secondary);
}

.ws-page__actions {
  display: flex;
  gap: var(--gap-2);
  flex-shrink: 0;
}

.ws-page__nav {
  display: inline-flex;
  gap: var(--gap-1);
  margin-bottom: var(--gap-6);
  padding: var(--gap-1);
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
}

.ws-page__nav a {
  padding: var(--gap-2) var(--gap-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  transition: var(--transition-color);
}
.ws-page__nav a:hover { color: var(--text-primary); background: var(--hover-bg); }
.ws-page__nav a.active {
  color: var(--text-primary);
  background: var(--color-accent-10);
  border: 1px solid var(--color-accent-40);
}

/* Form fields ---------------------------------------------------------------*/
.ws-form { display: flex; flex-direction: column; gap: var(--gap-5); }

.ws-field { display: flex; flex-direction: column; gap: var(--gap-2); }

.ws-field__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
}

.ws-field__hint {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}

.ws-field__input,
.ws-field__textarea,
.ws-field__select {
  width: 100%;
  padding: var(--gap-3);
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  transition: var(--transition-color);
}
.ws-field__textarea { min-height: 160px; resize: vertical; font-family: var(--font-mono); font-size: var(--fs-sm); }
.ws-field__input:focus-visible,
.ws-field__textarea:focus-visible,
.ws-field__select:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 0;
  border-color: var(--color-accent);
}
.ws-field__input:disabled,
.ws-field__textarea:disabled,
.ws-field__select:disabled { opacity: var(--disabled-opacity); cursor: not-allowed; }
.ws-field--invalid .ws-field__input,
.ws-field--invalid .ws-field__textarea { border-color: var(--color-danger); }

.ws-field__error {
  font-size: var(--fs-xs);
  color: var(--color-danger);
  margin-top: var(--gap-1);
}

/* Form actions footer */
.ws-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--gap-3);
  margin-top: var(--gap-4);
  padding-top: var(--gap-4);
  border-top: 1px solid var(--border-subtle);
}

/* Members table -------------------------------------------------------------*/
.ws-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-base);
}
.ws-table th {
  text-align: left;
  padding: var(--gap-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-default);
}
.ws-table td {
  padding: var(--gap-3);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
}
.ws-table tr:hover td { background: var(--bg-surface-hover); }
.ws-table__email { font-weight: var(--fw-medium); }
.ws-table__meta { font-size: var(--fs-sm); color: var(--text-secondary); }
.ws-table__actions {
  display: flex;
  gap: var(--gap-2);
  justify-content: flex-end;
}

/* Role badges */
.badge--owner   { background: var(--badge-verde-bg);   color: var(--badge-verde-text);   border: 1px solid var(--badge-verde-border); }
.badge--admin   { background: var(--badge-azul-bg);    color: var(--badge-azul-text);    border: 1px solid var(--badge-azul-border); }
.badge--editor  { background: var(--badge-roxo-bg);    color: var(--badge-roxo-text);    border: 1px solid var(--badge-roxo-border); }
.badge--viewer  { background: var(--badge-cinza-bg);   color: var(--badge-cinza-text);   border: 1px solid var(--badge-cinza-border); }
.badge--pending { background: var(--badge-amarelo-bg); color: var(--badge-amarelo-text); border: 1px solid var(--badge-amarelo-border); }

/* Invite accept card --------------------------------------------------------*/
.invite-accept {
  max-width: 480px;
  margin: 80px auto;
  padding: var(--gap-8);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
  text-align: center;
}

.invite-accept__brand {
  margin-bottom: var(--gap-6);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--text-primary);
}

.invite-accept__title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  color: var(--text-primary);
  margin-bottom: var(--gap-3);
}

.invite-accept__meta {
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
  margin: var(--gap-6) 0;
  padding: var(--gap-4);
  background: var(--bg-app);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  text-align: left;
}

.invite-accept__meta strong { color: var(--text-primary); }

.invite-accept__error {
  padding: var(--gap-4);
  background: rgba(220, 38, 38, 0.10);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-sm);
  color: var(--color-danger);
  margin-bottom: var(--gap-4);
}

/* Modal-like confirm/transfer ------------------------------------------------*/
.ws-confirm {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  padding: var(--gap-4);
}

.ws-confirm__card {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  max-width: 480px;
  width: 100%;
  padding: var(--gap-6);
  box-shadow: var(--shadow-modal);
  border: 1px solid var(--border-default);
}

.ws-confirm__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  margin-bottom: var(--gap-3);
}

.ws-confirm__body {
  margin-bottom: var(--gap-5);
  color: var(--text-secondary);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
}

.ws-confirm__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--gap-3);
}

/* Copy-to-clipboard input */
.ws-copy {
  display: flex;
  gap: var(--gap-2);
  align-items: stretch;
}
.ws-copy .ws-field__input { font-family: var(--font-mono); font-size: var(--fs-sm); }

/* Empty state */
.ws-empty {
  padding: var(--gap-8);
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--fs-base);
}

/* Alert messages */
.ws-alert {
  padding: var(--gap-3) var(--gap-4);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  margin-bottom: var(--gap-4);
}
.ws-alert--info    { background: rgba(59, 130, 246, 0.10); color: var(--badge-azul-text);    border: 1px solid var(--badge-azul-border); }
.ws-alert--warn    { background: rgba(234, 179, 8, 0.10);  color: var(--badge-amarelo-text); border: 1px solid var(--badge-amarelo-border); }
.ws-alert--error   { background: rgba(220, 38, 38, 0.10);  color: var(--color-danger);       border: 1px solid var(--color-danger); }
.ws-alert--success { background: rgba(34, 197, 94, 0.10);  color: var(--badge-verde-text);   border: 1px solid var(--badge-verde-border); }