/* Tenant-scoped PAT card. Tokens from lib/style.css.
   Lives on tenant.html alongside tenant-card primitives in tenant.css. */

/* ===== Card head with primary action on the right ===== */

.tenant-pats-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-16);
}
.tenant-pats-head > div {
  flex: 1;
  min-width: 0;
}
.tenant-pats-head .btn {
  flex-shrink: 0;
  align-self: flex-start;
}

/* ===== Loading + empty + table ===== */

.tenant-pat-loading {
  margin: 0;
  padding: var(--s-16);
  color: var(--muted);
  font-size: 14px;
}
.tenant-pat-loading .fa-spinner { color: var(--accent); margin-right: var(--s-8); }

.tenant-pat-empty {
  text-align: center;
  padding: var(--s-32) var(--s-24);
  color: var(--muted);
  background: var(--code-bg);
  border-radius: 10px;
}
.tenant-pat-empty i {
  font-size: 36px;
  color: var(--accent);
  opacity: 0.5;
  margin-bottom: var(--s-12);
}
.tenant-pat-empty h3 {
  margin: 0 0 var(--s-4);
  color: var(--text-strong);
  font-size: 16px;
  font-weight: 700;
}
.tenant-pat-empty p {
  margin: 0;
  font-size: 13px;
}

.tenant-pat-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.tenant-pat-table thead th {
  text-align: left;
  padding: var(--s-8) var(--s-12);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--border-strong);
}
.tenant-pat-table tbody td {
  padding: var(--s-12);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.tenant-pat-row { transition: background var(--motion); }
.tenant-pat-row:hover { background: var(--hover-bg); }
.tenant-pat-meta {
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}
.tenant-pat-actions { text-align: right; white-space: nowrap; }

/* Name button — looks like text but is the click target for "view details". */
.tenant-pat-name-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  padding: var(--s-4) var(--s-8);
  margin: calc(-1 * var(--s-4)) calc(-1 * var(--s-8));
  border-radius: 6px;
  background: transparent;
  color: var(--text-strong);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--motion);
}
.tenant-pat-name-btn:hover { background: var(--hover-bg); color: var(--accent); }

.tenant-pat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--accent-gradient);
  color: #fff;
  font-size: 12px;
  flex-shrink: 0;
}

.tenant-pat-name {
  word-break: break-all;
}

/* ===== Status badge ===== */

.tenant-pat-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px var(--s-8);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tenant-pat-status--active {
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
}
:root.dark-mode .tenant-pat-status--active { color: #4ade80; }
.tenant-pat-status--expired {
  background: rgba(220, 38, 38, 0.12);
  color: #b91c1c;
}
:root.dark-mode .tenant-pat-status--expired { color: #f87171; }
.tenant-pat-status--revoked {
  background: var(--border);
  color: var(--muted);
}

/* ===== Create modal — wider than the default 560px confirm modal =====
   These modals can grow tall (scope picker + expiry + form fields). Cap to
   the viewport (with a 48px overlay-padding budget — see .modal-overlay)
   and let the body scroll while the header + footer stay pinned. */

.modal-pat-create,
.modal-pat-detail {
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
}
.modal-pat-create { max-width: 760px; }
.modal-pat-detail { max-width: 640px; }

.modal-pat-create > .modal-header,
.modal-pat-create > .modal-footer,
.modal-pat-detail > .modal-header,
.modal-pat-detail > .modal-footer {
  flex: 0 0 auto;
}
.modal-pat-create > .modal-body,
.modal-pat-detail > .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.tenant-pat-modal-overlay { z-index: 200; }

.tenant-pat-create-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-24);
}

.tenant-pat-field {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
}
.tenant-pat-hint {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}
.tenant-pat-hint code {
  font-size: 11px;
  padding: 1px 4px;
}

.tenant-pat-tenant-locked {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  padding: var(--s-12) var(--s-16);
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.tenant-pat-tenant-locked > i {
  color: var(--accent);
  font-size: 16px;
}
.tenant-pat-tenant-locked strong {
  display: block;
  color: var(--text-strong);
  font-size: 14px;
  margin-bottom: 2px;
}
.tenant-pat-tenant-locked code {
  font-size: 11px;
  color: var(--muted);
  background: transparent;
  padding: 0;
}

/* Expiry picker styles live in lib/components/expiry-picker.css. */

/* ===== Scope picker ===== */

.tenant-pat-scopes {
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--card-bg);
  overflow: hidden;
}

.tenant-pat-scope-empty {
  margin: 0;
  padding: var(--s-16);
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.tenant-pat-scope-actions {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  padding: var(--s-12) var(--s-16);
  background: var(--code-bg);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.tenant-pat-scope-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px var(--s-12);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--card-bg);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  transition: var(--motion);
}
.tenant-pat-scope-btn:hover { border-color: var(--accent); color: var(--accent); }
.tenant-pat-scope-count {
  margin-left: auto;
  font-size: 12px;
  color: var(--accent);
  font-weight: 700;
}

.tenant-pat-scope-categories {
  display: flex;
  flex-direction: column;
}

.tenant-pat-scope-cat {
  border-bottom: 1px solid var(--border);
}
.tenant-pat-scope-cat:last-child { border-bottom: 0; }

.tenant-pat-scope-cat-head {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  padding: var(--s-12) var(--s-16);
  cursor: pointer;
  list-style: none;
  transition: background var(--motion);
}
.tenant-pat-scope-cat-head::-webkit-details-marker { display: none; }
.tenant-pat-scope-cat-head:hover { background: var(--hover-bg); }

.tenant-pat-scope-cat-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  flex-shrink: 0;
}
.tenant-pat-scope-cat-icon.cat-users     { background: linear-gradient(135deg, #ec4899, #db2777); }
.tenant-pat-scope-cat-icon.cat-config    { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.tenant-pat-scope-cat-icon.cat-cache     { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.tenant-pat-scope-cat-icon.cat-summaries { background: linear-gradient(135deg, #10b981, #059669); }
.tenant-pat-scope-cat-icon.cat-ai        { background: linear-gradient(135deg, #f59e0b, #d97706); }
.tenant-pat-scope-cat-icon.cat-oauth     { background: linear-gradient(135deg, #ef4444, #dc2626); }
.tenant-pat-scope-cat-icon.cat-logs      { background: linear-gradient(135deg, #6366f1, #4f46e5); }

.tenant-pat-scope-cat-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.tenant-pat-scope-cat-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-strong);
}
.tenant-pat-scope-cat-desc {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

.tenant-pat-scope-cat-count {
  padding: 2px var(--s-8);
  border-radius: 999px;
  background: var(--code-bg);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}
.tenant-pat-scope-cat-arrow {
  color: var(--muted);
  font-size: 11px;
  transition: transform var(--motion);
}
.tenant-pat-scope-cat[open] .tenant-pat-scope-cat-arrow {
  transform: rotate(90deg);
}

.tenant-pat-scope-cat-body {
  padding: 0 var(--s-16) var(--s-16) var(--s-16);
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  background: var(--code-bg);
}

.tenant-pat-scope-endpoint {
  display: flex;
  align-items: flex-start;
  gap: var(--s-12);
  padding: var(--s-12);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  transition: border-color var(--motion);
}
.tenant-pat-scope-endpoint:hover { border-color: var(--border-strong); }

.tenant-pat-scope-endpoint-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tenant-pat-scope-endpoint-path {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--text-strong);
  font-weight: 600;
  word-break: break-all;
  background: transparent;
  padding: 0;
}
.tenant-pat-scope-endpoint-summary {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.45;
}

.tenant-pat-scope-methods {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.tenant-pat-method {
  padding: 3px var(--s-8);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid transparent;
  opacity: 0.45;
  transition: var(--motion);
}
.tenant-pat-method:hover { opacity: 0.85; }
.tenant-pat-method.is-selected { opacity: 1; }

.tenant-pat-method--get      { background: rgba(22, 163, 74, 0.12); color: #15803d; }
.tenant-pat-method--get.is-selected { border-color: #15803d; }
:root.dark-mode .tenant-pat-method--get { color: #4ade80; }
:root.dark-mode .tenant-pat-method--get.is-selected { border-color: #4ade80; }

.tenant-pat-method--post     { background: rgba(37, 99, 235, 0.12); color: #1d4ed8; }
.tenant-pat-method--post.is-selected { border-color: #1d4ed8; }
:root.dark-mode .tenant-pat-method--post { color: #60a5fa; }
:root.dark-mode .tenant-pat-method--post.is-selected { border-color: #60a5fa; }

.tenant-pat-method--put      { background: rgba(217, 119, 6, 0.14); color: #b45309; }
.tenant-pat-method--put.is-selected { border-color: #b45309; }
:root.dark-mode .tenant-pat-method--put { color: #fbbf24; }
:root.dark-mode .tenant-pat-method--put.is-selected { border-color: #fbbf24; }

.tenant-pat-method--delete   { background: rgba(220, 38, 38, 0.12); color: #b91c1c; }
.tenant-pat-method--delete.is-selected { border-color: #b91c1c; }
:root.dark-mode .tenant-pat-method--delete { color: #f87171; }
:root.dark-mode .tenant-pat-method--delete.is-selected { border-color: #f87171; }

/* ===== One-time-secret screen (replaces modal body on success) ===== */

.tenant-pat-secret-header {
  background: linear-gradient(135deg, #b91c1c 0%, #ef4444 100%);
  display: flex;
  align-items: center;
  gap: var(--s-8);
}
.tenant-pat-secret-header i { font-size: 18px; }

.tenant-pat-secret-row {
  display: flex;
  gap: var(--s-8);
  align-items: stretch;
}
.tenant-pat-secret-row .tenant-input { flex: 1; min-width: 0; }
.tenant-pat-secret-row .btn { flex-shrink: 0; }
.tenant-pat-secret-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}

.tenant-pat-secret-details {
  margin-top: var(--s-12);
}
.tenant-pat-secret-details summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  padding: 4px 0;
}
.tenant-pat-secret-json {
  width: 100%;
  margin-top: var(--s-8);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  resize: vertical;
}

.tenant-pat-secret-confirm {
  display: flex;
  align-items: flex-start;
  gap: var(--s-8);
  margin-top: var(--s-16);
  padding: var(--s-12);
  background: var(--code-bg);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.tenant-pat-secret-confirm input { margin-top: 2px; accent-color: var(--accent); }

/* Stripped-permissions notice — surfaced inside the secret-reveal screen
   when the API silently dropped some of what was asked for. */
.tenant-pat-stripped {
  margin-top: var(--s-16);
  padding: var(--s-12) var(--s-16);
  background: rgba(217, 119, 6, 0.08);
  border: 1px solid rgba(217, 119, 6, 0.25);
  border-radius: 8px;
  font-size: 13px;
}
.tenant-pat-stripped-head {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  color: #b45309;
  margin-bottom: var(--s-4);
}
:root.dark-mode .tenant-pat-stripped-head { color: #fbbf24; }
.tenant-pat-stripped-body {
  margin: 0 0 var(--s-12);
  color: var(--text);
  font-size: 12px;
  line-height: 1.5;
}
.tenant-pat-stripped-row {
  margin-top: var(--s-8);
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12px;
}
.tenant-pat-stripped-row span {
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.04em;
}

/* ===== Detail modal ===== */

.tenant-pat-detail-head {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  padding-bottom: var(--s-16);
  margin-bottom: var(--s-16);
  border-bottom: 1px solid var(--border);
}
.tenant-pat-detail-head .tenant-pat-icon {
  width: 44px;
  height: 44px;
  font-size: 16px;
  border-radius: 10px;
}
.tenant-pat-detail-name {
  margin: 0 0 var(--s-4);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-strong);
  word-break: break-all;
}

.tenant-pat-detail-dl {
  margin: 0 0 var(--s-16);
  display: grid;
  grid-template-columns: 120px 1fr;
  row-gap: var(--s-8);
  column-gap: var(--s-12);
  font-size: 13px;
}
.tenant-pat-detail-dl dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.tenant-pat-detail-dl dd {
  margin: 0;
  color: var(--text);
}

.tenant-pat-detail-h4 {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  margin: var(--s-16) 0 var(--s-8);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-strong);
}
.tenant-pat-detail-h4 i { color: var(--accent); font-size: 12px; }

.tenant-pat-detail-method {
  display: flex;
  align-items: flex-start;
  gap: var(--s-12);
  margin-bottom: var(--s-8);
}
.tenant-pat-method-label {
  display: inline-block;
  padding: 3px var(--s-8);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
  min-width: 56px;
  text-align: center;
}
.tenant-pat-method-label--get    { background: rgba(22, 163, 74, 0.12); color: #15803d; }
.tenant-pat-method-label--post   { background: rgba(37, 99, 235, 0.12); color: #1d4ed8; }
.tenant-pat-method-label--put    { background: rgba(217, 119, 6, 0.14); color: #b45309; }
.tenant-pat-method-label--delete { background: rgba(220, 38, 38, 0.12); color: #b91c1c; }
:root.dark-mode .tenant-pat-method-label--get    { color: #4ade80; }
:root.dark-mode .tenant-pat-method-label--post   { color: #60a5fa; }
:root.dark-mode .tenant-pat-method-label--put    { color: #fbbf24; }
:root.dark-mode .tenant-pat-method-label--delete { color: #f87171; }

.tenant-pat-detail-paths {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tenant-pat-detail-paths code {
  font-size: 11px;
  padding: 3px var(--s-8);
}

.tenant-pat-detail-tenants {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tenant-pat-tenant-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px var(--s-8);
  background: var(--hover-bg);
  border-radius: 6px;
  font-size: 12px;
}
.tenant-pat-tenant-chip i { color: var(--accent); font-size: 10px; }
.tenant-pat-tenant-chip code {
  font-size: 11px;
  background: transparent;
  padding: 0;
  color: var(--text);
}

/* ===== Mobile ===== */

@media (max-width: 720px) {
  .tenant-pats-head {
    flex-direction: column;
    align-items: stretch;
  }
  .tenant-pats-head .btn { align-self: stretch; justify-content: center; }
  .tenant-pat-table thead { display: none; }
  .tenant-pat-table,
  .tenant-pat-table tbody,
  .tenant-pat-table tr,
  .tenant-pat-table td { display: block; }
  .tenant-pat-table tr {
    padding: var(--s-12);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: var(--s-8);
  }
  .tenant-pat-table tbody td {
    padding: 4px 0;
    border: 0;
  }
  .tenant-pat-actions { text-align: left; padding-top: var(--s-8); }

  .tenant-pat-detail-dl { grid-template-columns: 1fr; }
}