/* SaaS Hub: the team-switcher dialog an owner uses to move between teams.
   Extracted from styles.css lines 17482-17674, 21 rules, in their original order.

   CASCADE POSITION: loaded after sheet-preview.css and before
   notification-actions.css.
     - These rules sat near the end of styles.css already, with only two blocks
       after them, and neither declares a selector this file declares. Nothing
       that currently overrides them stops doing so.
     - They stay EARLIER than notification-actions.css, advanced-drill-board.css
       and runtime-identity.css, as before, because those are still linked last.
     - After sheet-preview.css rather than before it, because that is the order
       they had inside styles.css: the sheet preview came from line 1744 and
       this from 17482. The two share no selectors, so the order is preserved
       for its own sake rather than because anything depends on it.
   The three .team-switcher-icon rules interleaved through the original span
   stay in styles.css: they style the launcher in the sidebar, not the dialog. */

.saas-hub-button {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 11px 13px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.09);
  color: #ffffff;
  text-align: left;
}

.saas-hub-button span {
  color: var(--color-team-accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.saas-hub-button strong {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saas-hub-overlay {
  position: fixed;
  inset: 0;
  z-index: 10040;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(4, 16, 31, 0.58);
  backdrop-filter: blur(4px);
}

.saas-hub-dialog {
  display: grid;
  gap: 16px;
  width: min(520px, 100%);
  max-height: min(760px, calc(100vh - 40px));
  overflow: auto;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 28px 80px rgba(4, 16, 31, 0.3);
}

.saas-hub-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.saas-hub-dialog-header h2,
.saas-hub-dialog-header p,
.saas-hub-dialog > p,
.saas-team-form p {
  margin: 0;
}

.saas-team-list {
  display: grid;
  gap: 8px;
}

.saas-team-choice {
  min-height: 50px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font-weight: 800;
  text-align: left;
}

.saas-team-choice:hover {
  border-color: var(--action);
  background: #f1fafb;
}

.saas-team-choice[aria-current="true"] {
  border-color: var(--action);
  background: #e7f4f5;
  color: #145c63;
}

.saas-team-choice[aria-current="true"]::after {
  content: "Current";
  float: right;
  color: #41727a;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.saas-team-form {
  display: grid;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.saas-team-form label {
  display: grid;
  gap: 7px;
  font-weight: 800;
}

.saas-team-form input {
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
}

.saas-team-form-actions {
  display: flex;
  gap: 10px;
}

body.saas-hub-open {
  overflow: hidden;
}

body.dark-mode .saas-hub-dialog,
body.dark-mode .saas-team-choice,
body.dark-mode .saas-team-form input {
  background: #102936;
  color: #f3f8fa;
}

body.dark-mode .saas-team-choice[aria-current="true"] {
  background: #173d48;
  color: #dff7f8;
}

@media (max-width: 1080px) and (width > 720px) {
  .saas-hub-button {
    width: 180px;
    flex: 0 0 auto;
  }
}

@media (max-width: 720px) {
  .saas-hub-button {
    display: none !important;
  }

  .saas-hub-dialog {
    align-self: end;
    width: 100%;
    max-height: calc(100vh - 20px);
    padding: 20px;
    border-radius: 20px 20px 0 0;
  }

  .saas-hub-overlay {
    place-items: end center;
    padding: 20px 0 0;
  }

  .saas-team-form-actions > * {
    flex: 1;
  }
}

.saas-plan-summary {
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.05);
}

.saas-plan-summary h3 {
  margin: 2px 0 10px;
}

.saas-plan-summary-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  font-size: 0.9em;
}

.saas-plan-summary-label {
  opacity: 0.78;
}