/*
 * StoreSync app-auth area styles
 * Generated consolidation stylesheet. Do not add per-page CSS links; put temporary page-only exceptions inline near the markup.
 */


/* ===== Source: app/utility/assets/css/storesync-unified/01-foundation.css ===== */
/*
 * Design tokens, reset and base type
 * Extracted from storesync-unified.css; keep imported order in the entrypoint.
 */

:root {
  --ss-bg: #f6f8f7;
  --ss-surface: #ffffff;
  --ss-surface-2: #f0f4f2;
  --ss-ink: #17201b;
  --ss-muted: #64726a;
  --ss-soft: #8a968f;
  --ss-line: #dce4df;
  --ss-line-strong: #c5d0ca;
  --ss-primary: #0f766e;
  --ss-primary-dark: #0b5f59;
  --ss-primary-soft: #e3f3f0;
  --ss-success: #087443;
  --ss-warning: #b45309;
  --ss-danger: #b42318;
  --ss-radius: 8px;
  --ss-radius-sm: 6px;
  --ss-shadow: 0 12px 28px rgba(23, 32, 27, .08);
  --ss-shell-min: 320px;
  --ss-shell: 90%;
  --nav-height: 68px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  min-width: 320px;
  background: var(--ss-bg);
  -webkit-text-size-adjust: 100%;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--ss-bg);
  color: var(--ss-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#main-content {
  background: var(--ss-bg);
}

img, svg { max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--ss-primary); }
button, input, select, textarea { font: inherit; }
p, h1, h2, h3, h4, ul, dl, dd { margin-top: 0; }
p { color: var(--ss-muted); }
p, li, dd, a, span, label { overflow-wrap: anywhere; }

h1, h2, h3, h4 {
  color: var(--ss-ink);
  line-height: 1.15;
  letter-spacing: 0;
}

h1 { font-size: clamp(1.75rem, 3vw, 2.55rem); font-weight: 850; margin-bottom: 8px; }
h2 { font-size: clamp(1.18rem, 2vw, 1.55rem); font-weight: 820; margin-bottom: 6px; }
h3 { font-size: 1rem; font-weight: 800; margin-bottom: 5px; }

.module-page-stack {
  padding-bottom: 10px;
}


/* ===== Source: app/utility/assets/css/storesync-unified/02-navigation.css ===== */
/*
 * App navigation
 * Extracted from storesync-unified.css; keep imported order in the entrypoint.
 */

body > header {
  min-height: var(--nav-height);
  z-index: 300;
}

.main-nav {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 300;
  min-height: var(--nav-height);
  border-bottom: 1px solid var(--ss-line);
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(12px);
}

.main-nav-inner {
  display: flex;
  min-height: var(--nav-height);
  align-items: center;
  justify-content: space-between;
  width: min(calc(100% - 28px), 1320px);
  margin-inline: auto;
  gap: 16px;
}

.nav-left,
.nav-right,
.nav-link-main {
  display: flex;
  align-items: center;
}

.nav-link-main { gap: 9px; }

.nav-left { flex: 0 0 auto; }

.nav-brand {
  display: inline-flex;
  align-items: center;
}

.nav-brand-logo {
  display: block;
  width: auto;
  height: 31px;
  max-width: 176px;
  object-fit: contain;
}

.nav-right {
  justify-content: flex-start;
  gap: 3px;
  min-width: 0;
  overflow: visible;
  scrollbar-width: none;
}
.nav-right::-webkit-scrollbar { display: none; }

.nav-link,
.dropdown-toggle {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--ss-radius-sm);
  padding: 8px 10px;
  background: transparent;
  color: #344039;
  font-size: .9rem;
  font-weight: 720;
  cursor: pointer;
  white-space: nowrap;
}

@media (max-width: 1380px) {
  .main-nav-inner { width: min(calc(100% - 20px), 1320px); gap: 10px; }
  .nav-brand-logo { max-width: 138px; height: 29px; }
  .nav-link,
  .dropdown-toggle {
    gap: 8px;
    padding-inline: 7px;
    font-size: .88rem;
  }

  .nav-link-main { gap: 8px; }
}

.nav-link:hover,
.dropdown-toggle:hover {
  border-color: var(--ss-line);
  background: var(--ss-surface-2);
  color: var(--ss-ink);
}

.nav-link i,
.dropdown-toggle i {
  display: inline-flex;
  width: 16px;
  min-width: 16px;
  align-items: center;
  justify-content: center;
  color: var(--ss-primary);
  font-size: .96em;
  line-height: 1;
  text-align: center;
}

.notification-icon {
  position: relative;
  display: inline-flex;
  width: 16px;
  min-width: 16px;
  align-items: center;
  justify-content: center;
}

.notification-badge {
  position: absolute;
  top: -9px;
  right: -10px;
  min-width: 17px;
  height: 17px;
  border-radius: 999px;
  padding: 0 4px;
  background: var(--ss-danger);
  color: #fff;
  font-size: 10px;
  font-weight: 850;
  line-height: 17px;
  text-align: center;
}

.dropdown { position: relative; }
.dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  display: none;
  height: 8px;
}
.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  display: none;
  min-width: 220px;
  margin: 0;
  padding: 8px;
  list-style: none;
  border: 1px solid var(--ss-line);
  border-radius: var(--ss-radius);
  background: #fff;
  box-shadow: var(--ss-shadow);
}
.dropdown-menu.show { display: block; }

@media (min-width: 1121px) {
  .dropdown:not(.ss-dropdown-click-closed):hover::after,
  .dropdown:not(.ss-dropdown-click-closed):focus-within::after { display: block; }

  .dropdown:not(.ss-dropdown-click-closed):hover .dropdown-menu,
  .dropdown:not(.ss-dropdown-click-closed) .dropdown-toggle:hover + .dropdown-menu,
  .dropdown:not(.ss-dropdown-click-closed) .dropdown-toggle:focus + .dropdown-menu,
  .dropdown:not(.ss-dropdown-click-closed):focus-within .dropdown-menu { display: block; }
}
.dropdown-menu a {
  display: block;
  border-radius: var(--ss-radius-sm);
  padding: 9px 10px;
  color: #344039;
  font-weight: 700;
}
.dropdown-menu a:hover { background: var(--ss-surface-2); color: var(--ss-ink); }

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--ss-line-strong);
  border-radius: var(--ss-radius);
  background: #fff;
  color: var(--ss-ink);
}

.nav-spacer { display: none; }

main#main-content {
  min-height: calc(100vh - var(--nav-height));
}


/* ===== Source: app/utility/assets/css/storesync-unified/03-shell-hero-status.css ===== */
/*
 * Page shell, hero, context and status pills
 * Extracted from storesync-unified.css; keep imported order in the entrypoint.
 */

.ss-page,
.module-page-shell,
.app-page-shell,
.page-shell,
.schedule-shell,
.schedule-wrap,
.timesheet-shell,
.timeoff-shell,
.payslips-shell,
.reports-shell,
.staff-shell,
.absence-shell,
.myorg-shell,
.my-account-shell,
.help-shell,
.support-shell,
.location-shell,
.division-shell,
.payroll-shell,
.container,
.wrap {
  width: var(--ss-shell);
  max-width: 1320px;
  min-width: min(var(--ss-shell-min), calc(100% - 28px));
  margin: 0 auto;
  padding: 26px 0 46px;
}

.ss-hero {
  margin-bottom: 18px;
}

.ss-section,
.ss-panel,
.ss-card,
.ss-notice,
.ss-empty,
.ss-tile,
.ss-metric-card,
.ss-stat,
.admin-panel,
.myorg-card,
.billing-card {
  border: 1px solid var(--ss-line);
  border-radius: var(--ss-radius);
  background: var(--ss-surface);
}

.ss-hero__main,
.ss-hero-copy {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.ss-hero__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.ss-hero__top.no-context { grid-template-columns: 1fr; }
.ss-hero__copy {
  container: ss-hero-copy / inline-size;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(0, max-content);
  gap: 18px;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}
.ss-hero__top.no-context .ss-hero__copy {
  grid-template-columns: minmax(0, 1fr);
}
.ss-hero__copy.ss-hero-fit--stack {
  grid-template-columns: minmax(0, 1fr);
}
.ss-hero__copy-main {
  min-width: 0;
}
.ss-hero__title { display: grid; gap: 10px; }

.ss-back-link {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  color: var(--ss-muted);
  font-size: .9rem;
  font-weight: 760;
}

.ss-back-link:hover { color: var(--ss-primary); }

.ss-copy p,
.ss-hero-copy p { max-width: 760px; margin-bottom: 0; }

.ss-hero__context,
.context-strip,
.context-bar,
.ss-context {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}

.ss-hero__context {
  align-self: center;
  min-width: 0;
  max-width: 100%;
}

.ss-hero__context .ss-context {
  flex-wrap: nowrap;
}

.ss-hero__copy.ss-hero-fit--stack .ss-hero__context {
  align-self: start;
  justify-content: flex-start;
}

.ss-hero__copy.ss-hero-fit--stack .ss-hero__context,
.ss-hero__copy.ss-hero-fit--stack .ss-context {
  justify-content: flex-start;
}

.ss-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.ss-status,
.pill,
.badge,
.admin-badge {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--ss-line);
  border-radius: 999px;
  padding: 4px 8px;
  background: #fff;
  color: #3a473f;
  font-size: .78rem;
  font-weight: 760;
}

.ss-status i { color: var(--ss-primary); }
.ss-status.success, .admin-badge.is-good { border-color: rgba(8, 116, 67, .22); background: #e7f5ee; color: var(--ss-success); }
.ss-status.warn, .admin-badge.is-warn { border-color: rgba(180, 83, 9, .24); background: #fff6e7; color: var(--ss-warning); }
.ss-status.danger, .admin-badge.is-bad { border-color: rgba(180, 35, 24, .22); background: #fff0ee; color: var(--ss-danger); }
.ss-status.muted { background: var(--ss-surface-2); color: var(--ss-muted); }


/* ===== Source: app/utility/assets/css/storesync-unified/04-page-card-sections.css ===== */
/*
 * One-card page layout, sections and collapse controls
 * Extracted from storesync-unified.css; keep imported order in the entrypoint.
 */

.ss-stack { display: grid; gap: 16px; }

.ss-page-content-card {
  display: grid;
  gap: 0;
  max-width: 100%;
  border: 1px solid var(--ss-line);
  border-radius: var(--ss-radius);
  background: var(--ss-surface);
  box-shadow: none;
  overflow: hidden;
}

.ss-page-content-card > * {
  min-width: 0;
}

.ss-page-content-card > * + * {
  border-top: 1px solid var(--ss-line);
}

.ss-section {
  padding: clamp(12px, 1.8vw, 16px);
}

.ss-page-content-card > .ss-section,
.ss-page-content-card > .ss-hero,
.ss-page-content-card > .ss-panel,
.ss-page-content-card > .panel,
.ss-page-content-card > .ss-card,
.ss-page-content-card > .ss-notice,
.ss-page-content-card > .ss-empty,
.ss-page-content-card > .ss-card-grid,
.ss-page-content-card > .ss-action-grid,
.ss-page-content-card > .ss-action-section,
.ss-page-content-card > .ss-tile-section,
.ss-page-content-card > .surface-card,
.ss-page-content-card > .section-card,
.ss-page-content-card > .page-section,
.ss-page-content-card > .module-note,
.ss-page-content-card > .notice-inline,
.ss-page-content-card > .notice-line,
.ss-page-content-card > .empty-state,
.ss-page-content-card > .empty-box,
.ss-page-content-card > .empty-line,
.ss-page-content-card > .detail-card,
.ss-page-content-card > .module-filter-card,
.ss-page-content-card > .module-filter-card,
.ss-page-content-card > .users-filter-panel,
.ss-page-content-card > .filter-card,
.ss-page-content-card > .filter-panel,
.ss-page-content-card > .filter-section,
.ss-page-content-card > .search-card,
.ss-page-content-card > .search-panel,
.ss-page-content-card > .toolbar-card,
.ss-page-content-card > .admin-filter-panel,
.ss-page-content-card > .admin-workbench-filter,
.ss-page-content-card > .module-empty-card,
.ss-page-content-card > .module-group-card,
.ss-page-content-card > .day-card,
.ss-page-content-card > .week-block-row,
.ss-page-content-card > .lookup-card,
.ss-page-content-card > .lookup-note,
.ss-page-content-card > .contact-card,
.ss-page-content-card > .list-card,
.ss-page-content-card > .tip-card,
.ss-page-content-card > .perm-card,
.ss-page-content-card > .data-list,
.ss-page-content-card > .myorg-list,
.ss-page-content-card > .ss-list,
.ss-page-content-card > .detail-list,
.ss-page-content-card > .module-group-list,
.ss-page-content-card > .module-record-list,
.ss-page-content-card > .module-item-list,
.ss-page-content-card > .week-list,
.ss-page-content-card > .record-list,
.ss-page-content-card > .filter-form,
.ss-page-content-card > .module-filter-form,
.ss-page-content-card > .module-filter-form,
.ss-page-content-card > .pay-filter-form,
.ss-page-content-card > .schedule-filter-form,
.ss-page-content-card > .site-schedule-filter-form,
.ss-page-content-card > .week-filter-form,
.ss-page-content-card > .users-filter-form,
.ss-page-content-card > .myorg-users-filter-form,
.ss-page-content-card > .myorg-roles-filter-form,
.ss-page-content-card > .myorg-divisions-filter-form,
.ss-page-content-card > .myorg-locations-filter-form,
.ss-page-content-card > .admin-filter-bar,
.ss-page-content-card > .admin-filter-bar-wide,
.ss-page-content-card > .quick-grid,
.ss-page-content-card > .myorg-card,
.ss-page-content-card > .billing-card,
.ss-page-content-card > .timesheet-section,
.ss-page-content-card > .timeoff-card,
.ss-page-content-card > .pay-card,
.ss-page-content-card > .payslip-card,
.ss-page-content-card > .module-filter-card,
.ss-page-content-card > .module-empty-card,
.ss-page-content-card > .help-index-search-card,
.ss-page-content-card > .availability-section,
.ss-page-content-card > .schedule-toolbar {
  padding: clamp(12px, 1.8vw, 16px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  margin: 0 !important;
}

.ss-page-content-card > .ss-hero .ss-hero__main,
.ss-page-content-card > .ss-hero .ss-hero-copy {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.ss-page-content-card > .ss-stack,
.ss-page-content-card > .section-grid,
.ss-page-content-card > .page-stack,
.ss-page-content-card > .page-shell,
.ss-page-content-card > .billing-shell,
.ss-page-content-card > .myorg-stack,
.ss-page-content-card > .lookup-shell,
.ss-page-content-card > .security-shell,
.ss-page-content-card > .notifications-page-stack,
.ss-page-content-card > .timeoff-stack,
.ss-page-content-card > .timesheet-page,
.ss-page-content-card > .week-editor-page,
.ss-page-content-card > .schedule-page-stack,
.ss-page-content-card > .hours-page-stack {
  gap: 0 !important;
}

.ss-page-content-card > .ss-stack > *,
.ss-page-content-card > .section-grid > *,
.ss-page-content-card > .page-stack > *,
.ss-page-content-card > .page-shell > *,
.ss-page-content-card > .billing-shell > *,
.ss-page-content-card > .myorg-stack > *,
.ss-page-content-card > .lookup-shell > *,
.ss-page-content-card > .security-shell > *,
.ss-page-content-card > .notifications-page-stack > *,
.ss-page-content-card > .timeoff-stack > *,
.ss-page-content-card > .timesheet-page > *,
.ss-page-content-card > .week-editor-page > *,
.ss-page-content-card > .schedule-page-stack > *,
.ss-page-content-card > .hours-page-stack > * {
  border-top: 1px solid var(--ss-line);
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  margin: 0 !important;
}

.ss-page-content-card > .ss-stack > *:first-child,
.ss-page-content-card > .section-grid > *:first-child,
.ss-page-content-card > .page-stack > *:first-child,
.ss-page-content-card > .page-shell > *:first-child,
.ss-page-content-card > .billing-shell > *:first-child,
.ss-page-content-card > .myorg-stack > *:first-child,
.ss-page-content-card > .lookup-shell > *:first-child,
.ss-page-content-card > .security-shell > *:first-child,
.ss-page-content-card > .notifications-page-stack > *:first-child,
.ss-page-content-card > .timeoff-stack > *:first-child,
.ss-page-content-card > .timesheet-page > *:first-child,
.ss-page-content-card > .week-editor-page > *:first-child,
.ss-page-content-card > .schedule-page-stack > *:first-child,
.ss-page-content-card > .hours-page-stack > *:first-child {
  border-top: 0 !important;
}

.ss-section + .ss-section,
.ss-section + .ss-notice { margin-top: 0; }

.ss-page-content-card .ss-sub-card-section,
.ss-page-content-card .ss-report-block {
  display: grid;
  gap: 12px;
}

.ss-page-content-card .ss-sub-card-section > .ss-section__head,
.ss-page-content-card .ss-sub-card-section > .section-head,
.ss-page-content-card .ss-sub-card-section > .card-head,
.ss-page-content-card .ss-sub-card-section > .panel-head,
.ss-page-content-card .ss-sub-card-section > .detail-head,
.ss-page-content-card .ss-sub-card-section > .settings-head,
.ss-page-content-card .ss-sub-card-section > .myorg-section-head,
.ss-page-content-card .ss-sub-card-section > .support-panel-head,
.ss-page-content-card .ss-sub-card-section > .timesheet-section-head,
.ss-page-content-card .ss-sub-card-section > .timeoff-head,
.ss-page-content-card .ss-sub-card-section > .admin-panel-header,
.ss-page-content-card .ss-sub-card-section > .pay-card-head,
.ss-page-content-card .ss-sub-card-section > .form-card-head,
.ss-page-content-card .ss-sub-card-section > .tip-card-head,
.ss-page-content-card .ss-sub-card-section > .contact-card-head,
.ss-page-content-card .ss-sub-card-section > .profile-card-head,
.ss-page-content-card .ss-sub-card-section > .location-panel-head,
.ss-page-content-card .ss-sub-card-section > .division-panel-head,
.ss-page-content-card .ss-sub-card-section > .report-card-head,
.ss-page-content-card .ss-sub-card-section > .staff-card-head,
.ss-page-content-card .ss-sub-card-section > .absence-card-head,
.ss-page-content-card .ss-sub-card-section > .module-group-head,
.ss-page-content-card .ss-sub-card-section > .ss-generated-section-head {
  margin-bottom: 0 !important;
  padding-bottom: 0;
  border-bottom: 0;
}

.ss-page-content-card .ss-sub-card-section > .ss-section__body,
.ss-page-content-card .ss-sub-card-section > .section-body,
.ss-page-content-card .ss-sub-card-section > .card-body,
.ss-page-content-card .ss-sub-card-section > .panel-body,
.ss-page-content-card .ss-sub-card-section > .myorg-card-body,
.ss-page-content-card .ss-sub-card-section > .timesheet-section-body,
.ss-page-content-card .ss-sub-card-section > .timeoff-body,
.ss-page-content-card .ss-sub-card-section > .admin-panel-body,
.ss-page-content-card .ss-sub-card-section > .pay-card-body,
.ss-page-content-card .ss-sub-card-section > .form-card-body,
.ss-page-content-card .ss-sub-card-section > .tip-card-body,
.ss-page-content-card .ss-sub-card-section > .contact-card-body,
.ss-page-content-card .ss-sub-card-section > .profile-card-body,
.ss-page-content-card .ss-sub-card-section > .location-panel-body,
.ss-page-content-card .ss-sub-card-section > .division-panel-body,
.ss-page-content-card .ss-sub-card-section > .report-card-body,
.ss-page-content-card .ss-sub-card-section > .staff-card-body,
.ss-page-content-card .ss-sub-card-section > .absence-card-body {
  min-width: 0;
}

.ss-page-content-card .ss-sub-card-section .ss-panel,
.ss-page-content-card .ss-sub-card-section .surface-card,
.ss-page-content-card .ss-sub-card-section .panel,
.ss-page-content-card .ss-sub-card-section .section-card,
.ss-page-content-card .ss-sub-card-section .page-section,
.ss-page-content-card .ss-sub-card-section .module-note,
.ss-page-content-card .ss-sub-card-section .notice-inline,
.ss-page-content-card .ss-sub-card-section .notice-line,
.ss-page-content-card .ss-sub-card-section .empty-state,
.ss-page-content-card .ss-sub-card-section .empty-box,
.ss-page-content-card .ss-sub-card-section .empty-line,
.ss-page-content-card .ss-sub-card-section .detail-card,
.ss-page-content-card .ss-sub-card-section .module-filter-card,
.ss-page-content-card .ss-sub-card-section .module-filter-card,
.ss-page-content-card .ss-sub-card-section .users-filter-panel,
.ss-page-content-card .ss-sub-card-section .filter-card,
.ss-page-content-card .ss-sub-card-section .filter-panel,
.ss-page-content-card .ss-sub-card-section .filter-section,
.ss-page-content-card .ss-sub-card-section .search-card,
.ss-page-content-card .ss-sub-card-section .search-panel,
.ss-page-content-card .ss-sub-card-section .toolbar-card,
.ss-page-content-card .ss-sub-card-section .admin-filter-panel,
.ss-page-content-card .ss-sub-card-section .admin-workbench-filter,
.ss-page-content-card .ss-sub-card-section .module-empty-card,
.ss-page-content-card .ss-sub-card-section .module-group-card,
.ss-page-content-card .ss-sub-card-section .module-record-card,
.ss-page-content-card .ss-sub-card-section .module-item-card,
.ss-page-content-card .ss-sub-card-section .day-card,
.ss-page-content-card .ss-sub-card-section .module-record-card,
.ss-page-content-card .ss-sub-card-section .week-block-row,
.ss-page-content-card .ss-sub-card-section .record-row,
.ss-page-content-card .ss-sub-card-section .tree-card,
.ss-page-content-card .ss-sub-card-section .lookup-card,
.ss-page-content-card .ss-sub-card-section .lookup-note,
.ss-page-content-card .ss-sub-card-section .contact-card,
.ss-page-content-card .ss-sub-card-section .list-card,
.ss-page-content-card .ss-sub-card-section .tip-card,
.ss-page-content-card .ss-sub-card-section .perm-card,
.ss-page-content-card .ss-sub-card-section .plan-summary-card,
.ss-page-content-card .ss-sub-card-section .pay-summary-card,
.ss-page-content-card .ss-sub-card-section .stat-tile,
.ss-page-content-card .ss-sub-card-section .quick-tile,
.ss-page-content-card .ss-sub-card-section .myorg-tile,
.ss-page-content-card .ss-sub-card-section .summary-card,
.ss-page-content-card .ss-sub-card-section .metric-card,
.ss-page-content-card .ss-sub-card-section .kpi-card,
.ss-page-content-card .ss-sub-card-section .card,
.ss-page-content-card .ss-sub-card-section .notice-card,
.ss-page-content-card .ss-sub-card-section .user-card,
.ss-page-content-card .ss-sub-card-section .department-card,
.ss-page-content-card .ss-sub-card-section .location-card,
.ss-page-content-card .ss-sub-card-section .division-card,
.ss-page-content-card .ss-sub-card-section .request-card,
.ss-page-content-card .ss-sub-card-section .record-card,
.ss-page-content-card .ss-sub-card-section .module-card,
.ss-page-content-card .ss-sub-card-section .module-item-card,
.ss-page-content-card .ss-sub-card-section .pay-card,
.ss-page-content-card .ss-sub-card-section .payslip-card {
  border: 1px solid var(--ss-line) !important;
  border-radius: var(--ss-radius) !important;
  background: #fff !important;
  box-shadow: none !important;
}

.ss-page-content-card .data-list,
.ss-page-content-card .myorg-list,
.ss-page-content-card .ss-list,
.ss-page-content-card .detail-list,
.ss-page-content-card .user-list,
.ss-page-content-card .perm-list,
.ss-page-content-card .day-list,
.ss-page-content-card .module-record-list,
.ss-page-content-card .module-group-list,
.ss-page-content-card .module-record-list,
.ss-page-content-card .module-item-list,
.ss-page-content-card .week-list,
.ss-page-content-card .record-list {
  display: grid;
  gap: 8px;
}

.ss-page-content-card .data-row,
.ss-page-content-card .detail-row,
.ss-page-content-card .ss-list-row,
.ss-page-content-card .list-row,
.ss-page-content-card .perm-row,
.ss-page-content-card .mode-row,
.ss-page-content-card .toggle-row,
.ss-page-content-card .stat-row,
.ss-page-content-card .summary-cell,
.ss-page-content-card .edit-summary-item,
.ss-page-content-card .module-record-card,
.ss-page-content-card .module-record-card,
.ss-page-content-card .record-row,
.ss-page-content-card .myorg-list > *,
.ss-page-content-card .data-list > *,
.ss-page-content-card .detail-list > *,
.ss-page-content-card .user-list > *,
.ss-page-content-card .perm-list > *,
.ss-page-content-card .day-list > *,
.ss-page-content-card .module-record-list > * {
  min-width: 0;
  border: 1px solid var(--ss-line) !important;
  border-radius: var(--ss-radius-sm) !important;
  padding: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.ss-page-content-card .quick-tile,
.ss-page-content-card .myorg-tile,
.ss-page-content-card .page-link {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 62px;
  border: 1px solid var(--ss-line) !important;
  border-radius: var(--ss-radius) !important;
  padding: 10px !important;
  background: #fff !important;
  color: inherit !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.ss-page-content-card .quick-tile:hover,
.ss-page-content-card .myorg-tile:hover,
.ss-page-content-card .page-link:hover {
  border-color: var(--ss-primary) !important;
  box-shadow: var(--ss-shadow) !important;
}

.ss-page-content-card .ss-sub-card-section table {
  background: #fff;
}

.ss-page-content-card .ss-sub-card-section > .ss-section__body,
.ss-page-content-card .ss-sub-card-section > .section-body,
.ss-page-content-card .ss-sub-card-section > .card-body,
.ss-page-content-card .ss-sub-card-section > .panel-body,
.ss-page-content-card .ss-sub-card-section > .myorg-card-body,
.ss-page-content-card .ss-sub-card-section > .timesheet-section-body,
.ss-page-content-card .ss-sub-card-section > .timeoff-body,
.ss-page-content-card .ss-sub-card-section > .admin-panel-body,
.ss-page-content-card .ss-sub-card-section > .pay-card-body,
.ss-page-content-card .ss-sub-card-section > .form-card-body,
.ss-page-content-card .ss-sub-card-section > .tip-card-body,
.ss-page-content-card .ss-sub-card-section > .contact-card-body,
.ss-page-content-card .ss-sub-card-section > .profile-card-body,
.ss-page-content-card .ss-sub-card-section > .location-panel-body,
.ss-page-content-card .ss-sub-card-section > .division-panel-body,
.ss-page-content-card .ss-sub-card-section > .report-card-body,
.ss-page-content-card .ss-sub-card-section > .staff-card-body,
.ss-page-content-card .ss-sub-card-section > .absence-card-body {
  margin-top: 0;
}

.ss-page-content-card .ss-copy,
.ss-page-content-card .ss-section-copy,
.ss-page-content-card .ss-section-head > p,
.ss-page-content-card .ss-section__head > p,
.ss-page-content-card .ss-section-head > div > p,
.ss-page-content-card .ss-section__head > div > p,
.ss-page-content-card .section-head > p,
.ss-page-content-card .section-head > div > p,
.ss-page-content-card .page-section-head > p,
.ss-page-content-card .page-section-head > div > p,
.ss-page-content-card .card-head > p,
.ss-page-content-card .card-head > div > p,
.ss-page-content-card .panel-head > p,
.ss-page-content-card .panel-head > div > p,
.ss-page-content-card .myorg-section-copy,
.ss-page-content-card .section-sub,
.ss-page-content-card .section-subtitle,
.ss-page-content-card .section-copy,
.ss-page-content-card .page-section-copy,
.ss-page-content-card .card-subtitle,
.ss-page-content-card .block-copy,
.ss-page-content-card .pay-card-copy,
.ss-page-content-card .pay-support-copy,
.ss-page-content-card .ss-tile__copy,
.ss-page-content-card .ss-action__desc,
.ss-page-content-card .ss-action-main span,
.ss-page-content-card .ss-metric__action,
.ss-page-content-card .kpi-copy,
.ss-page-content-card .myorg-kpi-copy,
.ss-page-content-card .field-help,
.ss-page-content-card .inline-help,
.ss-page-content-card .help-text,
.ss-page-content-card .auth-helper,
.ss-page-content-card .billing-help,
.ss-page-content-card .toggle-copy {
  display: none !important;
}

.ss-section-head,
.ss-section__head,
.admin-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.ss-section-head p,
.ss-section-copy,
.ss-section__head p,
.admin-panel-header p { margin: 0; }

.ss-section-head h2,
.ss-section__head h2,
.section-head h2,
.page-section-head h2,
.myorg-section-head h2,
.admin-panel-header h2,
.ss-section__title,
.section-title,
.page-section-title,
.myorg-section-title {
  margin: 0;
}

.ss-section-collapsed,
.ss-page-content-card > .ss-section-collapsed,
.ss-page-content-card > .ss-stack > .ss-section-collapsed,
.ss-page-content-card > .section-grid > .ss-section-collapsed,
.ss-page-content-card > .myorg-stack > .ss-section-collapsed,
.ss-page-content-card > .timeoff-stack > .ss-section-collapsed,
.ss-page-content-card > .timesheet-page > .ss-section-collapsed {
  padding-block: 8px !important;
}

.ss-section-collapsed > .ss-section-head,
.ss-section-collapsed > .ss-section__head,
.ss-section-collapsed > .section-head,
.ss-section-collapsed > .page-section-head,
.ss-section-collapsed > .card-head,
.ss-section-collapsed > .panel-head,
.ss-section-collapsed > .myorg-section-head,
.ss-section-collapsed > .module-group-head,
.ss-section-collapsed > .admin-panel-header,
.ss-section-collapsed > .pay-card-head,
.ss-section-collapsed > .form-card-head,
.ss-section-collapsed > .timesheet-section-head,
.ss-section-collapsed > .timeoff-head {
  margin-bottom: 0 !important;
  align-items: center;
}

.ss-section-collapsed > .ss-section-head p,
.ss-section-collapsed > .ss-section__head p,
.ss-section-collapsed > .section-head p,
.ss-section-collapsed > .page-section-head p,
.ss-section-collapsed > .myorg-section-head .myorg-section-copy,
.ss-section-collapsed > .section-head .section-sub,
.ss-section-collapsed > .section-head .section-subtitle,
.ss-section-collapsed > .page-section-head .page-section-copy {
  display: none !important;
}

.ss-collapsible-section > .ss-section__head,
.ss-collapsible-section > .section-head,
.ss-collapsible-section > .card-head,
.ss-collapsible-section > .panel-head,
.ss-collapsible-section > .myorg-section-head,
.ss-collapsible-section > .module-group-head,
.ss-collapsible-section > .admin-panel-header,
.ss-generated-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ss-section-toggle,
.ss-filter-toggle {
  flex: 0 0 auto;
  min-height: 30px;
  border-color: var(--ss-line);
  padding: 5px 9px;
  background: var(--ss-surface-2);
  color: var(--ss-muted);
  font-size: .82rem;
}

.ss-section-toggle:hover,
.ss-filter-toggle:hover {
  border-color: var(--ss-primary);
  background: var(--ss-primary-soft);
  color: var(--ss-primary);
}

.page-section-head + .module-group-list {
  margin-top: 8px;
}


/* ===== Source: app/utility/assets/css/storesync-unified/05-cards-metrics-lists.css ===== */
/*
 * Tiles, action cards, metrics, KPIs, notices and lists
 * Extracted from storesync-unified.css; keep imported order in the entrypoint.
 */

.ss-section-toggle i,
.ss-filter-toggle i {
  transition: transform .16s ease;
}

.ss-section-collapsed .ss-section-toggle i,
.ss-filter-collapsed .ss-filter-toggle-state i {
  transform: rotate(-90deg);
}

.ss-section__body-collapsed,
.ss-filter-collapsed .ss-filter-body {
  display: none !important;
}

.ss-filter-disclosure {
  display: grid;
  gap: 12px;
}

.ss-filter-toggle {
  width: 100%;
  justify-content: space-between;
}

.ss-filter-toggle-label,
.ss-filter-toggle-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ss-legacy-filter-title-hidden,
.ss-legacy-filter-copy-hidden {
  display: none !important;
}

.ss-tile-grid,
.ss-metric-grid,
.ss-stat-grid,
.quick-grid,
.myorg-tiles,
.detail-grid,
.info-grid,
.contact-grid,
.form-grid,
.myorg-form-grid,
.admin-dashboard-metrics,
.admin-triage-grid {
  display: grid;
  gap: 10px;
}

.ss-tile-grid,
.quick-grid,
.myorg-tiles,
.detail-grid,
.info-grid,
.contact-grid,
.form-grid,
.myorg-form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ss-metric-grid,
.ss-stat-grid,
.admin-dashboard-metrics,
.admin-triage-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.ss-tile,
.quick-tile,
.myorg-tile,
.page-link {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 64px;
  padding: 10px;
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.ss-tile:hover,
.quick-tile:hover,
.myorg-tile:hover,
.page-link:hover,
.ss-metric-card:hover {
  border-color: var(--ss-primary);
  color: inherit;
  box-shadow: var(--ss-shadow);
  transform: translateY(-1px);
}

.ss-tile__icon {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: var(--ss-radius);
  background: var(--ss-primary-soft);
  color: var(--ss-primary);
  font-size: .9rem;
}

.ss-tile-text,
.quick-tile-text,
.myorg-tile-text,
.ss-tile__title,
.ss-tile__copy,
.quick-tile-copy,
.myorg-tile-copy {
  min-width: 0;
}

.ss-tile__title,
.quick-tile-title,
.myorg-tile-title,
.page-link strong {
  display: block;
  color: var(--ss-ink);
  font-size: .92rem;
  font-weight: 820;
}

.ss-tile__copy,
.quick-tile-copy,
.myorg-tile-copy,
.page-link span {
  display: block;
  margin-top: 3px;
  color: var(--ss-muted);
  font-size: .82rem;
}

.ss-tile-arrow {
  color: var(--ss-primary);
}

.ss-action[aria-current="true"] {
  border-color: var(--ss-primary);
  background: var(--ss-primary-soft);
}

.ss-card-grid,
.ss-action-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.ss-report-block {
  display: grid;
  gap: 12px;
}

.ss-report-block > .ss-section-head {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.ss-report-block .ss-card-grid {
  margin: 0;
}

.ss-report-block .ss-card-grid .ss-panel {
  min-height: 74px;
  padding: 10px;
}

.ss-page-content-card .ss-card-grid,
.ss-page-content-card .ss-action-grid,
.ss-page-content-card .ss-tile-grid,
.ss-page-content-card .quick-grid,
.ss-page-content-card .myorg-tiles,
.ss-page-content-card .detail-grid,
.ss-page-content-card .info-grid,
.ss-page-content-card .contact-grid,
.ss-page-content-card .form-grid,
.ss-page-content-card .myorg-form-grid,
.ss-page-content-card .ss-metric-grid,
.ss-page-content-card .kpi-grid,
.ss-page-content-card .myorg-kpis {
  gap: 10px;
}

.ss-page-content-card .ss-card-grid > .ss-panel,
.ss-page-content-card .ss-card-grid > .ss-card,
.ss-page-content-card .ss-card-grid > .surface-card,
.ss-page-content-card .detail-grid > *,
.ss-page-content-card .info-grid > *,
.ss-page-content-card .contact-grid > *,
.ss-page-content-card .ss-sub-card-section .ss-card-grid > .ss-panel,
.ss-page-content-card .ss-sub-card-section .ss-card-grid > .ss-card,
.ss-page-content-card .ss-sub-card-section .ss-card-grid > .surface-card {
  display: grid;
  align-content: center;
  gap: 6px;
  min-height: 76px;
  padding: 11px !important;
  border: 1px solid var(--ss-line) !important;
  border-radius: var(--ss-radius) !important;
  background: #fff !important;
  box-shadow: none !important;
}

.ss-page-content-card .ss-card-grid > .ss-panel .ss-row-title,
.ss-page-content-card .ss-card-grid > .ss-card .ss-row-title,
.ss-page-content-card .ss-card-grid > .surface-card .ss-row-title {
  color: var(--ss-muted);
  font-size: .72rem;
  font-weight: 820;
  line-height: 1.2;
  text-transform: uppercase;
}

.ss-page-content-card .ss-card-grid > .ss-panel .ss-row-meta,
.ss-page-content-card .ss-card-grid > .ss-card .ss-row-meta,
.ss-page-content-card .ss-card-grid > .surface-card .ss-row-meta {
  color: var(--ss-ink);
  font-size: clamp(1rem, 1.7vw, 1.35rem);
  font-weight: 850;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.ss-page-content-card .ss-card-grid > a.ss-panel:hover,
.ss-page-content-card .ss-card-grid > a.ss-card:hover,
.ss-page-content-card .ss-card-grid > a.surface-card:hover {
  border-color: var(--ss-primary) !important;
  color: inherit;
  box-shadow: var(--ss-shadow) !important;
  transform: translateY(-1px);
}

.ss-action-card,
.ss-action {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 64px !important;
  border: 1px solid var(--ss-line) !important;
  border-radius: var(--ss-radius-sm) !important;
  padding: 10px !important;
  background: #fff !important;
  color: inherit !important;
  text-align: left !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.ss-action-card:hover,
.ss-action:hover:not(:disabled) {
  border-color: var(--ss-primary) !important;
  background: #fff !important;
  color: inherit !important;
  transform: none !important;
  box-shadow: none !important;
}

.ss-action-icon,
.ss-action__icon {
  display: inline-grid !important;
  width: 34px !important;
  height: 34px !important;
  place-items: center !important;
  border-radius: var(--ss-radius-sm) !important;
  background: var(--ss-primary-soft) !important;
  color: var(--ss-primary) !important;
  font-size: .9rem !important;
}

.ss-action-main,
.ss-action__copy { min-width: 0 !important; }
.ss-action-main strong,
.ss-action__title {
  display: block !important;
  color: var(--ss-ink) !important;
  font-size: .9rem !important;
  font-weight: 820 !important;
  line-height: 1.15 !important;
}
.ss-action__desc,
.ss-action-main span {
  display: block !important;
  margin-top: 3px !important;
  color: var(--ss-muted) !important;
  font-size: .82rem !important;
  font-weight: 680 !important;
  line-height: 1.2 !important;
}
.ss-action-arrow,
.ss-action__arrow { color: var(--ss-primary) !important; }
.ss-action[disabled] { opacity: .58; cursor: not-allowed; }

.ss-context__item {
  display: inline-grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  flex: 0 1 auto;
  gap: 6px;
  align-items: center;
  max-width: 100%;
  min-height: 34px;
  border: 1px solid var(--ss-line);
  border-radius: var(--ss-radius-sm);
  padding: 5px 7px;
  background: #fff;
}
.ss-context__icon {
  display: inline-grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 5px;
  background: var(--ss-primary-soft);
  color: var(--ss-primary);
  font-size: .76rem;
}
.ss-context__text { display: grid; min-width: 0; }
.ss-context__label {
  color: var(--ss-muted);
  font-size: .66rem;
  font-weight: 820;
  text-transform: uppercase;
  letter-spacing: 0;
}
.ss-context__value {
  overflow: hidden;
  color: var(--ss-ink);
  font-size: .8rem;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ss-context__arrow { color: var(--ss-soft); font-size: .76rem; }

.ss-context-fit--compact .ss-context__item {
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 5px;
  min-height: 32px;
  padding: 4px 6px;
}

.ss-context-fit--compact .ss-context__icon {
  width: 20px;
  height: 20px;
  font-size: .7rem;
}

.ss-context-fit--hide-arrows .ss-context__arrow,
.ss-context-fit--hide-department .ss-context__item--department,
.ss-context-fit--hide-organisation .ss-context__item--organisation {
  display: none;
}

.ss-metric-card {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 11px;
  color: inherit;
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}

.ss-metric__meta,
.ss-stat__label {
  color: var(--ss-muted);
  font-size: .72rem;
  font-weight: 820;
  text-transform: uppercase;
  letter-spacing: 0;
}

.ss-metric__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.ss-metric__main i {
  flex: 0 0 auto;
  color: var(--ss-primary);
  font-size: .95rem;
}
.ss-metric__main strong,
.ss-stat__value {
  color: var(--ss-ink);
  min-width: 0;
  font-size: 1.35rem;
  font-weight: 850;
  line-height: 1;
  overflow-wrap: anywhere;
}
.ss-metric__label,
.ss-stat__copy { color: var(--ss-muted); font-size: .84rem; }
.ss-metric__action { color: var(--ss-primary); font-weight: 780; font-size: .82rem; }

.ss-stat {
  padding: 14px;
}

.kpi-grid,
.myorg-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.kpi,
.myorg-kpi {
  min-width: 0;
  border: 1px solid var(--ss-line);
  border-radius: var(--ss-radius);
  padding: 11px;
  background: #fff;
}

.ss-page-content-card .ss-metric-card {
  align-content: center;
}

.ss-page-content-card .ss-metric__label {
  margin-top: 2px;
}

.ss-page-content-card .kpi,
.ss-page-content-card .myorg-kpi {
  display: grid;
  align-content: center;
}

.kpi-label,
.myorg-kpi-label {
  color: var(--ss-muted);
  font-size: .72rem;
  font-weight: 820;
  text-transform: uppercase;
}

.kpi-value,
.myorg-kpi-value {
  margin-top: 4px;
  color: var(--ss-ink);
  font-size: 1.25rem;
  font-weight: 850;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.kpi-copy,
.myorg-kpi-copy {
  margin-top: 4px;
  color: var(--ss-muted);
  font-size: .82rem;
}

.ss-alert-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.ss-alert-strip span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(180, 83, 9, .22);
  border-radius: 999px;
  padding: 6px 10px;
  background: #fff6e7;
  color: var(--ss-warning);
  font-weight: 760;
}

.ss-empty,
.ss-notice {
  padding: 18px;
}
.ss-empty__title,
.ss-notice h2 {
  display: flex;
  align-items: center;
  gap: 9px;
}
.ss-empty__copy,
.ss-notice p { margin-bottom: 0; }
.ss-notice.muted { background: var(--ss-surface-2); }

.ss-list,
.list,
.activity-list { display: grid; gap: 6px; }

.ss-list-row,
.list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--ss-line);
  border-radius: var(--ss-radius-sm);
  padding: 12px;
  background: #fff;
}
.ss-list-row span { display: block; color: var(--ss-muted); font-size: .9rem; }
.ss-list-row em { color: var(--ss-muted); font-style: normal; font-weight: 760; }


/* ===== Source: app/utility/assets/css/storesync-unified/06-forms-controls.css ===== */
/*
 * Forms, buttons and tables
 * Imported by ../storesync-unified.css.
 */

.ss-form-grid,
.admin-form-grid,
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

label,
.admin-field label {
  display: grid;
  gap: 6px;
  color: #344039;
  font-size: .88rem;
  font-weight: 780;
}

input,
select,
textarea,
.admin-input,
.admin-select {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--ss-line-strong);
  border-radius: var(--ss-radius-sm);
  padding: 9px 10px;
  background: #fff;
  color: var(--ss-ink);
  outline: none;
}
textarea { resize: vertical; }
input:focus,
select:focus,
textarea:focus,
.admin-input:focus,
.admin-select:focus {
  border-color: var(--ss-primary);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, .12);
}

input[type="checkbox"],
input[type="radio"] {
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  padding: 0;
  accent-color: var(--ss-primary);
}

.ss-form-span,
.form-span { grid-column: 1 / -1; }

.ss-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.ss-field.full {
  grid-column: 1 / -1;
}

.ss-form-actions,
.admin-actions,
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.ss-btn,
.primary-button,
.secondary-button,
.myorg-btn,
.admin-button,
.admin-link-button,
button,
input[type="submit"] {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--ss-line-strong);
  border-radius: var(--ss-radius-sm);
  padding: 9px 13px;
  background: #fff;
  color: var(--ss-ink);
  font-weight: 780;
  cursor: pointer;
}

.ss-btn.primary,
.primary-button,
.admin-button,
.myorg-btn:not(.secondary),
input[type="submit"] {
  border-color: var(--ss-primary);
  background: var(--ss-primary);
  color: #fff;
}

.ss-btn:hover,
.primary-button:hover,
.secondary-button:hover,
.myorg-btn:hover,
.admin-button:hover,
.admin-link-button:hover {
  border-color: var(--ss-primary);
  color: var(--ss-primary);
}

.ss-btn.primary:hover,
.primary-button:hover,
.admin-button:hover,
.myorg-btn:not(.secondary):hover,
input[type="submit"]:hover {
  background: var(--ss-primary-dark);
  color: #fff;
}

table {
  width: 100%;
  border-collapse: collapse;
}

.admin-table-wrap,
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--ss-line);
  border-radius: var(--ss-radius);
  background: #fff;
}

.admin-table th,
.admin-table td,
.ss-table th,
.ss-table td {
  border-bottom: 1px solid var(--ss-line);
  padding: 11px 12px;
  text-align: left;
  vertical-align: top;
}
.admin-table thead th,
.ss-table thead th {
  background: var(--ss-surface-2);
  color: var(--ss-ink);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: 0;
}
.admin-table tr:last-child td,
.ss-table tr:last-child td { border-bottom: 0; }


/* ===== Source: app/utility/assets/css/storesync-unified/07-shared.css ===== */
/*
 * Shared app-wide components
 * Imported by ../storesync-unified.css.
 */

footer {
  border-top: 1px solid var(--ss-line);
  background: #fff;
}
.footer-copy {
  width: min(calc(100% - 28px), var(--ss-shell));
  margin: 0 auto;
  padding: 18px 0;
  color: var(--ss-muted);
  font-size: .86rem;
  text-align: center;
}


/* ===== Source: app/utility/assets/css/storesync-unified/08-security.css ===== */
/*
 * Security confirmation pages
 * Imported by ../storesync-unified.css.
 */

.security-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
}
.security-card {
  width: min(100%, 520px);
  border: 1px solid var(--ss-line);
  border-radius: var(--ss-radius);
  padding: 22px;
  background: #fff;
  box-shadow: var(--ss-shadow);
}
.security-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.security-eyebrow {
  margin: 0 0 6px;
  color: var(--ss-muted);
  font-size: .78rem;
  font-weight: 820;
  text-transform: uppercase;
  letter-spacing: 0;
}
.security-title { margin: 0; font-size: 1.35rem; }
.security-copy { margin: 8px 0 0; color: var(--ss-muted); font-weight: 640; }
.security-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--ss-line);
  border-radius: var(--ss-radius);
  background: var(--ss-primary-soft);
  color: var(--ss-primary);
}
.security-error {
  margin: 0 0 14px;
  border: 1px solid rgba(180, 35, 24, .24);
  border-radius: var(--ss-radius-sm);
  padding: 10px 12px;
  background: #fff0ee;
  color: var(--ss-danger);
  font-weight: 760;
}
.security-form { display: grid; gap: 12px; }
.security-label { color: var(--ss-ink); font-size: .92rem; font-weight: 780; }
.security-input {
  min-height: 42px;
  border: 1px solid var(--ss-line-strong);
  border-radius: var(--ss-radius-sm);
  padding: 0 12px;
  background: #fff;
}
.security-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.security-btn {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--ss-line-strong);
  border-radius: var(--ss-radius-sm);
  padding: 0 14px;
  background: #fff;
  color: var(--ss-ink);
  font-weight: 780;
}
.security-btn:hover { border-color: var(--ss-primary); color: var(--ss-primary); }
.security-btn.primary { border-color: var(--ss-primary); background: var(--ss-primary); color: #fff; }
.security-btn.primary:hover { border-color: var(--ss-primary-dark); background: var(--ss-primary-dark); color: #fff; }


/* ===== Source: app/utility/assets/css/storesync-unified/10-auth.css ===== */
/*
 * Authentication and onboarding pages
 * Imported by ../storesync-unified.css.
 */

.auth-page,
.admin-auth-page {
  min-height: 100vh;
  background: var(--ss-bg);
}

.admin-auth-page {
  display: grid;
  place-items: start center;
  padding: 48px 16px;
}

.auth-shell {
  width: 90%;
  min-width: 280px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 0 44px;
}

.auth-shell.wide { max-width: 1320px; }

.auth-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 28px;
}

.auth-brand,
.auth-site-link,
.auth-back-link,
.auth-inline-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ss-muted);
  font-weight: 780;
}

.auth-brand-logo { display: block; height: 32px; width: auto; max-width: 180px; }

.auth-layout {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.auth-copy,
.auth-panel,
.auth-choice-card,
.auth-card,
.auth-checkout-card,
.admin-auth-card {
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--ss-line);
  border-radius: var(--ss-radius);
  background: #fff;
}

.auth-panel{
  min-width: 275px;
  width: 90%;
  border: 1px solid var(--ss-line);
  border-radius: var(--ss-radius);
  background: #fff;
  margin: auto;
  max-width: 620px;
}

.auth-copy,
.auth-panel,
.auth-checkout-card,
.admin-auth-card { padding: clamp(18px, 3vw, 28px); box-shadow: var(--ss-shadow); }

.auth-copy {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.auth-head h1,
.auth-panel-titlebar h1 {
  margin: 0;
  color: var(--ss-ink);
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  line-height: 1.08;
  letter-spacing: 0;
}

.auth-stack,
.auth-form,
.auth-section,
.auth-panel-body,
.auth-list,
.auth-addon-rows,
.auth-summary-list {
  display: grid;
  gap: 14px;
}

.auth-section {
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--ss-line);
}

.auth-section:first-child,
.auth-step-pane > .auth-section:first-child {
  padding-top: 0;
  border-top: 0;
}

.auth-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.auth-grid,
.auth-plan-grid,
.auth-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.auth-field.full,
.auth-grid .full { grid-column: 1 / -1; }

.auth-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.auth-label,
.billing-label,
.myorg-label {
  display: block;
  margin-bottom: 6px;
  color: #344039;
  font-size: .88rem;
  font-weight: 780;
}

.auth-label-note,
.auth-helper,
.billing-help,
.billing-lock-note,
.myorg-section-copy {
  color: var(--ss-muted);
  font-size: .86rem;
}

.auth-input,
.myorg-input,
.myorg-select,
.myorg-textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--ss-line-strong);
  border-radius: var(--ss-radius-sm);
  padding: 9px 10px;
  background: #fff;
  color: var(--ss-ink);
  outline: none;
}

.auth-input:focus,
.myorg-input:focus,
.myorg-select:focus,
.myorg-textarea:focus {
  border-color: var(--ss-primary);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, .12);
}

.auth-actions,
.auth-actions-inline,
.auth-row,
.auth-context-row,
.auth-select-meta,
.auth-top-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.auth-actions.end { justify-content: flex-end; }
.auth-actions.between { justify-content: space-between; }
.auth-btn-dark.full-width,
.auth-btn-secondary.full-width { width: 100%; }

.auth-btn-dark,
.auth-btn-secondary {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--ss-primary);
  border-radius: var(--ss-radius-sm);
  padding: 9px 14px;
  background: var(--ss-primary);
  color: #fff;
  font-weight: 820;
  cursor: pointer;
}

.auth-btn-secondary {
  border-color: var(--ss-line-strong);
  background: #fff;
  color: var(--ss-ink);
}

.auth-alert,
.myorg-note,
.admin-alert,
.notice,
.info-box {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid var(--ss-line);
  border-radius: var(--ss-radius);
  padding: 12px;
  background: #fff;
  color: var(--ss-ink);
  font-weight: 720;
}

.auth-alert {
  margin-bottom: 10px;
}

.auth-alert i {
  margin-top: 3px;
  margin-right: -4px;
}

.auth-alert.success,
.myorg-note.success,
.admin-alert.is-success { border-color: rgba(8, 116, 67, .22); background: #e7f5ee; color: var(--ss-success); }
.auth-alert.warn,
.myorg-note.warn { border-color: rgba(180, 83, 9, .24); background: #fff6e7; color: var(--ss-warning); }
.auth-alert.error,
.myorg-note.error,
.admin-alert.is-error { border-color: rgba(180, 35, 24, .22); background: #fff0ee; color: var(--ss-danger); }

.auth-pill,
.auth-badge,
.billing-invoices-pill {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--ss-line);
  border-radius: 999px;
  padding: 5px 9px;
  background: #fff;
  color: var(--ss-muted);
  font-size: .82rem;
  font-weight: 780;
}

.auth-choice-card,
.auth-select-card,
.auth-plan-card-main,
.auth-inline-card,
.billing-invoice-row {
  display: grid;
  gap: 10px;
  border: 1px solid var(--ss-line);
  border-radius: var(--ss-radius);
  padding: 14px;
  background: #fff;
}

.auth-choice-card:hover,
.auth-select-card:hover,
.auth-plan-card-main:hover {
  border-color: var(--ss-primary);
  box-shadow: var(--ss-shadow);
  color: inherit;
}

.auth-choice-title,
.auth-section-title,
.auth-select-title,
.auth-plan-name {
  color: var(--ss-ink);
  font-weight: 840;
}

.auth-section-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 1rem;
  line-height: 1.25;
}

.auth-foot { color: var(--ss-muted); font-weight: 680; }
.auth-foot a { color: var(--ss-primary); font-weight: 820; }

.auth-topbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.auth-choice-page {
  display: grid;
  gap: 14px;
  max-width: 720px;
}

.auth-choice-page .auth-copy {
  width: 90%;
  max-width: 620px;
  margin: 0 auto;
  padding: 0;
}

.auth-choice-grid {
  width: 90%;
  max-width: 620px;
  margin: 0 auto;
}

.auth-panel.auth-choice-grid {
  width: 90%;
  max-width: 620px;
  padding: 14px;
}

.auth-choice-card {
  min-height: 108px;
  text-decoration: none;
}

.auth-choice-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--ss-primary);
  font-size: .9rem;
  font-weight: 840;
}

.signup-org-flow .auth-panel {
  width: 90%;
  max-width: 1180px;
  padding: 0;
  overflow: hidden;
  box-shadow: none;
}

.signup-org-flow .auth-panel-top,
.signup-org-flow .auth-panel-body {
  padding: 18px;
}

.signup-org-flow .auth-panel-top {
  display: grid;
  gap: 14px;
  border-bottom: 1px solid var(--ss-line);
  background: #fff;
}

.auth-progress {
  display: grid;
  gap: 7px;
}

.auth-progress-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--ss-muted);
  font-size: .82rem;
  font-weight: 820;
}

.auth-progress-bar {
  overflow: hidden;
  height: 7px;
  border: 1px solid var(--ss-line);
  border-radius: 999px;
  background: #f4f7f5;
}

.auth-progress-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--ss-primary);
  transition: width .18s ease;
}

.auth-step-tabs {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.auth-step-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 38px;
  border: 1px solid var(--ss-line);
  border-radius: var(--ss-radius-sm);
  padding: 7px 8px;
  background: #fff;
  color: var(--ss-muted);
  font: inherit;
  font-size: .82rem;
  font-weight: 820;
  cursor: pointer;
}

.auth-step-tab.is-active {
  border-color: rgba(15, 118, 110, .28);
  background: #f1fbf7;
  color: var(--ss-primary);
}

.auth-step-tab.is-locked {
  cursor: default;
  opacity: .62;
}

.auth-step-num {
  display: inline-grid;
  place-items: center;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: .74rem;
}

.auth-step-title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-step-pane { display: none; }
.auth-step-pane.is-active { display: block; }

.auth-autocomplete {
  position: relative;
}

.auth-suggest {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  display: none;
  overflow: auto;
  max-height: 220px;
  border: 1px solid var(--ss-line-strong);
  border-radius: var(--ss-radius-sm);
  background: #fff;
  box-shadow: var(--ss-shadow);
}

.auth-suggest:not(:empty) { display: grid; }

.auth-suggest-item {
  display: grid;
  gap: 2px;
  width: 100%;
  border: 0;
  border-top: 1px solid var(--ss-line);
  padding: 9px 10px;
  background: #fff;
  color: var(--ss-ink);
  text-align: left;
  cursor: pointer;
}

.auth-suggest-item:first-child { border-top: 0; }
.auth-suggest-item:hover,
.auth-suggest-item.is-active { background: #f7faf8; }

.auth-suggest-title {
  font-size: .9rem;
  font-weight: 840;
}

.auth-suggest-sub {
  color: var(--ss-muted);
  font-size: .78rem;
  font-weight: 680;
}

.auth-legal-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--ss-line);
  border-radius: var(--ss-radius-sm);
  padding: 12px;
  background: #fafbfa;
  color: var(--ss-muted);
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.4;
}

.auth-legal-check input {
  flex: 0 0 auto;
  margin-top: 3px;
}

.auth-password-meter {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.auth-password-meter-track {
  overflow: hidden;
  height: 6px;
  border-radius: 999px;
  background: #edf2ef;
}

.auth-password-meter-track span {
  display: block;
  width: calc(var(--auth-password-score, 0) * 20%);
  height: 100%;
  border-radius: inherit;
  background: var(--ss-primary);
}

.auth-password-meter-label,
.auth-username-status,
.auth-field-status {
  color: var(--ss-muted);
  font-size: .8rem;
  font-weight: 720;
}

.auth-username-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.auth-username-suggestions button {
  border: 1px solid var(--ss-line);
  border-radius: 999px;
  padding: 5px 8px;
  background: #fff;
  color: var(--ss-primary);
  font-size: .8rem;
  font-weight: 820;
  cursor: pointer;
}

.auth-plan-card {
  display: block;
  cursor: pointer;
}

.auth-plan-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.auth-plan-card-main {
  min-height: 150px;
}

.auth-plan-card.is-selected .auth-plan-card-main {
  border-color: rgba(15, 118, 110, .36);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, .10);
}

.auth-plan-topline,
.auth-addon-heading,
.auth-addon-row,
.auth-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.auth-plan-selected {
  display: none;
  border: 1px solid rgba(15, 118, 110, .24);
  border-radius: 999px;
  padding: 4px 8px;
  background: #f1fbf7;
  color: var(--ss-primary);
  font-size: .75rem;
  font-weight: 840;
}

.auth-plan-card.is-selected .auth-plan-selected { display: inline-flex; }

.auth-plan-price {
  display: flex;
  align-items: baseline;
  gap: 5px;
  color: var(--ss-ink);
}

.auth-plan-price strong {
  font-size: 1.35rem;
  line-height: 1;
}

.auth-plan-limits,
.auth-plan-trial,
.auth-addon-sub,
.auth-addon-meta,
.auth-auto-fallback {
  color: var(--ss-muted);
  font-size: .84rem;
  font-weight: 700;
}

.auth-addon-groups {
  display: grid;
  gap: 10px;
}

.auth-addon-group {
  display: grid;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--ss-line);
}

.auth-addon-group:first-child {
  padding-top: 0;
  border-top: 0;
}

.auth-addon-heading {
  color: var(--ss-ink);
  font-weight: 840;
}

.auth-addon-row {
  border: 1px solid var(--ss-line);
  border-radius: var(--ss-radius-sm);
  padding: 10px;
  background: #fff;
}

.auth-addon-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.auth-addon-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.auth-addon-controls button {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--ss-line-strong);
  border-radius: var(--ss-radius-sm);
  background: #fff;
  color: var(--ss-ink);
  font-weight: 840;
  cursor: pointer;
}

.auth-addon-controls input {
  width: 56px;
  min-height: 32px;
  text-align: center;
}

.auth-addon-row.is-disabled {
  opacity: .55;
}

.auth-addon-unavailable {
  border: 1px solid rgba(180, 83, 9, .22);
  border-radius: var(--ss-radius-sm);
  padding: 10px;
  background: #fff8eb;
  color: var(--ss-warning);
  font-size: .86rem;
  font-weight: 760;
}

.auth-inline-card,
.auth-summary-list {
  border-radius: var(--ss-radius-sm);
  box-shadow: none;
}

.auth-inline-card {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.auth-inline-card-icon {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(15, 118, 110, .18);
  border-radius: var(--ss-radius-sm);
  background: #f1fbf7;
  color: var(--ss-primary);
}

.auth-inline-card-title {
  color: var(--ss-ink);
  font-weight: 840;
}

.auth-inline-card-copy,
.auth-account-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--ss-muted);
  font-size: .84rem;
  font-weight: 700;
}

.auth-summary-list {
  overflow: hidden;
  border: 1px solid var(--ss-line);
}

.auth-summary-row {
  padding: 11px 12px;
  border-top: 1px solid var(--ss-line);
}

.auth-summary-row:first-child { border-top: 0; }
.auth-summary-row span { color: var(--ss-muted); font-weight: 720; }
.auth-summary-row strong { color: var(--ss-ink); text-align: right; }

.auth-auto-checkout {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ss-muted);
  font-weight: 760;
}

.auth-auto-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--ss-line-strong);
  border-top-color: var(--ss-primary);
  border-radius: 999px;
  animation: authSpin .8s linear infinite;
}

@keyframes authSpin {
  to { transform: rotate(360deg); }
}

.auth-checkout-secondary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.auth-btn-secondary.danger {
  border-color: rgba(180, 35, 24, .24);
  color: var(--ss-danger);
}

.auth-btn-secondary.danger:hover,
.auth-btn-secondary.danger:focus-visible {
  background: #fff0ee;
}

@media (max-width: 900px) {
  .auth-step-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .auth-plan-grid,
  .auth-choice-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .auth-shell,
  .auth-panel,
  .signup-org-flow .auth-panel,
  .auth-choice-page .auth-copy,
  .auth-choice-grid {
    width: 100%;
  }

  .auth-shell {
    padding: 14px 12px 36px;
  }

  .auth-topbar,
  .auth-topbar-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .auth-site-link,
  .auth-back-link,
  .auth-inline-link,
  .auth-btn-dark,
  .auth-btn-secondary {
    width: 100%;
    justify-content: center;
  }

  .auth-grid {
    grid-template-columns: 1fr;
  }

  .signup-org-flow .auth-panel-top,
  .signup-org-flow .auth-panel-body {
    padding: 14px;
  }

  .auth-step-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .auth-addon-row,
  .auth-summary-row {
    align-items: stretch;
    flex-direction: column;
  }

  .auth-addon-controls {
    width: 100%;
  }

  .auth-addon-controls input {
    flex: 1 1 auto;
  }

  .auth-summary-row strong {
    text-align: left;
  }
}

/* Larger auth selection pages: organisation, location and division switching. */
.auth-selection-page .auth-selection-shell {
  width: min(96vw, 1320px);
  max-width: 1320px;
}

.auth-selection-layout {
  display: grid;
  width: 100%;
  max-width: none;
  margin: 0 auto;
}

.auth-selection-panel {
  width: 100%;
  max-width: none;
  padding: clamp(20px, 2.5vw, 32px);
}

.auth-selection-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--ss-line);
}

.auth-selection-head h1 {
  margin: 0;
  color: var(--ss-ink);
  font-size: clamp(1.45rem, 2.6vw, 2.05rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.auth-selection-head p {
  max-width: 72ch;
  margin: 6px 0 0;
  color: var(--ss-muted);
  font-size: .92rem;
  font-weight: 680;
  line-height: 1.42;
}

.auth-selection-kicker {
  margin-bottom: 4px;
  color: var(--ss-muted);
  font-size: .72rem;
  font-weight: 840;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.auth-selection-icon,
.auth-select-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(15, 118, 110, .16);
  background: #f1fbf7;
  color: var(--ss-primary);
}

.auth-selection-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--ss-radius-sm);
  font-size: .95rem;
}

.auth-selection-list {
  display: grid;
  gap: 8px;
}

.auth-selection-card {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 12px;
  overflow: hidden;
  border-radius: var(--ss-radius-sm);
  background: #fff;
  box-shadow: none;
}

.auth-selection-card:hover {
  border-color: var(--ss-primary);
  box-shadow: none;
}

.auth-selection-card-static:hover {
  border-color: var(--ss-line);
  box-shadow: none;
}

.auth-selection-card .auth-select-icon {
  display: none;
}

.auth-select-main,
.auth-select-stack {
  display: grid;
  min-width: 0;
}

.auth-selection-card .auth-select-main {
  align-content: center;
  gap: 5px;
  padding: 0;
}

.auth-select-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.auth-select-title {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ss-ink);
  font-size: 1rem;
  font-weight: 840;
  line-height: 1.25;
}

.auth-select-copy {
  color: var(--ss-muted);
  font-size: .86rem;
  font-weight: 680;
  line-height: 1.35;
}

.auth-selection-card .auth-select-meta {
  gap: 8px;
}

.auth-selection-action {
  align-self: center;
  min-width: 106px;
  min-height: 38px;
  border: 1px solid var(--ss-ink);
  border-radius: var(--ss-radius-sm);
  padding: 8px 14px;
  background: var(--ss-ink);
  color: #fff;
  white-space: nowrap;
}

.auth-selection-card:hover .auth-selection-action {
  border-color: var(--ss-primary);
  background: var(--ss-primary);
}

.auth-selection-card > .auth-badge {
  align-self: center;
  justify-self: end;
}

.auth-selection-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.auth-selection-actions > form,
.auth-selection-actions > a,
.auth-selection-actions > button {
  flex: 0 1 auto;
}

.auth-selection-actions .auth-btn-dark,
.auth-selection-actions .auth-btn-secondary {
  min-height: 40px;
}

.auth-selection-context {
  margin-bottom: 14px;
}

.auth-selection-empty {
  border: 1px dashed var(--ss-line-strong);
  border-radius: var(--ss-radius-sm);
  padding: 16px;
  background: #fafbfa;
  color: var(--ss-muted);
  font-weight: 760;
}

.auth-badge.good {
  border-color: rgba(8, 116, 67, .2);
  background: #f0faf5;
  color: var(--ss-success);
}

.auth-badge.warn {
  border-color: rgba(180, 83, 9, .22);
  background: #fff8eb;
  color: var(--ss-warning);
}


/* Scoped hover overrides for the wide auth selection pages. */
.auth-selection-page .auth-selection-card:hover {
  border-color: var(--ss-line-strong);
  background: #fff;
}

.auth-selection-page .auth-selection-card:focus-within {
  border-color: var(--ss-primary);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, .10);
}

.auth-selection-page .auth-btn-dark,
.auth-selection-page .auth-btn-secondary,
.auth-selection-page .auth-selection-action,
.auth-selection-page .auth-site-link,
.auth-selection-page .auth-back-link {
  text-decoration: none;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease;
}

.auth-selection-page .auth-btn-dark:hover,
.auth-selection-page .auth-btn-dark:focus-visible {
  border-color: var(--ss-primary-dark) !important;
  background: var(--ss-primary-dark) !important;
  color: #fff !important;
  text-decoration: none;
}

.auth-selection-page .auth-btn-secondary:hover,
.auth-selection-page .auth-btn-secondary:focus-visible,
.auth-selection-page .auth-site-link:hover,
.auth-selection-page .auth-site-link:focus-visible,
.auth-selection-page .auth-back-link:hover,
.auth-selection-page .auth-back-link:focus-visible {
  border-color: var(--ss-line-strong) !important;
  background: #f7faf8 !important;
  color: var(--ss-ink) !important;
  text-decoration: none;
}

.auth-selection-page .auth-selection-action,
.auth-selection-page .auth-selection-action:visited {
  border-color: var(--ss-ink) !important;
  background: var(--ss-ink) !important;
  color: #fff !important;
}

.auth-selection-page .auth-selection-card:hover .auth-selection-action,
.auth-selection-page .auth-selection-action:hover,
.auth-selection-page .auth-selection-action:focus-visible {
  border-color: var(--ss-ink) !important;
  background: var(--ss-ink) !important;
  color: #fff !important;
  box-shadow: 0 0 0 3px rgba(23, 32, 27, .10);
  text-decoration: none;
}

.auth-badge.dark {
  border-color: var(--ss-ink);
  background: var(--ss-ink);
  color: #fff;
}

@media (max-width: 760px) {
  .auth-selection-page .auth-topbar {
    gap: 14px;
    align-items: flex-start;
  }

  .auth-selection-page .auth-top-actions {
    justify-content: flex-end;
  }

  .auth-selection-panel {
    padding: 18px;
  }

  .auth-selection-head {
    gap: 10px;
    padding-bottom: 14px;
  }

  .auth-selection-icon {
    width: 36px;
    height: 36px;
  }

  .auth-selection-card {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    padding: 12px;
  }

  .auth-selection-card .auth-select-main {
    padding: 0;
  }

  .auth-selection-card .auth-selection-action,
  .auth-selection-card > .auth-badge {
    width: 100%;
  }

  .auth-selection-action {
    min-height: 44px;
  }

  .auth-selection-card > .auth-badge {
    justify-content: center;
  }

  .auth-selection-actions > form,
  .auth-selection-actions > a,
  .auth-selection-actions > button,
  .auth-selection-actions .auth-btn-dark,
  .auth-selection-actions .auth-btn-secondary {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .auth-selection-page .auth-selection-shell {
    width: 100%;
  }

  .auth-selection-page .auth-topbar {
    flex-direction: column;
    align-items: stretch;
  }

  .auth-selection-page .auth-top-actions,
  .auth-selection-page .auth-top-actions form,
  .auth-selection-page .auth-top-actions .auth-btn-secondary,
  .auth-selection-page .auth-top-actions .auth-site-link,
  .auth-selection-page .auth-back-link {
    width: 100%;
  }

  .auth-selection-page .auth-top-actions .auth-btn-secondary,
  .auth-selection-page .auth-top-actions .auth-site-link,
  .auth-selection-page .auth-back-link {
    justify-content: center;
  }

  .auth-selection-head {
    align-items: flex-start;
  }
}

/* Join confirmation page polish. Kept in the loaded auth stylesheet so the confirm summary never renders as loose text. */
.auth-join-page .auth-join-confirm-panel {
  width: min(100%, 640px);
  max-width: 640px;
}

.auth-join-confirm-panel .auth-panel-body {
  gap: 16px;
}

.auth-join-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ss-line);
}

.auth-join-head h1 {
  margin: 0;
  color: var(--ss-ink);
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  line-height: 1.1;
  letter-spacing: -0.035em;
}

.auth-join-kicker {
  margin-bottom: 4px;
  color: var(--ss-muted);
  font-size: .72rem;
  font-weight: 840;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.auth-join-head-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(15, 118, 110, .16);
  border-radius: var(--ss-radius-sm);
  background: #f1fbf7;
  color: var(--ss-primary);
  font-size: .95rem;
}

.join-confirm-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
  border: 1px solid var(--ss-line);
  border-radius: var(--ss-radius-sm);
  padding: 14px;
  background: #fff;
}

.join-confirm-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.join-confirm-label {
  color: var(--ss-muted);
  font-size: .76rem;
  font-weight: 820;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.join-confirm-title {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ss-ink);
  font-size: 1.08rem;
  font-weight: 880;
  line-height: 1.22;
}

.join-confirm-status,
.join-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  border: 1px solid rgba(180, 83, 9, .22);
  border-radius: 999px;
  padding: 5px 10px;
  background: #fff8eb;
  color: var(--ss-warning);
  font-size: .8rem;
  font-weight: 820;
  line-height: 1.1;
  white-space: nowrap;
}

.join-detail-list {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--ss-line);
  border-radius: var(--ss-radius-sm);
  background: #fff;
}

.join-detail-row {
  display: grid;
  grid-template-columns: minmax(120px, .45fr) minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 12px 14px;
  border-top: 1px solid var(--ss-line);
}

.join-detail-row:first-child {
  border-top: 0;
}

.join-detail-row span {
  color: var(--ss-muted);
  font-size: .84rem;
  font-weight: 760;
  line-height: 1.35;
}

.join-detail-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ss-ink);
  font-size: .9rem;
  font-weight: 840;
  line-height: 1.35;
  text-align: right;
}

.auth-join-confirm-panel .auth-join-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  width: 100%;
}

.auth-join-confirm-panel .auth-join-actions .auth-btn-dark,
.auth-join-confirm-panel .auth-join-actions .auth-btn-secondary {
  width: 100%;
  min-height: 44px;
  text-decoration: none;
}

.auth-join-confirm-panel .auth-join-actions .auth-btn-secondary {
  min-width: 120px;
}

.auth-join-confirm-panel .auth-join-actions .auth-btn-dark:hover,
.auth-join-confirm-panel .auth-join-actions .auth-btn-dark:focus-visible {
  border-color: var(--ss-primary-dark);
  background: var(--ss-primary-dark);
  color: #fff;
}

.auth-join-confirm-panel .auth-join-actions .auth-btn-secondary:hover,
.auth-join-confirm-panel .auth-join-actions .auth-btn-secondary:focus-visible {
  border-color: var(--ss-line-strong);
  background: #f7faf8;
  color: var(--ss-ink);
}

@media (max-width: 640px) {
  .auth-join-confirm-panel .auth-join-actions,
  .join-confirm-card,
  .join-detail-row {
    grid-template-columns: 1fr;
  }

  .join-detail-row {
    gap: 5px;
  }

  .join-detail-row strong {
    text-align: left;
  }

  .join-confirm-status {
    width: 100%;
  }

  .auth-join-head {
    align-items: flex-start;
  }
}

/* Signup refinements */
.auth-panel > h1,
.auth-signup-choice-panel > h1,
.auth-account-create-panel > h1 {
  margin: 0 0 16px;
  color: var(--ss-ink);
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  line-height: 1.08;
}

.auth-signup-choice-panel {
  display: grid;
  gap: 16px;
}

.auth-choice-list {
  display: grid;
  gap: 10px;
}

.auth-signup-choice-panel .auth-choice-card {
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}

.auth-choice-copy {
  margin-top: 3px;
  color: var(--ss-muted);
  font-size: .86rem;
  font-weight: 680;
  line-height: 1.35;
}

.auth-username-status {
  margin-top: 6px;
  line-height: 1.25;
}

.auth-username-status.is-ok { color: var(--ss-success); }
.auth-username-status.is-bad { color: var(--ss-danger); }
.auth-username-status.is-muted { color: var(--ss-muted); }

.auth-username-suggestions {
  align-items: center;
  margin-top: 6px;
}

.auth-username-suggestions-label {
  color: var(--ss-muted);
  font-size: .78rem;
  font-weight: 760;
}

.auth-username-suggestions button {
  min-height: 28px;
  padding: 4px 8px;
  border-radius: var(--ss-radius-sm);
}

.auth-plan-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.auth-plan-card-main {
  min-height: 0;
  height: 100%;
  gap: 12px;
}

.auth-plan-limits {
  display: grid;
  gap: 6px;
}

.auth-plan-limits span {
  display: inline-flex;
  align-items: flex-start;
  gap: 7px;
  line-height: 1.25;
}

.auth-plan-limits i {
  margin-top: 2px;
  color: var(--ss-primary);
  font-size: .75rem;
}

.auth-conditional[hidden] {
  display: none !important;
}

.auth-qty-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.auth-qty-control button {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--ss-line-strong);
  border-radius: var(--ss-radius-sm);
  background: #fff;
  color: var(--ss-ink);
  font-weight: 840;
  cursor: pointer;
}

.auth-qty-control input {
  width: 58px;
  min-height: 32px;
  text-align: center;
}

@media (max-width: 980px) {
  .auth-plan-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .auth-signup-choice-panel .auth-choice-card {
    grid-template-columns: 1fr;
  }
}

/* Signup username checks: username stays half-width alongside email; feedback spans the card below. */
.auth-grid > .auth-username-field {
  grid-column: auto;
  display: block;
}

.auth-username-feedback {
  grid-column: 1 / -1;
  margin-top: -4px;
}

.auth-username-feedback .auth-username-status,
.auth-username-feedback .auth-username-suggestions {
  width: 100%;
  max-width: 100%;
}

.auth-username-feedback .auth-username-status {
  margin-top: 0;
  padding: 7px 9px;
  border: 1px solid var(--ss-line);
  border-radius: var(--ss-radius-sm);
  background: #fff;
  line-height: 1.25;
}

.auth-username-feedback .auth-username-status[hidden],
.auth-username-feedback .auth-username-suggestions[hidden] {
  display: none !important;
}

.auth-username-feedback .auth-username-status.is-ok {
  border-color: rgba(21, 128, 61, .24);
  background: rgba(21, 128, 61, .045);
}

.auth-username-feedback .auth-username-status.is-bad {
  border-color: rgba(185, 28, 28, .24);
  background: rgba(185, 28, 28, .045);
}

.auth-username-feedback .auth-username-status.is-muted {
  border-color: var(--ss-line);
  background: #fafbfa;
}

.auth-username-feedback .auth-username-suggestions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  overflow: hidden;
  white-space: nowrap;
  margin-top: 6px;
  padding-bottom: 0;
}

.auth-username-feedback .auth-username-suggestions-label,
.auth-username-feedback .auth-username-suggestion {
  flex: 0 0 auto;
}

@media (max-width: 680px) {
  .auth-grid > .auth-username-field {
    grid-column: 1 / -1;
  }
}

/* Signup org checkout summary and add-on availability refinements. */
.auth-addon-group[hidden],
.auth-addon-row[hidden],
.auth-addon-none[hidden] {
  display: none !important;
}

.auth-empty {
  border: 1px solid var(--ss-line);
  border-radius: var(--ss-radius-sm);
  padding: 11px 12px;
  background: #fff;
  color: var(--ss-muted);
  font-size: .88rem;
  font-weight: 760;
}

.auth-confirm-summary {
  display: grid;
  gap: 10px;
  border: 1px solid var(--ss-line);
  border-radius: var(--ss-radius-sm);
  padding: 12px;
  background: #fff;
}

.auth-confirm-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ss-line);
  color: var(--ss-ink);
}

.auth-confirm-summary-head span {
  color: var(--ss-primary);
  font-weight: 860;
  text-align: right;
}

.auth-confirm-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
}

.auth-confirm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 7px 0;
  border-bottom: 1px solid var(--ss-line);
}

.auth-confirm-row span {
  color: var(--ss-muted);
  font-size: .86rem;
  font-weight: 740;
}

.auth-confirm-row strong {
  min-width: 0;
  color: var(--ss-ink);
  font-size: .9rem;
  font-weight: 860;
  text-align: right;
}

.auth-confirm-row.strong strong {
  color: var(--ss-primary);
}

@media (max-width: 680px) {
  .auth-confirm-summary-head,
  .auth-confirm-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .auth-confirm-summary-head span,
  .auth-confirm-row strong {
    text-align: left;
  }

  .auth-confirm-summary-grid {
    grid-template-columns: 1fr;
  }
}

/* Signup org visual polish: keep the multi-step flow in the same auth-card system as login/forgot. */
.signup-org-flow .auth-shell.wide {
  width: min(94vw, 1180px);
  max-width: 1180px;
  padding-top: 18px;
}

.signup-org-flow .auth-layout {
  display: grid;
  place-items: start center;
}

.signup-org-flow .auth-panel {
  width: 100%;
  max-width: 1060px;
  border: 1px solid var(--ss-line);
  border-radius: var(--ss-radius);
  background: #fff;
  box-shadow: var(--ss-shadow);
  overflow: hidden;
}

.signup-org-flow .auth-panel-top {
  display: grid;
  gap: 14px;
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--ss-line);
  background: #fff;
}

.signup-org-flow .auth-panel-titlebar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.signup-org-flow .auth-panel-titlebar h1 {
  margin: 0;
  font-size: clamp(1.45rem, 2vw, 1.85rem);
  line-height: 1.1;
  letter-spacing: 0;
}

.signup-org-flow .auth-panel-body {
  padding: 20px;
}

.signup-org-flow .auth-stack {
  gap: 0;
}

.signup-org-flow .auth-section {
  display: grid;
  gap: 16px;
  padding: 0;
  border-top: 0;
}

.signup-org-flow .auth-section-head {
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ss-line);
}

.signup-org-flow .auth-section-title {
  font-size: 1rem;
  font-weight: 850;
}

.signup-org-flow .auth-section-title i {
  color: var(--ss-primary);
  font-size: .92rem;
}

.signup-org-flow .auth-grid {
  gap: 12px 14px;
}

.signup-org-flow .auth-field.full,
.signup-org-flow .auth-grid .full {
  grid-column: 1 / -1;
}

.signup-org-flow .auth-actions {
  padding-top: 2px;
}

.signup-org-flow .auth-actions.between {
  justify-content: space-between;
}

.signup-org-flow .auth-btn-dark,
.signup-org-flow .auth-btn-secondary {
  min-height: 40px;
  border-radius: var(--ss-radius-sm);
  padding: 8px 13px;
}

.signup-org-flow .auth-progress {
  gap: 8px;
}

.signup-org-flow .auth-progress-meta {
  font-size: .8rem;
  font-weight: 830;
}

.signup-org-flow .auth-progress-bar {
  height: 6px;
  border: 0;
  background: #edf2ef;
}

.signup-org-flow .auth-step-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.signup-org-flow .auth-step-tab {
  flex: 1 0 126px;
  min-height: 36px;
  border-color: var(--ss-line);
  border-radius: var(--ss-radius-sm);
  padding: 7px 9px;
  background: #fff;
  color: var(--ss-muted);
  box-shadow: none;
}

.signup-org-flow .auth-step-tab:hover,
.signup-org-flow .auth-step-tab:focus-visible {
  border-color: var(--ss-line-strong);
  background: #fafbfa;
  color: var(--ss-ink);
}

.signup-org-flow .auth-step-tab.is-active {
  border-color: rgba(15, 118, 110, .34);
  background: var(--ss-primary-soft);
  color: var(--ss-primary);
}

.signup-org-flow .auth-step-num {
  flex-basis: 21px;
  width: 21px;
  height: 21px;
  font-size: .72rem;
  font-weight: 840;
}

.signup-org-flow .auth-step-title {
  color: inherit;
  font-size: .79rem;
  font-weight: 780;
}

.signup-org-flow .auth-toggle-check {
  align-items: center;
  background: #fff;
}

.signup-org-flow .auth-toggle-check input,
.signup-org-flow .auth-legal-check input {
  accent-color: var(--ss-primary);
}

.signup-org-flow .auth-conditional {
  padding: 12px;
  border: 1px solid var(--ss-line);
  border-radius: var(--ss-radius-sm);
  background: #fafbfa;
}

.signup-org-flow .auth-inline-card {
  border-color: var(--ss-line);
  border-radius: var(--ss-radius-sm);
  padding: 12px;
  background: #fafbfa;
}

.signup-org-flow .auth-billing-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid var(--ss-line);
  border-radius: var(--ss-radius-sm);
  background: #fff;
}

.signup-org-flow .auth-billing-strip-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.signup-org-flow .auth-billing-strip-copy strong {
  color: var(--ss-ink);
  font-size: .86rem;
  font-weight: 850;
  line-height: 1.2;
}

.signup-org-flow .auth-billing-strip-copy span {
  color: var(--ss-muted);
  font-size: .78rem;
  font-weight: 650;
  line-height: 1.35;
}

.signup-org-flow .auth-billing-period-choice {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(108px, 1fr));
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--ss-line);
  border-radius: 999px;
  background: #f7f8f8;
}

.signup-org-flow .auth-period-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 7px 14px;
  background: transparent;
  color: var(--ss-muted);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.signup-org-flow .auth-period-option:hover {
  color: var(--ss-ink);
}

.signup-org-flow .auth-period-option.is-selected {
  border-color: var(--ss-line-strong);
  background: #fff;
  color: var(--ss-ink);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}

.signup-org-flow .auth-period-option input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.signup-org-flow .auth-period-option span {
  display: grid;
  gap: 1px;
  text-align: center;
}

.signup-org-flow .auth-period-option strong {
  color: inherit;
  font-size: .82rem;
  font-weight: 850;
  line-height: 1.15;
}

.signup-org-flow .auth-period-option small {
  color: inherit;
  opacity: .76;
  font-size: .69rem;
  font-weight: 760;
  line-height: 1.15;
}

.signup-org-flow .auth-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.signup-org-flow .auth-plan-card-main {
  display: grid;
  gap: 11px;
  height: 100%;
  min-height: 0;
  border: 1px solid var(--ss-line);
  border-radius: var(--ss-radius-sm);
  padding: 13px;
  background: #fff;
  box-shadow: none;
}

.signup-org-flow .auth-plan-card-main:hover {
  border-color: var(--ss-line-strong);
  box-shadow: none;
}

.signup-org-flow .auth-plan-card.is-selected .auth-plan-card-main {
  border-color: rgba(15, 118, 110, .38);
  background: #fbfefd;
  box-shadow: inset 3px 0 0 var(--ss-primary);
}

.signup-org-flow .auth-plan-topline {
  align-items: flex-start;
}

.signup-org-flow .auth-plan-name {
  font-size: 1rem;
  line-height: 1.2;
}

.signup-org-flow .auth-plan-selected {
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: .72rem;
}

.signup-org-flow .auth-plan-price strong {
  font-size: 1.22rem;
}

.signup-org-flow .auth-plan-limits {
  gap: 7px;
}

.signup-org-flow .auth-plan-limits span {
  color: var(--ss-muted);
  font-size: .84rem;
  font-weight: 700;
}

.signup-org-flow .auth-plan-limits i {
  color: var(--ss-primary);
}

.signup-org-flow .auth-plan-trial {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  border: 1px solid rgba(15, 118, 110, .24);
  border-radius: 999px;
  padding: 5px 8px;
  background: #fbfefd;
  color: var(--ss-primary-strong);
  font-size: .74rem;
  font-weight: 800;
}

.signup-org-flow .auth-plan-trial.muted {
  border-color: var(--ss-line);
  background: transparent;
  color: var(--ss-muted);
  font-weight: 740;
}

.signup-org-flow .auth-addon-groups {
  display: grid;
  gap: 12px;
}

.signup-org-flow .auth-addon-group {
  gap: 8px;
  padding: 0;
  border-top: 0;
}

.signup-org-flow .auth-addon-heading {
  min-height: 28px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ss-line);
  color: var(--ss-ink);
  font-size: .92rem;
  font-weight: 850;
}

.signup-org-flow .auth-addon-rows {
  gap: 8px;
}

.signup-org-flow .auth-addon-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--ss-line);
  border-radius: var(--ss-radius-sm);
  padding: 11px 12px;
  background: #fff;
}

.signup-org-flow .auth-addon-copy strong {
  color: var(--ss-ink);
  font-size: .92rem;
  font-weight: 850;
}

.signup-org-flow .auth-addon-copy small {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--ss-muted);
  font-size: .8rem;
  font-weight: 720;
}

.signup-org-flow .auth-addon-copy small span + span::before {
  content: "·";
  margin-right: 6px;
  color: var(--ss-soft);
}

.signup-org-flow .auth-qty-control,
.signup-org-flow .auth-addon-controls {
  flex: 0 0 auto;
  gap: 5px;
}

.signup-org-flow .auth-qty-control button,
.signup-org-flow .auth-addon-controls button {
  width: 30px;
  height: 30px;
  border-radius: var(--ss-radius-sm);
}

.signup-org-flow .auth-qty-control input,
.signup-org-flow .auth-addon-controls input {
  width: 52px;
  min-height: 30px;
  padding: 4px 6px;
}

.signup-org-flow .auth-addon-unavailable,
.signup-org-flow .auth-empty {
  border: 1px solid var(--ss-line);
  border-radius: var(--ss-radius-sm);
  padding: 11px 12px;
  background: #fafbfa;
  color: var(--ss-muted);
  font-size: .86rem;
  font-weight: 760;
}

.signup-org-flow .auth-billing-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--ss-line);
  border-radius: var(--ss-radius-sm);
  padding: 12px;
  background: #fafbfa;
}

.signup-org-flow .auth-billing-summary span {
  color: var(--ss-muted);
  font-size: .86rem;
  font-weight: 760;
}

.signup-org-flow .auth-billing-summary strong {
  color: var(--ss-primary);
  font-size: 1rem;
  font-weight: 900;
  text-align: right;
}

.signup-org-flow .auth-confirm-list {
  display: grid;
  gap: 8px;
}

.signup-org-flow .auth-confirm-list > div {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  padding: 10px 11px;
  border: 1px solid var(--ss-line);
  border-radius: var(--ss-radius-sm);
  background: #fff;
  color: var(--ss-muted);
  font-size: .88rem;
  font-weight: 720;
}

.signup-org-flow .auth-confirm-list i {
  margin-top: 3px;
  color: var(--ss-primary);
}

.signup-org-flow .auth-confirm-summary {
  gap: 0;
  border: 1px solid var(--ss-line);
  border-radius: var(--ss-radius-sm);
  padding: 0;
  background: #fff;
  overflow: hidden;
}

.signup-org-flow .auth-confirm-summary-head {
  padding: 12px;
  background: #fafbfa;
}

.signup-org-flow .auth-confirm-summary-grid {
  gap: 0;
  padding: 0 12px 4px;
}

.signup-org-flow .auth-confirm-row {
  padding: 10px 0;
}

.signup-org-flow .auth-confirm-row:nth-last-child(-n+2) {
  border-bottom: 0;
}

.signup-org-flow .auth-confirm-row.strong strong {
  color: var(--ss-primary);
}

.signup-org-flow .auth-legal-check {
  background: #fff;
}

.signup-org-flow .auth-legal-check a {
  color: var(--ss-primary);
  font-weight: 850;
}

.auth-account-create-panel {
  display: grid;
  gap: 14px;
}

.auth-account-create-panel > h1 {
  margin-bottom: 0;
}

.auth-account-create-panel .auth-section {
  gap: 14px;
}

.auth-account-create-panel .auth-actions {
  padding-top: 2px;
}

@media (max-width: 980px) {
  .signup-org-flow .auth-shell.wide {
    width: min(96vw, 900px);
  }

  .signup-org-flow .auth-plan-grid {
    grid-template-columns: 1fr;
  }

  .signup-org-flow .auth-step-tab {
    flex-basis: 118px;
  }
}

@media (max-width: 680px) {
  .signup-org-flow .auth-shell.wide {
    width: 100%;
    padding: 12px;
  }

  .signup-org-flow .auth-panel-top,
  .signup-org-flow .auth-panel-body {
    padding: 14px;
  }

  .signup-org-flow .auth-step-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  .signup-org-flow .auth-step-tab {
    flex-basis: auto;
  }

  .signup-org-flow .auth-billing-strip,
  .signup-org-flow .auth-billing-period-choice,
  .signup-org-flow .auth-addon-row,
  .signup-org-flow .auth-billing-summary,
  .signup-org-flow .auth-confirm-summary-head,
  .signup-org-flow .auth-confirm-row {
    grid-template-columns: 1fr;
    align-items: stretch;
    flex-direction: column;
  }

  .signup-org-flow .auth-qty-control,
  .signup-org-flow .auth-addon-controls,
  .signup-org-flow .auth-qty-control input,
  .signup-org-flow .auth-addon-controls input {
    width: 100%;
  }


  .signup-org-flow .auth-billing-strip {
    gap: 10px;
  }

  .signup-org-flow .auth-billing-period-choice {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    inline-size: 100%;
  }

  .signup-org-flow .auth-period-option {
    padding-inline: 10px;
  }

  .signup-org-flow .auth-billing-summary strong,
  .signup-org-flow .auth-confirm-summary-head span,
  .signup-org-flow .auth-confirm-row strong {
    text-align: left;
  }

  .signup-org-flow .auth-confirm-summary-grid {
    grid-template-columns: 1fr;
  }

  .signup-org-flow .auth-confirm-row:nth-last-child(-n+2) {
    border-bottom: 1px solid var(--ss-line);
  }

  .signup-org-flow .auth-confirm-row:last-child {
    border-bottom: 0;
  }
}

/* Signup org confirm cleanup: keep headline totals visible, move granular breakdown behind a compact toggle. */
.signup-org-flow .auth-confirm-summary.compact {
  display: grid;
  gap: 0;
  border: 1px solid var(--ss-line);
  border-radius: var(--ss-radius-sm);
  padding: 0;
  background: #fff;
  overflow: hidden;
}

.signup-org-flow .auth-confirm-summary.compact .auth-confirm-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--ss-line);
  background: #fafbfa;
}

.signup-org-flow .auth-confirm-summary.compact .auth-confirm-summary-head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.signup-org-flow .auth-confirm-summary.compact .auth-confirm-summary-head strong {
  color: var(--ss-ink);
  font-size: .96rem;
  font-weight: 900;
}

.signup-org-flow .auth-confirm-summary-sub {
  color: var(--ss-muted);
  font-size: .78rem;
  font-weight: 700;
}

.signup-org-flow .auth-confirm-key-grid {
  display: grid;
  grid-template-columns: minmax(180px, 1.35fr) repeat(3, minmax(100px, .8fr));
  gap: 0;
  padding: 0 14px;
}

.signup-org-flow .auth-confirm-key-row {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 12px;
  border-right: 1px solid var(--ss-line);
}

.signup-org-flow .auth-confirm-key-row:first-child {
  padding-left: 0;
}

.signup-org-flow .auth-confirm-key-row:last-child {
  border-right: 0;
  padding-right: 0;
}

.signup-org-flow .auth-confirm-key-row span {
  color: var(--ss-muted);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.signup-org-flow .auth-confirm-key-row strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ss-ink);
  font-size: .96rem;
  font-weight: 900;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.signup-org-flow .auth-confirm-key-row:nth-child(n+2) strong {
  color: var(--ss-primary);
}

.signup-org-flow .auth-confirm-breakdown {
  border-top: 1px solid var(--ss-line);
}

.signup-org-flow .auth-confirm-breakdown summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  margin: 10px 14px;
  min-height: 34px;
  border: 1px solid var(--ss-line);
  border-radius: var(--ss-radius-sm);
  padding: 7px 11px;
  background: #fff;
  color: var(--ss-ink);
  cursor: pointer;
  font-size: .84rem;
  font-weight: 850;
  list-style: none;
}

.signup-org-flow .auth-confirm-breakdown summary::-webkit-details-marker {
  display: none;
}

.signup-org-flow .auth-confirm-breakdown summary:hover {
  border-color: color-mix(in srgb, var(--ss-primary) 42%, var(--ss-line));
  color: var(--ss-primary);
}

.signup-org-flow .auth-confirm-breakdown summary i {
  color: currentColor;
  font-size: .75rem;
  transition: transform .16s ease;
}

.signup-org-flow .auth-confirm-breakdown[open] summary i {
  transform: rotate(180deg);
}

.signup-org-flow .auth-breakdown-label-open,
.signup-org-flow .auth-confirm-breakdown[open] .auth-breakdown-label-closed {
  display: none;
}

.signup-org-flow .auth-confirm-breakdown[open] .auth-breakdown-label-open {
  display: inline;
}

.signup-org-flow .auth-confirm-breakdown .auth-confirm-summary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
  padding: 0 14px 6px;
}

.signup-org-flow .auth-confirm-breakdown .auth-confirm-row {
  padding: 9px 0;
  border-bottom: 1px solid var(--ss-line);
}

.signup-org-flow .auth-confirm-breakdown .auth-confirm-row:last-child,
.signup-org-flow .auth-confirm-breakdown .auth-confirm-row:nth-last-child(2):nth-child(odd) {
  border-bottom: 0;
}

@media (max-width: 900px) {
  .signup-org-flow .auth-confirm-key-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0;
  }

  .signup-org-flow .auth-confirm-key-row,
  .signup-org-flow .auth-confirm-key-row:first-child,
  .signup-org-flow .auth-confirm-key-row:last-child {
    padding: 11px 14px;
    border-right: 0;
    border-bottom: 1px solid var(--ss-line);
  }

  .signup-org-flow .auth-confirm-key-row:nth-child(odd) {
    border-right: 1px solid var(--ss-line);
  }

  .signup-org-flow .auth-confirm-key-row:nth-last-child(-n+2) {
    border-bottom: 0;
  }
}

@media (max-width: 760px) {
  .signup-org-flow .auth-confirm-summary.compact .auth-confirm-summary-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .signup-org-flow .auth-confirm-summary.compact .auth-confirm-summary-head > span {
    text-align: left;
  }

  .signup-org-flow .auth-confirm-breakdown summary {
    width: calc(100% - 28px);
  }

  .signup-org-flow .auth-confirm-breakdown .auth-confirm-summary-grid {
    grid-template-columns: 1fr;
  }

  .signup-org-flow .auth-confirm-breakdown .auth-confirm-row:nth-last-child(-n+2) {
    border-bottom: 1px solid var(--ss-line);
  }

  .signup-org-flow .auth-confirm-breakdown .auth-confirm-row:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 560px) {
  .signup-org-flow .auth-confirm-key-grid {
    grid-template-columns: 1fr;
  }

  .signup-org-flow .auth-confirm-key-row,
  .signup-org-flow .auth-confirm-key-row:first-child,
  .signup-org-flow .auth-confirm-key-row:last-child,
  .signup-org-flow .auth-confirm-key-row:nth-child(odd) {
    padding: 10px 14px;
    border-right: 0;
    border-bottom: 1px solid var(--ss-line);
  }

  .signup-org-flow .auth-confirm-key-row:last-child,
  .signup-org-flow .auth-confirm-key-row:nth-last-child(-n+2):not(:nth-last-child(2)) {
    border-bottom: 0;
  }

  .signup-org-flow .auth-confirm-key-row:nth-last-child(2) {
    border-bottom: 1px solid var(--ss-line);
  }

  .signup-org-flow .auth-confirm-key-row strong {
    white-space: normal;
  }
}


/* ===== Source: app/join/css/join.css ===== */
/* StoreSync join flow - auth theme polish */
.auth-join-page .auth-shell {
  width: min(680px, 100%) !important;
}

.auth-join-panel .auth-panel-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.auth-join-code-input {
  text-transform: uppercase !important;
  letter-spacing: .045em !important;
}

.auth-join-actions {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  width: 100% !important;
}

.auth-join-actions .auth-btn-dark,
.auth-join-actions .auth-btn-secondary,
.auth-join-actions button,
.auth-join-actions a {
  width: 100% !important;
}

.join-confirm-card {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  padding: 12px !important;
  border: 1px solid var(--auth-border) !important;
  border-radius: var(--auth-radius) !important;
  background: #fff !important;
}

.join-confirm-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border: 1px solid var(--auth-border) !important;
  border-radius: var(--auth-radius) !important;
  color: var(--auth-text) !important;
  background: #fff !important;
}

.join-confirm-main {
  min-width: 0 !important;
}

.join-confirm-title {
  color: var(--auth-text) !important;
  font-size: .98rem !important;
  line-height: 1.2 !important;
  font-weight: 950 !important;
  overflow-wrap: anywhere !important;
}

.join-confirm-meta {
  margin-top: 3px !important;
  color: var(--auth-muted) !important;
  font-size: .8rem !important;
  line-height: 1.25 !important;
  font-weight: 750 !important;
}

.join-detail-list {
  display: grid !important;
  gap: 0 !important;
  border-top: 1px solid var(--auth-border) !important;
  border-bottom: 1px solid var(--auth-border) !important;
}

.join-detail-row {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 11px 0 !important;
  border-top: 1px solid var(--auth-border) !important;
}

.join-detail-row:first-child {
  border-top: 0 !important;
}

.join-detail-row span {
  color: var(--auth-muted) !important;
  font-size: .8rem !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
}

.join-detail-row strong {
  color: var(--auth-text) !important;
  font-size: .86rem !important;
  line-height: 1.35 !important;
  font-weight: 950 !important;
  text-align: right !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 760px) {
  .auth-join-page .auth-shell {
    width: 100% !important;
  }

  .join-detail-row {
    flex-direction: column !important;
    gap: 4px !important;
  }

  .join-detail-row strong {
    text-align: left !important;
  }
}

/* StoreSync join v2 safe alignment pass */
.auth-join-panel,
.auth-join-panel .auth-panel-body,
.auth-join-actions,
.join-confirm-card,
.join-confirm-main,
.join-detail-list,
.join-detail-row {
  min-width: 0 !important;
}

.auth-join-panel {
  overflow: hidden !important;
}

.auth-join-panel .auth-panel-body > *:last-child,
.join-confirm-main > *:last-child {
  margin-bottom: 0 !important;
}

.auth-join-code-input {
  font-weight: 850 !important;
}

.join-detail-list {
  overflow: hidden !important;
}

@media (max-width: 760px) {
  .auth-join-actions {
    grid-template-columns: 1fr !important;
  }
}


/* ===== Source: app/utility/assets/css/storesync-unified/13-responsive.css ===== */
/*
 * Responsive breakpoints
 * Imported by ../storesync-unified.css.
 */

@media (max-width: 1120px) {
  .nav-right {
    position: absolute;
    top: var(--nav-height);
    right: 14px;
    left: 14px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    border: 1px solid var(--ss-line);
    border-radius: var(--ss-radius);
    padding: 8px;
    background: #fff;
    box-shadow: var(--ss-shadow);
    overflow: visible;
  }
  .nav-right.active { display: flex; }
  .dropdown { width: 100%; }
  .nav-link,
  .dropdown-toggle { justify-content: flex-start; width: 100%; }
  .dropdown-menu { position: static; box-shadow: none; margin-top: 6px; }
  .nav-toggle { display: grid; }
  .ss-hero__top { grid-template-columns: 1fr; }
  .auth-layout,
  .admin-shell { grid-template-columns: 1fr; }
  .admin-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 250;
    width: min(86vw, 320px);
    transform: translateX(-105%);
    transition: transform .18s ease;
  }
  body.admin-nav-open .admin-sidebar,
  .admin-sidebar.is-open { transform: translateX(0); }
  .admin-nav-toggle,
  .admin-drawer-close { display: inline-flex; }
  .admin-mobile-bottom-nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .admin-main { padding-bottom: 76px; }
  .ss-tile-grid,
  .ss-card-grid,
  .ss-action-grid,
  .quick-grid,
  .myorg-tiles,
  .detail-grid,
  .info-grid,
  .contact-grid,
  .myorg-form-grid,
  .filter-grid,
  .filter-form,
  .module-filter-grid,
  .module-filter-form,
  .module-filter-form,
  .module-filter-grid,
  .pay-filter-form,
  .schedule-filter-form,
  .site-schedule-filter-form,
  .week-filter-form,
  .users-filter-form,
  .myorg-users-filter-form,
  .myorg-roles-filter-form,
  .myorg-divisions-filter-form,
  .myorg-locations-filter-form,
  .admin-filter-bar,
  .admin-filter-bar-wide,
  .ss-metric-grid,
  .ss-stat-grid,
  .admin-dashboard-metrics,
  .admin-triage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ss-metric-card { padding: 10px; }
  .ss-metric__main strong,
  .ss-stat__value { font-size: 1.22rem; }
  .kpi-grid,
  .myorg-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-value,
  .myorg-kpi-value { font-size: 1.12rem; }
  .admin-dashboard-command,
  .admin-dashboard-split,
  .admin-dashboard-queues { grid-template-columns: 1fr; }
  .module-section .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 680px) {
  body { font-size: 14px; }
  .auth-shell {
    width: 100%;
    padding: 18px 12px 48px;
  }

  .auth-panel,
  .auth-checkout-card,
  .admin-auth-card { padding: 18px; }
  .auth-head h1 { font-size: 2rem; }
  .admin-auth-page { padding: 24px 12px; }
  .main-nav-inner,
  .ss-page,
  .module-page-shell,
  .app-page-shell,
  .page-shell,
  .schedule-shell,
  .schedule-wrap,
  .timesheet-shell,
  .timeoff-shell,
  .payslips-shell,
  .reports-shell,
  .staff-shell,
  .absence-shell,
  .myorg-shell,
  .my-account-shell,
  .help-shell,
  .support-shell,
  .location-shell,
  .division-shell,
  .payroll-shell,
  .container,
  .wrap {
    width: 90%;
    max-width: 1320px;
    min-width: min(var(--ss-shell-min), calc(100% - 20px));
  }
  .ss-tile-grid,
  .ss-card-grid,
  .ss-action-grid,
  .quick-grid,
  .myorg-tiles,
  .detail-grid,
  .info-grid,
  .contact-grid,
  .myorg-form-grid,
  .filter-grid,
  .filter-form,
  .module-filter-grid,
  .module-filter-form,
  .module-filter-form,
  .module-filter-grid,
  .pay-filter-form,
  .schedule-filter-form,
  .site-schedule-filter-form,
  .week-filter-form,
  .users-filter-form,
  .myorg-users-filter-form,
  .myorg-roles-filter-form,
  .myorg-divisions-filter-form,
  .myorg-locations-filter-form,
  .admin-filter-bar,
  .admin-filter-bar-wide,
  .ss-metric-grid,
  .ss-stat-grid,
  .ss-form-grid,
  .admin-form-grid,
  .auth-grid,
  .auth-plan-grid,
  .auth-choice-grid,
  .form-grid { grid-template-columns: 1fr; }
  .ss-page-content-card > .ss-section,
  .ss-page-content-card > .ss-hero,
  .ss-page-content-card > .ss-panel,
  .ss-page-content-card > .ss-card,
  .ss-page-content-card > .ss-notice,
  .ss-page-content-card > .ss-empty,
  .ss-page-content-card > .surface-card,
  .ss-page-content-card > .section-card,
  .ss-page-content-card > .page-section,
  .ss-page-content-card > .myorg-card,
  .ss-page-content-card > .billing-card,
  .ss-page-content-card > .timesheet-section,
  .ss-page-content-card > .timeoff-card,
  .ss-page-content-card > .pay-card,
  .ss-page-content-card > .payslip-card {
    padding: 12px !important;
  }
  .ss-section-collapsed,
  .ss-page-content-card > .ss-section-collapsed {
    padding-block: 7px !important;
  }
  .ss-section-collapsed > .ss-section-head,
  .ss-section-collapsed > .ss-section__head,
  .ss-section-collapsed > .section-head,
  .ss-section-collapsed > .page-section-head,
  .ss-section-collapsed > .myorg-section-head,
  .ss-section-collapsed > .admin-panel-header {
    flex-direction: row;
    align-items: center;
  }
  .ss-metric-card {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 10px;
  }
  .ss-metric__main {
    grid-row: span 2;
    min-width: 72px;
  }
  .ss-metric__label,
  .ss-metric__action {
    font-size: .8rem;
  }
  .kpi-grid,
  .myorg-kpis { grid-template-columns: 1fr; }
  .kpi,
  .myorg-kpi { padding: 10px; }
  .admin-workbench-metrics,
  .admin-control-grid,
  .admin-grid,
  .admin-three-col,
  .admin-filter-bar,
  .billing-grid,
  .myorg-form-grid,
  .myorg-grid,
  .stat-row,
  .compact-filter-grid { grid-template-columns: 1fr; }
  .admin-workbench-metrics > *,
  .admin-control-grid > *,
  .admin-grid > *,
  .admin-three-col > *,
  .admin-filter-bar > *,
  .billing-grid > *,
  .myorg-form-grid > *,
  .myorg-grid > *,
  .stat-row > *,
  .compact-filter-grid > *,
  .span-6,
  .span-4,
  .span-3,
  .col-6,
  .col-4,
  .col-3 { grid-column: 1 / -1; }
  .ss-section-head,
  .ss-section__head,
  .myorg-section-head,
  .admin-panel-header {
    flex-direction: column;
    align-items: stretch;
  }
  .ss-list-row { align-items: flex-start; flex-direction: column; }
  .module-filter-grid,
  .module-filter-grid,
  .pay-filter-grid,
  .filter-grid {
    align-items: stretch !important;
  }
  .module-filter-grid > .module-field,
  .module-filter-grid > .module-filter-actions,
  .module-filter-grid > .module-field,
  .module-filter-grid > .module-filter-actions,
  .pay-filter-grid > .pay-field,
  .pay-filter-grid > .pay-filter-actions,
  .filter-grid > .filter-field,
  .filter-grid > .filter-actions {
    flex-basis: 100% !important;
  }
  .module-filter-actions,
  .module-filter-actions,
  .filter-actions {
    justify-content: flex-start !important;
  }
  .module-detail-grid,
  .module-detail-grid.no-department {
    grid-template-columns: 1fr !important;
  }
  .module-section .stat-grid,
  .module-section .ss-action-grid,
  .module-choice-grid,
  .module-primary-card,
  .info-chip {
    grid-template-columns: 1fr !important;
  }
  .module-primary-card {
    align-items: stretch !important;
  }
  .module-primary-submit,
  .module-refresh-btn {
    width: 100%;
  }
  .module-section > .page-section-head,
  .module-action-head {
    align-items: stretch !important;
  }
}

/* ===== StoreSync filter control full-width pass =====
   Keep filter actions on their final row, but make every filter control use the full
   width of its field so dropdowns, date pickers, search fields and autocomplete
   inputs do not render as short inline controls. */
:is(
  .module-filter-grid,
  .compact-filter-grid,
  .filter-grid,
  .pay-filter-grid,
  .schedule-filter-form,
  .site-schedule-filter-form,
  .week-filter-form,
  .week-picker-form,
  .users-filter-form,
  .myorg-users-filter-form,
  .myorg-roles-filter-form,
  .myorg-divisions-filter-form,
  .myorg-locations-filter-form,
  .module-invoices-filter-grid,
  .filters,
  .admin-filter-bar,
  .admin-filter-bar-wide,
  .compact-filter-grid
) > :is(
  .module-field,
  .filter-field,
  .pay-field,
  .schedule-field,
  .week-field,
  .users-filter-field,
  .myorg-filter-field,
  .admin-field,
  .field,
  label,
  div:not(.module-filter-actions):not(.filter-actions):not(.pay-filter-actions):not(.admin-actions):not(.ss-action-grid)
) {
  min-width: 0 !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

:is(
  .module-filter-grid,
  .compact-filter-grid,
  .filter-grid,
  .pay-filter-grid,
  .schedule-filter-form,
  .site-schedule-filter-form,
  .week-filter-form,
  .week-picker-form,
  .users-filter-form,
  .myorg-users-filter-form,
  .myorg-roles-filter-form,
  .myorg-divisions-filter-form,
  .myorg-locations-filter-form,
  .module-invoices-filter-grid,
  .filters,
  .admin-filter-bar,
  .admin-filter-bar-wide
) :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea,
  .module-input,
  .module-select,
  .filter-input,
  .filter-select,
  .pay-input,
  .pay-select,
  .schedule-input,
  .schedule-select,
  .week-input,
  .week-select,
  .users-filter-input,
  .users-filter-select,
  .myorg-filter-input,
  .myorg-filter-select,
  .admin-input,
  .admin-select,
  .compact-input,
  .compact-select,
  .input,
  .select,
  .flatpickr-input,
  .autocomplete-input,
  .employee-search-input,
  .person-search-input,
  .search-input
) {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

:is(
  .module-filter-grid,
  .compact-filter-grid,
  .filter-grid,
  .pay-filter-grid,
  .schedule-filter-form,
  .site-schedule-filter-form,
  .week-filter-form,
  .week-picker-form,
  .users-filter-form,
  .myorg-users-filter-form,
  .myorg-roles-filter-form,
  .myorg-divisions-filter-form,
  .myorg-locations-filter-form,
  .module-invoices-filter-grid,
  .filters,
  .admin-filter-bar,
  .admin-filter-bar-wide
) :is(.autocomplete-wrap, .autocomplete-shell, .person-search, .employee-search, .date-range-control, .range-control, .flatpickr-wrapper) {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

:is(
  .module-filter-grid,
  .compact-filter-grid,
  .filter-grid,
  .pay-filter-grid,
  .schedule-filter-form,
  .site-schedule-filter-form,
  .week-filter-form,
  .week-picker-form,
  .users-filter-form,
  .myorg-users-filter-form,
  .myorg-roles-filter-form,
  .myorg-divisions-filter-form,
  .myorg-locations-filter-form,
  .module-invoices-filter-grid,
  .filters
) > :is(.module-filter-actions, .filter-actions, .pay-filter-actions, .ss-action-grid),
:is(.admin-filter-bar, .admin-filter-bar-wide) > .admin-actions {
  grid-column: 1 / -1 !important;
  width: 100% !important;
}

/* ===== StoreSync standalone filter form full-width controls ===== */
:is(
  .module-filter-form,
  .filter-form,
  .pay-filter-form,
  .users-toolbar,
  .toolbar-grid,
  .search-grid,
  .lookup-grid
) :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea,
  .module-input,
  .module-select,
  .filter-input,
  .filter-select,
  .pay-input,
  .pay-select,
  .toolbar-input,
  .toolbar-select,
  .search-input,
  .autocomplete-input,
  .person-search-input,
  .employee-search-input,
  .flatpickr-input
) {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

:is(.module-filter-form, .filter-form, .pay-filter-form, .users-toolbar, .toolbar-grid, .search-grid, .lookup-grid) :is(
  .module-field,
  .filter-field,
  .pay-field,
  .field,
  .autocomplete-wrap,
  .autocomplete-shell,
  .flatpickr-wrapper
) {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Release/test-mode and accessibility affordances */
.ss-skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 10000;
  transform: translateY(-160%);
  padding: 9px 12px;
  border: 1px solid var(--ss-line-strong, #c5d0ca);
  border-radius: var(--ss-radius-sm, 6px);
  background: #fff;
  color: var(--ss-ink, #17201b);
  font-weight: 800;
  font-size: .88rem;
  box-shadow: 0 8px 18px rgba(23, 32, 27, .12);
}
.ss-skip-link:focus,
.ss-skip-link:focus-visible {
  transform: translateY(0);
  outline: 3px solid rgba(15, 118, 110, .28);
  outline-offset: 2px;
}
.ss-test-mode-banner {
  position: sticky;
  top: var(--nav-height, 68px);
  z-index: 280;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 9px 16px;
  border-bottom: 1px solid #f3d28a;
  background: #fff7e6;
  color: #583b07;
  font-size: .86rem;
  line-height: 1.35;
  text-align: center;
}
.ss-test-mode-banner__label {
  flex: 0 0 auto;
  padding: 2px 7px;
  border: 1px solid #e8bf63;
  border-radius: 999px;
  background: #fff;
  color: #583b07;
  font-weight: 850;
  letter-spacing: .01em;
  text-transform: uppercase;
  font-size: .68rem;
}
.ss-test-mode-banner__text {
  max-width: min(1060px, calc(100vw - 120px));
  color: #583b07;
  font-weight: 650;
}
@media (max-width: 720px) {
  .ss-test-mode-banner {
    align-items: flex-start;
    justify-content: flex-start;
    padding: 9px 14px;
    text-align: left;
  }
  .ss-test-mode-banner__text {
    max-width: none;
  }
}

/* Release/testing notice: top-of-document banner that stays in normal flow. */
:root { --ss-test-mode-banner-height: 0px; }
.ss-test-mode-banner {
  position: sticky !important;
  top: 0 !important;
  right: auto;
  left: auto;
  z-index: 10000 !important;
  width: 100%;
  border: 0;
  border-bottom: 1px solid #e4c16f;
  background: #fff8e7;
  color: #553806;
  box-shadow: 0 1px 0 rgba(85, 56, 6, .04);
}
.ss-test-mode-banner__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(calc(100% - 24px), 1320px);
  margin-inline: auto;
  padding: 8px 0;
  font-size: .84rem;
  line-height: 1.35;
  text-align: center;
}
.ss-test-mode-banner__label {
  flex: 0 0 auto;
  padding: 2px 7px;
  border: 1px solid #ddb65d;
  border-radius: 999px;
  background: #fff;
  color: #553806;
  font-size: .66rem;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ss-test-mode-banner__text {
  max-width: 980px;
  color: #553806;
  font-weight: 650;
}
.ss-test-mode-banner__dismiss {
  flex: 0 0 auto;
  border: 1px solid #ddb65d;
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(255,255,255,.72);
  color: #553806;
  font-size: .72rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.ss-test-mode-banner__dismiss:hover,
.ss-test-mode-banner__dismiss:focus-visible {
  background: #fff;
  color: #2f2108;
  text-decoration: none;
}
body.ss-test-mode-banner-visible .main-nav,
body.ss-test-mode-banner-visible .site-header,
body.ss-test-mode-banner-visible .admin-topbar {
  top: var(--ss-test-mode-banner-height) !important;
}
body.ss-test-mode-banner-visible .ss-skip-link,
body.ss-test-mode-banner-visible .skip-link {
  top: calc(var(--ss-test-mode-banner-height) + 10px) !important;
}
body.ss-test-mode-banner-visible .admin-mobile-bottom-nav,
body.ss-test-mode-banner-visible .auth-topbar {
  scroll-margin-top: calc(var(--ss-test-mode-banner-height) + 12px);
}
.site-stage-note,
.site-note-panel {
  border: 1px solid var(--ss-line, #dfe5e1);
  border-left: 4px solid var(--ss-primary, #0f766e);
  border-radius: var(--ss-radius, 8px);
  padding: 16px;
  background: #fff;
}
@media (max-width: 760px) {
  .ss-test-mode-banner__inner {
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 7px 8px;
    padding-block: 8px;
    text-align: left;
  }
  .ss-test-mode-banner__text {
    flex: 1 1 100%;
    max-width: none;
  }
  .ss-test-mode-banner__dismiss {
    margin-left: 0;
  }
}



/* Recovery hardening: test banner stays in document flow; skip links are keyboard-only. */
.ss-test-mode-banner {
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  z-index: 50 !important;
  width: 100%;
}
body.ss-test-mode-banner-visible .main-nav,
body.ss-test-mode-banner-visible .site-header,
body.ss-test-mode-banner-visible .admin-topbar,
body.ss-test-mode-banner-visible .auth-topbar {
  top: 0 !important;
}
body.ss-test-mode-banner-visible .admin-mobile-bottom-nav,
body.ss-test-mode-banner-visible .auth-topbar {
  scroll-margin-top: 0 !important;
}
.ss-skip-link,
.skip-link {
  position: fixed !important;
  top: 10px !important;
  left: 10px !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: none !important;
  z-index: -1 !important;
}
.ss-skip-link:focus,
.ss-skip-link:focus-visible,
.skip-link:focus,
.skip-link:focus-visible {
  width: auto !important;
  height: auto !important;
  padding: 9px 12px !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
  z-index: 10001 !important;
  border: 1px solid var(--ss-line-strong, #c5d0ca) !important;
  border-radius: var(--ss-radius-sm, 6px) !important;
  background: #fff !important;
  color: var(--ss-ink, #17201b) !important;
  font-weight: 800 !important;
  font-size: .88rem !important;
  text-decoration: none !important;
  box-shadow: 0 8px 18px rgba(23, 32, 27, .12) !important;
  outline: 3px solid rgba(15, 118, 110, .28) !important;
  outline-offset: 2px !important;
}

/* StoreSync test banner sticky stack recovery: banner remains visible; nav sits below it. */
:root {
  --ss-test-mode-banner-height: 0px;
}
.ss-test-mode-banner {
  position: sticky !important;
  top: 0 !important;
  right: auto !important;
  left: auto !important;
  z-index: 10000 !important;
  width: 100% !important;
}
body.ss-test-mode-banner-visible .main-nav,
body.ss-test-mode-banner-visible .site-header,
body.ss-test-mode-banner-visible .admin-topbar {
  top: var(--ss-test-mode-banner-height, 0px) !important;
}
body.ss-test-mode-banner-visible .auth-topbar {
  scroll-margin-top: calc(var(--ss-test-mode-banner-height, 0px) + 12px) !important;
}
.ss-skip-link,
.skip-link {
  position: fixed !important;
  top: 10px !important;
  left: 10px !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: none !important;
  z-index: -1 !important;
}
.ss-skip-link:focus,
.ss-skip-link:focus-visible,
.skip-link:focus,
.skip-link:focus-visible {
  top: calc(var(--ss-test-mode-banner-height, 0px) + 10px) !important;
  left: 10px !important;
  width: auto !important;
  height: auto !important;
  padding: 9px 12px !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
  z-index: 10002 !important;
  border: 1px solid var(--ss-line-strong, #c5d0ca) !important;
  border-radius: var(--ss-radius-sm, 6px) !important;
  background: #fff !important;
  color: var(--ss-ink, #17201b) !important;
  font-weight: 800 !important;
  font-size: .88rem !important;
  text-decoration: none !important;
  box-shadow: 0 8px 18px rgba(23, 32, 27, .12) !important;
  outline: 3px solid rgba(15, 118, 110, .28) !important;
  outline-offset: 2px !important;
}

/* StoreSync test banner fixed stack v7: banner stays visible while scrolling; nav stays directly underneath. */
:root {
  --ss-test-mode-banner-height: 0px;
}
body.ss-test-mode-banner-visible {
  padding-top: var(--ss-test-mode-banner-height, 0px) !important;
}
.ss-test-mode-banner {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  z-index: 2147483000 !important;
  width: 100% !important;
  transform: none !important;
}
body.ss-test-mode-banner-visible .main-nav,
body.ss-test-mode-banner-visible .site-header,
body.ss-test-mode-banner-visible .admin-topbar {
  top: var(--ss-test-mode-banner-height, 0px) !important;
}
body:not(.ss-test-mode-banner-visible) .main-nav,
body:not(.ss-test-mode-banner-visible) .site-header,
body:not(.ss-test-mode-banner-visible) .admin-topbar {
  top: 0 !important;
}
.ss-skip-link,
.skip-link {
  position: fixed !important;
  top: 10px !important;
  left: 10px !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: none !important;
  z-index: -1 !important;
}
.ss-skip-link:focus,
.ss-skip-link:focus-visible,
.skip-link:focus,
.skip-link:focus-visible {
  top: calc(var(--ss-test-mode-banner-height, 0px) + 10px) !important;
  left: 10px !important;
  width: auto !important;
  height: auto !important;
  padding: 9px 12px !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
  z-index: 2147483001 !important;
  border: 1px solid var(--ss-line-strong, #c5d0ca) !important;
  border-radius: var(--ss-radius-sm, 6px) !important;
  background: #fff !important;
  color: var(--ss-ink, #17201b) !important;
  font-weight: 800 !important;
  font-size: .88rem !important;
  text-decoration: none !important;
  box-shadow: 0 8px 18px rgba(23, 32, 27, .12) !important;
  outline: 3px solid rgba(15, 118, 110, .28) !important;
  outline-offset: 2px !important;
}