/* Service Agreement Renew — admin styles (layered on growing_space_design.css) */

/* ---------- Auth screens ---------- */
.auth-body, .public-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-purple-brand), var(--color-purple-deep));
  padding: var(--space-5);
}
.auth-card, .public-card {
  background: #fff;
  width: 100%;
  max-width: 400px;
  border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-8);
  box-shadow: var(--shadow-md);
}
.public-card { max-width: 520px; }
.auth-brand {
  font-weight: var(--font-weight-extrabold);
  font-size: 26px;
  color: var(--color-purple-brand);
  line-height: 1.05;
  margin-bottom: var(--space-6);
}
.auth-brand .logo-the {
  display: block; font-size: 13px; font-weight: 400; color: var(--color-purple-soft);
}
.auth-heading { font-size: 22px; margin-bottom: var(--space-5); }
.auth-help { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-bottom: var(--space-5); }

/* ---------- Forms ---------- */
.form { display: flex; flex-direction: column; gap: var(--space-5); }
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field-label { font-size: var(--font-size-xs); font-weight: 600; color: var(--color-text-muted); }
input[type=text], input[type=email], input[type=password], input[type=time],
input[type=number], select, textarea {
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  padding: 10px 12px;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  background: #fff;
  width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--color-purple-brand);
  box-shadow: 0 0 0 3px var(--color-purple-light);
}
.code-input { letter-spacing: 0.4em; font-size: 22px; text-align: center; }

/* ---------- Buttons ---------- */
.btn--block { width: 100%; }
.btn--ghost-light {
  background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.6);
  border-radius: var(--radius-md); padding: 8px 16px;
}
.btn--ghost-light:hover { background: rgba(255,255,255,0.12); color: #fff; }
.btn--sm { padding: 8px 14px; font-size: var(--font-size-xs); border-radius: var(--radius-md); }
.btn--secondary {
  background: var(--color-purple-brand); color: #fff;
  border-radius: var(--radius-md); padding: 12px 22px;
}
.btn--secondary:hover { background: #4d2f7d; color:#fff; }

/* ---------- Admin shell ---------- */
.admin-shell { display: flex; min-height: 100vh; }
.admin-sidebar {
  width: 230px; flex-shrink: 0;
  background: var(--color-purple-brand);
  color: #fff; display: flex; flex-direction: column;
  padding: var(--space-6) var(--space-4);
  position: sticky; top: 0; height: 100vh;
}
.admin-brand {
  color: #fff; text-decoration: none; font-weight: var(--font-weight-extrabold);
  font-size: 22px; line-height: 1.05; margin-bottom: var(--space-8);
}
.admin-brand .logo-the { display:block; font-size: 12px; font-weight: 400; letter-spacing: .05em; }
.admin-nav { display: flex; flex-direction: column; gap: var(--space-1); flex: 1; }
.admin-nav a {
  color: rgba(255,255,255,0.85); text-decoration: none; font-weight: 600;
  font-size: var(--font-size-sm); padding: 10px 12px; border-radius: var(--radius-md);
}
.admin-nav a:hover { background: rgba(255,255,255,0.10); color: #fff; }
.admin-nav a.is-active { background: rgba(255,255,255,0.18); color: #fff; }
.admin-logout { margin-top: var(--space-6); }

.admin-main { flex: 1; min-width: 0; background: var(--color-bg-near-white); }
.admin-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-5) var(--space-8);
  background: #fff; border-bottom: 1px solid var(--color-border-light);
  position: sticky; top: 0; z-index: 10;
}
.admin-title { font-size: 24px; }
.admin-user { font-size: var(--font-size-sm); color: var(--color-text-muted); font-weight: 600; }
.admin-content { padding: var(--space-8); }

/* ---------- Cards / flash ---------- */
.card {
  background: #fff; border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg); padding: var(--space-6);
}
.empty-note {
  margin-top: var(--space-6); padding: var(--space-6);
  background: var(--color-purple-light); border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
}
.flash {
  padding: 12px 16px; border-radius: var(--radius-md); margin-bottom: var(--space-4);
  font-size: var(--font-size-sm); font-weight: 600;
}
.flash--success { background: #e6f6ea; color: #1c7a3c; }
.flash--error   { background: #fdeaea; color: #b3261e; }
.flash--info    { background: var(--color-purple-light); color: var(--color-purple-brand); }

/* ---------- 2FA enrol ---------- */
.qr-box { display: flex; justify-content: center; margin: var(--space-4) 0; }
.secret-key { text-align: center; margin-bottom: var(--space-6); }
.secret-key code {
  display: inline-block; margin-top: 4px; padding: 8px 12px;
  background: var(--color-bg-light-grey); border-radius: var(--radius-sm);
  font-size: 16px; letter-spacing: 0.08em;
}

/* ---------- Dashboard stats ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-4); }
.stat-card {
  background: #fff; border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg); padding: var(--space-5);
}
.stat-card--total { background: var(--color-purple-brand); color: #fff; border: none; }
.stat-num { font-size: 34px; font-weight: var(--font-weight-extrabold); line-height: 1; }
.stat-label { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: 6px; font-weight: 600; }
.stat-card--total .stat-label { color: rgba(255,255,255,0.85); }

/* ---------- Status badges ---------- */
.badge { display:inline-block; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; }
.badge.unsent     { background:#ECECEC; color:#555; }
.badge.sent       { background:#E3EEFB; color:#2663B6; }
.badge.opened     { background:#EDE7F6; color:#5E3A96; }
.badge.clicked    { background:#FFF1E6; color:#C2410C; }
.badge.signed     { background:#E6F6EA; color:#1C7A3C; }
.badge.expired    { background:#FDEAEA; color:#B3261E; }
.badge.no_contact { background:#F1F1F1; color:#777; }

/* ---------- Settings ---------- */
.subnav { display: flex; gap: var(--space-2); margin-bottom: var(--space-6); flex-wrap: wrap; }
.subnav a {
  text-decoration: none; font-size: var(--font-size-sm); font-weight: 600;
  color: var(--color-text-muted); padding: 8px 14px; border-radius: var(--radius-pill);
}
.subnav a:hover { background: var(--color-purple-light); color: var(--color-purple-brand); }
.subnav a.is-active { background: var(--color-purple-brand); color: #fff; }

.settings-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-5); }
.settings-card {
  display: block; text-decoration: none; background: #fff;
  border: 1px solid var(--color-border-light); border-radius: var(--radius-lg);
  padding: var(--space-6); transition: border-color var(--transition-fast);
}
.settings-card:hover { border-color: var(--color-purple-brand); }
.settings-card h3 { color: var(--color-purple-brand); margin-bottom: var(--space-2); }
.settings-card p { font-size: var(--font-size-sm); color: var(--color-text-muted); margin: 0; }

.form-wide { max-width: 760px; margin-bottom: var(--space-6); }
.form-narrow { max-width: 460px; }
.form-wide h3 { margin: var(--space-4) 0 var(--space-2); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.hint { font-size: var(--font-size-xs); color: var(--color-text-muted); margin: 4px 0 0; }
.hint code, code.copytext { background: var(--color-bg-light-grey); padding: 2px 6px; border-radius: 4px; }
code.copytext { display: inline-block; word-break: break-all; font-size: 13px; }
.checks { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.check { display: inline-flex; align-items: center; gap: 6px; font-size: var(--font-size-sm); }
.check input { width: auto; }
.ok { color: #1c7a3c; font-weight: 700; font-size: 12px; }
.warn { color: #b3261e; font-weight: 700; font-size: 12px; }
.form-actions { display: flex; gap: var(--space-3); align-items: center; }

/* ---------- Tables ---------- */
.toolbar { margin-bottom: var(--space-4); display: flex; gap: var(--space-3); align-items: center; }
.table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.table th, .table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--color-border-light); vertical-align: middle; }
.table th { font-size: var(--font-size-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .03em; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.inline { display: inline; }
.tag { background: var(--color-purple-light); color: var(--color-purple-brand); font-size: 11px; padding: 2px 8px; border-radius: var(--radius-pill); font-weight: 700; }
.btn--danger { background: #fdeaea; color: #b3261e; border-radius: var(--radius-md); }
.btn--danger:hover { background: #f7d4d4; }
.btn--sm { background: var(--color-bg-light-grey); color: var(--color-text-dark); }
.btn--sm:hover { background: #ececec; }

/* ---------- Templates ---------- */
.placeholder-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip {
  background: var(--color-purple-light); color: var(--color-purple-brand);
  border: none; border-radius: var(--radius-pill); padding: 4px 10px;
  font-size: 12px; font-weight: 700; cursor: pointer; font-family: var(--font-family);
}
.chip:hover { background: #ddd3ee; }
.chip.copied { background: #1c7a3c; color: #fff; }
.quill { background: #fff; }
.ql-container { min-height: 140px; font-family: var(--font-family); font-size: 15px; }
.hidden-html { display: none; }
textarea.sms { font-family: var(--font-family); }
/* Prominent purple "Send now" */
.btn--send {
  background: var(--color-purple-brand);
  color: #fff;
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-md);
  padding: 10px 20px;
}
.btn--send:hover { background: #4d2f7d; color: #fff; }

/* "Send now anyway" override bar (appears under the queued banner) */
.anyway-bar {
  display: flex; align-items: center; gap: var(--space-4);
  background: var(--color-purple-light);
  border: 1px solid #d9cdee;
  border-radius: var(--radius-md);
  padding: 10px 16px; margin-bottom: var(--space-5);
  font-size: var(--font-size-sm); font-weight: 600; color: var(--color-purple-brand);
}

.test-row { display: flex; gap: 8px; align-items: center; margin: 4px 0 var(--space-4); }
.test-row .test-recipient { max-width: 280px; }
.test-result { font-size: var(--font-size-xs); }

/* ---------- Participants ---------- */
.muted { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.filter-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--space-5); }
.chip-filter {
  text-decoration: none; font-size: var(--font-size-xs); font-weight: 700;
  color: var(--color-text-muted); background: #fff; border: 1px solid var(--color-border-light);
  padding: 6px 12px; border-radius: var(--radius-pill);
}
.chip-filter span { opacity: .6; margin-left: 4px; }
.chip-filter:hover { border-color: var(--color-purple-brand); color: var(--color-purple-brand); }
.chip-filter.is-active { background: var(--color-purple-brand); color: #fff; border-color: var(--color-purple-brand); }
.editable { cursor: pointer; border-bottom: 1px dashed var(--color-border-light); }
.editable:hover { color: var(--color-purple-brand); }
.inline-edit { padding: 4px 6px; font-size: 13px; width: 100%; }
.shortlink { font-family: monospace; font-size: 13px; }
.pagination { display: flex; gap: 4px; margin-top: var(--space-5); flex-wrap: wrap; }
.pagination a {
  text-decoration: none; padding: 6px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-light); color: var(--color-text-dark); font-size: var(--font-size-sm);
}
.pagination a.is-active { background: var(--color-purple-brand); color: #fff; border-color: var(--color-purple-brand); }