/* =========================================================================
   WorkOS — Application shell styles (built on carbon.css)
   The Carbon "UI shell": a dark global header, a collapsible side navigation
   and a light content area. Plus auth, dashboard, app-launcher and installer.
   ========================================================================= */

/* ---- UI Shell header -------------------------------------------------- */
.workos-header {
  position: fixed; top: 0; left: 0; right: 0; height: var(--cds-header-height);
  background: var(--cds-gray-100); color: var(--cds-gray-10);
  display: flex; align-items: center; z-index: 8500;
  border-bottom: 1px solid var(--cds-gray-90);
}
.workos-header__menu-btn,
.workos-header__action {
  width: 3rem; height: var(--cds-header-height); background: none; border: none;
  color: var(--cds-gray-10); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  position: relative; transition: background var(--cds-duration-fast);
}
.workos-header__menu-btn:hover,
.workos-header__action:hover { background: var(--cds-gray-80); }
.workos-header__menu-btn { display: none; }
.workos-header__name {
  display: flex; align-items: center; gap: var(--cds-spacing-03);
  padding: 0 var(--cds-spacing-05); height: 100%; color: #fff; font-size: 0.875rem;
}
.workos-header__name b { font-weight: 600; }
.workos-header__name .mark { width: 1.25rem; height: 1.25rem; background: var(--cds-blue-60); display: inline-flex; align-items: center; justify-content: center; border-radius: 2px; }
.workos-header__spacer { flex: 1 1 auto; }
.workos-header__search { flex: 0 1 22rem; display: none; }
.workos-header__search input { background: var(--cds-gray-90); color: #fff; border-bottom-color: var(--cds-gray-70); height: var(--cds-header-height); }
.workos-header__search input::placeholder { color: var(--cds-gray-50); }
.workos-header__search svg { color: var(--cds-gray-40); }
.workos-header__actions { display: flex; align-items: center; height: 100%; }
.workos-badge { position: absolute; top: 0.55rem; right: 0.55rem; min-width: 1rem; height: 1rem; padding: 0 0.2rem; background: var(--cds-red-60); color: #fff; font-size: 0.625rem; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; }
@media (min-width: 42rem) { .workos-header__search { display: flex; } }

/* Header dropdowns (notifications / user) */
.workos-header__panel {
  position: absolute; top: var(--cds-header-height); right: 0; width: 22rem; max-width: 92vw;
  background: var(--cds-background); color: var(--cds-text-primary);
  box-shadow: var(--cds-shadow-lg); border: 1px solid var(--cds-border-subtle);
  display: none; z-index: 8600;
}
.workos-header__panel--open { display: block; }
.workos-header__panel-header { display: flex; align-items: center; justify-content: space-between; padding: var(--cds-spacing-05); border-bottom: 1px solid var(--cds-border-subtle); }
.workos-header__panel-header h3 { font-size: 1rem; font-weight: 600; }
.workos-userbox { padding: var(--cds-spacing-05); display: flex; gap: var(--cds-spacing-04); align-items: center; border-bottom: 1px solid var(--cds-border-subtle); }
.workos-userbox__meta { min-width: 0; }
.workos-userbox__name { font-weight: 600; }
.workos-userbox__email { color: var(--cds-text-secondary); font-size: 0.75rem; }

/* Notification list */
.workos-noti { display: flex; gap: var(--cds-spacing-04); padding: var(--cds-spacing-05); border-bottom: 1px solid var(--cds-border-subtle); color: inherit; }
.workos-noti:hover { background: var(--cds-layer-hover); text-decoration: none; color: inherit; }
.workos-noti--unread { background: #edf5ff; }
.workos-noti--unread:hover { background: #dbeafe; }
.workos-noti__icon { color: var(--cds-icon-secondary); flex: 0 0 auto; }
.workos-noti__title { font-weight: 600; font-size: 0.8125rem; }
.workos-noti__msg { color: var(--cds-text-secondary); font-size: 0.8125rem; }
.workos-noti__time { color: var(--cds-text-helper); font-size: 0.6875rem; margin-top: 0.15rem; }
.workos-panel__list { max-height: 24rem; overflow-y: auto; }
.workos-panel__footer { padding: var(--cds-spacing-04); text-align: center; }

/* ---- App switcher (launcher grid) ------------------------------------ */
.workos-switcher { padding: var(--cds-spacing-05); }
.workos-switcher__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cds-spacing-03); }
.workos-switcher__tile {
  display: flex; flex-direction: column; align-items: center; gap: var(--cds-spacing-03);
  padding: var(--cds-spacing-05) var(--cds-spacing-03); text-align: center; color: var(--cds-text-primary);
  border: 1px solid transparent; transition: background var(--cds-duration-fast);
}
.workos-switcher__tile:hover { background: var(--cds-layer-hover); text-decoration: none; color: inherit; }
.workos-switcher__icon { width: 2.5rem; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; color: #fff; border-radius: 4px; }
.workos-switcher__label { font-size: 0.75rem; line-height: 1.2; }

/* ---- Side navigation -------------------------------------------------- */
.workos-sidenav {
  position: fixed; top: var(--cds-header-height); bottom: 0; left: 0; width: var(--cds-sidenav-width);
  background: var(--cds-background); border-right: 1px solid var(--cds-border-subtle);
  overflow-y: auto; z-index: 8000; transition: transform var(--cds-duration-moderate) var(--cds-ease-productive);
  padding-bottom: var(--cds-spacing-07);
}
.workos-sidenav__group { padding: var(--cds-spacing-05) 0 var(--cds-spacing-02); }
.workos-sidenav__group-title { padding: 0 var(--cds-spacing-05) var(--cds-spacing-02); font-size: 0.6875rem; letter-spacing: 0.4px; text-transform: uppercase; color: var(--cds-text-helper); font-weight: 600; }
.workos-sidenav__link {
  display: flex; align-items: center; gap: var(--cds-spacing-04); height: 2.5rem; padding: 0 var(--cds-spacing-05);
  color: var(--cds-text-secondary); position: relative; transition: background var(--cds-duration-fast);
}
.workos-sidenav__link:hover { background: var(--cds-layer-hover); color: var(--cds-text-primary); text-decoration: none; }
.workos-sidenav__link svg { flex: 0 0 auto; color: var(--cds-icon-secondary); }
.workos-sidenav__link--active { background: var(--cds-layer); color: var(--cds-text-primary); font-weight: 600; }
.workos-sidenav__link--active::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--cds-interactive); }
.workos-sidenav__link--active svg { color: var(--cds-interactive); }
.workos-sidenav__footer { padding: var(--cds-spacing-05); font-size: 0.6875rem; color: var(--cds-text-helper); }

.workos-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 7900; display: none; }

/* ---- Content ---------------------------------------------------------- */
.workos-content {
  margin-left: var(--cds-sidenav-width); margin-top: var(--cds-header-height);
  padding: var(--cds-spacing-07);
  min-height: calc(100vh - var(--cds-header-height));
}
.workos-content__inner { max-width: 80rem; margin: 0 auto; }

/* Tenant switch banner (super admin) */
.workos-tenant-banner { background: var(--cds-gray-90); color: var(--cds-gray-10); padding: var(--cds-spacing-03) var(--cds-spacing-07); font-size: 0.8125rem; display: flex; align-items: center; gap: var(--cds-spacing-04); margin: calc(-1 * var(--cds-spacing-07)) calc(-1 * var(--cds-spacing-07)) var(--cds-spacing-07); }
.workos-tenant-banner a { color: var(--cds-blue-40); }

/* Responsive: collapse the nav into an off-canvas drawer */
@media (max-width: 66rem) {
  .workos-header__menu-btn { display: inline-flex; }
  .workos-sidenav { transform: translateX(-100%); box-shadow: var(--cds-shadow-lg); }
  .workos-sidenav--open { transform: none; }
  .workos-content { margin-left: 0; }
  body.workos-nav-open .workos-overlay { display: block; }
}

/* ---- Auth screens ----------------------------------------------------- */
.workos-auth { min-height: 100vh; display: grid; grid-template-columns: 1fr; }
.workos-auth__brand {
  background: var(--cds-gray-100); color: #fff; display: none; flex-direction: column; justify-content: space-between;
  padding: var(--cds-spacing-10);
}
.workos-auth__brand h1 { font-size: 2.625rem; font-weight: 300; line-height: 1.15; }
.workos-auth__brand p { color: var(--cds-gray-40); font-size: 1.1rem; max-width: 28rem; margin-top: var(--cds-spacing-05); }
.workos-auth__features { list-style: none; padding: 0; margin: var(--cds-spacing-07) 0 0; display: grid; gap: var(--cds-spacing-04); }
.workos-auth__features li { display: flex; align-items: center; gap: var(--cds-spacing-04); color: var(--cds-gray-30); }
.workos-auth__features svg { color: var(--cds-blue-40); }
.workos-auth__panel { display: flex; align-items: center; justify-content: center; padding: var(--cds-spacing-07); background: var(--cds-gray-10); }
.workos-auth__card { width: 100%; max-width: 24rem; background: var(--cds-background); padding: var(--cds-spacing-08); border: 1px solid var(--cds-border-subtle); }
.workos-auth__logo { display: inline-flex; align-items: center; gap: var(--cds-spacing-03); margin-bottom: var(--cds-spacing-06); font-size: 1.25rem; }
.workos-auth__logo .mark { width: 2rem; height: 2rem; background: var(--cds-blue-60); color: #fff; display: inline-flex; align-items: center; justify-content: center; border-radius: 3px; }
.workos-auth__title { font-size: 1.75rem; font-weight: 400; margin-bottom: var(--cds-spacing-02); }
.workos-auth__subtitle { color: var(--cds-text-secondary); margin-bottom: var(--cds-spacing-07); }
.workos-auth__alt { margin-top: var(--cds-spacing-06); font-size: 0.875rem; color: var(--cds-text-secondary); text-align: center; }
@media (min-width: 66rem) { .workos-auth { grid-template-columns: 1.1fr 1fr; } .workos-auth__brand { display: flex; } }

/* ---- Dashboard -------------------------------------------------------- */
.workos-welcome { margin-bottom: var(--cds-spacing-07); }
.workos-welcome h1 { font-size: 2rem; font-weight: 300; }
.workos-activity__item { display: flex; gap: var(--cds-spacing-04); padding: var(--cds-spacing-04) 0; border-bottom: 1px solid var(--cds-border-subtle); }
.workos-activity__item:last-child { border-bottom: none; }
.workos-activity__icon { width: 2rem; height: 2rem; border-radius: 50%; background: var(--cds-layer); display: inline-flex; align-items: center; justify-content: center; color: var(--cds-icon-secondary); flex: 0 0 auto; }
.workos-activity__text { font-size: 0.875rem; }
.workos-activity__time { font-size: 0.75rem; color: var(--cds-text-helper); }

/* ---- Installer -------------------------------------------------------- */
.workos-install { min-height: 100vh; background: var(--cds-gray-10); }
.workos-install__top { background: var(--cds-gray-100); color: #fff; padding: var(--cds-spacing-06) var(--cds-spacing-07); display: flex; align-items: center; gap: var(--cds-spacing-04); }
.workos-install__top .mark { width: 2rem; height: 2rem; background: var(--cds-blue-60); display: inline-flex; align-items: center; justify-content: center; border-radius: 3px; }
.workos-install__wrap { max-width: 44rem; margin: 0 auto; padding: var(--cds-spacing-08) var(--cds-spacing-05) var(--cds-spacing-10); }
.workos-stepper { display: flex; gap: 0; margin-bottom: var(--cds-spacing-08); }
.workos-stepper__step { flex: 1; text-align: center; padding: var(--cds-spacing-04) 0; border-top: 3px solid var(--cds-border-subtle); color: var(--cds-text-helper); font-size: 0.8125rem; }
.workos-stepper__step--active { border-top-color: var(--cds-interactive); color: var(--cds-text-primary); font-weight: 600; }
.workos-stepper__step--done { border-top-color: var(--cds-support-success); color: var(--cds-text-secondary); }
.workos-req { display: flex; align-items: center; gap: var(--cds-spacing-04); padding: var(--cds-spacing-04) 0; border-bottom: 1px solid var(--cds-border-subtle); }
.workos-req__status { flex: 0 0 auto; }
.workos-req__ok { color: var(--cds-support-success); }
.workos-req__fail { color: var(--cds-support-error); }
.workos-req__hint { font-size: 0.75rem; color: var(--cds-text-helper); }

/* ---- Search results --------------------------------------------------- */
.workos-search-group { margin-bottom: var(--cds-spacing-07); }
.workos-search-group h2 { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.3px; color: var(--cds-text-helper); margin-bottom: var(--cds-spacing-04); }

/* ---- Print ------------------------------------------------------------ */
@media print {
  .workos-header, .workos-sidenav, .workos-overlay, .cds-toasts { display: none !important; }
  .workos-content { margin: 0; padding: 0; }
}