/**
 * Invite Flow Styles
 * ============================================
 * Styles for the Invite Teammate modal and related components
 */

/* Modal Override */
.invite-modal-content {
  max-width: 600px;
  width: 100%;
}

.invite-modal-content .modal-body {
  padding: 0 24px 24px;
}

/* TARGET GROUP ROW (2026-08-14, user: "not allowing (wrongly) the adding to
   additional groups"). An invite is a disclosure decision, so which group it
   opens up must be stated on screen - and changeable. */
.invite-target-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 24px 14px;
  padding: 8px 12px;
  border-radius: var(--radius-md, 8px);
  background: var(--slate-50, #f8fafc);
  border: 1px solid var(--slate-200, #e2e8f0);
  font-size: 13px;
  color: var(--slate-600, #475569);
}
.invite-target-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  flex: 1;
}
.invite-target-label i { color: var(--slate-400, #94a3b8); flex: 0 0 auto; }
/* The group name is the load-bearing word - a long one truncates rather than
   pushing the Change button off the row. */
.invite-target-name {
  color: var(--slate-800, #1e293b);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.invite-target-change {
  flex: 0 0 auto;
  padding: 5px 12px;
  min-height: 32px;
  border-radius: var(--radius-md, 8px);
  border: 1px solid var(--slate-300, #cbd5e1);
  background: var(--white, #fff);
  color: var(--slate-700, #334155);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.invite-target-change:hover:not(:disabled) {
  background: var(--slate-50, #f8fafc);
  border-color: var(--slate-400, #94a3b8);
}
.invite-target-change:disabled { opacity: 0.6; cursor: default; }
@media (max-width: 560px) {
  .invite-target-row { margin: 0 16px 12px; }
  .invite-target-change { min-height: 44px; padding: 8px 14px; }
}
body.dark-mode .invite-target-row {
  background: var(--slate-800, #1e293b);
  border-color: var(--slate-700, #334155);
  color: var(--slate-300, #cbd5e1);
}
body.dark-mode .invite-target-name { color: var(--slate-100, #f1f5f9); }
body.dark-mode .invite-target-change {
  background: var(--slate-900, #0f172a);
  border-color: var(--slate-600, #475569);
  color: var(--slate-200, #e2e8f0);
}

/* Intro Text */
.invite-intro {
  color: var(--slate-600);
  font-size: 13px;
  margin-top: 8px;
  margin-bottom: 24px;
  text-align: center;
}

/* One-line disclosure note under the intro (2026-08-25): what joining shows
   the invitee. Quiet — informational, not a warning. */
.invite-visibility-note {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: -4px 0 12px;
    font-size: 0.8rem;
    color: var(--text-secondary, #64748b);
}
.invite-visibility-note i {
    margin-top: 2px;
    font-size: 0.72rem;
    color: var(--slate-400, #94a3b8);
    flex-shrink: 0;
}
body.dark-mode .invite-visibility-note { color: var(--slate-400, #94a3b8); }

.invite-intro strong {
  color: var(--slate-800);
}

/* Method Tabs */
.invite-method-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.08), rgba(6, 182, 212, 0.05));
  padding: 5px;
  border-radius: 12px;
  border: 1px solid rgba(20, 184, 166, 0.15);
}

.invite-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 12px;
  border: none;
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
  color: var(--slate-500);
  font-size: 11px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.invite-tab i {
  font-size: 16px;
}

.invite-tab:hover {
  background: rgba(255, 255, 255, 0.7);
  color: var(--primary-600);
}

.invite-tab.active {
  background: linear-gradient(135deg, var(--primary-500), var(--primary-400));
  color: white;
  box-shadow: 0 4px 12px rgba(20, 184, 166, 0.25);
}

/* Tab Content */
.invite-tab-content {
  display: none;
}

.invite-tab-content.active {
  display: block;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Method Card */
.invite-method-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  border: 1px solid rgba(20, 184, 166, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.method-description {
  color: var(--slate-600);
  font-size: 12px;
  margin-bottom: 12px;
}

/* URL Group */
.invite-url-group {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.invite-url-input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid rgba(20, 184, 166, 0.25);
  border-radius: 8px;
  font-size: 12px;
  font-family: 'SF Mono', Monaco, monospace;
  background: var(--white);
  color: var(--slate-700);
}

.invite-url-input:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.12);
}

/* Share Buttons */
.invite-share-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
}

.share-btn {
  width: 38px;
  height: 38px;
  min-width: 38px;
  padding: 0;
  border-radius: 10px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all 0.2s ease;
  cursor: pointer !important;
  position: relative;
  z-index: 10;
  text-align: center;
  pointer-events: auto !important;
}

.share-btn i {
  /* The button is a 38×38 flex box that already centers its child; a blanket
     `left:-1px` nudge (2026-07-14 fix) pushed every glyph off to one side —
     visible as "icons slightly off-centre to the right" — because FontAwesome
     brand glyphs (slack/microsoft/discord/share-nodes) have differing intrinsic
     side-bearing, so no single horizontal offset centres all of them. Drop the
     offset and let flex centering do the job for every glyph uniformly. */
  line-height: 1;
}

.share-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Email - Red tint */
.share-btn[data-method="email"] {
  color: #ea4335;
  background: rgba(234, 67, 53, 0.1);
  border: 1px solid rgba(234, 67, 53, 0.25);
}
.share-btn[data-method="email"]:hover {
  background: rgba(234, 67, 53, 0.18);
}

/* Slack - Purple tint */
.share-btn[data-method="slack"] {
  color: #4a154b;
  background: rgba(74, 21, 75, 0.08);
  border: 1px solid rgba(74, 21, 75, 0.2);
}
.share-btn[data-method="slack"]:hover {
  background: rgba(74, 21, 75, 0.15);
}

/* Teams - Blue tint */
.share-btn[data-method="teams"] {
  color: #6264a7;
  background: rgba(98, 100, 167, 0.1);
  border: 1px solid rgba(98, 100, 167, 0.25);
}
.share-btn[data-method="teams"]:hover {
  background: rgba(98, 100, 167, 0.18);
}

/* Discord - Blurple tint */
.share-btn[data-method="discord"] {
  color: #5865f2;
  background: rgba(88, 101, 242, 0.1);
  border: 1px solid rgba(88, 101, 242, 0.25);
}
.share-btn[data-method="discord"]:hover {
  background: rgba(88, 101, 242, 0.18);
}

/* Native Share - Teal */
.share-btn[data-method="native"] {
  color: var(--primary-600);
  background: rgba(20, 184, 166, 0.1);
  border: 1px solid rgba(20, 184, 166, 0.25);
}
.share-btn[data-method="native"]:hover {
  background: rgba(20, 184, 166, 0.18);
}

/* Benefits List */
.invite-benefits {
  text-align: left;
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.05), transparent);
  border-radius: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(20, 184, 166, 0.12);
}

.benefits-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--slate-600);
  margin-bottom: 10px;
}

.benefits-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.benefits-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: 11px;
  color: var(--slate-700);
  background: rgba(59, 130, 246, 0.08);
  border-radius: 6px;
  margin-bottom: 6px;
}

.benefits-list li i {
  color: var(--primary-500);
  font-size: 10px;
}

/* Code Display */
.invite-code-display {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 16px 0;
}

.code-char {
  width: 34px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.04), rgba(255, 255, 255, 0.9));
  border: 1px solid rgba(20, 184, 166, 0.25);
  border-radius: 8px;
  font-size: 18px;
  font-weight: 700;
  font-family: 'SF Mono', Monaco, monospace;
  color: var(--primary-700);
  transition: all 0.2s ease;
}

.code-char:hover {
  border-color: var(--primary-400);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.1);
}

.code-separator {
  width: 6px;
}

.code-instruction {
  color: var(--slate-500);
  font-size: 11px;
  margin-bottom: 12px;
}

.code-instruction strong {
  color: var(--primary-600);
}

/* QR Container */
.invite-qr-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 160px;
  margin: 12px 0;
}

.invite-qr-image,
.invite-qr-container img {
  width: 160px;
  height: 160px;
  border-radius: 10px;
  background: var(--white);
  padding: 8px;
  box-shadow: 0 4px 16px rgba(20, 184, 166, 0.12);
  border: 1px solid rgba(20, 184, 166, 0.15);
}

.qr-loading {
  color: var(--slate-400);
  font-size: 12px;
}

.qr-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

/* Reciprocal scan (DEF-075) — the "or scan theirs" escape hatch under the
   invite QR. Separated by a rule so it reads as an ALTERNATIVE to showing the
   code, not another action on the code itself (Download / Print). */
.invite-qr-reciprocal {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--slate-200, #e2e8f0);
  text-align: center;
}

.invite-qr-reciprocal__hint {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--slate-500, #64748b);
}

body.dark-mode .invite-qr-reciprocal {
  border-top-color: #334155;
}

body.dark-mode .invite-qr-reciprocal__hint {
  color: #94a3b8;
}

/* Bulk invite tab */
.bulk-invite-textarea {
  width: 100%;
  min-height: 110px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  color: var(--slate-700);
  background: #ffffff;
  border: 1px solid rgba(20, 184, 166, 0.25);
  border-radius: 8px;
  resize: vertical;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bulk-invite-textarea:focus {
  outline: none;
  border-color: var(--primary-500, #14b8a6);
  box-shadow: var(--focus-ring-shadow);
}

.bulk-invite-status {
  margin: 8px 0 12px;
  font-size: 11px;
  color: var(--slate-500);
  min-height: 16px;
}

.bulk-invite-status.has-warnings {
  color: #b45309;
}

/* Overflow box — visible warning when the user pasted more than the cap.
   Status line summarizes; this block lists the trimmed addresses so the
   user can resend them as a follow-up batch. */
.bulk-invite-overflow {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 12px;
  padding: 10px 12px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 8px;
  font-size: 12px;
  color: #b45309;
  line-height: 1.5;
}

.bulk-invite-overflow i {
  font-size: 14px;
  margin-top: 2px;
  flex-shrink: 0;
}

.bulk-invite-overflow strong {
  display: block;
  margin-bottom: 4px;
}

.bulk-invite-overflow-list {
  margin-top: 6px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  font-family: 'SF Mono', Monaco, monospace;
  font-size: 11px;
  word-break: break-all;
  color: #92400e;
}

body.dark-mode .bulk-invite-overflow {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.35);
  color: #fbbf24;
}

body.dark-mode .bulk-invite-overflow-list {
  background: rgba(0, 0, 0, 0.25);
  color: #fcd34d;
}

.bulk-invite-hint {
  margin-top: 12px;
  font-size: 11px;
  color: var(--slate-500);
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.bulk-invite-hint i {
  color: var(--primary-600);
  margin-top: 2px;
}

body.dark-mode .bulk-invite-textarea {
  background: var(--slate-800, #1e293b);
  color: var(--slate-200, #e2e8f0);
  border-color: rgba(20, 184, 166, 0.3);
}

body.dark-mode .bulk-invite-status {
  color: var(--slate-400, #94a3b8);
}

body.dark-mode .bulk-invite-status.has-warnings {
  color: #fbbf24;
}

/* Settings Bar */
.invite-settings-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* A guaranteed gutter + wrap so the "Expires:" group and the Regenerate
     button can never collide. Previously space-between with no gap meant a
     narrow modal squeezed the two until the select overlapped the button
     (2026-06-21). gap holds them apart at any width; flex-wrap drops Regenerate
     to its own line as a last resort rather than overlapping. */
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(20, 184, 166, 0.15);
}

.invite-expiry {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--slate-600);
  /* Let the select shrink with the row instead of forcing an overlap, but
     keep the "Expires:" label on one line. */
  min-width: 0;
  flex: 0 1 auto;
}

.invite-expiry label {
  font-weight: 500;
  /* Keep "Expires:" on one line even when the select shrinks. */
  flex-shrink: 0;
}

.form-select-sm {
  padding: 5px 24px 5px 8px;
  font-size: 11px;
  border: 1px solid rgba(20, 184, 166, 0.2);
  border-radius: 6px;
  background: var(--white);
  cursor: pointer;
  transition: all 0.2s ease;
}

.form-select-sm:focus {
  outline: none;
  border-color: var(--primary-400);
  box-shadow: var(--focus-ring-shadow);
}

#regenerate-invite {
  font-size: 11px;
  color: var(--slate-600);
  background: var(--slate-100, #f1f5f9);
  border: 1px solid var(--slate-200, #e2e8f0);
  padding: 5px 10px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

#regenerate-invite:hover {
  color: var(--slate-700);
  background: var(--slate-200, #e2e8f0);
  border-color: var(--slate-300, #cbd5e1);
}

body.dark-mode #regenerate-invite {
  color: var(--slate-300, #cbd5e1);
  background: var(--slate-700, #334155);
  border-color: var(--slate-600, #475569);
}

body.dark-mode #regenerate-invite:hover {
  color: var(--slate-100, #f1f5f9);
  background: var(--slate-600, #475569);
  border-color: var(--slate-500, #64748b);
}

/* Verify bar (2026-07-14) — shows the live expiry + a "Test invite" button so
   the user can confirm a scan will actually work before sharing. Answers the
   recurring "invalid or expired invite" reports (usually a stale QR whose invite
   had expired). Matches the settings-bar visual language. */
.invite-verify-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px 12px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(20, 184, 166, 0.18);
}

.invite-verify-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--slate-600);
  min-width: 0;
  flex: 1 1 160px;
}

.invite-verify-status i {
  flex-shrink: 0;
}

/* State colours — neutral (default), checking (muted), live (teal), dead (rose). */
.invite-verify-status.is-checking { color: var(--slate-500, #64748b); }
.invite-verify-status.is-live {
  color: #0f766e; /* teal-700 — legible against the light modal */
  font-weight: 500;
}
.invite-verify-status.is-live i { color: #14b8a6; }
.invite-verify-status.is-dead {
  color: #b91c1c; /* rose-700 */
  font-weight: 500;
}
.invite-verify-status.is-dead i { color: #dc2626; }

.invite-verify-btn {
  font-size: 11px;
  color: var(--slate-700, #334155);
  background: var(--slate-100, #f1f5f9);
  border: 1px solid var(--slate-200, #e2e8f0);
  padding: 5px 10px;
  border-radius: 6px;
  flex-shrink: 0;
  min-height: 0; /* override the 44px .btn floor — this is a compact utility row */
  transition: all 0.2s ease;
}

.invite-verify-btn:hover:not(:disabled) {
  background: var(--slate-200, #e2e8f0);
  border-color: var(--slate-300, #cbd5e1);
}

.invite-verify-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

body.dark-mode .invite-verify-status { color: var(--slate-300, #cbd5e1); }
body.dark-mode .invite-verify-status.is-checking { color: var(--slate-400, #94a3b8); }
body.dark-mode .invite-verify-status.is-live { color: #5eead4; }
body.dark-mode .invite-verify-status.is-live i { color: #2dd4bf; }
body.dark-mode .invite-verify-status.is-dead { color: #fca5a5; }
body.dark-mode .invite-verify-status.is-dead i { color: #f87171; }

body.dark-mode .invite-verify-btn {
  color: var(--slate-200, #e2e8f0);
  background: var(--slate-700, #334155);
  border-color: var(--slate-600, #475569);
}
body.dark-mode .invite-verify-btn:hover:not(:disabled) {
  background: var(--slate-600, #475569);
  border-color: var(--slate-500, #64748b);
}

/* Divider */
.invite-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  color: var(--slate-400);
  font-size: 10px;
  letter-spacing: 0.5px;
}

.invite-divider::before,
.invite-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(20, 184, 166, 0.2), transparent);
}

/* Invite Hint - guidance for timezone-only users */
.invite-hint {
  text-align: center;
  font-size: 11px;
  color: var(--slate-500);
  margin-top: 12px;
  padding: 10px;
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.04), transparent);
  border-radius: 8px;
  border: 1px solid rgba(20, 184, 166, 0.1);
}

.invite-hint i {
  color: var(--primary-500);
  margin-right: 5px;
}

.invite-hint strong {
  color: var(--primary-600);
}

/* Inline switch button in the reference-only hint. Styled to read like the
   bold teal phrase it replaced, but it is now a real, focusable button that
   opens the Add-a-Timezone surface. Underline + pointer make the affordance
   honest (it used to look tappable and do nothing). */
.invite-hint-link {
  display: inline;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--primary-600);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.invite-hint-link:hover,
.invite-hint-link:focus-visible {
  color: var(--primary-700, #0f766e);
  text-decoration-thickness: 2px;
}

.invite-hint-link:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Placeholder Form */
.placeholder-form {
  padding: 6px 0;
}

.placeholder-form .back-btn {
  font-size: 11px;
  color: var(--slate-500);
  margin-bottom: 12px;
  padding-left: 0;
}

.placeholder-form h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--slate-800);
  margin-bottom: 6px;
}

.placeholder-form h3 i {
  color: var(--primary-400);
  margin-right: 6px;
}

.placeholder-form .form-description {
  color: var(--slate-500);
  font-size: 12px;
  margin-bottom: 16px;
}

.placeholder-form .form-group {
  margin-bottom: 12px;
}

.placeholder-form label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--slate-700);
  margin-bottom: 5px;
}

.placeholder-form .form-input,
.placeholder-form .form-select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(20, 184, 166, 0.2);
  border-radius: 8px;
  font-size: 12px;
  background: var(--white);
}

.placeholder-form .form-input:focus,
.placeholder-form .form-select:focus {
  outline: none;
  border-color: var(--primary-400);
  box-shadow: var(--focus-ring-shadow);
}

.placeholder-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* City Suggestions */
.city-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--white);
  border: 1px solid rgba(20, 184, 166, 0.2);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(20, 184, 166, 0.12);
  z-index: 100;
  max-height: 180px;
  overflow-y: auto;
}

.city-suggestion {
  display: flex;
  justify-content: space-between;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 12px;
}

.city-suggestion:hover {
  background: rgba(20, 184, 166, 0.05);
}

.city-name {
  color: var(--slate-800);
}

.city-tz {
  color: var(--primary-500);
  font-size: 10px;
}

/* Limitations Box */
.placeholder-limitations {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), transparent);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 8px;
  padding: 12px;
  margin: 16px 0;
}

.limitations-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--amber-700);
  margin-bottom: 8px;
}

.limitations-title i {
  margin-right: 5px;
}

.placeholder-limitations ul {
  margin: 0;
  padding-left: 18px;
  font-size: 11px;
  color: var(--amber-600);
}

.placeholder-limitations li {
  margin-bottom: 3px;
}

/* Form Actions */
.placeholder-form .form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(20, 184, 166, 0.15);
}

/* Responsive */
@media (max-width: 480px) {
  .invite-modal-content {
    max-width: 100%;
    margin: 0;
    border-radius: 16px 16px 0 0;
    max-height: 90vh;
  }

  .invite-method-tabs {
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .invite-tab {
    min-width: 70px;
    padding: 8px 10px;
  }

  .invite-tab span {
    font-size: 10px;
  }

  .code-char {
    width: 30px;
    height: 36px;
    font-size: 16px;
  }

  .invite-share-buttons {
    gap: 8px;
  }

  .share-btn {
    width: 36px;
    height: 36px;
  }

  .placeholder-form .form-row {
    grid-template-columns: 1fr;
  }
}

/* Dark Mode Support */
body.dark-mode .invite-method-tabs {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.12), rgba(6, 182, 212, 0.08));
  border-color: rgba(20, 184, 166, 0.2);
}

body.dark-mode .invite-tab {
  color: var(--slate-400);
}

body.dark-mode .invite-tab:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--primary-300);
}

body.dark-mode .invite-tab.active {
  background: linear-gradient(135deg, var(--primary-600), var(--primary-500));
  color: var(--white);
}

body.dark-mode .invite-method-card {
  background: rgba(30, 41, 59, 0.7);
  backdrop-filter: blur(8px);
  border-color: rgba(20, 184, 166, 0.2);
}

body.dark-mode .invite-url-input {
  background: var(--slate-700);
  border-color: rgba(20, 184, 166, 0.25);
  color: var(--slate-200);
}

body.dark-mode .code-char {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.1), rgba(30, 41, 59, 0.8));
  border-color: rgba(20, 184, 166, 0.3);
  color: var(--primary-300);
}

body.dark-mode .invite-benefits {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.08), transparent);
  border-color: rgba(20, 184, 166, 0.15);
}

body.dark-mode .benefits-list li {
  background: rgba(59, 130, 246, 0.12);
  color: var(--slate-300);
}

body.dark-mode .share-btn[data-method="email"] {
  background: rgba(234, 67, 53, 0.15);
  border-color: rgba(234, 67, 53, 0.3);
}

body.dark-mode .share-btn[data-method="slack"] {
  background: rgba(74, 21, 75, 0.15);
  border-color: rgba(74, 21, 75, 0.3);
}

body.dark-mode .share-btn[data-method="teams"] {
  background: rgba(98, 100, 167, 0.15);
  border-color: rgba(98, 100, 167, 0.3);
}

body.dark-mode .share-btn[data-method="discord"] {
  background: rgba(88, 101, 242, 0.18);
  border-color: rgba(88, 101, 242, 0.35);
}

body.dark-mode .share-btn[data-method="native"] {
  background: rgba(20, 184, 166, 0.15);
  border-color: rgba(20, 184, 166, 0.3);
}

body.dark-mode .invite-settings-bar {
  border-top-color: rgba(20, 184, 166, 0.2);
}

body.dark-mode .form-select-sm {
  background: var(--slate-700);
  border-color: rgba(20, 184, 166, 0.25);
  color: var(--slate-200);
}

body.dark-mode .invite-hint {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.08), transparent);
  border-color: rgba(20, 184, 166, 0.15);
}

body.dark-mode .placeholder-option {
  background: var(--slate-800);
  border-color: var(--slate-600);
  color: var(--slate-300);
}

body.dark-mode .placeholder-limitations {
  background: var(--amber-900);
  border-color: var(--amber-700);
}

body.dark-mode .city-suggestions {
  background: var(--slate-800);
  border-color: var(--slate-600);
}

body.dark-mode .city-suggestion:hover {
  background: var(--slate-700);
}

/* ============================================
   ADD CHOICE MODAL
   ============================================ */

/* Modal Container */
.add-choice-content {
  max-width: 560px;
  width: 100%;
}

.add-choice-content .modal-header h2 {
  font-size: 20px;
}

.add-choice-body {
  padding: 8px 24px 24px;
}

.add-choice-subtitle {
  text-align: center;
  color: var(--slate-600);
  font-size: 15px;
  margin: 0 0 16px 0;
}

/* Choice Cards Container */
.add-choice-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Individual Choice Card */
.add-choice-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  border: 2px solid var(--slate-200);
  border-radius: 12px;
  background: var(--white);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  width: 100%;
  position: relative;
}

/* Recommended Badge */
.choice-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--primary-500);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

/* Teammate card - green border */
.add-choice-card.teammate-card {
  border-color: var(--primary-400);
}

.add-choice-card:hover {
  border-color: var(--primary-300);
  background: var(--primary-50);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.add-choice-card:active {
  transform: translateY(0);
}

/* Choice Icon */
.choice-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  flex-shrink: 0;
}

.choice-icon i {
  font-size: 24px;
}

.choice-icon.teammate-icon {
  background: linear-gradient(135deg, var(--primary-100), var(--primary-200));
}

.choice-icon.teammate-icon i {
  color: var(--primary-600);
}

.choice-icon.timezone-icon {
  background: linear-gradient(135deg, var(--teal-100), var(--teal-200));
}

.choice-icon.timezone-icon i {
  color: var(--teal-600);
}

/* Choice Content */
.choice-content {
  flex: 1;
  min-width: 0;
}

.choice-content h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--slate-800);
  margin: 0 0 4px 0;
}

.choice-description {
  font-size: 14px;
  color: var(--slate-500);
  margin: 0 0 12px 0;
}

/* Choice Features List */
.choice-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.choice-features li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--slate-500);
}

.choice-features li i {
  font-size: 11px;
  color: var(--primary-500);
}

.choice-features li i.choice-icon-red {
  color: var(--red-500, #ef4444);
}

/* Choice Arrow */
.choice-arrow {
  flex-shrink: 0;
  color: var(--slate-300);
  transition: transform 0.2s, color 0.2s;
}

.add-choice-card:hover .choice-arrow {
  color: var(--primary);
  transform: translateX(4px);
}

/* Responsive */
@media (max-width: 480px) {
  .add-choice-content {
    max-width: 100%;
    margin: 0;
    border-radius: 16px 16px 0 0;
  }

  .add-choice-card {
    padding: 16px;
  }

  .choice-icon {
    width: 48px;
    height: 48px;
  }

  .choice-icon i {
    font-size: 20px;
  }

  .choice-content h3 {
    font-size: 15px;
  }

  .choice-features {
    flex-direction: column;
    gap: 4px;
  }
}

/* Dark Mode for Choice Modal */
body.dark-mode .add-choice-card {
  background: var(--slate-800);
  border-color: var(--slate-600);
}

body.dark-mode .add-choice-card:hover {
  border-color: var(--primary-400);
  background: var(--slate-700);
}

body.dark-mode .choice-content h3 {
  color: var(--slate-100);
}

body.dark-mode .choice-description {
  color: var(--slate-400);
}

body.dark-mode .choice-features li {
  color: var(--slate-400);
}

body.dark-mode .choice-icon.teammate-icon {
  background: linear-gradient(135deg, var(--primary-900), var(--primary-800));
}

body.dark-mode .choice-icon.timezone-icon {
  background: linear-gradient(135deg, var(--teal-900), var(--teal-800));
}

body.dark-mode .add-choice-card.teammate-card {
  border-color: var(--primary-600);
}

/* ============================================
   JOIN TEAM MODAL
   ============================================ */

/* Modal Container */
.join-team-content {
  max-width: 600px;
  width: 100%;
}

.join-team-content .modal-body {
  padding: 0 24px 24px;
}

/* Intro Text */
.join-team-intro {
  color: var(--slate-600);
  font-size: 15px;
  margin-bottom: 24px;
  text-align: center;
}

/* Code Input Group */
.join-code-input-group {
  margin-bottom: 20px;
}

.join-code-inputs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  /* The 8 fixed 48px boxes + gaps + separator (~440px) overflowed narrow phones
     because the row could neither shrink nor wrap (user 2026-06-29: "the enter
     code area is too wide for mobile … the code boxes [are] too wide"). Let the
     boxes flex-shrink to fit, and as a last resort wrap onto a second line at the
     separator. width:100% + the box max-width below cap the row to the modal. */
  flex-wrap: wrap;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
}

.join-code-char {
  /* Fluid: ideally 48px, but allowed to shrink so 8 boxes always fit the row.
     min-width:0 lets flex actually shrink them below their content width. */
  flex: 0 1 48px;
  width: 48px;
  min-width: 0;
  height: 56px;
  border: 2px solid var(--slate-200);
  border-radius: 8px;
  font-size: 24px;
  font-weight: 700;
  font-family: 'SF Mono', Monaco, monospace;
  text-align: center;
  text-transform: uppercase;
  background: #fff;
  color: var(--slate-800);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.join-code-char:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px var(--primary-100);
}

.join-code-char:not(:placeholder-shown) {
  border-color: var(--primary-400);
  background: var(--primary-50);
}

.join-code-separator {
  font-size: 24px;
  font-weight: 700;
  color: var(--slate-300);
  margin: 0 4px;
}

/* Error State */
.join-code-error {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  padding: 10px 16px;
  background: var(--red-50);
  border: 1px solid var(--red-200);
  border-radius: 8px;
  color: var(--red-600);
  font-size: 13px;
}

.join-code-error i {
  color: var(--red-500);
}

/* Shake Animation */
.join-code-inputs.shake {
  animation: shake 0.4s ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}

/* Help Toggle */
.join-code-help {
  margin-top: 16px;
  text-align: center;
}

.help-toggle-btn {
  background: none;
  border: none;
  color: var(--slate-500);
  font-size: 13px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.help-toggle-btn:hover {
  background: var(--slate-100);
  color: var(--slate-700);
}

.help-toggle-btn.active {
  color: var(--primary-600);
}

.help-toggle-btn i {
  margin-right: 6px;
}

/* Help Content */
.help-content {
  margin-top: 12px;
  padding: 16px;
  background: var(--slate-50);
  border-radius: 8px;
  text-align: left;
  font-size: 13px;
  color: var(--slate-600);
}

.help-content p {
  margin: 0 0 8px 0;
}

.help-content p:last-child {
  margin-bottom: 0;
}

.help-content strong {
  color: var(--slate-700);
}

.help-content ul {
  margin: 8px 0;
  padding-left: 0;
  list-style: none;
}

.help-content li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

.help-content li i {
  color: var(--primary-500);
  width: 16px;
  font-size: 12px;
}

.help-note {
  margin-top: 12px !important;
  padding-top: 12px;
  border-top: 1px solid var(--slate-200);
  font-style: italic;
  color: var(--slate-500);
}

/* Team Preview */
.join-team-preview {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  padding: 16px;
  background: var(--primary-50);
  border: 1px solid var(--primary-200);
  border-radius: 12px;
}

.join-team-preview .preview-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-500);
  color: white;
  border-radius: 12px;
  font-size: 20px;
}

.join-team-preview .preview-details {
  flex: 1;
}

.join-team-preview .preview-label {
  font-size: 12px;
  color: var(--slate-500);
  margin: 0 0 4px 0;
}

.join-team-preview .preview-team-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--slate-800);
  margin: 0 0 2px 0;
}

.join-team-preview .preview-team-info {
  font-size: 13px;
  color: var(--slate-500);
  margin: 0;
}

/* Modal Footer - use base styles, just ensure proper layout */
.join-team-content .modal-footer .btn {
  flex: 1;
}

/* Responsive — shrink-to-fit the code boxes across the whole phone/small-tablet
   range (<=640px), not just <=480px. Between ~480-600px the modal goes full-width
   but 8 fixed 48px boxes still don't fit, so without this the row wrapped to an
   awkward 6+2. Shrinking them to share the row keeps all 8 on one line. */
@media (max-width: 640px) {
  .join-code-inputs {
    gap: 5px;
    max-width: 100%;
    flex-wrap: nowrap;
  }

  .join-code-char {
    /* flex-basis 0 + grow: boxes share the row width evenly and stay one line
       down to ~320px; aspect-ratio keeps them tall as they narrow. */
    flex: 1 1 0;
    width: auto;
    height: auto;
    aspect-ratio: 5 / 6;
    max-width: 48px;
    font-size: clamp(15px, 5.2vw, 22px);
    padding: 0;
  }

  .join-code-separator {
    font-size: 18px;
    margin: 0 1px;
    flex: 0 0 auto;
  }
}

@media (max-width: 480px) {
  .join-team-content {
    max-width: 100%;
    margin: 0;
    border-radius: 16px 16px 0 0;
  }
}

/* Dark Mode for Join Team Modal */
body.dark-mode .join-team-intro {
  color: var(--slate-400);
}

body.dark-mode .join-code-char {
  background: var(--slate-700);
  border-color: var(--slate-600);
  color: #fff;
}

body.dark-mode .join-code-char:focus {
  border-color: var(--primary-400);
  box-shadow: var(--focus-ring-shadow);
}

body.dark-mode .join-code-char:not(:placeholder-shown) {
  background: var(--slate-600);
  border-color: var(--primary-400);
}

body.dark-mode .join-code-separator {
  color: var(--slate-500);
}

body.dark-mode .join-code-error {
  background: rgba(239, 68, 68, 0.1);
  border-color: var(--red-700);
  color: var(--red-400);
}

body.dark-mode .help-toggle-btn:hover {
  background: var(--slate-700);
  color: var(--slate-300);
}

body.dark-mode .help-content {
  background: var(--slate-800);
  color: var(--slate-400);
}

body.dark-mode .help-content strong {
  color: var(--slate-200);
}

body.dark-mode .help-note {
  border-top-color: var(--slate-700);
}

body.dark-mode .join-team-preview {
  background: rgba(20, 184, 166, 0.1);
  border-color: var(--primary-700);
}

body.dark-mode .join-team-preview .preview-team-name {
  color: var(--slate-100);
}

/* ============================================
   LOCAL-ONLY INVITE WARNING
   Shown when the invite link is browser-local (not signed in), so the
   user knows invitees would see "Invite Unavailable". Was inline-styled
   in invite-teammate-modal.js — moved here to use the shared amber
   tokens and pick up dark-mode for free.
   ============================================ */
.invite-local-warning {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.04));
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 14px;
  /* Hex fallbacks: the amber-* scale is referenced project-wide but its
     :root definition isn't guaranteed loaded for every entry point, so we
     fall back the same way day-detail-panel.css does. */
  color: var(--amber-800, #92400e);
}

.invite-local-warning strong {
  color: var(--amber-900, #78350f);
}

.invite-local-warning .btn {
  white-space: nowrap;
}

body.dark-mode .invite-local-warning {
  background: var(--amber-900, #78350f);
  border-color: var(--amber-700, #b45309);
  color: var(--amber-100, #fef3c7);
}

body.dark-mode .invite-local-warning strong {
  color: var(--amber-50, #fffbeb);
}

/* ============================================
   In-tab sign-in panel — shown IN PLACE of the link / code / QR for
   signed-out (local-only) invites. We render no copyable code at all when
   signed out, so the dead-link copy leak is impossible by construction
   (invite-client-13). Reuses .invite-method-card for the card shell.
   ============================================ */
.invite-signin-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 28px 20px;
}

.invite-signin-panel-icon {
  font-size: 28px;
  color: var(--amber-600, #d97706);
}

.invite-signin-panel-text {
  margin: 0;
  max-width: 38ch;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-secondary, #475569);
}

.invite-signin-panel-cta {
  white-space: nowrap;
}

body.dark-mode .invite-signin-panel-text {
  color: var(--text-secondary-dark, #cbd5e1);
}

/* ────────────────────────────────────────────────────────────────────────
   Group picker (invite from Home / no active group, real groups exist)
   Multi-select checklist of groups to invite to.
   ──────────────────────────────────────────────────────────────────────── */
.invite-group-picker-content,
.invite-multi-content {
  max-width: 480px;
  width: 100%;
}

.igp-subtitle,
.img-subtitle {
  color: var(--slate-600, #475569);
  font-size: 13px;
  margin: 4px 0 16px;
}

.igp-group-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.igp-group-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(20, 184, 166, 0.22);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
  min-height: 44px; /* touch target */
}

.igp-group-row:hover {
  background: rgba(20, 184, 166, 0.06);
  border-color: rgba(20, 184, 166, 0.4);
}

.igp-group-check {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  accent-color: var(--primary-500, #14b8a6);
  cursor: pointer;
}

.igp-group-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--slate-800, #1e293b);
}

.igp-create-new {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 8px 4px;
  color: var(--primary-600, #0d9488);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.igp-create-new:hover {
  text-decoration: underline;
}

/* Multi-group invite links panel */
.img-row {
  padding: 12px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.img-row:last-of-type {
  border-bottom: none;
}

.img-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.img-group-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--slate-800, #1e293b);
}

.img-failed-tag {
  font-size: 12px;
  color: var(--rose-600, #e11d48);
}

.img-link-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.img-link-input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid rgba(20, 184, 166, 0.25);
  border-radius: 8px;
  font-size: 12px;
  font-family: 'SF Mono', Monaco, monospace;
  background: var(--white, #fff);
  color: var(--slate-700, #334155);
  min-width: 0;
}

.img-copy {
  white-space: nowrap;
  flex: 0 0 auto;
}

body.dark-mode .igp-group-name,
body.dark-mode .img-group-name {
  color: var(--slate-200, #e2e8f0);
}

body.dark-mode .igp-subtitle,
body.dark-mode .img-subtitle {
  color: var(--slate-400, #94a3b8);
}

body.dark-mode .img-link-input {
  background: var(--slate-800, #1e293b);
  color: var(--slate-200, #e2e8f0);
}