/* ============================================================
   SCHEDMATE — TEAM & ACCESS STYLES  (v120)

   Rebuilt for the new module. The pre-v120 file styled a table that no
   longer exists, and — more importantly — redefined SHARED selectors
   globally:

       .sm-view-head { … }   .sm-view-title { … }
       .sm-muted { … }       .sm-table-wrap { … }

   Those are used across the whole dashboard, so merely re-enabling the
   old stylesheet would have restyled unrelated screens. That is the
   concrete reason the old Team UI could not simply be switched back on.

   Everything below is scoped to the team view or a team- prefix, and
   uses the existing dashboard tokens so Team & Access looks like part of
   the product rather than a bolted-on admin panel.
============================================================ */

:root {
  --team-surface: var(--sm-card, #fff);
  --team-surface-2: var(--sm-card2, rgba(15, 23, 42, 0.04));
  --team-border: var(--sm-border, rgba(15, 23, 42, 0.1));
  --team-border-strong: var(--sm-border-strong, rgba(15, 23, 42, 0.16));
  --team-text: var(--sm-text, #0f172a);
  --team-muted: var(--sm-muted, rgba(15, 23, 42, 0.62));
  --team-accent: var(--sm-primary, #5b5cff);
  /* Accent used as TEXT needs more contrast than the same hue used as a
     fill: the shared primary measures ~4.1:1 on a tinted surface, below
     WCAG AA. Same reasoning and same values as guide.css. */
  --team-accent-text: #4344e0;
  --team-ok: #0f6b31;
  --team-ok-bg: rgba(22, 163, 74, 0.12);
  --team-warn: #92400e;
  --team-warn-bg: rgba(245, 158, 11, 0.14);
  --team-off: rgba(15, 23, 42, 0.62);
  --team-off-bg: rgba(15, 23, 42, 0.06);
  --team-radius: var(--sm-radius2, 14px);
  --team-motion: 200ms;
  --team-ease: cubic-bezier(0.22, 0.8, 0.3, 1);
}

html.dark, body.dark, :root[data-theme="dark"] {
  --team-accent-text: #a5a6ff;
  --team-ok: #4ade80;
  --team-ok-bg: rgba(34, 197, 94, 0.16);
  --team-warn: #fcd34d;
  --team-warn-bg: rgba(251, 191, 36, 0.16);
  --team-off: rgba(248, 250, 252, 0.72);
  --team-off-bg: rgba(255, 255, 255, 0.07);
}

/* ---------- Shell ---------- */
.team-root {
  max-width: 100%;
  overflow-x: clip;
  color: var(--team-text);
}

.team-title { margin: 0; font-size: 20px; letter-spacing: -0.01em; }
.team-sub {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--team-muted);
  max-width: 62ch;
}

/* ---------- Tabs ---------- */
.team-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 18px 0 20px;
  border-bottom: 1px solid var(--team-border);
  padding-bottom: 2px;
}

.team-tab {
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--team-muted);
  padding: 9px 14px;
  border-radius: 9px 9px 0 0;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color var(--team-motion) var(--team-ease),
    border-color var(--team-motion) var(--team-ease);
}
.team-tab:hover { color: var(--team-text); }
.team-tab.is-active {
  color: var(--team-accent-text);
  border-bottom-color: var(--team-accent);
}

/* ---------- Seats ---------- */
.team-seats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
  border: 1px solid var(--team-border);
  border-radius: var(--team-radius);
  background: var(--team-surface-2);
  padding: 12px 15px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--team-muted);
  margin-bottom: 16px;
}
.team-seats strong { color: var(--team-text); }
.team-seats.is-full {
  background: var(--team-warn-bg);
  border-color: transparent;
}
.team-seats.is-full strong { color: var(--team-warn); }

/* ---------- Roster freshness (v121.0.0) ----------
   The line that says how old this answer is, and the button that asks
   again. Quiet by default, never hidden — a screen that looks
   authoritative while being out of date is the defect this release
   exists to fix. */
.team-freshness {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 10px;
  font-size: 12.5px;
  color: var(--team-muted);
}
.team-freshness-label { line-height: 1.4; }
.team-freshness-error { color: var(--team-warn); }
@media (max-width: 560px) {
  .team-freshness { justify-content: space-between; }
}

/* ---------- Reconciliation notice (v121.0.0) ----------
   Shown only when /team-admin reports that the roster repair from sql/55
   could not run. It reuses the warn tokens rather than inventing a
   colour, so it inherits the contrast work in both themes. */
.team-notice {
  border: 1px solid var(--team-border);
  border-radius: var(--team-radius);
  padding: 12px 15px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--team-text);
  margin-bottom: 12px;
}
.team-notice--warn {
  background: var(--team-warn-bg);
  border-color: transparent;
}
.team-notice--warn strong { color: var(--team-warn); }

/* ---------- Role change: before / after (v121.0.0) ---------- */
.team-role-delta {
  border: 1px solid var(--team-border);
  border-radius: var(--team-radius);
  background: var(--team-surface-2);
  padding: 12px 14px;
  margin: 12px 0 4px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--team-text);
}
.team-role-delta-head {
  margin: 0 0 8px;
  font-weight: 600;
  color: var(--team-text);
}
.team-role-delta-group { margin-bottom: 8px; }
.team-role-delta-group:last-child { margin-bottom: 0; }
.team-role-delta-title {
  margin: 0 0 3px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
}
.team-role-delta-group--gain .team-role-delta-title { color: var(--team-ok, var(--team-text)); }
.team-role-delta-group--loss .team-role-delta-title { color: var(--team-warn); }
.team-role-delta-list {
  margin: 0;
  padding-left: 18px;
  color: var(--team-text);
}
.team-role-delta-none,
.team-role-delta-keep {
  margin: 6px 0 0;
  color: var(--team-muted);
}

.team-toolbar { margin-bottom: 16px; }

/* ---------- Member list ---------- */
.team-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.team-member {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--team-border);
  border-radius: var(--team-radius);
  background: var(--team-surface);
  padding: 14px 16px;
  min-width: 0;
}
.team-member--owner { border-color: var(--team-border-strong); }
.team-member[data-member-status="deactivated"] { opacity: 0.72; }

.team-member-main { min-width: 0; flex: 1 1 220px; }
.team-member-name {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.team-member-email {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--team-muted);
  overflow-wrap: anywhere;
}

.team-member-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.team-member-seen { font-size: 12px; color: var(--team-muted); }

.team-role,
.team-status {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 650;
  line-height: 1.4;
}
.team-role { background: rgba(91, 92, 255, 0.1); color: var(--team-accent-text); }
.team-role--owner { background: var(--team-ok-bg); color: var(--team-ok); }

.team-status--active { background: var(--team-ok-bg); color: var(--team-ok); }
.team-status--invited { background: var(--team-warn-bg); color: var(--team-warn); }
.team-status--deactivated { background: var(--team-off-bg); color: var(--team-off); }

.team-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.team-action-note { font-size: 12.5px; color: var(--team-muted); }

.team-root .team-btn-sm {
  font-size: 13px;
  padding: 7px 12px;
}

/* ---------- Roles ---------- */
.team-roles-intro {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--team-muted);
  max-width: 68ch;
}

.team-roles {
  display: grid;
  /* min(100%, …) so a 320px viewport cannot be forced wider by a track
     that refuses to shrink below its stated minimum. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: 12px;
}

.team-role-card {
  border: 1px solid var(--team-border);
  border-radius: var(--team-radius);
  background: var(--team-surface);
  padding: 16px;
  min-width: 0;
}
.team-role-card-title { margin: 0 0 6px; font-size: 15px; }
.team-role-card-summary {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--team-muted);
}
.team-role-card-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}
.team-role-card-list li { display: flex; gap: 8px; align-items: flex-start; }
.team-role-card-list .is-yes { color: var(--team-text); }
.team-role-card-list .is-no { color: var(--team-muted); }
.team-role-mark { flex: 0 0 auto; width: 14px; text-align: center; font-weight: 700; }
.team-role-card-list .is-yes .team-role-mark { color: var(--team-ok); }

.team-note {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--team-muted);
  max-width: 70ch;
}

/* ---------- Activity ---------- */
.team-activity {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.team-activity-item {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
  padding: 11px 2px;
  border-bottom: 1px solid var(--team-border);
  font-size: 13.5px;
}
.team-activity-what { font-weight: 600; }
.team-activity-detail { color: var(--team-muted); overflow-wrap: anywhere; }
.team-activity-when { margin-inline-start: auto; font-size: 12px; color: var(--team-muted); }

/* ---------- Empty, loading, error ---------- */
.team-empty,
.team-error {
  border: 1px dashed var(--team-border-strong);
  border-radius: var(--team-radius);
  background: var(--team-surface);
  padding: clamp(18px, 4vw, 30px);
  margin-top: 12px;
}
.team-error { border-style: solid; }
.team-empty-title { margin: 0 0 8px; font-size: 16px; }
.team-empty-copy {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--team-muted);
  max-width: 64ch;
}
.team-loading { font-size: 14px; color: var(--team-muted); padding: 16px 2px; }

/* ---------- Dialog ---------- */
.team-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120600;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(9, 13, 24, 0.55);
}

.team-dialog {
  width: min(460px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 16px;
  background: var(--team-surface);
  border: 1px solid var(--team-border);
  box-shadow: 0 24px 70px rgba(9, 13, 24, 0.32);
  padding: clamp(18px, 4vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.team-dialog-title { margin: 0; font-size: 17px; letter-spacing: -0.01em; }

.team-field { display: flex; flex-direction: column; gap: 6px; }
.team-field > span { font-size: 13px; font-weight: 600; }
.team-field input,
.team-field select {
  border: 1px solid var(--team-border-strong);
  border-radius: 10px;
  background: var(--team-surface);
  color: var(--team-text);
  font: inherit;
  /* 16px stops iOS zooming the page when the field takes focus. */
  font-size: 16px;
  padding: 10px 12px;
  min-width: 0;
  max-width: 100%;
}

.team-dialog-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--team-muted);
}
.team-dialog-status:empty { display: none; }
.team-dialog-status {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: #b4342a;
}
.team-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.team-invite-url {
  width: 100%;
  border: 1px solid var(--team-border-strong);
  border-radius: 10px;
  background: var(--team-surface-2);
  color: var(--team-text);
  font: inherit;
  font-size: 13px;
  padding: 10px 12px;
}

/* ---------- Access denied ---------- */
.sm-access-denied {
  border: 1px solid var(--team-border);
  border-radius: var(--team-radius);
  background: var(--team-surface);
  padding: clamp(20px, 4vw, 32px);
  max-width: 620px;
}
.sm-access-denied-title { margin: 0 0 8px; font-size: 18px; }
.sm-access-denied-body {
  margin: 0 0 16px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--team-muted);
}

/* ---------- Focus ---------- */
.team-tab:focus-visible,
.team-root .sm-btn:focus-visible,
.team-dialog input:focus-visible,
.team-dialog select:focus-visible,
.team-dialog .sm-btn:focus-visible {
  outline: 2px solid var(--team-accent);
  outline-offset: 2px;
}

/* ---------- Motion ----------
   One block covering everything under the team view and its dialog, so
   an animation added later cannot forget to opt out. */
@media (prefers-reduced-motion: reduce) {
  .team-root, .team-root *, .team-root *::before, .team-root *::after,
  .team-dialog-backdrop, .team-dialog-backdrop * {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
}

/* ---------- Narrow screens ---------- */
@media (max-width: 640px) {
  .team-member { align-items: flex-start; }
  .team-actions { width: 100%; }
  .team-activity-when { margin-inline-start: 0; width: 100%; }
}

@media (max-width: 380px) {
  .team-member { padding: 13px; }
  .team-root .team-btn-sm { flex: 1 1 auto; }
}

/* =====================================================================
   WORKSPACE SELECTOR  (v120.0.3)

   Lives in the sidebar, above the module search. Rendered only when the
   signed-in user can reach more than one workspace — which, before this
   release, nobody could, because the dashboard always chose the personal
   one.

   A native <select> on purpose. It is keyboard accessible, screen-reader
   labelled and mobile-native for free, and a custom listbox here would
   be a lot of code to reimplement things the platform already does.
===================================================================== */
.sm-workspace-switch {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  margin: 0 0 10px;
  border-radius: 14px;
  background: rgba(148, 163, 255, 0.09);
  border: 1px solid rgba(148, 163, 255, 0.18);
}
.sm-workspace-switch[hidden] { display: none !important; }

.sm-workspace-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sm-dim, #8ea0bb);
  margin: 0;
}

.sm-workspace-select {
  width: 100%;
  min-width: 0;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--sm-text, #f4f7fb);
  background: var(--sm-card, rgba(14, 27, 46, 0.92));
  border: 1px solid var(--sm-border, rgba(216, 227, 241, 0.14));
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  /* Long business names must not widen the sidebar. */
  text-overflow: ellipsis;
}
.sm-workspace-select:focus-visible {
  outline: 2px solid var(--sm-primary, #7d8cff);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   Beating the global form reset, deliberately.

   schedmate.luxury.css carries `input, select, textarea { font-size:
   11px !important; color: #25374c !important; background: #fff
   !important }`. That is meant for form fields on a light card. This
   control lives in the dark sidebar, and browser QA caught it rendering
   as an 11px white form field there.

   Two reasons this is not merely cosmetic:

     - 11px is under the 16px threshold at which iOS Safari zooms the
       whole page on focus. In a sidebar that throws the layout sideways
       and has to be pinched back every time somebody changes workspace.
     - A white field on a dark rail reads as a different application.

   !important is required to win against !important; there is no
   specificity that beats it.
--------------------------------------------------------------------- */
.sm-workspace-switch .sm-workspace-select {
  font-size: 13.5px !important;
  color: var(--sm-text, #f4f7fb) !important;
  background: var(--sm-card, rgba(14, 27, 46, 0.92)) !important;
  border: 1px solid var(--sm-border, rgba(216, 227, 241, 0.14)) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  min-height: 38px;
}

/* 16px on small screens: below this iOS zooms the page on focus. */
@media (max-width: 900px) {
  .sm-workspace-switch .sm-workspace-select { font-size: 16px !important; }
}

.sm-workspace-role {
  margin: 0;
  font-size: 11.5px;
  color: var(--sm-muted, #96a4b7);
}

/* Collapsed sidebar: the control would be unreadable at 78px, and a
   selector nobody can read is worse than one that is not there. */
.sm-sidebar.is-collapsed .sm-workspace-switch { display: none; }

@media (prefers-reduced-motion: reduce) {
  .sm-workspace-select { transition: none !important; }
}

/* v120.0.7 — first successful invited-member handoff. */
.sm-member-welcome {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
  padding: 18px 20px;
  border-color: color-mix(in srgb, var(--sm-primary, #5865f2) 28%, var(--sm-border, #dbe3ef));
  background: linear-gradient(135deg, color-mix(in srgb, var(--sm-primary, #5865f2) 9%, var(--sm-card, #fff)), var(--sm-card, #fff));
}
.sm-member-welcome h2 { margin: 0; font-size: 18px; }
.sm-member-welcome p { margin: 0; color: var(--sm-muted, #64748b); line-height: 1.55; }
.sm-member-welcome .sm-btn { justify-self: start; }