html, body {
  margin: 0;
  padding: 0;
  font-family: var(--mp-font);
  background-color: var(--mp-surface);
}

a, .btn-link {
  color: var(--mp-primary);
}

.app-shell {
  min-height: 100vh;
  margin: 0;
  padding: 0;
}


.app-sidebar {
  width: var(--mp-sidebar-width);
  background: var(--mp-sidebar-bg);
  color: var(--mp-sidebar-text);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: visible;
  flex-shrink: 0;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--mp-sidebar-border);
  transition: width 0.2s ease, transform 0.2s ease;
}

.app-sidebar.collapsed {
  width: var(--mp-sidebar-collapsed-width);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: var(--mp-topnav-height);
  padding: 0.7rem 0.65rem;
  border-bottom: 1px solid var(--mp-sidebar-border);
  flex-shrink: 0;
  box-sizing: border-box;
}

.sidebar-brand-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  text-decoration: none;
  color: #fff !important;
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.sidebar-brand-logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  background: #000;
  border-radius: 0.55rem;
  flex-shrink: 0;
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}

.brand-text-primary {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}

.brand-text-secondary {
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--mp-sidebar-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-collapse-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--mp-sidebar-border);
  border-radius: 0.3rem;
  background: transparent;
  color: var(--mp-sidebar-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.7rem;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.sidebar-collapse-btn:hover {
  background: var(--mp-sidebar-hover);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.16);
}

.sidebar-nav {
  flex: 1;
  padding: 0.4rem 0.35rem 0.65rem;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 0;
}

.sidebar-footer {
  flex-shrink: 0;
  padding: 0.75rem 0.65rem;
  border-top: 1px solid var(--mp-sidebar-border);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.app-sidebar.collapsed .sidebar-footer {
  padding: 0.5rem 0.35rem;
}

.sidebar-help-card {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  padding: 0.85rem 0.8rem;
  border-radius: 0.75rem;
  background: rgba(13, 148, 136, 0.18);
  border: 1px solid rgba(13, 148, 136, 0.28);
  margin-bottom: 0.15rem;
}

.sidebar-help-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 0.55rem;
  background: rgba(255, 255, 255, 0.12);
  color: #5eead4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar-help-title {
  font-size: 0.8rem;
  font-weight: 650;
  color: #fff;
}

.sidebar-help-link {
  font-size: 0.72rem;
  color: #99f6e4 !important;
  text-decoration: none;
}

.sidebar-help-link:hover {
  color: #ccfbf1 !important;
  text-decoration: underline;
}

.sidebar-collapse-footer {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  height: var(--mp-sidebar-item-height);
  padding: 0 0.65rem;
  border: none;
  border-radius: 0.65rem;
  background: transparent;
  color: var(--mp-sidebar-text-muted);
  font-size: 0.8125rem;
  cursor: pointer;
}

.sidebar-collapse-footer:hover {
  background: var(--mp-sidebar-hover);
  color: #fff;
}

.sidebar-link {
  display: flex !important;
  align-items: center;
  gap: 0.65rem;
  height: var(--mp-sidebar-item-height);
  min-height: var(--mp-sidebar-item-height);
  padding: 0 0.75rem !important;
  margin-bottom: 2px;
  color: var(--mp-sidebar-text) !important;
  border-radius: 0.65rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none !important;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.sidebar-link i:first-child,
.sidebar-link .nav-icon {
  width: 1.15rem;
  text-align: center;
  flex-shrink: 0;
  font-size: 0.9rem;
  color: var(--mp-sidebar-icon);
  opacity: 0.95;
  transition: color 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}

.sidebar-link:hover i:first-child {
  transform: scale(1.05);
}

.sidebar-link .link-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-link .link-chevron {
  font-size: 0.65rem;
  opacity: 0.55;
  flex-shrink: 0;
  color: var(--mp-sidebar-text-muted);
}

.sidebar-link:hover {
  background: var(--mp-sidebar-hover);
  color: #fff !important;
}

.sidebar-link:hover i:first-child,
.sidebar-link:hover .nav-icon {
  color: #fff;
}

.sidebar-link.active,
.sidebar-link.active:hover {
  background: var(--mp-sidebar-active);
  color: #fff !important;
}

.sidebar-link.active i:first-child,
.sidebar-link.active .nav-icon {
  color: #fff;
  opacity: 1;
}

.sidebar-link-parent {
  font-weight: 600;
}

.nav-group {
  margin-bottom: 0.15rem;
}

.sidebar-nav > * + * {
  margin-top: 0.2rem;
  padding-top: 0.2rem;
  border-top: 1px dashed rgba(148, 163, 184, 0.18);
}

/* Tree-style nested group — curved child arrows */
.nav-submenu {
  --tree-x: 1.15rem;
  --tree-arm: 12px;
  --tree-line: rgba(148, 163, 184, 0.55);
  position: relative;
  margin: 0.1rem 0 0.25rem;
  padding: 0;
  border: none;
}

.nav-tree-item {
  position: relative;
  padding-left: calc(var(--tree-x) + var(--tree-arm) + 6px);
}

/* Curved L “child arrow” into each item */
.nav-tree-item::before {
  content: "";
  position: absolute;
  left: var(--tree-x);
  top: 0;
  width: var(--tree-arm);
  height: 50%;
  box-sizing: border-box;
  border-left: 1.5px solid var(--tree-line);
  border-bottom: 1.5px solid var(--tree-line);
  border-bottom-left-radius: 10px;
  pointer-events: none;
}

/* Continue vertical spine below the elbow (not on last child) */
.nav-tree-item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: var(--tree-x);
  top: 50%;
  bottom: 0;
  width: 0;
  box-sizing: border-box;
  border-left: 1.5px solid var(--tree-line);
  pointer-events: none;
}

.sidebar-link-child {
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 0.45rem !important;
  font-size: 0.78rem !important;
  font-weight: 400 !important;
  color: var(--mp-sidebar-text-muted) !important;
}

.sidebar-link-child:hover,
.sidebar-link-child.active,
.sidebar-link-child.active:hover {
  color: #fff !important;
}

/* Icon-only collapsed mode */
.app-sidebar.collapsed .brand-text,
.app-sidebar.collapsed .link-label,
.app-sidebar.collapsed .link-chevron,
.app-sidebar.collapsed .nav-submenu,
.app-sidebar.collapsed .sidebar-collapse-btn .collapse-label,
.app-sidebar.collapsed .sidebar-help-card,
.app-sidebar.collapsed .sidebar-collapse-footer .link-label {
  display: none;
}

.app-sidebar.collapsed .sidebar-brand {
  position: relative;
  justify-content: center;
  min-height: var(--mp-topnav-height);
  padding: 0.85rem 0.35rem;
}

.app-sidebar.collapsed .sidebar-brand-link {
  justify-content: center;
}

.app-sidebar.collapsed .sidebar-nav {
  padding: 0.5rem 0.35rem 1rem;
}

.app-sidebar.collapsed .sidebar-nav > * + * {
  margin-top: 0.15rem;
  padding-top: 0.15rem;
  border-top-color: rgba(148, 163, 184, 0.12);
}

.app-sidebar.collapsed .sidebar-link {
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  min-height: 40px;
  margin: 0 auto 2px;
  padding: 0 !important;
  gap: 0;
  border-radius: 0.5rem;
}

.app-sidebar.collapsed .sidebar-link i:first-child {
  margin: 0;
  width: auto;
  font-size: 0.95rem;
}

.app-sidebar.collapsed .sidebar-link.active,
.app-sidebar.collapsed .sidebar-link.active:hover {
  background: var(--mp-sidebar-active);
  color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.app-sidebar.collapsed .sidebar-link.active i:first-child {
  color: #fff;
  opacity: 1;
}

.app-sidebar.collapsed .sidebar-link:hover:not(.active) {
  background: var(--mp-sidebar-hover);
}

.app-sidebar.collapsed .sidebar-footer .sidebar-link {
  width: 40px;
  height: 40px;
}

/* Expand control sits on the outer edge in icon-only mode */
.app-sidebar.collapsed .sidebar-collapse-btn {
  display: inline-flex;
  position: absolute;
  top: 50%;
  right: -14px;
  transform: translateY(-50%);
  z-index: 1050;
  background: var(--mp-sidebar-bg);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.25);
}

.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 1035;
}

/* ── Settings secondary sidebar ──────────────────────── */

.settings-sidebar {
  width: var(--mp-settings-sidebar-width);
  flex-shrink: 0;
  background: #fff;
  border-right: 1px solid var(--mp-border);
  height: 100vh;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  z-index: 1030;
}

.settings-sidebar-header {
  padding: 1.15rem 1.1rem 0.85rem;
  border-bottom: 1px solid var(--mp-border);
  flex-shrink: 0;
}

.settings-sidebar-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.settings-sidebar-subtitle {
  margin: 0.2rem 0 0;
  font-size: 0.78rem;
  color: #64748b;
}

.settings-sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem 0.65rem 1rem;
}

.settings-nav-section {
  margin-bottom: 1rem;
}

.settings-nav-section-title {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
  padding: 0.25rem 0.55rem 0.45rem;
}

.settings-nav-link {
  display: flex !important;
  align-items: center;
  gap: 0.55rem;
  height: 36px;
  padding: 0 0.55rem !important;
  margin-bottom: 2px;
  border-radius: 0.375rem;
  color: #334155 !important;
  text-decoration: none !important;
  font-size: 0.8125rem;
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
}

.settings-nav-link i {
  width: 1.1rem;
  text-align: center;
  color: #64748b;
  font-size: 0.85rem;
}

.settings-nav-link:hover {
  background: #f1f5f9;
  color: #0f172a !important;
}

.settings-nav-link.active,
.settings-nav-link.active:hover {
  background: #e8f1ff;
  color: #0d6efd !important;
}

.settings-nav-link.active i {
  color: #0d6efd;
}

.app-main {
  min-width: 0;
  background: var(--mp-surface);
}

.app-topnav {
  height: var(--mp-topnav-height);
  min-height: var(--mp-topnav-height);
  max-height: var(--mp-topnav-height);
  padding: 0 0.65rem !important;
  position: sticky;
  top: 0;
  z-index: 1020;
}

.app-topnav.menu-open {
  z-index: 1060;
}

.topnav-chrome {
  min-width: 0;
  line-height: 1.2;
}

.topnav-title {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topnav-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  font-size: 0.8125rem;
  line-height: 1.2;
}

.topnav-breadcrumb-parent {
  color: #94a3b8;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.topnav-breadcrumb-parent:hover {
  color: #64748b;
}

.topnav-breadcrumb-sep {
  color: #cbd5e1;
  flex-shrink: 0;
}

.topnav-breadcrumb-current {
  color: #0f172a;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.user-menu {
  position: relative;
  flex-shrink: 0;
}

.user-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: none;
  background: transparent;
  padding: 0.15rem 0.2rem;
  height: 36px;
  border-radius: 0.65rem;
  cursor: pointer;
  color: #0f172a;
}

.user-menu-trigger:hover {
  background: #f8fafc;
}

.user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--mp-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.user-menu-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.05rem;
  min-width: 0;
  line-height: 1.15;
}

.user-menu-name {
  font-size: 0.8125rem;
  font-weight: 600;
}

.user-menu-role {
  font-size: 0.68rem;
  color: #94a3b8;
  font-weight: 500;
}

.user-menu-caret {
  font-size: 0.55rem;
  color: #94a3b8;
}

.user-menu-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 0.45rem);
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--mp-border);
  border-radius: 0.65rem;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
  padding: 0.55rem 0;
  z-index: 1060;
}

.user-menu-header {
  padding: 0.35rem 0.9rem 0.55rem;
}

.user-menu-header-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: #0f172a;
}

.user-menu-header-email {
  font-size: 0.78rem;
  color: #94a3b8;
  margin-top: 0.1rem;
}

.user-menu-divider {
  height: 1px;
  background: var(--mp-border);
  margin: 0.25rem 0 0.35rem;
}

.user-menu-item {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  text-align: left;
  padding: 0.5rem 0.9rem;
  font-size: 0.875rem;
  color: #0f172a;
  text-decoration: none;
  cursor: pointer;
}

.user-menu-item:hover {
  background: #f8fafc;
  color: #0f172a;
}

.user-menu-item-danger {
  color: #b42318 !important;
}

.user-menu-item-danger:hover {
  background: #fef3f2;
  color: #912018 !important;
}

/* Top nav notifications */
.topnav-notification {
  position: relative;
  flex-shrink: 0;
}

.topnav-notification-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 0.55rem;
  background: transparent;
  color: #475569;
  cursor: pointer;
  font-size: 0.95rem;
}

.topnav-notification-trigger:hover {
  background: #f8fafc;
  color: #0f172a;
}

.topnav-notification-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1;
  border: 2px solid #fff;
  pointer-events: none;
}

.topnav-notification-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 0.45rem);
  width: min(360px, calc(100vw - 1.5rem));
  background: #fff;
  border: 1px solid var(--mp-border);
  border-radius: 0.65rem;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
  z-index: 1060;
  overflow: hidden;
}

.topnav-notification-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid var(--mp-border);
  background: #f8fafc;
}

.topnav-notification-title {
  font-size: 0.84rem;
  font-weight: 700;
  color: #0f172a;
}

.topnav-notification-count {
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
}

.topnav-notification-empty {
  padding: 1rem 0.9rem;
  font-size: 0.8rem;
  color: #64748b;
}

.topnav-notification-list {
  list-style: none;
  margin: 0;
  padding: 0.35rem 0;
  max-height: 320px;
  overflow-y: auto;
}

.topnav-notification-row {
  display: flex;
  align-items: stretch;
  position: relative;
}

.topnav-notification-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  text-align: left;
  padding: 0.65rem 2.1rem 0.65rem 0.9rem;
  cursor: pointer;
  color: inherit;
}

.topnav-notification-item:hover {
  background: #f8fafc;
}

.topnav-notification-item.is-unread {
  background: #f8fafc;
}

.topnav-notification-item.is-unread .topnav-notification-item-title {
  font-weight: 700;
}

.topnav-notification-item-icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #ecfdf5;
  color: #0d9488;
  font-size: 0.85rem;
}

.topnav-notification-item-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.topnav-notification-item-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
  word-break: break-word;
}

.topnav-notification-item-meta {
  font-size: 0.72rem;
  font-weight: 500;
  color: #c2410c;
}

.topnav-notification-item-sub {
  font-size: 0.72rem;
  color: #64748b;
  word-break: break-word;
}

.topnav-notification-item-chevron {
  flex-shrink: 0;
  font-size: 0.62rem;
  color: #94a3b8;
}

.topnav-notification-dismiss {
  position: absolute;
  top: 0.4rem;
  right: 0.45rem;
  z-index: 1;
  width: 1.45rem;
  height: 1.45rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.topnav-notification-dismiss:hover {
  background: #fee2e2;
  color: #b91c1c;
}

.user-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1055;
}

.app-footer {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.75rem;
  min-height: 0;
  line-height: 1.2;
}

.stat-tile {
  background: #fff;
  border: 1px solid var(--mp-border);
  border-radius: 0.5rem;
}

/* ── List panel (Suppliers-style tables) ─────────────── */

.metric-card {
  width: 200px;
  min-width: 200px;
  max-width: 200px;
  height: 65px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  background: #fff;
  border: 1px solid var(--mp-border);
  border-radius: 0.35rem;
  padding: 0.45rem 0.65rem;
  text-align: center;
}

.metric-card-label {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
  margin: 0;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.metric-card-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0;
}

/* Keep metric columns compact — don't stretch to 33% */
.row > [class*="col-"]:has(> .metric-card) {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

/* ── Dashboard ───────────────────────────────────────── */

.app-main > main:has(.dashboard) {
  padding: 0.35rem 0.65rem 0.55rem !important;
  background: #f3f4f6;
}

.dashboard {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.dash-welcome {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
  width: 100%;
  padding: 0.7rem 0.9rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.85rem;
}

.dash-welcome-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
  min-width: 0;
}

.dash-welcome-title {
  margin: 0;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  font-weight: 750;
  letter-spacing: -0.03em;
  color: #111827;
  line-height: 1.25;
}

.dash-welcome-text {
  margin: 0;
  font-size: 0.8rem;
  color: #6b7280;
  line-height: 1.4;
}

.dash-welcome-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
}

.dash-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.95rem;
  border-radius: 0.65rem;
  font-size: 0.84rem;
  font-weight: 650;
  text-decoration: none !important;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.dash-btn-ghost {
  background: #fff;
  color: #374151;
  border-color: #e5e7eb;
}

.dash-btn-ghost:hover:not(:disabled) {
  background: #f9fafb;
}

.dash-btn-primary {
  background: #111827;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(17, 24, 39, 0.18);
}

.dash-btn-primary:hover {
  background: #0b1220;
  transform: translateY(-1px);
}

.dash-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.dash-top-row {
  display: grid;
  grid-template-columns: minmax(260px, 1.05fr) minmax(280px, 1fr) minmax(280px, 1fr);
  gap: 0.55rem;
  align-items: stretch;
}

.dash-top-left,
.dash-top-center {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.dash-top-center,
.dash-attendance {
  height: 100%;
  min-height: 0;
}

.dash-top-center .dash-distribution,
.dash-attendance {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.dash-distribution .dash-donut-body {
  flex: 1;
}

.dash-attendance .dash-chart-canvas-wrap {
  flex: 1;
  min-height: 130px;
}

.dash-hero-main,
.dash-mini,
.dash-card,
.dash-cta {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.9rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 20px rgba(15, 23, 42, 0.03);
  animation: dashboard-rise 0.45s ease-out both;
}

.dash-hero-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.75rem 0.85rem;
  text-decoration: none !important;
  color: inherit;
  min-height: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dash-hero-main:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1);
}

.dash-hero-main-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.dash-hero-label {
  font-size: 0.84rem;
  font-weight: 600;
}

.dash-hero-badge {
  font-size: 0.72rem;
  font-weight: 700;
  color: #047857;
  background: #ecfdf5;
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  white-space: nowrap;
}

.dash-hero-value {
  font-size: clamp(2.1rem, 3.5vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  color: #111827;
  line-height: 1;
}

.dash-hero-sub {
  margin: 0;
  font-size: 0.8rem;
  color: #9ca3af;
}

.dash-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.dash-mini {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.65rem 0.7rem;
  text-decoration: none !important;
  color: inherit;
  min-height: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

a.dash-mini:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1);
}

.dash-mini-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}

.dash-mini-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 0.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
}

.dash-mini-pending .dash-mini-icon { background: rgba(20, 184, 166, 0.12); color: #0f766e; }
.dash-mini-stores .dash-mini-icon { background: rgba(249, 115, 22, 0.12); color: #ea580c; }
.dash-mini-customers .dash-mini-icon { background: rgba(139, 92, 246, 0.12); color: #7c3aed; }
.dash-mini-revenue .dash-mini-icon { background: rgba(239, 68, 68, 0.12); color: #dc2626; }

.dash-mini-trend {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.12rem 0.38rem;
  border-radius: 999px;
  white-space: nowrap;
}

.dash-mini-trend.is-up {
  color: #047857;
  background: #ecfdf5;
}

.dash-mini-trend.is-down {
  color: #b91c1c;
  background: #fef2f2;
}

.dash-mini-value {
  margin-top: auto;
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #111827;
  line-height: 1;
}

.dash-mini-label {
  font-size: 0.75rem;
  font-weight: 600;
}

.dash-kpi-skeleton {
  pointer-events: none;
  min-height: 96px;
  border-radius: 0.9rem;
  background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
  background-size: 200% 100%;
  animation: dashboard-shimmer 1.2s ease-in-out infinite;
}

.dash-payroll-row,
.dash-bottom-row {
  display: grid;
  gap: 0.45rem;
}

.dash-payroll-row {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr);
}

.dash-bottom-row {
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
}

.dash-card {
  padding: 0.55rem 0.7rem 0.6rem;
}

.dash-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.45rem;
}

.dash-card-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.02em;
}

.dash-card-action {
  font-size: 0.8rem;
  font-weight: 650;
  color: #0f766e;
  text-decoration: none;
}

.dash-card-action:hover {
  text-decoration: underline;
}

.dash-card-subhead {
  margin: 0.55rem 0 0.35rem;
}

.dash-card-subhead h3 {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 700;
  color: #374151;
}

.dash-card-subhead-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.dash-chart-canvas-wrap {
  position: relative;
  height: 160px;
}

.dash-chart-bar {
  height: 130px;
}

.dash-chart-line {
  height: 150px;
}

.dash-donut-body {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 140px;
}

.dash-donut-canvas-wrap {
  position: relative;
  width: 120px;
  height: 120px;
  flex-shrink: 0;
}

.dash-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  text-align: center;
}

.dash-donut-center-value {
  font-size: 1.25rem;
  font-weight: 800;
  color: #111827;
  letter-spacing: -0.03em;
  line-height: 1;
}

.dash-donut-center-label {
  margin-top: 0.2rem;
  font-size: 0.66rem;
  color: #9ca3af;
  font-weight: 600;
}

.dash-donut-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
}

.dash-donut-legend li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
}

.dash-legend-swatch {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
}

.dash-legend-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-legend-count,
.dash-legend-pct {
  color: #111827;
  font-weight: 700;
}

.dash-legend-empty {
  color: #9ca3af;
  font-size: 0.8rem;
}

.dash-status-chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.55rem;
  border-top: 1px solid #f3f4f6;
}

.dash-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}

.dash-status-chip,
.dash-status-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
  text-align: center;
  min-height: 3.35rem;
  padding: 0.45rem 0.3rem;
  border-radius: 0.65rem;
  background: #f9fafb;
  border: 1px solid #eef2f7;
}

.dash-status-chip-value,
.dash-status-stat-value {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  color: #111827;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.dash-status-chip-label,
.dash-status-stat-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: #6b7280;
  line-height: 1.2;
}

.dash-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.8rem;
  background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
  border: none;
  color: #fff;
  text-decoration: none !important;
}

.dash-cta-copy {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.dash-cta-copy strong {
  font-size: 0.92rem;
  font-weight: 750;
}

.dash-cta-copy span {
  font-size: 0.75rem;
  opacity: 0.9;
}

.dash-cta-btn {
  flex-shrink: 0;
  background: #111827;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 750;
  padding: 0.45rem 0.8rem;
  border-radius: 0.55rem;
}

.dash-attendance .dash-card-subhead {
  margin-top: 0.75rem;
}

.dash-revenue-panel {
  padding: 0;
  overflow: hidden;
}

.dash-revenue-hero {
  background: #111827;
  color: #fff;
  padding: 0.85rem 0.95rem 0.8rem;
}

.dash-revenue-kicker {
  font-size: 0.78rem;
  font-weight: 650;
  color: #9ca3af;
  margin-bottom: 0.35rem;
}

.dash-revenue-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.dash-revenue-hero-value {
  font-size: clamp(1.8rem, 3vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.dash-revenue-hero-period {
  margin-top: 0.35rem;
  font-size: 0.82rem;
  color: #9ca3af;
}

.dash-revenue-download {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 0.55rem;
  color: #fff !important;
  text-decoration: none !important;
  font-size: 0.78rem;
  font-weight: 650;
}

.dash-revenue-download:hover {
  background: rgba(255, 255, 255, 0.08);
}

.dash-revenue-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.dash-revenue-metric-label {
  display: block;
  font-size: 0.7rem;
  color: #9ca3af;
  margin-bottom: 0.2rem;
}

.dash-revenue-metrics strong {
  font-size: 0.92rem;
  font-weight: 750;
}

.dash-trend-body {
  margin-top: 0.75rem;
  padding: 0.5rem 0.8rem 0.7rem;
}

.dash-pipeline-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

.dash-pipeline-stat {
  text-align: center;
  padding: 0.55rem 0.3rem;
  border-radius: 0.7rem;
  background: #f9fafb;
}

.dash-pipeline-icon {
  display: inline-flex;
  width: 1.7rem;
  height: 1.7rem;
  margin: 0 auto 0.35rem;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  background: rgba(20, 184, 166, 0.12);
  color: #0f766e;
  font-size: 0.72rem;
}

.dash-pipeline-stat-value {
  display: block;
  font-size: 1.15rem;
  font-weight: 800;
  color: #111827;
}

.dash-pipeline-stat-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: #6b7280;
}

.dash-candidate-list,
.dash-perf-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.dash-candidate-list li,
.dash-perf-list li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.4rem 0.1rem;
  border-bottom: 1px solid #f3f4f6;
}

.dash-candidate-list li:last-child,
.dash-perf-list li:last-child {
  border-bottom: none;
}

.dash-candidate-avatar {
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 999px;
  background: #ecfdf5;
  color: #0f766e;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 750;
  flex-shrink: 0;
}

.dash-candidate-copy,
.dash-perf-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.dash-candidate-copy strong,
.dash-perf-copy strong {
  font-size: 0.84rem;
  font-weight: 700;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-candidate-copy span,
.dash-perf-copy span {
  font-size: 0.72rem;
  color: #9ca3af;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-perf-score {
  text-align: right;
  flex-shrink: 0;
}

.dash-perf-score strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 800;
  color: #111827;
}

.dash-orders {
  padding-bottom: 0.55rem;
}

.dash-table-wrap {
  overflow-x: auto;
  margin: 0 -0.25rem;
}

.dash-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
  font-size: 0.82rem;
}

.dash-table th {
  text-align: left;
  padding: 0.35rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
/*  color: #9ca3af;
*/  border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
}

.dash-table td {
  padding: 0.4rem 0.5rem;
  color: #111827;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: middle;
}

.dash-table tbody tr:last-child td {
  border-bottom: none;
}

.dash-table tbody tr:hover td {
  background: #f9fafb;
}

.dash-order-id {
  color: #111827;
  text-decoration: none;
  font-weight: 650;
}

.dash-order-id:hover {
  color: #0f766e;
}

.dash-store-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.dash-store-avatar {
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 0.45rem;
  background: #ecfdf5;
  color: #0f766e;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  flex-shrink: 0;
}

.dash-platform,
.dash-muted,
.dash-amount {
  white-space: nowrap;
}

.dash-muted {
  color: #6b7280;
}

.dash-amount {
  font-weight: 650;
}

@keyframes dashboard-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes dashboard-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

@media (max-width: 1199.98px) {
  .dash-top-row,
  .dash-payroll-row,
  .dash-bottom-row {
    grid-template-columns: 1fr;
  }

  .dash-mini-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dash-mini {
    min-height: 0;
  }
}

@media (max-width: 767.98px) {
  .dash-mini-grid,
  .dash-status-grid,
  .dash-pipeline-stats,
  .dash-revenue-metrics,
  .dash-status-chips {
    grid-template-columns: 1fr 1fr;
  }

  .dash-donut-body {
    flex-direction: column;
    align-items: stretch;
  }

  .dash-donut-canvas-wrap {
    margin: 0 auto;
  }

  .dash-welcome-actions {
    width: 100%;
  }

  .dash-btn {
    flex: 1;
    justify-content: center;
  }
}

.store-list-page {
  width: 100%;
}

.product-manage-page {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.app-main > main:has(.store-list-page),
.app-main > main:has(.customer-profile-page),
.app-main > main:has(.user-profile-page),
.app-main > main:has(.pd-page) {
  padding: 0.45rem 0.5rem !important;
}

.app-main > main:has(.user-invite-page) {
  padding: 0.45rem 0.85rem !important;
}

.store-list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  margin: 0 0 0.6rem;
}

.store-list-head h1 {
  margin: 0;
  color: #0f172a;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.store-list-new-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 36px;
  padding: 0.45rem 1rem;
  border: 1px solid var(--mp-sidebar-bg);
  border-radius: 0.45rem;
  background: var(--mp-sidebar-bg);
  color: #fff;
  font-size: 0.84rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;
}

.store-list-new-btn:hover {
  background: var(--mp-sidebar-hover);
  border-color: var(--mp-sidebar-hover);
  color: #fff;
}

.store-list-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.55rem;
  margin: 0 0 0.65rem;
}

.store-list-stats-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.store-list-stats-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.store-metric {
  position: relative;
  min-height: 0;
  padding: 0.65rem 0.85rem 0.65rem 1rem;
  background: #fff;
  border: 1px solid #e8eef5;
  border-radius: 0.65rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}

.store-metric:has(.store-metric-icon) {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.store-metric::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #cbd5e1;
}

.store-metric.is-total::before { background: #475569; }
.store-metric.is-active::before { background: #166534; }
.store-metric.is-connected::before { background: #14b8a6; }
.store-metric.is-pending::before { background: #fb923c; }
.store-metric.is-attention::before { background: #c2410c; }

.store-metric-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  flex-shrink: 0;
  border-radius: 0.55rem;
  background: #f1f5f9;
  color: #475569;
  font-size: 0.82rem;
}

.store-metric.is-total .store-metric-icon { background: rgba(71, 85, 105, 0.12); color: #475569; }
.store-metric.is-active .store-metric-icon { background: rgba(22, 101, 52, 0.12); color: #166534; }
.store-metric.is-connected .store-metric-icon { background: rgba(20, 184, 166, 0.12); color: #0f766e; }
.store-metric.is-pending .store-metric-icon { background: rgba(251, 146, 60, 0.14); color: #c2410c; }
.store-metric.is-attention .store-metric-icon { background: rgba(194, 65, 12, 0.12); color: #c2410c; }

.store-metric-copy {
  min-width: 0;
  flex: 1;
}

.store-metric-label {
  color: #000;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.store-metric-value {
  margin-top: 0.3rem;
  color: #0f172a;
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.store-list-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.65rem;
  margin: 0 0 0.65rem;
  padding: 0.5rem 0.7rem;
  background: #fff;
  border: 1px solid #e8eef5;
  border-radius: 0.65rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  overflow: visible;
  position: relative;
  z-index: 3;
}

.store-list-filterbar .list-search {
  flex: 1 1 220px;
  max-width: 332px;
  min-width: 160px;
}

.store-list-filterbar .list-search .input-group-text,
.store-list-filterbar .list-search .form-control,
.store-list-filterbar .list-search .btn {
  border-color: #e2e8f0;
  font-size: 0.82rem;
}

.store-list-filterbar .list-search .input-group-text {
  background: #fff;
  color: #94a3b8;
  border-radius: 0.45rem 0 0 0.45rem;
}

.store-list-filterbar .list-search .form-control {
  border-left: 0;
  box-shadow: none;
  height: 36px;
  min-height: 36px;
}

.store-list-filterbar .list-search .form-control:focus {
  box-shadow: none;
  border-color: #e2e8f0;
}

.store-list-filterbar .store-list-selects {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
}

.store-list-filterbar .store-list-select {
  width: 168px;
  flex: 0 0 168px;
}

.store-list-filterbar .searchable-select-input {
  height: 36px;
  min-height: 36px;
  border-color: #e2e8f0;
  font-size: 0.82rem;
  box-shadow: none;
}

.store-list-filterbar .searchable-select-input:focus {
  box-shadow: none;
  border-color: #cbd5e1;
}

.store-list-filterbar .searchable-select-menu {
  font-size: 0.8rem;
}

.store-list-filterbar .list-filter-tabs {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.12rem;
  margin-left: 0;
  padding: 0.2rem;
  background: #eef2f6;
  border: 1px solid #e8eef5;
  border-radius: 0.5rem;
}

.store-list-filterbar .list-filter-tab {
  background: transparent;
  color: #64748b;
  border-radius: 0.4rem;
  padding: 0.38rem 0.7rem;
  font-size: 0.8rem;
  font-weight: 500;
}

.store-list-filterbar .list-filter-tab.active {
  background: #fff;
  color: #0f172a;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.store-list-filterbar .list-filter-tab:hover:not(.active) {
  background: transparent;
  color: #334155;
}

.store-list-filterbar .store-list-new-btn {
  margin-left: auto;
  flex-shrink: 0;
}

/* Keep consecutive action buttons grouped; only the first is pushed right */
.store-list-filterbar .store-list-new-btn + .store-list-new-btn {
  margin-left: 0;
}

.store-list-card.list-panel {
  width: 100%;
  border-radius: 0.65rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.store-list-page .list-panel {
  font-size: 0.82rem;
}

.store-list-page .list-panel .table-shell {
  width: 100%;
}

.store-list-page .list-panel .table,
.store-list-page .list-panel .table.list-table {
  width: 100%;
  table-layout: fixed;
  font-size: 0.82rem;
}

.store-list-page .list-panel .table > :not(caption) > * > * {
  border-right: none !important;
  padding: 0.28rem 0.8rem;
  vertical-align: middle;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/*
.store-list-page .list-panel .table tbody td,
.store-list-page .list-panel .table tbody td a,
.store-list-page .entity-name,
.store-list-platform,
.store-list-customer,
.store-list-date {
  color: #000;
}*/

.store-list-page .list-panel .table thead th,
.store-list-page .list-panel .table thead.table-light th {
  background: #f1f5f9 !important;
  color: #000;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.38rem 0.8rem;
}

.store-list-page .list-panel .table thead th.table-sortable {
  padding: 0 !important;
}

.store-list-page .table-sort-btn {
  padding: 0.38rem 0.8rem;
  box-sizing: border-box;
  color: #000;
}

.store-list-page .list-panel .table th:nth-child(1),
.store-list-page .list-panel .table td:nth-child(1) {
  width: 22%;
}

.store-list-page .list-panel .table th:nth-child(2),
.store-list-page .list-panel .table td:nth-child(2) {
  width: 20%;
}

.store-list-page .list-panel .table th:nth-child(3),
.store-list-page .list-panel .table td:nth-child(3) {
  width: 16%;
}

.store-list-page .list-panel .table th:nth-child(4),
.store-list-page .list-panel .table td:nth-child(4) {
  width: 15%;
}

.store-list-page .list-panel .table th:nth-child(5),
.store-list-page .list-panel .table td:nth-child(5) {
  width: 14%;
}

.store-list-page .list-panel .table th:nth-child(6),
.store-list-page .list-panel .table td:nth-child(6) {
  width: 13%;
}

.store-list-page .list-panel .table td:nth-child(4),
.store-list-page .list-panel .table td:nth-child(5) {
  overflow: visible;
  text-overflow: unset;
}

/* Product list grid — aligned columns, dual-axis scroll, frozen SKU */
.store-list-page.product-manage-page {
  --pg-header-h: 2.5rem;
  --pg-filter-h: 2.55rem;
  --pg-sku-w: 9rem;
  --pg-name-w: 14rem;
  --pg-style-w: 7rem;
  --pg-color-w: 7rem;
  --pg-sizex-w: 5.5rem;
  --pg-sizey-w: 5.5rem;
  --pg-line-w: 8rem;
  --pg-upc-w: 8rem;
  --pg-upc2-w: 8rem;
  --pg-casepack-w: 9rem;
  --pg-pweight-w: 7.5rem;
  --pg-plen-w: 7rem;
  --pg-pwid-w: 7rem;
  --pg-phei-w: 7rem;
  --pg-cweight-w: 7.5rem;
  --pg-clen-w: 7rem;
  --pg-cwid-w: 7rem;
  --pg-chei-w: 7rem;
  --pg-inner-w: 7rem;
  --pg-blank-w: 5rem;
  --pg-blank2-w: 5rem;
  --pg-label-w: 10rem;
  --pg-table-w: calc(
    var(--pg-sku-w) + var(--pg-name-w) + var(--pg-style-w) + var(--pg-color-w) +
    var(--pg-sizex-w) + var(--pg-sizey-w) + var(--pg-line-w) + var(--pg-upc-w) +
    var(--pg-upc2-w) + var(--pg-casepack-w) + var(--pg-pweight-w) + var(--pg-plen-w) +
    var(--pg-pwid-w) + var(--pg-phei-w) + var(--pg-cweight-w) + var(--pg-clen-w) +
    var(--pg-cwid-w) + var(--pg-chei-w) + var(--pg-inner-w) + var(--pg-blank-w) +
    var(--pg-blank2-w) + var(--pg-label-w)
  );
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  min-height: 0;
  --pg-font-size: 0.82rem;
  --pg-text: #000;
  color: var(--pg-text);
  font-size: var(--pg-font-size);
}

.app-main > main:has(.product-manage-page) {
  max-width: none !important;
  width: 100%;
}

.product-manage-page .store-list-head,
.product-manage-page .store-list-filterbar {
  flex-shrink: 0;
}

.product-manage-page .product-list-head {
  align-items: flex-start;
  justify-content: flex-start;
}

.product-manage-page .product-list-head-copy {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.product-manage-page .product-autosync-note {
  margin: 0;
  max-width: 42rem;
  color: #475569;
  font-size: 0.86rem;
  font-weight: 400;
  line-height: 1.4;
}

.product-manage-page .store-list-filterbar .store-list-select {
  height: 30px;
  min-height: 30px;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  font-size: 0.76rem;
  border-color: #e2e8f0;
}

.product-manage-page .store-list-filterbar .list-search .input-group-text,
.product-manage-page .store-list-filterbar .list-search .form-control,
.product-manage-page .store-list-filterbar .list-search .btn {
  height: 30px;
  min-height: 30px;
  font-size: 0.76rem;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}

.product-manage-page .store-list-filterbar .list-search .input-group-text {
  display: inline-flex;
  align-items: center;
  padding-left: 0.65rem;
  padding-right: 0.55rem;
}

.product-manage-page .store-list-filterbar {
  position: relative;
  z-index: 30;
  overflow: visible;
}

.product-manage-page .store-list-filterbar .store-list-selects {
  position: relative;
  z-index: 31;
  overflow: visible;
}

.product-manage-page .store-list-filterbar .product-platform-select {
  width: 200px;
  flex: 0 0 200px;
  min-width: 200px;
  position: relative;
  z-index: 32;
  margin-top: -6px;
}

.product-manage-page .store-list-filterbar .product-platform-select.is-open {
  z-index: 2000;
}

.product-manage-page .store-list-filterbar .product-platform-select .searchable-select-input {
  height: 30px;
  min-height: 30px;
  font-size: 0.76rem;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}

.product-manage-page .store-list-filterbar .product-platform-select .searchable-select-menu {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.45rem;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
  max-height: 16rem;
  overflow-y: auto;
  z-index: 2000;
}

.product-manage-page .store-list-filterbar .product-platform-select .searchable-select-menu.is-fixed-menu {
  position: fixed;
  z-index: 3000;
  background: #fff;
}

.product-manage-page .store-list-filterbar .product-platform-select .searchable-select-option {
  background: #fff;
  color: #0f172a;
}

.product-manage-page .store-list-filterbar .product-platform-select .searchable-select-option:hover,
.product-manage-page .store-list-filterbar .product-platform-select .searchable-select-option.is-selected {
  background: #f1f5f9;
}

.product-manage-page .store-list-filterbar .store-list-new-btn {
  min-height: 30px;
  padding: 0.3rem 0.75rem;
  font-size: 0.76rem;
}

.product-manage-page .store-list-filterbar .store-list-new-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.store-list-page.product-manage-page .store-list-card.list-panel,
.store-list-page.product-manage-page .list-panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100% !important;
  max-width: none !important;
  min-height: 0;
  overflow: hidden;
}

.store-list-page.product-manage-page .product-grid-scroll {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: auto;
  max-height: none;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  background: #fff;
}

.store-list-page.product-manage-page .product-grid-scroll .table-shell,
.store-list-page.product-manage-page .product-grid-scroll .table-responsive {
  display: block;
  width: max-content;
  min-width: 100%;
  max-width: none;
  overflow: visible !important;
}

.store-list-page.product-manage-page .list-panel-footer {
  flex-shrink: 0;
  border-top: 1px solid #e2e8f0;
  background: #fff;
}

.store-list-page.product-manage-page .product-grid-scroll .table.product-list-table,
.store-list-page.product-manage-page .product-grid-scroll .table-shell > .table.product-list-table {
  table-layout: fixed;
  width: var(--pg-table-w) !important;
  min-width: var(--pg-table-w) !important;
  max-width: none !important;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 0;
  overflow: visible !important;
}

/* Reset generic store-list width rules inside product grid */
.store-list-page.product-manage-page .product-grid-scroll .table th,
.store-list-page.product-manage-page .product-grid-scroll .table td {
  box-sizing: border-box;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 0.45rem 0.65rem !important;
  vertical-align: middle !important;
  text-align: left !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-right: 1px solid #e8edf3 !important;
  border-bottom: 1px solid #e8edf3 !important;
  color: var(--pg-text) !important;
  font-size: var(--pg-font-size) !important;
  font-weight: 400;
  font-family: inherit;
}

.store-list-page.product-manage-page .product-grid-scroll .table th:last-child,
.store-list-page.product-manage-page .product-grid-scroll .table td:last-child {
  border-right: none !important;
}

/* Colgroup widths — keep header / filter / body aligned */
.store-list-page.product-manage-page .product-list-table col.pg-col-sku { width: var(--pg-sku-w); }
.store-list-page.product-manage-page .product-list-table col.pg-col-name { width: var(--pg-name-w); }
.store-list-page.product-manage-page .product-list-table col.pg-col-style { width: var(--pg-style-w); }
.store-list-page.product-manage-page .product-list-table col.pg-col-color { width: var(--pg-color-w); }
.store-list-page.product-manage-page .product-list-table col.pg-col-sizex { width: var(--pg-sizex-w); }
.store-list-page.product-manage-page .product-list-table col.pg-col-sizey { width: var(--pg-sizey-w); }
.store-list-page.product-manage-page .product-list-table col.pg-col-line { width: var(--pg-line-w); }
.store-list-page.product-manage-page .product-list-table col.pg-col-upc { width: var(--pg-upc-w); }
.store-list-page.product-manage-page .product-list-table col.pg-col-upc2 { width: var(--pg-upc2-w); }
.store-list-page.product-manage-page .product-list-table col.pg-col-casepack { width: var(--pg-casepack-w); }
.store-list-page.product-manage-page .product-list-table col.pg-col-pweight { width: var(--pg-pweight-w); }
.store-list-page.product-manage-page .product-list-table col.pg-col-plen { width: var(--pg-plen-w); }
.store-list-page.product-manage-page .product-list-table col.pg-col-pwid { width: var(--pg-pwid-w); }
.store-list-page.product-manage-page .product-list-table col.pg-col-phei { width: var(--pg-phei-w); }
.store-list-page.product-manage-page .product-list-table col.pg-col-cweight { width: var(--pg-cweight-w); }
.store-list-page.product-manage-page .product-list-table col.pg-col-clen { width: var(--pg-clen-w); }
.store-list-page.product-manage-page .product-list-table col.pg-col-cwid { width: var(--pg-cwid-w); }
.store-list-page.product-manage-page .product-list-table col.pg-col-chei { width: var(--pg-chei-w); }
.store-list-page.product-manage-page .product-list-table col.pg-col-inner { width: var(--pg-inner-w); }
.store-list-page.product-manage-page .product-list-table col.pg-col-blank { width: var(--pg-blank-w); }
.store-list-page.product-manage-page .product-list-table col.pg-col-blank2 { width: var(--pg-blank2-w); }
.store-list-page.product-manage-page .product-list-table col.pg-col-label { width: var(--pg-label-w); }

/* Sticky header + filter (vertical scroll) */
.store-list-page.product-manage-page .product-grid-scroll .table thead > tr:first-child > th {
  position: sticky;
  top: 0;
  z-index: 4;
  height: var(--pg-header-h);
  background: #f1f5f9 !important;
  color: var(--pg-text) !important;
  font-size: var(--pg-font-size) !important;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
}

.store-list-page.product-manage-page .product-grid-scroll .table thead > tr.table-filter-row > th {
  position: sticky;
  top: var(--pg-header-h);
  z-index: 4;
  height: var(--pg-filter-h);
  padding: 0.3rem 0.45rem !important;
  background: #f8fafc !important;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

.store-list-page.product-manage-page .product-grid-scroll .table .table-sort-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  width: 100%;
  max-width: 100%;
  min-height: calc(var(--pg-header-h) - 0.2rem);
  padding: 0 0.65rem;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
}

.store-list-page.product-manage-page .product-grid-scroll .table .table-sort-btn span {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

.store-list-page.product-manage-page .product-grid-scroll .table .table-sort-btn i {
  flex: 0 0 auto;
  width: 0.85rem;
  font-size: 0.78rem;
  line-height: 1;
  opacity: 0.75;
  color: #334155;
}

/* Frozen SKU column (horizontal scroll) */
.store-list-page.product-manage-page .product-grid-scroll .table .pg-col-sku,
.store-list-page.product-manage-page .product-grid-scroll .table .product-sku-col {
  position: sticky;
  left: 0;
  z-index: 3;
  box-shadow: 2px 0 0 #e2e8f0;
}

.store-list-page.product-manage-page .product-grid-scroll .table thead > tr:first-child > th.pg-col-sku,
.store-list-page.product-manage-page .product-grid-scroll .table thead > tr:first-child > th.product-sku-col {
  z-index: 6;
  background: #f1f5f9 !important;
}

.store-list-page.product-manage-page .product-grid-scroll .table thead > tr.table-filter-row > th.pg-col-sku,
.store-list-page.product-manage-page .product-grid-scroll .table thead > tr.table-filter-row > th.product-sku-col {
  z-index: 6;
  background: #f8fafc !important;
}

.store-list-page.product-manage-page .product-grid-scroll .table tbody td.pg-col-sku,
.store-list-page.product-manage-page .product-grid-scroll .table tbody td.product-sku-col {
  background: #fff;
}

.store-list-page.product-manage-page .product-grid-scroll .table tbody tr:nth-child(even) > td.pg-col-sku,
.store-list-page.product-manage-page .product-grid-scroll .table tbody tr:nth-child(even) > td.product-sku-col {
  background: #f8fafc;
}

.store-list-page.product-manage-page .product-grid-scroll .table.table-hover tbody tr:hover > td.pg-col-sku,
.store-list-page.product-manage-page .product-grid-scroll .table.table-hover tbody tr:hover > td.product-sku-col {
  background: #eef2f7;
}

.store-list-page.product-manage-page .product-grid-scroll .table td.product-desc-cell,
.store-list-page.product-manage-page .product-desc-text {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.store-list-page.product-manage-page .product-desc-text {
  display: block;
  width: 100%;
  line-height: 1.35;
}

.store-list-page.product-manage-page .table-column-filter {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 1.65rem;
  min-height: 1.65rem;
  padding: 0.15rem 0.4rem;
  font-size: var(--pg-font-size) !important;
  font-family: inherit;
  line-height: 1.2;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  background: #fff;
  color: var(--pg-text) !important;
  box-sizing: border-box;
}

.store-list-page.product-manage-page .table-column-filter:focus {
  border-color: #94a3b8;
  box-shadow: none;
  outline: none;
}

.store-list-page.product-manage-page .product-grid-scroll .table tbody td,
.store-list-page.product-manage-page .product-grid-scroll .table tbody td a,
.store-list-page.product-manage-page .product-desc-text,
.store-list-page.product-manage-page .product-price-varies,
.store-list-page.product-manage-page .list-panel-footer {
  color: var(--pg-text) !important;
  font-size: var(--pg-font-size) !important;
}

.store-list-page.product-manage-page .product-sku-link,
.store-list-page.product-manage-page .product-desc-link {
  display: inline-block;
  max-width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  color: var(--pg-text) !important;
  font-size: inherit;
  font-weight: 400;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.store-list-page.product-manage-page .product-sku-link:hover,
.store-list-page.product-manage-page .product-desc-link:hover .product-desc-text {
  color: var(--pg-text) !important;
  text-decoration: underline;
}

.store-list-page.product-manage-page .product-price-varies {
  display: block;
  margin-top: 0.1rem;
  font-size: inherit !important;
  color: var(--pg-text) !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

.store-list-page.product-manage-page .product-grid-scroll .table .table-sort-btn,
.store-list-page.product-manage-page .product-grid-scroll .table .table-sort-btn span {
  color: var(--pg-text) !important;
  font-size: inherit !important;
  font-weight: 700;
}

.store-list-page.product-manage-page .product-grid-scroll .table .table-sortable.sorted-asc .table-sort-btn i,
.store-list-page.product-manage-page .product-grid-scroll .table .table-sortable.sorted-desc .table-sort-btn i {
  opacity: 1;
  color: #0f172a;
}

@media (max-width: 1200px) {
  .store-list-page.product-manage-page {
    --pg-name-w: 12rem;
    --pg-label-w: 9rem;
  }
}

@media (max-width: 768px) {
  .store-list-page.product-manage-page .product-grid-scroll {
    min-height: 0;
  }
}

.product-platform-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.product-platform-chip {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border: 1px solid #cfd6df;
  background: #f4f6f8;
  color: #000;
  font-size: 0.75rem;
  line-height: 1.2;
  border-radius: 0.25rem;
}

.store-list-page.product-manage-page .product-grid-scroll .table td.pg-col-platform {
  overflow: visible;
  text-overflow: unset;
  white-space: nowrap;
}

.store-list-page.product-manage-page .product-store-badges {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.28rem;
  max-width: 100%;
}

.store-list-page.product-manage-page .product-store-badges .product-platform-chip {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.72rem;
  font-weight: 600;
  color: #0f172a;
  background: #eef2f7;
  border-color: #d7dee8;
}

.store-list-page.product-manage-page .product-store-badges .product-store-badge-more {
  flex: 0 0 auto;
  background: #e2e8f0;
  border-color: #cbd5e1;
  color: #334155;
  font-weight: 700;
  cursor: default;
}

.store-list-page.product-manage-page .product-grid-scroll .table td.pg-col-price {
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
}

.store-list-page.product-manage-page .product-price-badges {
  flex-wrap: nowrap;
}

.store-list-page.product-manage-page .product-price-badges .product-price-value {
  flex: 0 0 auto;
}

.store-list-page.product-manage-page .product-price-value {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
  overflow: visible;
  text-overflow: unset;
}

.product-price-varies {
  display: block;
  margin-top: 0.15rem;
  color: #000;
  font-size: 0.75rem;
}

.product-detail-dialog {
  width: min(720px, calc(100vw - 2rem));
  max-height: min(88vh, 900px);
  overflow: auto;
  padding-right: 1.1rem;
}

.product-detail-empty {
  margin: 0.5rem 0 0;
  color: #64748b;
}

.product-detail-resync-hint {
  margin: 0;
  padding: 0.5rem 0.65rem;
  border: 1px solid #fde68a;
  border-radius: 0.45rem;
  background: #fffbeb;
  color: #92400e;
  font-size: 0.84rem;
}

.pd-page {
  --pd-font-size: 0.82rem;
  --pd-text: #000;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-width: 1280px;
  font-family: inherit;
  font-size: var(--pd-font-size);
  color: var(--pd-text);
}

.pd-page h1,
.pd-page h2,
.pd-page h3,
.pd-page p,
.pd-page span,
.pd-page strong,
.pd-page label,
.pd-page button,
.pd-page .pd-info-label,
.pd-page .pd-info-value,
.pd-page .pd-metric-label,
.pd-page .pd-metric strong,
.pd-page .pd-hero-name,
.pd-page .pd-hero-copy h1,
.pd-page .pd-stores-head h2,
.pd-page .pd-stores-head p,
.pd-page .pd-store-card-platform,
.pd-page .pd-card-head h2,
.pd-page .pd-card-head-copy h2,
.pd-page .pd-card-head-copy p,
.pd-page .pd-card-platform,
.pd-page .pd-card-store,
.pd-page .pd-image-placeholder {
  font-family: inherit;
  font-size: var(--pd-font-size);
  color: var(--pd-text);
  letter-spacing: normal;
  text-transform: none;
}

.pd-hero {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 1px solid #dbe7f3;
  border-radius: 0.75rem;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}

.pd-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem;
  padding: 0.7rem 0.85rem;
}

.pd-hero-identity {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  min-width: 0;
  flex: 1 1 auto;
}

.pd-hero-icon {
  display: grid;
  place-items: center;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 0.85rem;
  background: linear-gradient(160deg, #3b82f6 0%, #2563eb 100%);
  color: #fff;
  font-size: 1.15rem;
  flex-shrink: 0;
  box-shadow: 0 8px 16px rgba(37, 99, 235, 0.22);
}

.pd-hero-thumb {
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 0.85rem;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
}

.pd-hero-thumb-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pd-hero-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.28rem;
}

.pd-hero-copy h1 {
  margin: 0;
  font-weight: 700;
  line-height: 1.15;
}

.pd-hero-name {
  margin: 0;
  line-height: 1.35;
  font-weight: 400;
}

.pd-hero-copy .status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.15rem;
}

.pd-status-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: currentColor;
  flex-shrink: 0;
}

.pd-hero-aside {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  flex: 0 0 auto;
  min-width: 0;
}

.pd-hero-metrics {
  display: flex;
  align-items: stretch;
  gap: 0.65rem;
  min-width: 0;
}

.pd-metric {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 8.75rem;
  padding: 0.55rem 0.7rem;
  border: 0;
  border-radius: 0.7rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.pd-metric-qty {
  background: #eff6ff;
}

.pd-metric-price {
  background: #ecfdf5;
}

.pd-metric-sync {
  background: #f5f3ff;
}

.pd-metric-icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  font-size: 0.85rem;
  flex-shrink: 0;
}

.pd-metric-qty .pd-metric-icon {
  color: #2563eb;
}

.pd-metric-price .pd-metric-icon {
  color: #16a34a;
}

.pd-metric-sync .pd-metric-icon {
  color: #7c3aed;
}

.pd-metric-label {
  display: block;
  margin-bottom: 0.12rem;
  font-weight: 400;
}

.pd-metric strong {
  display: block;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.pd-hero-menu {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin: 0.15rem 0 0;
  padding: 0;
  border: 0;
  border-radius: 0.45rem;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
}

.pd-hero-menu:hover {
  background: #f1f5f9;
  color: #475569;
}

.pd-hero-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  border-top: 1px solid #e8eef5;
  background: #f8fafc;
}

.pd-hero-meta-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  padding: 0.55rem 0.75rem;
  border-right: 1px solid #e2e8f0;
}

.pd-hero-meta-item:last-child {
  border-right: 0;
}

.pd-hero-meta-icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #64748b;
  font-size: 0.78rem;
  flex-shrink: 0;
}

.pd-hero-meta-label {
  display: block;
  margin-bottom: 0.12rem;
  color: #94a3b8;
  font-size: 0.72rem;
  font-weight: 600;
}

.pd-hero-meta-item strong {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #0f172a;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.2;
}

.pd-hero-meta-status.is-active {
  color: #16a34a;
}

.pd-hero-meta-status .pd-status-dot {
  background: #22c55e;
}

.pd-listing-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.pd-listing-chip {
  border: 1px solid #d1d5db;
  background: #fff;
  color: #374151;
  border-radius: 999px;
  padding: 0.25rem 0.65rem;
  font-size: 0.75rem;
  cursor: pointer;
}

.pd-listing-chip span {
  margin-left: 0.3rem;
  color: #6b7280;
}

.pd-listing-chip.is-active {
  border-color: #111827;
  background: #f3f4f6;
  color: #111827;
  font-weight: 600;
}

.pd-stores-panel {
  margin: 0;
  padding: 0.55rem 0.7rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.65rem;
  background: #fff;
}

.pd-stores-head {
  margin: 0 0 0.45rem;
}

.pd-stores-head h2 {
  margin: 0;
  font-weight: 700;
}

.pd-stores-head p {
  margin: 0.2rem 0 0;
  font-weight: 400;
}

.pd-stores-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 0.55rem;
}

.pd-store-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: 100%;
  margin: 0;
  padding: 0.5rem 0.65rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.55rem;
  background: #f9fafb;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.pd-store-card:hover {
  border-color: #cbd5e1;
  background: #fff;
}

.pd-store-card.is-active {
  border-color: #0f172a;
  background: #fff;
  box-shadow: 0 0 0 1px #0f172a;
}

.pd-store-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.pd-store-card-platform {
  min-width: 0;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pd-store-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  color: #64748b;
  font-size: 0.74rem;
}

.pd-tabs {
  display: none;
}

.pd-tab {
  display: none;
}

.pd-body {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
}

@media (max-width: 960px) {
  .pd-body {
    grid-template-columns: 1fr;
  }
}

.pd-images-card {
  align-self: stretch;
}

.pd-card {
  border: 1px solid #e5e7eb;
  border-radius: 0.65rem;
  background: #fff;
  box-shadow: none;
  overflow: hidden;
}

.pd-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid #e8eef5;
  background: #fff;
}

.pd-card-head-copy h2 {
  margin: 0;
  font-weight: 700;
}

.pd-card-head-copy p {
  margin: 0.2rem 0 0;
  font-weight: 400;
}

.pd-card-head h2 {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-weight: 700;
}

.pd-card-head h2 i {
  color: var(--pd-text);
}

.pd-card-platform,
.pd-card-store {
  margin-left: 0;
  padding: 0.2rem 0.55rem;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #f8fafc;
  font-weight: 600;
  flex-shrink: 0;
}

.pd-card-store {
  font-weight: 600;
}

.pd-info-card {
  padding-bottom: 0;
}

.pd-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.25rem;
  row-gap: 0;
  padding: 0.05rem 0.85rem 0.25rem;
}

.pd-info-row {
  display: grid;
  grid-template-columns: 1.25rem minmax(6.5rem, 38%) minmax(0, 1fr);
  align-items: center;
  column-gap: 0.5rem;
  min-width: 0;
  padding: 0.35rem 0;
  border-bottom: 1px solid #f3f4f6;
}

.pd-info-icon {
  display: grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  background: transparent;
  color: #6b7280;
  font-size: 0.72rem;
  flex-shrink: 0;
}

.pd-info-icon.is-active {
  color: #111827;
  font-size: 0.5rem;
}

.pd-info-label {
  font-weight: 500;
  line-height: 1.25;
}

.pd-info-value {
  font-weight: 600;
  line-height: 1.3;
  word-break: break-word;
  text-align: left;
}

@media (max-width: 860px) {
  .pd-info-grid {
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  .pd-info-row {
    grid-template-columns: 1.15rem minmax(6rem, 40%) minmax(0, 1fr);
  }
}

.pd-images-panel {
  padding: 0.85rem;
}

.pd-product-image {
  display: block;
  width: 100%;
  max-height: 280px;
  object-fit: contain;
  border-radius: 0.55rem;
  background: #f8fafc;
}

.pd-product-image-lg {
  max-height: 480px;
}

.pd-image-placeholder {
  display: grid;
  place-items: center;
  gap: 0.45rem;
  min-height: 220px;
  border-radius: 0.55rem;
  background: #f8fafc;
  text-align: center;
}

.pd-image-placeholder i {
  font-size: 1.6rem;
}

.pd-image-placeholder-lg {
  min-height: 320px;
}

.pd-history-panel {
  padding: 2rem 1.25rem;
}

.pd-history-empty {
  display: grid;
  place-items: center;
  gap: 0.35rem;
  text-align: center;
  color: #64748b;
}

.pd-history-empty i {
  font-size: 1.6rem;
  color: #94a3b8;
  margin-bottom: 0.35rem;
}

.pd-history-empty h3 {
  margin: 0;
  color: #0f172a;
  font-size: 1.05rem;
}

.pd-history-empty p {
  margin: 0;
  max-width: 28rem;
}

.pd-history-meta {
  margin-top: 0.35rem !important;
  font-size: 0.84rem;
  color: #94a3b8;
}

@media (max-width: 960px) {
  .pd-hero-top {
    flex-direction: column;
    align-items: stretch;
  }

  .pd-hero-aside {
    width: 100%;
  }

  .pd-hero-metrics {
    flex: 1 1 auto;
    width: 100%;
  }

  .pd-metric {
    flex: 1 1 0;
    min-width: 0;
  }

  .pd-metric strong {
    white-space: normal;
  }

  .pd-hero-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pd-hero-meta-item:nth-child(2n) {
    border-right: 0;
  }

  .pd-hero-meta-item:nth-child(-n+2) {
    border-bottom: 1px solid #e2e8f0;
  }
}

@media (max-width: 860px) {
  .pd-hero-metrics {
    flex-direction: column;
  }

  .pd-hero-meta {
    grid-template-columns: 1fr;
  }

  .pd-hero-meta-item,
  .pd-hero-meta-item:nth-child(2n),
  .pd-hero-meta-item:nth-child(-n+2) {
    border-right: 0;
    border-bottom: 1px solid #e2e8f0;
  }

  .pd-hero-meta-item:last-child {
    border-bottom: 0;
  }
}

.store-list-page .entity-avatar {
  width: 24px;
  height: 24px;
  border: 0;
  font-size: 0.68rem;
  background: #e2e8f0;
  color: #475569;
}

.store-list-page .entity-avatar.tone-a,
.store-list-page .entity-avatar.tone-b,
.store-list-page .entity-avatar.tone-c {
  background: #e2e8f0;
  color: #475569;
}

.store-list-page .entity-name {
  min-width: 0;
/*  font-size: 0.86rem;
*/  overflow: hidden;
  text-overflow: ellipsis;
}

.store-list-page .status-pill {
  gap: 0.3rem;
  padding: 0.1rem 0.45rem;
  font-size: 0.72rem;
  max-width: 100%;
}

.store-list-page .status-pill.has-icon::before {
  display: none;
}

.store-list-page .status-pill i {
  font-size: 0.62rem;
}

.store-list-page .list-panel-footer {
  padding: 0.45rem 0.8rem;
}

.user-list-page {
  width: 100%;
  max-width: 66rem;
}

.user-list-page .store-list-filterbar .store-list-new-btn {
  min-height: 30px;
  padding: 0.3rem 0.75rem;
  font-size: 0.76rem;
  gap: 0.3rem;
  border-radius: 0.35rem;
}

.user-list-page .list-panel .table.user-list-table th:nth-child(1),
.user-list-page .list-panel .table.user-list-table td:nth-child(1) {
  width: 20%;
}

.user-list-page .list-panel .table.user-list-table th:nth-child(2),
.user-list-page .list-panel .table.user-list-table td:nth-child(2) {
  width: 24%;
}

.user-list-page .list-panel .table.user-list-table th:nth-child(3),
.user-list-page .list-panel .table.user-list-table td:nth-child(3) {
  width: 14%;
}

.user-list-page .list-panel .table.user-list-table th:nth-child(4),
.user-list-page .list-panel .table.user-list-table td:nth-child(4) {
  width: 18%;
}

.user-list-page .list-panel .table.user-list-table th:nth-child(5),
.user-list-page .list-panel .table.user-list-table td:nth-child(5) {
  width: 12%;
  overflow: visible;
  text-overflow: unset;
}

.user-list-page .list-panel .table.user-list-table th:nth-child(6),
.user-list-page .list-panel .table.user-list-table td:nth-child(6) {
  width: 7rem;
  overflow: visible;
  text-overflow: unset;
  white-space: nowrap;
}

.user-list-page .list-row-actions {
  justify-content: flex-end;
  min-width: 4rem;
}

.user-list-page .list-row-action {
  flex-shrink: 0;
  text-decoration: none;
}

.user-list-page .table-filter-row th {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0 !important;
  padding: 0.3rem 0.45rem !important;
  vertical-align: middle;
}

.user-list-page .table-column-filter {
  width: 100%;
  min-width: 0;
  height: 1.6rem;
  min-height: 1.6rem;
  padding: 0.1rem 0.35rem;
  font-size: 0.72rem;
  line-height: 1.2;
  border-color: #ced4da;
  border-radius: 0.25rem;
  background: #fff;
}

.user-list-page .table-column-filter:focus {
  border-color: #94a3b8;
  box-shadow: none;
}

.user-list-page .list-panel .table.user-list-table {
  border-collapse: collapse;
  border: 1px solid #e2e8f0;
}

.user-list-page .list-panel .table.user-list-table > :not(caption) > * > * {
  border-right: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.user-list-page .list-panel .table.user-list-table thead th,
.user-list-page .list-panel .table.user-list-table thead.table-light th {
  border-right: 1px solid #cbd5e1 !important;
  border-bottom: 1px solid #cbd5e1 !important;
  text-align: center !important;
}

.user-list-page .list-panel .table.user-list-table .table-sort-btn {
  text-align: center;
}

.user-list-page .list-panel .table.user-list-table tbody td {
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 400;
  color: #334155;
}

.user-list-page .entity-cell,
.user-list-page .entity-name,
.user-list-page .store-list-customer,
.user-list-page .store-list-platform,
.user-list-page .store-list-date {
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 400;
  color: #334155;
}

.user-list-page .entity-cell:hover .entity-name {
  color: var(--mp-primary, #0d6efd);
}

.user-list-page .status-pill {
  font-size: 0.78rem;
  font-weight: 400;
}

.user-list-page .status-pill::before {
  display: none;
}

.order-list-page {
  width: 100%;
  max-width: 112rem;
}

.order-list-page .store-list-filterbar .store-list-new-btn {
  min-height: 30px;
  padding: 0.3rem 0.75rem;
  font-size: 0.76rem;
  gap: 0.3rem;
  border-radius: 0.35rem;
  margin-left: auto;
}

.order-list-page .order-list-manual-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  flex: 0 0 auto;
  min-height: 2rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #475569;
  cursor: default;
  user-select: none;
  white-space: nowrap;
}

.order-list-page .order-list-manual-filter span {
  cursor: default;
}

.order-list-page .order-list-manual-filter input {
  width: 0.9rem;
  height: 0.9rem;
  margin: 0;
  accent-color: #16a34a;
  cursor: pointer;
}

.order-list-page .list-panel .table-shell {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
}

.order-list-page .list-panel .table.order-list-table {
  width: 100%;
  min-width: 78rem;
  table-layout: fixed;
  border-collapse: collapse;
  border: 1px solid #e2e8f0;
}

.order-list-page .list-panel .table.order-list-table > :not(caption) > * > * {
  border-right: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 0.45rem 0.6rem !important;
  vertical-align: middle !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left !important;
  box-sizing: border-box;
}

.order-list-page .list-panel .table.order-list-table > :not(caption) > * > *:last-child {
  border-right: none !important;
}

.order-list-page .list-panel .table.order-list-table thead th,
.order-list-page .list-panel .table.order-list-table thead.table-light th {
  background: #f1f5f9 !important;
  border-right: 1px solid #cbd5e1 !important;
  border-bottom: 1px solid #cbd5e1 !important;
  color: #0f172a;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left !important;
  padding: 0 !important;
  height: 2.35rem;
}

.order-list-page .list-panel .table.order-list-table thead th.table-sortable {
  padding: 0 !important;
}

.order-list-page .list-panel .table.order-list-table thead th:not(.table-sortable) {
  padding: 0.45rem 0.6rem !important;
}

.order-list-page .list-panel .table.order-list-table .table-sort-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.25rem;
  width: 100%;
  height: 100%;
  min-height: 2.35rem;
  text-align: left;
  padding: 0.45rem 0.6rem;
  box-sizing: border-box;
  color: #0f172a;
}

/* Column widths: Order Id, PO, Buyer, Platform, Addr1, Addr2, City, State, Status, Total, Date, Actions */
.order-list-page .list-panel .table.order-list-table th:nth-child(1),
.order-list-page .list-panel .table.order-list-table td:nth-child(1) {
  width: 10%;
}

.order-list-page .list-panel .table.order-list-table th:nth-child(2),
.order-list-page .list-panel .table.order-list-table td:nth-child(2),
.order-list-page .list-panel .table.order-list-table td.order-col-po {
  width: 12%;
  min-width: 10rem;
}

.order-list-page .list-panel .table.order-list-table > :not(caption) > * > *.order-col-po,
.order-list-page .list-panel .table.order-list-table tbody td.order-col-po {
  overflow: visible !important;
  text-overflow: unset;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.order-list-page .list-panel .table.order-list-table th:nth-child(3),
.order-list-page .list-panel .table.order-list-table td:nth-child(3) {
  width: 9%;
}

.order-list-page .list-panel .table.order-list-table th:nth-child(4),
.order-list-page .list-panel .table.order-list-table td:nth-child(4),
.order-list-page .list-panel .table.order-list-table td.order-col-platform {
  width: 8%;
  min-width: 6.5rem;
}

.order-list-page .list-panel .table.order-list-table td.order-col-platform {
  overflow: visible;
  text-overflow: unset;
  white-space: nowrap;
}

.order-list-page .list-panel .table.order-list-table th:nth-child(5),
.order-list-page .list-panel .table.order-list-table td:nth-child(5),
.order-list-page .list-panel .table.order-list-table th:nth-child(6),
.order-list-page .list-panel .table.order-list-table td:nth-child(6) {
  width: 10%;
}

.order-list-page .list-panel .table.order-list-table th:nth-child(7),
.order-list-page .list-panel .table.order-list-table td:nth-child(7) {
  width: 7%;
}

.order-list-page .list-panel .table.order-list-table th:nth-child(8),
.order-list-page .list-panel .table.order-list-table td:nth-child(8) {
  width: 5%;
}

.order-list-page .list-panel .table.order-list-table th:nth-child(9),
.order-list-page .list-panel .table.order-list-table td:nth-child(9) {
  width: 10%;
}

.order-list-page .list-panel .table.order-list-table th:nth-child(10),
.order-list-page .list-panel .table.order-list-table td:nth-child(10) {
  width: 8%;
}

.order-list-page .list-panel .table.order-list-table th:nth-child(11),
.order-list-page .list-panel .table.order-list-table td:nth-child(11) {
  width: 7.5%;
}

.order-list-page .list-panel .table.order-list-table th:nth-child(12),
.order-list-page .list-panel .table.order-list-table td:nth-child(12) {
  width: 4.5%;
  min-width: 3.25rem;
}

/* Keep Actions left-aligned with other columns */
.order-list-page .list-panel .table.order-list-table th:nth-child(12),
.order-list-page .list-panel .table.order-list-table td.order-col-actions {
  overflow: visible;
  text-overflow: unset;
  white-space: nowrap;
}

.order-list-page .table-filter-row th {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0 !important;
  padding: 0.4rem 0.5rem !important;
  vertical-align: middle !important;
  text-align: left !important;
  height: auto;
}

.order-list-page .table-filter-row th.table-filter-spacer {
  padding: 0.4rem 0.5rem !important;
}

.order-list-page .table-column-filter {
  display: block;
  width: 100%;
  min-width: 0;
  height: 1.65rem;
  min-height: 1.65rem;
  margin: 0;
  padding: 0.15rem 0.4rem;
  font-size: 0.72rem;
  line-height: 1.2;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  background: #fff;
  color: #334155;
  box-sizing: border-box;
}

.order-list-page .table-column-filter.form-select {
  padding-right: 1.6rem;
}

.order-list-page .table-column-filter:focus {
  border-color: #94a3b8;
  box-shadow: none;
  outline: none;
}

.order-list-page .list-panel .table.order-list-table tbody td.order-col-status,
.order-list-page .list-panel .table.order-list-table tbody td.order-col-actions {
  overflow: visible;
  text-overflow: unset;
}

.order-list-page .list-panel .table.order-list-table td.order-col-status,
.order-list-page .list-panel .table.order-list-table td.order-col-total,
.order-list-page .list-panel .table.order-list-table td.list-row-actions,
.order-list-page .list-panel .table.order-list-table td.order-col-actions {
  display: table-cell !important;
  text-align: left !important;
  vertical-align: middle !important;
}

.order-list-page .list-panel .table.order-list-table td.order-col-total {
  font-variant-numeric: tabular-nums;
}

.order-list-page .list-row-actions-group {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.25rem;
  width: 100%;
  margin: 0;
}

.order-list-page .list-row-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  text-decoration: none;
  border-radius: 0.3rem;
  line-height: 1;
}

.order-list-page .list-row-action i {
  font-size: 0.78rem;
  line-height: 1;
}

.order-list-page .list-panel-footer {
  padding: 0.5rem 0.75rem;
}

.order-list-page .list-panel .table.order-list-table tbody td {
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 400;
  color: #334155;
  line-height: 1.35;
}

.order-list-page .order-col-id .entity-name {
  min-width: 0;
}

.order-list-page .order-id-copy-text {
  display: inline;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: #334155;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.35;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.order-list-page .order-id-copy-text:hover {
  color: var(--mp-primary, #0d6efd);
  text-decoration: underline;
}

.order-list-page .list-panel .table.order-list-table tbody td.order-col-id {
  overflow: hidden;
}

.order-list-page .entity-cell,
.order-list-page .entity-name,
.order-list-page .order-col-buyer,
.order-list-page .order-col-po,
.order-list-page .order-col-store,
.order-list-page .order-col-address,
.order-list-page .order-col-city,
.order-list-page .order-col-state,
.order-list-page .order-col-total,
.order-list-page .order-col-date {
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 400;
  color: #334155;
}

.order-list-page .entity-cell:hover .entity-name {
  color: var(--mp-primary, #0d6efd);
}

.order-list-page .order-col-status {
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 400;
  color: #334155;
}

.stores-list-page {
  width: 100%;
  max-width: none;
}

.stores-list-page .store-list-stats,
.stores-list-page .store-list-filterbar,
.stores-list-page .store-list-card {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

.stores-list-page .store-list-filterbar .store-list-new-btn {
  min-height: 30px;
  padding: 0.3rem 0.75rem;
  font-size: 0.76rem;
  gap: 0.3rem;
  border-radius: 0.35rem;
}

.stores-list-page .list-panel .table-shell {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
}

.stores-list-page .list-panel .table.stores-list-table {
  width: 100%;
  min-width: 78rem;
  table-layout: fixed;
  border-collapse: collapse;
  border: 1px solid #e2e8f0;
}

.stores-list-page .list-panel .table.stores-list-table > :not(caption) > * > * {
  border-right: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 0.4rem 0.45rem !important;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
}

.stores-list-page .list-panel .table.stores-list-table > :not(caption) > * > *:last-child {
  border-right: none !important;
}

.stores-list-page .list-panel .table.stores-list-table thead th,
.stores-list-page .list-panel .table.stores-list-table thead.table-light th {
  background: #f1f5f9 !important;
  border-right: 1px solid #cbd5e1 !important;
  border-bottom: 1px solid #cbd5e1 !important;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center !important;
  padding: 0 !important;
}

.stores-list-page .list-panel .table.stores-list-table thead th.table-sortable {
  padding: 0 !important;
}

.stores-list-page .list-panel .table.stores-list-table thead th:not(.table-sortable) {
  padding: 0.45rem 0.55rem !important;
}

.stores-list-page .list-panel .table.stores-list-table .table-sort-btn {
/*  justify-content: center;
*/  text-align: center;
  padding: 0.45rem 0.55rem;
  box-sizing: border-box;
}

/* Store, Customer, Platform, Store Type, Connection, Allow Manual, Last Sync, Next Sync, Created, Auth Expires, Actions */
.stores-list-page .list-panel .table.stores-list-table th:nth-child(1),
.stores-list-page .list-panel .table.stores-list-table td:nth-child(1) {
  width: 13%;
}

.stores-list-page .list-panel .table.stores-list-table td:nth-child(1) {
  text-align: left !important;
}

.stores-list-page .list-panel .table.stores-list-table th:nth-child(2),
.stores-list-page .list-panel .table.stores-list-table td:nth-child(2) {
  width: 11%;
}

.stores-list-page .list-panel .table.stores-list-table td:nth-child(2) {
  text-align: left !important;
}

.stores-list-page .list-panel .table.stores-list-table th:nth-child(3),
.stores-list-page .list-panel .table.stores-list-table td:nth-child(3) {
  width: 9%;
}

.stores-list-page .list-panel .table.stores-list-table td:nth-child(3) {
  text-align: left !important;
}

.stores-list-page .list-panel .table.stores-list-table th:nth-child(4),
.stores-list-page .list-panel .table.stores-list-table td:nth-child(4) {
  width: 8%;
  text-align: left !important;
}

.stores-list-page .list-panel .table.stores-list-table th:nth-child(5),
.stores-list-page .list-panel .table.stores-list-table td:nth-child(5) {
  width: 8%;
  text-align: left !important;
}

.stores-list-page .list-panel .table.stores-list-table th:nth-child(6),
.stores-list-page .list-panel .table.stores-list-table td:nth-child(6) {
  width: 10%;
  text-align: left !important;
  padding-left: 0.35rem !important;
  padding-right: 0.35rem !important;
}

.stores-list-page .list-panel .table.stores-list-table th:nth-child(7),
.stores-list-page .list-panel .table.stores-list-table td:nth-child(7),
.stores-list-page .list-panel .table.stores-list-table th:nth-child(8),
.stores-list-page .list-panel .table.stores-list-table td:nth-child(8) {
  width: 8%;
  white-space: nowrap;
  text-align: left !important;
  padding-left: 0.35rem !important;
  padding-right: 0.35rem !important;
}

.stores-list-page .list-panel .table.stores-list-table th:nth-child(9),
.stores-list-page .list-panel .table.stores-list-table td:nth-child(9) {
  width: 8%;
  white-space: nowrap;
  text-align: left !important;
  padding-left: 0.35rem !important;
  padding-right: 0.35rem !important;
}

.stores-list-page .list-panel .table.stores-list-table th:nth-child(10),
.stores-list-page .list-panel .table.stores-list-table td:nth-child(10) {
  width: 9%;
  white-space: nowrap;
  text-align: left !important;
  padding-left: 0.35rem !important;
  padding-right: 0.35rem !important;
}

.stores-list-page .list-panel .table.stores-list-table td.is-auth-expiring {
  color: #b45309;
  font-weight: 600;
}

.stores-list-page .list-panel .table.stores-list-table td.is-auth-expired {
  color: #b91c1c;
  font-weight: 700;
}

.stores-list-page .list-panel .table.stores-list-table th:nth-child(11),
.stores-list-page .list-panel .table.stores-list-table td:nth-child(11) {
  width: 6%;
  text-align: center !important;
  overflow: visible;
  text-overflow: unset;
  white-space: nowrap;
  padding-left: 0.35rem !important;
  padding-right: 0.35rem !important;
}

.stores-list-page .list-panel .table.stores-list-table td.list-row-actions {
  display: table-cell !important;
  text-align: center !important;
  vertical-align: middle !important;
}

.stores-list-page .list-row-actions-group {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  flex-wrap: nowrap;
}

.stores-list-page .list-row-actions {
  width: auto;
  min-width: 0;
}

.stores-list-page .list-row-action {
  flex-shrink: 0;
  text-decoration: none;
}

.stores-list-page .table-filter-row th {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0 !important;
  padding: 0.35rem 0.45rem !important;
  vertical-align: middle;
}

.stores-list-page .table-filter-row th.table-filter-spacer {
  padding: 0.35rem 0.45rem !important;
}

.stores-list-page .table-column-filter {
  width: 100%;
  min-width: 0;
  height: 1.6rem;
  min-height: 1.6rem;
  padding: 0.1rem 0.35rem;
  font-size: 0.72rem;
  line-height: 1.2;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  background: #fff;
  color: #334155;
}

.stores-list-page .table-column-filter:focus {
  border-color: #94a3b8;
  box-shadow: none;
}

.stores-list-page .list-panel .table.stores-list-table tbody td:nth-child(4),
.stores-list-page .list-panel .table.stores-list-table tbody td:nth-child(5),
.stores-list-page .list-panel .table.stores-list-table tbody td:nth-child(6),
.stores-list-page .list-panel .table.stores-list-table tbody td:nth-child(7),
.stores-list-page .list-panel .table.stores-list-table tbody td:nth-child(8),
.stores-list-page .list-panel .table.stores-list-table tbody td:nth-child(9),
.stores-list-page .list-panel .table.stores-list-table tbody td:nth-child(10) {
  overflow: hidden;
  text-overflow: ellipsis;
}

.stores-list-page .list-panel-footer {
  padding: 0.45rem 0.65rem;
}

.stores-list-page .list-panel .table.stores-list-table tbody td {
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 400;
  color: #334155;
}

.stores-list-page .entity-cell,
.stores-list-page .entity-name,
.stores-list-page .store-list-customer,
.stores-list-page .store-list-platform,
.stores-list-page .store-list-date {
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 400;
  color: #334155;
}

.stores-list-page .entity-cell:hover .entity-name {
  color: var(--mp-primary, #0d6efd);
}

.stores-list-page .status-pill {
  display: inline-flex;
  max-width: 100%;
  box-sizing: border-box;
  font-size: 0.72rem;
  font-weight: 600;
  vertical-align: middle;
}

.stores-list-page .status-pill::before {
  display: none;
}

.customer-list-page {
  width: 100%;
  max-width: 85rem;
}

.customer-list-page .list-panel .table-shell {
  width: 100%;
  overflow: visible;
}

.customer-list-page .list-panel .table.customer-list-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border: 1px solid #e2e8f0;
}

.customer-list-page .list-panel .table.customer-list-table > :not(caption) > * > * {
  border-right: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 0.4rem 0.55rem !important;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-list-page .list-panel .table.customer-list-table > :not(caption) > * > *:last-child {
  border-right: none !important;
}

.customer-list-page .list-panel .table.customer-list-table thead th,
.customer-list-page .list-panel .table.customer-list-table thead.table-light th {
  background: #f1f5f9 !important;
  border-right: 1px solid #cbd5e1 !important;
  border-bottom: 1px solid #cbd5e1 !important;
  color: #000;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center !important;
  padding: 0 !important;
}

.customer-list-page .list-panel .table.customer-list-table thead th.table-sortable {
  padding: 0 !important;
}

.customer-list-page .list-panel .table.customer-list-table thead th:not(.table-sortable) {
  padding: 0.45rem 0.55rem !important;
}

.customer-list-page .list-panel .table.customer-list-table .table-sort-btn {
  text-align: center;
  padding: 0.45rem 0.55rem;
  box-sizing: border-box;
}

.customer-list-page .list-panel .table.customer-list-table th:nth-child(1),
.customer-list-page .list-panel .table.customer-list-table td:nth-child(1) {
  width: 16%;
}

.customer-list-page .list-panel .table.customer-list-table td:nth-child(1) {
  text-align: left !important;
}

.customer-list-page .list-panel .table.customer-list-table th:nth-child(2),
.customer-list-page .list-panel .table.customer-list-table td:nth-child(2) {
  width: 10%;
}

.customer-list-page .list-panel .table.customer-list-table td:nth-child(2) {
  text-align: left !important;
}

.customer-list-page .list-panel .table.customer-list-table th:nth-child(3),
.customer-list-page .list-panel .table.customer-list-table td:nth-child(3) {
  width: 14%;
}

.customer-list-page .list-panel .table.customer-list-table td:nth-child(3) {
  text-align: left !important;
}

.customer-list-page .list-panel .table.customer-list-table th:nth-child(4),
.customer-list-page .list-panel .table.customer-list-table td:nth-child(4) {
  width: 16%;
}

.customer-list-page .list-panel .table.customer-list-table td:nth-child(4) {
  text-align: left !important;
}

.customer-list-page .list-panel .table.customer-list-table th:nth-child(5),
.customer-list-page .list-panel .table.customer-list-table td:nth-child(5) {
  width: 12%;
}

.customer-list-page .list-panel .table.customer-list-table td:nth-child(5) {
  text-align: left !important;
}

.customer-list-page .list-panel .table.customer-list-table th:nth-child(6),
.customer-list-page .list-panel .table.customer-list-table td:nth-child(6) {
  width: 10%;
}

.customer-list-page .list-panel .table.customer-list-table td:nth-child(6) {
  text-align: left !important;
}

.customer-list-page .list-panel .table.customer-list-table th:nth-child(7),
.customer-list-page .list-panel .table.customer-list-table td:nth-child(7) {
  width: 12%;
}

.customer-list-page .list-panel .table.customer-list-table td:nth-child(7) {
  text-align: left !important;
}

.customer-list-page .list-panel .table.customer-list-table th:nth-child(8),
.customer-list-page .list-panel .table.customer-list-table td:nth-child(8) {
  width: 9rem;
  text-align: center !important;
  overflow: visible;
  text-overflow: unset;
  white-space: nowrap;
}

.customer-list-page .list-panel .table.customer-list-table td.list-row-actions {
  text-align: center !important;
}

.customer-list-page .list-row-actions {
  display: inline-flex;
  justify-content: center;
  width: 100%;
  min-width: 6.5rem;
}

.customer-list-page .list-row-action {
  flex-shrink: 0;
  text-decoration: none;
}

.customer-list-page .table-filter-row th {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0 !important;
  padding: 0.35rem 0.45rem !important;
  vertical-align: middle;
}

.customer-list-page .table-filter-row th.table-filter-spacer {
  padding: 0.35rem 0.45rem !important;
}

.customer-list-page .table-column-filter {
  width: 100%;
  min-width: 0;
  height: 1.6rem;
  min-height: 1.6rem;
  padding: 0.1rem 0.35rem;
  font-size: 0.72rem;
  line-height: 1.2;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  background: #fff;
  color: #334155;
}

.customer-list-page .table-column-filter:focus {
  border-color: #94a3b8;
  box-shadow: none;
}

.customer-list-page .list-panel .table.customer-list-table tbody td:nth-child(4),
.customer-list-page .list-panel .table.customer-list-table tbody td:nth-child(6) {
  overflow: visible;
  text-overflow: unset;
}

.customer-list-page .list-panel .table.customer-list-table tbody td {
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 400;
  color: #334155;
}

.customer-list-page .entity-cell,
.customer-list-page .entity-name,
.customer-list-page .store-list-customer,
.customer-list-page .store-list-platform,
.customer-list-page .store-list-date {
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 400;
  color: #334155;
}

.customer-list-page .entity-cell:hover .entity-name {
  color: var(--mp-primary, #0d6efd);
}

.customer-list-page .status-pill {
  font-size: 0.78rem;
  font-weight: 400;
}

.customer-list-page .status-pill::before {
  display: none;
}

.customer-list-page .list-panel-footer {
  padding: 0.45rem 0.65rem;
}

@media (max-width: 1199.98px) {
  .store-list-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .store-list-stats-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .store-list-stats-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .store-list-stats,
  .store-list-stats-4,
  .store-list-stats-3 {
    grid-template-columns: 1fr 1fr;
  }

  .store-list-filterbar .list-filter-tabs,
  .store-list-filterbar .store-list-new-btn {
    margin-left: 0;
  }

  .store-list-filterbar .list-search {
    max-width: none;
  }

  .store-list-filterbar .store-list-selects {
    width: 100%;
  }

  .store-list-filterbar .store-list-select {
    flex: 1 1 140px;
    width: auto;
  }
}

.list-panel {
  background: #fff;
  border: 1px solid var(--mp-border);
  border-radius: 0.4rem;
  overflow: hidden;
  font-size: 0.8125rem;
  width: 100%;
}

.list-panel-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--mp-border);
}

.list-panel-toolbar .list-search {
  flex: 1 1 180px;
  max-width: 260px;
  min-width: 140px;
}

.list-panel-toolbar .list-search .input-group-text,
.list-panel-toolbar .list-search .form-control,
.list-panel-toolbar .list-search .btn {
  border-color: #e2e8f0;
  font-size: 0.78rem;
}

.list-panel-toolbar .list-search .input-group-text {
  border-radius: 0.35rem 0 0 0.35rem;
  padding: 0.25rem 0.55rem;
  color: #94a3b8;
  font-size: 0.7rem;
}

.list-panel-toolbar .list-search .form-control {
  border-left: 0;
  box-shadow: none;
  padding-block: 0.3rem;
  min-height: 0;
  height: 30px;
}

.list-panel-toolbar .list-search .form-control:focus {
  box-shadow: none;
  border-color: #e2e8f0;
}

.list-panel-toolbar .list-search .form-control::placeholder {
  color: #94a3b8;
}

.list-filter-tabs {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex: 1 1 auto;
  min-width: 0;
}

.list-filter-tab {
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.list-filter-tab:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.list-filter-tab.active {
  background: #f1f5f9;
  color: #0f172a;
  font-weight: 600;
}

.list-filter-tab-count {
  font-size: 0.7rem;
  font-weight: 600;
  color: #94a3b8;
}

.list-filter-tab.active .list-filter-tab-count {
  color: #475569;
}

.list-filter-tab .tab-warn {
  color: #d97706;
  font-size: 0.62rem;
}

.list-panel-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}

.btn-list-primary {
  background: #0f172a;
  color: #fff;
  border: 1px solid #0f172a;
  border-radius: 0.35rem;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.3rem 0.65rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  text-decoration: none;
  line-height: 1.2;
}

.btn-list-primary:hover {
  background: #1e293b;
  color: #fff;
  border-color: #1e293b;
}

.btn-list-secondary {
  background: #fff;
  color: #334155;
  border: 1px solid #e2e8f0;
  border-radius: 0.35rem;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.3rem 0.65rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  text-decoration: none;
  line-height: 1.2;
}

.btn-list-secondary:hover {
  background: #f8fafc;
  color: #0f172a;
  border-color: #cbd5e1;
}

.list-panel .table,
.list-panel .table.list-table {
  background: transparent;
  border: none;
  border-radius: 0;
  margin-bottom: 0;
  font-size: 0.78rem;
}

.list-panel .table > :not(caption) > * > * {
  border-bottom-color: #f1f5f9;
  border-right: 1px solid #eef2f7;
  padding: 0.4rem 0.75rem;
  vertical-align: middle;
}

.list-panel .table > :not(caption) > * > *:last-child {
  border-right: none;
}

.list-panel .table thead th,
.list-panel .table thead.table-light th {
  background: #e2e8f0 !important;
  border-bottom: 1px solid #cbd5e1;
  border-right: 1px solid #cbd5e1;
  color: #334155;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0.45rem 0.75rem;
}

.list-panel .table thead th:last-child,
.list-panel .table thead.table-light th:last-child {
  border-right: none;
}

.list-panel .table thead th.table-sortable,
.list-panel .table thead.table-light th.table-sortable {
  padding: 0;
}

.table-sort-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  width: 100%;
  margin: 0;
  padding: 0.45rem 0.75rem;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}

.table-sort-btn:hover {
  color: #0f172a;
  background: rgba(15, 23, 42, 0.04);
}

.table-sort-btn i {
  font-size: 0.78rem;
  line-height: 1;
  opacity: 0.7;
  color: #475569;
  flex-shrink: 0;
}

.table-sortable.sorted-asc .table-sort-btn i,
.table-sortable.sorted-desc .table-sort-btn i {
  opacity: 1;
  color: #0f172a;
}

.list-panel .table tbody tr:nth-child(even) > * {
  background-color: #f8fafc;
}

.list-panel .table tbody tr:hover > * {
  background-color: #eef2f7;
}

.list-panel .table tbody tr:last-child > * {
  border-bottom: none;
}

.entity-cell {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.entity-avatar {
  width: 22px;
  height: 22px;
  border-radius: 0.28rem;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 700;
  flex-shrink: 0;
  text-transform: uppercase;
}

.entity-name {
/*  font-weight: 600;
*/  font-size: 0.78rem;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.12rem 0.4rem;
  border-radius: 0.28rem;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.status-pill::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.status-pill-live,
.status-pill-healthy,
.status-pill-active,
.status-pill-completed {
  background: #ecfdf3;
  color: #067647;
}

.status-pill-exported {
  background: #eff6ff;
  color: #1d4ed8;
}

.status-pill-prospect,
.status-pill-attention,
.status-pill-pending,
.status-pill-imported,
.status-pill-readyforexport {
  background: #fff7ed;
  color: #c2410c;
}

.status-pill-frozen,
.status-pill-blocked,
.status-pill-cancelled {
  background: #fef3f2;
  color: #b42318;
}

.status-pill-inactive,
.status-pill-credentialvalidation {
  background: #f1f5f9;
  color: #475569;
}

.detail-panel {
  background: #fff;
  border: 1px solid var(--mp-border);
  border-radius: 0.4rem;
  padding: 0.85rem 1rem;
}

.detail-panel + .detail-panel,
.detail-panel + .list-panel,
.list-panel + .detail-panel {
  margin-top: 0.65rem;
}

.detail-dl {
  display: grid;
  grid-template-columns: minmax(100px, 34%) 1fr;
  gap: 0.35rem 0.75rem;
  margin: 0;
  font-size: 0.78rem;
}

.detail-dl dt {
  margin: 0;
  color: #94a3b8;
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-top: 0.15rem;
}

.detail-dl dd {
  margin: 0;
  color: #0f172a;
  font-weight: 500;
}

.detail-section-title {
  margin: 0 0 0.55rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #94a3b8;
}

/* ── Profile page ─────────────────────────────────────── */

.profile-card {
  width: min(1050px, 100%);
  margin: 0;
  display: grid;
  grid-template-columns: minmax(100px, 0.55fr) 1px minmax(280px, 1.45fr);
  gap: 0;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.85rem;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 14px 36px rgba(15, 23, 42, 0.08);
  overflow: hidden;
  position: relative;
}

.profile-card.customer-detail-card {
  width: 100%;
  overflow: visible;
}

.profile-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #0f172a 0%, #334155 100%);
}

.profile-card-left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  padding: 1.15rem 1.1rem 1.15rem 1.25rem;
  background:
    radial-gradient(120% 120% at 0% 0%, #f8fafc 0%, #ffffff 55%);
}

.profile-card-photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  flex-shrink: 0;
  align-self: center;
  background: #f1f5f9;
  box-shadow:
    0 0 0 1px #e2e8f0,
    0 8px 18px rgba(15, 23, 42, 0.12);
}

.profile-card-identity {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: center;
  gap: 0.2rem;
}

.profile-card-name {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.profile-card-title {
  margin: 0;
  color: #64748b;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.3;
}

.profile-card-org {
  margin: 0.25rem 0 0;
  color: #1e293b;
  font-size: 0.82rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  line-height: 1.2;
}

.profile-card-org i {
  color: #475569;
  font-size: 0.95rem;
  width: 1em;
  text-align: center;
  line-height: 1;
}

.profile-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.65rem;
}

.profile-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.profile-btn i {
  font-size: 0.85rem;
  line-height: 1;
}

.profile-btn:disabled {
  opacity: 0.7;
  cursor: default;
}

a.profile-btn {
  text-decoration: none;
}

.profile-btn-primary {
  background: #0f172a;
  color: #fff;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.18);
}

.profile-btn-primary:hover:not(:disabled) {
  background: #1e293b;
  transform: translateY(-1px);
}

.profile-btn-approve {
  background: #0d9488;
  color: #fff;
  border-color: #0d9488;
  box-shadow: none;
}

.profile-btn-approve:hover:not(:disabled) {
  background: #0f766e;
  border-color: #0f766e;
  color: #fff;
}

.profile-btn-outline {
  background: #fff;
  color: #0f172a;
  border-color: #cbd5e1;
}

.profile-btn-outline:hover:not(:disabled) {
  background: #f8fafc;
  border-color: #94a3b8;
}

.profile-btn-danger {
  background: #fff;
  color: #b91c1c;
  border-color: #fecaca;
}

.profile-btn-danger:hover:not(:disabled) {
  background: #fef2f2;
  border-color: #f87171;
}

.profile-btn-danger-solid {
  background: #b91c1c;
  color: #fff;
  border-color: #b91c1c;
  box-shadow: 0 6px 14px rgba(185, 28, 28, 0.22);
}

.profile-btn-danger-solid:hover:not(:disabled) {
  background: #991b1b;
  border-color: #991b1b;
  transform: translateY(-1px);
}

/* ── Confirmation dialog ──────────────────────────────── */

.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(15, 23, 42, 0.28), rgba(15, 23, 42, 0.52));
  backdrop-filter: blur(3px);
  animation: confirm-overlay-in 0.18s ease-out;
}

.confirm-dialog {
  position: relative;
  width: min(420px, 100%);
  padding: 1.35rem 1.35rem 1.2rem;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 24px 48px rgba(15, 23, 42, 0.18);
  overflow: hidden;
  animation: confirm-dialog-in 0.2s ease-out;
}

.confirm-dialog-accent {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #0f172a 0%, #334155 100%);
}

.confirm-dialog:has(.confirm-dialog-icon-danger) .confirm-dialog-accent {
  background: linear-gradient(180deg, #b91c1c 0%, #f87171 100%);
}

.confirm-dialog-close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  width: 1.85rem;
  height: 1.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.confirm-dialog-close:hover:not(:disabled) {
  background: #f1f5f9;
  color: #0f172a;
}

.confirm-dialog-close:disabled {
  opacity: 0.6;
  cursor: default;
}

.confirm-dialog-icon {
  width: 2.75rem;
  height: 2.75rem;
  margin: 0 0 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.85rem;
  font-size: 1.05rem;
}

.confirm-dialog-icon-danger {
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
}

.confirm-dialog-icon-neutral {
  color: #0f172a;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
}

.confirm-dialog-copy {
  padding-right: 1.5rem;
}

.confirm-dialog-title {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.025em;
  line-height: 1.25;
}

.confirm-dialog-message {
  color: #64748b;
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.45;
}

.confirm-dialog-message p {
  margin: 0;
}

.confirm-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.45rem;
  margin-top: 1.15rem;
  padding-top: 1rem;
  border-top: 1px solid #eef2f7;
}

@keyframes confirm-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes confirm-dialog-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Convert to Live confirmation */
.convert-live-dialog {
  position: relative;
  width: min(460px, 100%);
  padding: 1.35rem 1.35rem 1.15rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.85rem;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 24px 48px rgba(15, 23, 42, 0.18);
  animation: confirm-dialog-in 0.2s ease-out;
}

.convert-live-dialog-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e2e8f0;
  border-radius: 0.45rem;
  background: #fff;
  color: #64748b;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.convert-live-dialog-close:hover:not(:disabled) {
  background: #f8fafc;
  color: #0f172a;
  border-color: #cbd5e1;
}

.convert-live-dialog-close:disabled {
  opacity: 0.6;
  cursor: default;
}

.convert-live-dialog-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0 2rem 1rem 0;
}

.convert-live-dialog-icon {
  position: relative;
  flex-shrink: 0;
  width: 3.1rem;
  height: 3.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  font-size: 1.15rem;
}

.convert-live-dialog-icon-badge {
  position: absolute;
  right: -0.05rem;
  bottom: -0.05rem;
  width: 1.15rem;
  height: 1.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #047857;
  color: #fff;
  font-size: 0.55rem;
  border: 2px solid #fff;
}

.convert-live-dialog-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.convert-live-dialog-message {
  margin: 0 0 1rem;
  color: #334155;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.65;
}

.convert-live-dialog-message .status-pill {
  display: inline-flex;
  align-items: center;
  margin: 0 0.15rem;
  vertical-align: baseline;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
}

.convert-live-dialog-info {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-bottom: 1.15rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid #bbf7d0;
  border-radius: 0.65rem;
  background: #f0fdf4;
  color: #166534;
}

.convert-live-dialog-info > i {
  flex-shrink: 0;
  margin-top: 0.1rem;
  font-size: 0.95rem;
  color: #16a34a;
}

.convert-live-dialog-info p {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.5;
}

.convert-live-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.55rem;
  padding-top: 1rem;
  border-top: 1px solid #eef2f7;
}

.convert-live-dialog-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.35rem;
  padding: 0.45rem 1rem;
  border-radius: 0.55rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.convert-live-dialog-btn:disabled {
  opacity: 0.65;
  cursor: default;
}

.convert-live-dialog-btn-cancel {
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #0f172a;
}

.convert-live-dialog-btn-cancel:hover:not(:disabled) {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.convert-live-dialog-btn-confirm {
  border: 1px solid #047857;
  background: #047857;
  color: #fff;
}

.convert-live-dialog-btn-confirm:hover:not(:disabled) {
  background: #065f46;
  border-color: #065f46;
}

.convert-live-dialog-btn-confirm i {
  font-size: 0.78rem;
}

.customer-status-select {
  min-width: 8.5rem;
  height: 1.85rem;
  padding: 0 0.55rem;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #fff;
  color: #0f172a;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.customer-status-select:disabled {
  opacity: 0.7;
  cursor: default;
}

.customer-detail-archived {
  opacity: 0.98;
}

.profile-card-divider {
  background: linear-gradient(180deg, transparent 8%, #e2e8f0 20%, #e2e8f0 80%, transparent 92%);
  width: 1px;
  align-self: stretch;
}

.profile-card-right {
  padding: 1.05rem 1.2rem;
  display: flex;
  align-items: flex-start;
  background: #fcfdff;
}

.profile-card-details {
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.profile-detail-row {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 0.65rem;
  align-items: center;
  padding: 0.42rem 0;
  border-bottom: 1px solid #f1f5f9;
}

.profile-detail-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.profile-detail-row:first-child {
  padding-top: 0;
}

.profile-detail-row dt {
  margin: 0;
  color: #94a3b8;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.profile-detail-row dd {
  margin: 0;
  color: #0f172a;
  font-size: 0.8rem;
  font-weight: 600;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.profile-edit-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 0.55rem;
  align-content: start;
}

.profile-edit-field {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  margin: 0;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #64748b;
}

.profile-edit-field > span em {
  color: #ef4444;
  font-style: normal;
  font-weight: 700;
}

.profile-edit-field input {
  text-transform: none;
  font-weight: 500;
  letter-spacing: normal;
  color: #0f172a;
  border-radius: 0.4rem;
}

.profile-edit-span {
  grid-column: 1 / -1;
}

.profile-phone-row {
  display: flex;
  gap: 0.4rem;
  align-items: stretch;
}

.profile-phone-code {
  flex: 0 0 5rem;
  padding-right: 0.35rem;
  cursor: pointer;
}

.profile-phone-code-select {
  flex: 0 0 7rem;
  min-width: 7rem;
}

.profile-phone-number {
  flex: 1 1 auto;
  min-width: 0;
}

.profile-edit-field select.form-control {
  cursor: pointer;
}

.profile-edit-summary {
  grid-column: 1 / -1;
  margin: 0 0 0.15rem;
  padding: 0;
}

.profile-field-error {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  color: #dc2626;
}

.profile-edit-field .validation-message,
.profile-edit-field .profile-field-error {
  text-transform: none;
  letter-spacing: normal;
}

/* ── Store create card ────────────────────────────────── */

.store-create-card {
  width: min(860px, 100%);
  margin: 0;
  display: grid;
  grid-template-columns: minmax(240px, 280px) 1px minmax(0, 1fr);
  align-items: stretch;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.85rem;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 14px 36px rgba(15, 23, 42, 0.08);
  overflow: visible;
}

.store-create-divider {
  width: 1px;
  align-self: stretch;
  background: #e2e8f0;
}

.store-create-media {
  position: relative;
  align-self: stretch;
  min-height: 100%;
  padding: 0;
  margin: 0;
  background: #fff;
  overflow: hidden;
  border-radius: 0.85rem 0 0 0.85rem;
}

.store-create-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  border: 0;
}

.store-create-body {
  min-width: 0;
  padding: 1.1rem 1.2rem;
  background: #fff;
  overflow: visible;
  border-radius: 0 0.85rem 0.85rem 0;
  position: relative;
  z-index: 1;
}

.store-create-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin: 0;
}

.store-create-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem 0.85rem;
  width: 100%;
}

.store-create-heading {
  min-width: 0;
  flex: 1 1 8rem;
}

.store-create-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.store-create-subtitle {
  margin: 0.15rem 0 0;
  color: #64748b;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.3;
}

.store-create-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  flex: 0 0 auto;
  margin-left: auto;
}

.store-create-sync {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 2.15rem;
  padding-top: 0.4rem;
  text-transform: none;
  letter-spacing: normal;
}

.store-create-dsco-sync {
  margin-top: 0.15rem;
}

.store-create-dsco-sync .store-create-sync {
  padding-top: 0;
  min-height: 2.35rem;
}

.store-create-dsco-sync .profile-field-error {
  margin-top: 0.35rem;
}

.store-create-sync label {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  color: var(--sc-text, #0f172a);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}

.store-create-sync input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--mp-sidebar-bg, #2a3441);
}

.store-create-manual-flag {
  align-items: center;
  gap: 0.55rem 1rem;
  padding-top: 0;
  min-height: 2.35rem;
}

.store-create-manual-flag label.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
  user-select: none;
}

.store-create-manual-field {
  margin-top: 0;
}

.store-create-manual-last .store-create-manual-flag {
  min-height: 0;
}

.store-create-manual-flag .store-create-hint {
  margin: 0;
  flex: 1 1 12rem;
  font-size: 0.76rem;
  font-weight: 500;
  color: #64748b;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: normal;
}

.store-create-page .validation-message,
.store-create-page .profile-field-error {
  display: block;
  margin-top: 0.15rem;
  color: #dc2626 !important;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.3;
}

.store-create-page {
  --sc-accent: #4b5563;
  --sc-accent-hover: #374151;
  --sc-accent-soft: #f3f4f6;
  --sc-accent-ring: #e5e7eb;
  --sc-text: #0f172a;
  --sc-text-muted: #64748b;
  --sc-text-label: #334155;
  --sc-font-size: 0.875rem;
  --sc-font-size-sm: 0.8125rem;
  --sc-font-size-label: 0.8125rem;
  --sc-font-size-lg: 1.05rem;
  --sc-font-size-xl: 1.25rem;
  display: block;
  width: 100%;
  font-family: var(--mp-font);
  font-size: var(--sc-font-size);
  font-weight: 500;
  color: var(--sc-text);
  line-height: 1.45;
}

.store-create-page a:not(.store-create-btn) {
  color: #4b5563;
}

.store-create-page-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  margin: 0 0 1rem;
}

.store-create-page-head h1 {
  margin: 0;
  font-family: inherit;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--sc-text);
  line-height: 1.25;
}

.store-create-page-head .store-create-kicker {
  margin: 0 0 0.35rem;
  font-size: var(--sc-font-size-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sc-text-muted);
}

.store-create-page-head p {
  margin: 0;
  font-size: var(--sc-font-size);
  font-weight: 500;
  color: var(--sc-text-muted);
  line-height: 1.45;
}

.store-create-page-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
  margin: 0.15rem 0 0;
  grid-column: 1;
  grid-row: 2;
}

.store-create-fields > .store-create-page-actions {
  margin-top: 0.35rem;
  padding-top: 0.85rem;
  border-top: 1px solid #e2e8f0;
}

.store-create-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.45rem;
  padding: 0.5rem 1.05rem;
  border-radius: 0.55rem;
  font-family: inherit;
  font-size: var(--sc-font-size);
  font-weight: 600;
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.store-create-btn:disabled {
  opacity: 0.65;
  cursor: default;
}

.store-create-btn-primary {
  background: var(--mp-sidebar-bg);
  color: #fff;
  box-shadow: none;
}

.store-create-btn-primary:hover:not(:disabled) {
  background: var(--mp-sidebar-hover);
  color: #fff;
}

/* Create/Edit Store: match Customer Information Save (teal) */
.store-create-page .store-create-btn-primary {
  background: #0d9488;
  border-color: #0d9488;
  color: #fff;
}

.store-create-page .store-create-btn-primary:hover:not(:disabled) {
  background: #0f766e;
  border-color: #0f766e;
  color: #fff;
}

.store-create-btn-outline {
  background: #fff;
  color: #4b5563;
  border-color: #d1d5db;
}

.store-create-btn-outline:hover:not(:disabled) {
  background: #f8fafc;
  border-color: #9ca3af;
  color: #1f2937;
}

.store-create-btn-outline i {
  color: #4b5563;
}

.store-create-btn-ghost {
  background: #fff;
  color: #4b5563;
  border-color: #d1d5db;
}

.store-create-btn-ghost:hover:not(:disabled) {
  background: #f8fafc;
  border-color: #9ca3af;
  color: #1f2937;
}

.store-create-main,
.store-create-panels {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.store-create-panels {
  grid-column: 1;
  grid-row: 1;
}

.store-create-panel {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.95rem;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 12px 28px rgba(15, 23, 42, 0.05);
  overflow: visible;
  position: relative;
  z-index: 1;
}

.store-create-panel:has(.searchable-select.is-open) {
  z-index: 40;
}

.store-create-page .searchable-select.is-open {
  z-index: 50;
}

.store-create-page .searchable-select-menu {
  z-index: 60;
}

.store-create-panel-head {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 1.15rem 1.3rem 0.95rem;
  border-bottom: 1px solid #eef2f7;
}

.store-create-panel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 0.65rem;
  background: #e8edf2;
  color: #4b5563;
  font-size: 0.82rem;
  flex-shrink: 0;
}

.store-create-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 999px;
  background: var(--sc-accent);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
}

.store-create-panel-head-copy {
  flex: 1;
  min-width: 0;
}

.store-create-panel-head h2 {
    margin-top: 6px;
    font-family: inherit;
    font-size: var(--sc-font-size-lg);
    font-weight: 700;
    color: var(--sc-text);
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.store-create-panel-head p {
  margin: 0.2rem 0 0;
  font-size: var(--sc-font-size);
  font-weight: 500;
  color: var(--sc-text-muted);
  line-height: 1.45;
}

.store-create-panel-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.15rem 1.3rem 1.25rem;
}

.store-create-manual-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  color: var(--sc-text);
  font-family: inherit;
  font-size: var(--sc-font-size);
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}

.store-create-switch {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.2rem 0 0;
  color: var(--sc-text);
  cursor: pointer;
  user-select: none;
}

.store-create-switch-copy {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.store-create-switch-title {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  font-weight: 650;
}

.store-create-switch-title i {
  color: #94a3b8;
  font-size: 0.78rem;
}

.store-create-switch small {
  color: var(--sc-text-muted);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.4;
}

.store-create-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.store-create-switch-track {
  position: relative;
  flex-shrink: 0;
  width: 2.55rem;
  height: 1.4rem;
  margin-top: 0.1rem;
  border-radius: 999px;
  background: #d1d5db;
  transition: background 0.15s ease;
}

.store-create-switch-track::after {
  content: "";
  position: absolute;
  top: 0.15rem;
  left: 0.15rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.2);
  transition: transform 0.15s ease;
}

.store-create-switch input:checked + .store-create-switch-track {
  background: #16a34a;
}

.store-create-switch input:checked + .store-create-switch-track::after {
  transform: translateX(1.15rem);
}

.store-create-switch.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.store-create-advanced {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.15rem 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: #4b5563;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

.store-create-advanced:hover {
  color: #1f2937;
}

.store-create-advanced i {
  font-size: 0.72rem;
}

.store-create-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.store-create-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: start;
}

.store-create-row.has-custom-platform,
.store-create-row.has-customer-name,
.store-create-row.has-store-type-manual {
  grid-template-columns: 1fr 1fr;
}

.store-create-row.has-store-type-manual {
  align-items: end;
}

.store-create-manual-field {
  justify-content: flex-end;
}

.store-create-manual-check {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.5rem;
  margin: 0;
  font-family: inherit;
  font-size: var(--sc-font-size-label);
  font-weight: 650;
  letter-spacing: 0;
  color: var(--sc-text-label);
  cursor: default;
  user-select: none;
}

.store-create-manual-check span {
  cursor: default;
}

.store-create-manual-check input {
  width: 0.95rem;
  height: 0.95rem;
  margin: 0;
  accent-color: var(--sc-accent, #16a34a);
  flex-shrink: 0;
  cursor: pointer;
}

.store-create-manual-check.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.store-create-manual-check.is-disabled input {
  cursor: not-allowed;
  pointer-events: none;
}

.store-create-page .store-create-stack .searchable-select-icon {
  display: none;
}

.store-create-page .store-create-stack .searchable-select-input {
  padding-left: 0.85rem !important;
}

.store-create-page .store-create-stack .form-control {
  padding-left: 0.85rem;
}

.store-create-manual-inline input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  accent-color: var(--sc-accent);
  flex-shrink: 0;
}

.store-create-manual-inline i {
  color: var(--sc-text-muted);
  font-size: 0.85rem;
}

.store-create-manual-inline.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.store-create-dsco-sync {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 0.1rem;
}

.store-create-dsco-sync-label {
  font-size: var(--sc-font-size-label);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.store-create-dsco-sync-label small {
  margin-left: 0.25rem;
  font-size: var(--sc-font-size-sm);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sc-text-muted);
}

.store-create-sync-tiles {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.55rem;
  width: 100%;
}

.store-create-sync-tile {
  position: relative;
  display: inline-flex;
  flex: 1 1 0;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 0;
  margin: 0;
  padding: 0.55rem 0.65rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.55rem;
  background: #fff;
  color: var(--sc-text);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.store-create-sync-tile input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.store-create-sync-tile i {
  font-size: 0.85rem;
  color: var(--sc-text-muted);
  flex-shrink: 0;
}

.store-create-sync-tile > span {
  font-family: inherit;
  font-size: var(--sc-font-size);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
}

.store-create-sync-tile:hover {
  border-color: #94a3b8;
  background: #f8fafc;
}

.store-create-sync-tile.is-selected {
  border-color: var(--sc-accent);
  background: var(--sc-accent-soft);
  color: var(--sc-text);
  box-shadow: 0 0 0 1px rgba(42, 52, 65, 0.12);
}

.store-create-sync-tile.is-selected i {
  color: var(--sc-accent);
}

.store-create-card-solo {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
}

.store-create-card-solo .store-create-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: 0.9rem;
  padding: 0;
}

.store-create-section-head {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin: 0;
  padding: 1.2rem 1.35rem 1rem;
  border-bottom: 1px solid #e2e8f0;
}

.store-create-section-head-credentials {
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
}

.store-create-section-head-copy {
  flex: 1;
  min-width: 0;
}

.store-create-section-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: auto;
  padding: 1rem 1.35rem 1.25rem;
  border-top: 1px solid #e2e8f0;
}

.store-create-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 999px;
  background: var(--mp-sidebar-bg);
  color: #fff;
  font-size: 0.82rem;
}

.store-create-btn-link {
  background: transparent;
  color: #334155;
  border-color: transparent;
  box-shadow: none;
}

.store-create-btn-link:hover:not(:disabled) {
  background: transparent;
  color: var(--sc-accent);
}

.store-create-section-head h2 {
  margin: 0;
  font-size: var(--sc-font-size-lg, 1rem);
  font-weight: 700;
  color: var(--sc-text, #0f172a);
  letter-spacing: -0.01em;
}

.store-create-section-head p {
  margin: 0.15rem 0 0;
  font-size: var(--sc-font-size, 0.8125rem);
  font-weight: 500;
  color: var(--sc-text-muted, #64748b);
}

.store-create-fields {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.15rem 1.35rem 1.3rem;
}

.store-create-fields-config {
  flex: 0 0 auto;
  padding-bottom: 1.05rem;
}

.store-create-fields-credentials {
  background: #fcfdff;
}

.store-create-credentials-empty {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 0;
  padding: 0.85rem 0.95rem;
  border: 1px dashed #cbd5e1;
  border-radius: 0.55rem;
  background: #fff;
  color: var(--sc-text-muted, #64748b);
  font-size: var(--sc-font-size, 0.8125rem);
  font-weight: 500;
  line-height: 1.45;
}

.store-create-credentials-empty i {
  margin-top: 0.1rem;
  color: var(--sc-text-muted, #64748b);
}

.store-create-credentials-empty p {
  margin: 0;
}

.store-create-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.95rem 1rem;
  align-items: start;
}

.store-create-span {
  grid-column: 1 / -1;
}

.store-create-col-right {
  grid-column: 2;
}

.store-create-field.is-disabled > span {
  color: #94a3b8;
}

.store-create-field.is-disabled .form-control:disabled {
  background: #f8fafc;
  color: #94a3b8;
  cursor: not-allowed;
}

.store-create-check-field .store-create-sync {
  padding-top: 0;
  min-height: 2.35rem;
  align-items: center;
}

.store-create-field > .store-create-alert {
  margin: 0;
}

.store-create-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid;
  border-radius: 0.55rem;
  font-size: 0.82rem;
  line-height: 1.4;
}

.store-create-alert i {
  margin-top: 0.15rem;
  font-size: 1.05rem;
  flex-shrink: 0;
}

.store-create-alert strong {
  display: block;
  margin-bottom: 0.12rem;
  font-weight: 700;
}

.store-create-alert p {
  margin: 0;
  font-weight: 500;
}

.store-create-alert.is-success {
  background: #ecfdf5;
  border-color: #86efac;
  color: #166534;
}

.store-create-alert.is-success i {
  color: #16a34a;
}

.store-create-alert.is-danger {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

.store-create-alert.is-danger i {
  color: #dc2626;
}

.store-create-alert.is-info {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e40af;
}

.store-create-alert.is-info i {
  color: #2563eb;
}

.store-create-alert.is-warning {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
  margin-bottom: 1rem;
}

.store-create-alert.is-warning i {
  color: #d97706;
}

.store-create-alert-close {
  margin: 0 0 0 auto;
  flex-shrink: 0;
  padding: 0.25rem;
}

.store-create-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
  min-width: 0;
}

.store-create-field > span {
  font-size: var(--sc-font-size-label);
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sc-text-label);
}

.store-create-field > span em {
  color: #ef4444;
  font-style: normal;
  font-weight: 700;
}

.store-create-note-field {
  width: 100%;
}

.store-create-note-input {
  min-height: 2.35rem;
  height: 2.35rem;
  resize: vertical;
  line-height: 1.35;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

.store-create-input {
  position: relative;
}

.store-create-input > i:first-child {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--sc-text-muted);
  font-size: 0.78rem;
  pointer-events: none;
  z-index: 2;
}

.store-create-page .form-control,
.store-create-page .searchable-select-input {
  min-height: 2.45rem;
  border-radius: 0.55rem;
  border-color: #e2e8f0;
  font-family: inherit;
  font-size: var(--sc-font-size);
  font-weight: 500;
  color: var(--sc-text);
  box-shadow: none;
  text-align: left;
}

.store-create-page .form-control::placeholder,
.store-create-page .searchable-select-input::placeholder {
  font-size: 0.875rem;
  font-weight: 500;
  color: #94a3b8;
  opacity: 1;
  text-align: left;
}

.store-create-page .form-control:focus,
.store-create-page .searchable-select-input:focus {
  border-color: #9ca3af;
  box-shadow: 0 0 0 3px rgba(75, 85, 99, 0.12);
}

.store-create-input .form-control,
.store-create-input .password-field-wrap .form-control {
  padding-left: 2.2rem;
}

.store-create-input .password-field-wrap {
  width: 100%;
}

.store-create-san {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin: 0.1rem 0 0;
  padding: 0.85rem 0.95rem;
  border-radius: 0.75rem;
  background: #f3f4f6;
  cursor: pointer;
}

.store-create-san input {
  width: 1rem;
  height: 1rem;
  margin: 0.15rem 0 0;
  accent-color: var(--sc-accent);
  cursor: pointer;
}

.store-create-san strong {
  display: block;
  font-size: var(--sc-font-size);
  font-weight: 600;
  color: var(--sc-text);
}

.store-create-san small {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--sc-font-size-sm);
  font-weight: 500;
  line-height: 1.4;
  color: var(--sc-text-muted);
}

.store-create-secure {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-top: auto;
  padding: 0.85rem 0.95rem;
  border-radius: 0.7rem;
  background: #f1f5f9;
  color: #334155;
}

.store-create-secure i {
  margin-top: 0.12rem;
  color: #64748b;
  font-size: 0.95rem;
}

.store-create-secure p {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.45;
  color: #475569;
}

.store-create-secure strong {
  font-weight: 700;
}

.store-create-hint {
  display: block;
  margin-top: 0.2rem;
  color: #64748b;
  font-size: 0.75rem;
  line-height: 1.35;
  font-weight: 500;
}

.store-create-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.7fr);
  grid-template-rows: auto auto;
  gap: 1.15rem;
  align-items: stretch;
  width: 100%;
}

.store-create-help {
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.95rem;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 12px 28px rgba(15, 23, 42, 0.05);
  padding: 1.15rem 1.2rem 1.2rem;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: auto;
  font-family: inherit;
  font-size: var(--sc-font-size);
  color: var(--sc-text);
}

.store-create-help-head {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  margin: 0 0 1.05rem;
}

.store-create-help-head h2 {
  margin: 0;
  font-family: inherit;
  font-size: var(--sc-font-size-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--sc-text);
  line-height: 1.3;
}

.store-create-help-head p {
  margin: 0.2rem 0 0;
  font-size: var(--sc-font-size);
  font-weight: 500;
  color: var(--sc-text-muted);
  line-height: 1.45;
}

.store-create-help-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  font-family: inherit;
  font-size: var(--sc-font-size-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--sc-text);
  line-height: 1.3;
}

.store-create-help-title i {
  color: var(--sc-accent, #2a3441);
  font-size: 0.9rem;
}

.store-create-help-copy {
  margin: 0.45rem 0 1.1rem;
  font-size: var(--sc-font-size);
  font-weight: 500;
  line-height: 1.45;
  color: var(--sc-text-muted);
}

.store-create-help-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  flex: 1;
}

.store-create-help-steps li {
  display: grid;
  grid-template-columns: 1.55rem minmax(0, 1fr);
  gap: 0.7rem;
  align-items: flex-start;
}

.store-create-help-num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  background: #6b7280;
  border: 0;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
}

.store-create-help-steps strong {
  display: block;
  font-size: var(--sc-font-size);
  font-weight: 600;
  color: var(--sc-text);
  letter-spacing: 0;
  line-height: 1.35;
}

.store-create-help-steps p {
  margin: 0.18rem 0 0;
  font-size: var(--sc-font-size);
  font-weight: 500;
  line-height: 1.45;
  color: var(--sc-text-muted);
}

.store-create-help-need {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-top: auto;
  padding: 0.85rem 0.95rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  background: #f3f4f6;
  color: #4b5563;
}

.store-create-help-need i {
  margin-top: 0.1rem;
  color: #6b7280;
  font-size: 0.95rem;
}

.store-create-help-need strong {
  display: block;
  font-size: 0.8rem;
  font-weight: 750;
  color: #0f172a;
}

.store-create-help-need p {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.45;
  color: #4b5563;
}

.store-create-role-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  width: 100%;
}

.store-create-role-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.55rem;
  min-height: 0;
  border: 1px solid #e2e8f0;
  border-radius: 0.55rem;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.store-create-role-card:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.store-create-role-card.is-selected {
  border-color: var(--mp-sidebar-bg);
  background: #eef2f6;
  box-shadow: 0 0 0 1px var(--mp-sidebar-bg);
}

.store-create-role-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 0.4rem;
  background: #eef2f6;
  color: var(--mp-sidebar-bg);
  font-size: 0.68rem;
}

.store-create-role-text {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}

.store-create-role-card strong {
  font-size: 0.76rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
}

.store-create-role-card small {
  font-size: 0.66rem;
  font-weight: 500;
  color: #64748b;
  line-height: 1.25;
}

@media (max-width: 991.98px) {
  .store-create-role-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Create Order ─────────────────────────────────────────────────────────── */

.app-main > main:has(.order-create-page) {
  padding: 0.55rem 0.9rem 1rem !important;
  background: #f1f5f9;
}

.order-create-page {
  --oc-font: 0.8rem;
  --oc-font-sm: 0.72rem;
  --oc-font-label: 0.72rem;
  --oc-font-title: 0.88rem;
  --oc-font-hero: 1.3rem;
  --oc-control-height: 2.25rem;
  --oc-control-pad-x: 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  width: 100%;
  margin: 0;
  font-size: var(--oc-font);
}

.order-create-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.order-create-hero h1 {
  margin: 0;
  font-size: var(--oc-font-hero);
  font-weight: 750;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.order-create-hero p {
  margin: 0.2rem 0 0;
  color: #64748b;
  font-size: var(--oc-font);
}

.order-create-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(260px, 0.95fr);
  gap: 0.7rem;
  align-items: start;
}

.order-create-col-side,
.order-create-col-main {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-width: 0;
}

.order-create-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.7rem;
  padding: 0.85rem 0.95rem 0.9rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.order-create-card-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.65rem;
  font-size: var(--oc-font-title);
  font-weight: 700;
  color: #0f172a;
}

.order-create-card-title > i {
  color: #334155;
  font-size: var(--oc-font);
}

.order-create-card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  margin-bottom: 0.3rem;
}

.order-create-card-title-row .order-create-card-title {
  margin: 0;
}

.order-create-stack {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.order-create-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.order-create-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
}

.order-create-field {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  margin: 0;
  min-width: 0;
}

.order-create-field > span {
  font-size: var(--oc-font-label);
  font-weight: 600;
  color: #334155;
}

.order-create-field > span em {
  color: #ef4444;
  font-style: normal;
}

.order-create-page .form-control,
.order-create-page .form-control-sm,
.order-create-page .searchable-select-input,
.order-create-page input[type="date"],
.order-create-page input[type="number"],
.order-create-page input[type="email"],
.order-create-page input[type="text"],
.order-create-page input[type="tel"] {
  box-sizing: border-box;
  height: var(--oc-control-height) !important;
  min-height: var(--oc-control-height) !important;
  max-height: var(--oc-control-height);
  padding: 0.3rem var(--oc-control-pad-x) !important;
  font-size: var(--oc-font) !important;
  line-height: 1.25 !important;
  border-radius: 0.45rem;
  border-color: #cbd5e1;
  background: #fff;
}

.order-create-page .searchable-select {
  width: 100%;
}

.order-create-page .searchable-select-control {
  height: var(--oc-control-height);
  align-items: center;
}

.order-create-page .searchable-select-caret {
  top: 50%;
  transform: translateY(-50%);
  right: 0.55rem;
}

.order-create-page .searchable-select-clear {
  right: 0.3rem;
}

.order-create-items-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  margin-bottom: 0.55rem;
}

.order-create-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 9rem;
  padding: 1rem;
  border: 1px dashed #cbd5e1;
  border-radius: 0.6rem;
  background: #f8fafc;
  text-align: center;
}

.order-create-items-table th,
.order-create-items-table td {
  padding: 0.45rem 0.55rem;
  border-bottom: 1px solid #e8eef5;
  vertical-align: middle;
}

.order-create-summary-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(12rem, 0.8fr);
  gap: 0.9rem;
  align-items: start;
}

.order-create-summary {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.order-create-summary-row.is-total {
  margin-top: 0.2rem;
  padding-top: 0.5rem;
  border-top: 1px solid #e2e8f0;
  font-weight: 700;
  color: #0f172a;
}

.order-create-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin-top: 0.1rem;
  padding: 0.75rem 0.95rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.7rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.order-create-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2.15rem;
  padding: 0.35rem 0.85rem;
  border-radius: 0.5rem;
  font-size: var(--oc-font);
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
}

.order-create-add-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 1.95rem;
  padding: 0.28rem 0.65rem;
  border: none;
  border-radius: 0.45rem;
  background: #16a34a;
  color: #fff;
  font-size: var(--oc-font-sm);
  font-weight: 650;
  cursor: pointer;
}

.order-create-add-item:hover {
  background: #15803d;
}

.order-create-input {
  position: relative;
  display: flex;
  align-items: center;
}

.order-create-input.order-create-price > span {
  position: absolute;
  left: 0.65rem;
  z-index: 1;
  color: #64748b;
  font-weight: 600;
}

.order-create-input.order-create-price .form-control {
  padding-left: 1.45rem !important;
}

.order-create-page .searchable-select-input {
  padding-left: var(--oc-control-pad-x) !important;
  padding-right: 1.75rem !important;
}

.order-create-page .searchable-select-icon {
  display: none !important;
}

.order-create-page .validation-message,
.order-create-page .profile-field-error {
  font-size: var(--oc-font-sm);
  color: #dc2626;
}

.order-create-same-check {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  color: #334155;
  font-size: var(--oc-font-sm);
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.order-create-same-check input {
  width: 0.9rem;
  height: 0.9rem;
  accent-color: #16a34a;
  cursor: pointer;
}

.order-create-readonly {
  background: #f8fafc;
  color: #334155;
  cursor: default;
}

.order-create-hot-order-field {
  justify-content: flex-start;
}

.order-create-hot-order-field .order-create-same-check {
  min-height: 2.35rem;
  align-items: center;
  white-space: normal;
}

.order-create-hot-order-check {
  cursor: default;
}

.order-create-hot-order-check span {
  cursor: default;
  user-select: none;
}

.order-create-hot-order-check input {
  cursor: pointer;
}

.order-create-note-field {
  grid-column: 1 / -1;
}

.order-create-note-input {
  min-height: 4.5rem;
  resize: vertical;
  line-height: 1.4;
}

.order-create-items-head .order-create-card-title {
  margin: 0;
}

.order-create-empty i {
  font-size: 1.35rem;
  color: #94a3b8;
}

.order-create-empty p {
  margin: 0;
  max-width: 24rem;
  color: #64748b;
  font-size: var(--oc-font);
}

.order-create-items-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
}

.order-create-items-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: var(--oc-font);
}

.order-create-items-table th {
  background: #f8fafc;
  color: #64748b;
  font-size: var(--oc-font-sm);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.order-create-items-table tbody tr:last-child td {
  border-bottom: none;
}

.order-create-items-table .is-qty {
  width: 5rem;
}

.order-create-items-table .is-money {
  width: 6.5rem;
}

.order-create-items-table .is-action {
  width: 3.5rem;
  text-align: center;
}

.order-create-items-table .is-total {
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
}

.order-create-items-table .form-control {
  min-height: 2rem;
  font-size: var(--oc-font);
}

.order-create-items-table .searchable-select {
  min-width: 9rem;
}

.order-create-price {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.order-create-price .form-control {
  flex: 1;
  min-width: 0;
}

.order-create-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: none;
  border-radius: 0.35rem;
  background: transparent;
  color: #ef4444;
  cursor: pointer;
}

.order-create-remove:hover {
  background: #fef2f2;
  color: #dc2626;
}

.order-create-summary-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: #64748b;
}

.order-create-summary-note i {
  margin-top: 0.1rem;
  color: #16a34a;
  font-size: 1rem;
}

.order-create-summary-note p {
  margin: 0;
  font-size: var(--oc-font);
  line-height: 1.4;
}

.order-create-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  color: #64748b;
  font-size: var(--oc-font);
}

.order-create-summary-row strong {
  color: #0f172a;
  font-weight: 650;
}

.order-create-summary-row.is-total strong {
  color: #16a34a;
  font-size: 0.95rem;
  font-weight: 800;
}

.order-create-desc-text {
  color: #475569;
  font-size: var(--oc-font);
}

.order-create-btn-ghost {
  background: #fff;
  border-color: #cbd5e1;
  color: #334155;
}

.order-create-btn-ghost:hover {
  background: #f8fafc;
  color: #0f172a;
}

.order-create-btn-primary {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}

.order-create-btn-primary:hover:not(:disabled) {
  background: #15803d;
  border-color: #15803d;
  color: #fff;
}

.order-create-btn-primary:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

@media (max-width: 1100px) {
  .order-create-summary-layout {
    grid-template-columns: 1fr;
  }

  .order-create-grid-3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 960px) {
  .order-create-layout {
    grid-template-columns: 1fr;
  }

  .order-create-grid-2 {
    grid-template-columns: 1fr;
  }
}

.store-details-readonly,
.form-control.store-details-readonly:disabled {
  background: #f8fafc;
  color: #64748b;
  cursor: default;
  opacity: 1;
}

.app-main > main:has(.store-dash) {
  padding: 0.55rem 1rem !important;
}

.store-dash {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.store-dash-pagehead {
  margin: 0 0 0.15rem;
}

.store-dash-kicker {
  margin: 0 0 0.28rem;
  color: #94a3b8;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.store-dash-pagehead h1 {
  margin: 0;
  color: #0f172a;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.store-dash-pagehead p {
  margin: 0.15rem 0 0;
  color: #64748b;
  font-size: 0.86rem;
  line-height: 1.35;
}

.store-dash-card {
  background: #fff;
  border: 1px solid #e8eef5;
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.store-dash-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 0;
  padding: 0.75rem 1rem;
}

.store-dash-overview-left {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
  grid-column: 1;
  justify-self: start;
  padding-right: 1rem;
}

.store-dash-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.1rem;
  height: 3.1rem;
  flex-shrink: 0;
  border-radius: 0.7rem;
  background: var(--mp-sidebar-bg);
  color: #fff;
  font-size: 1.2rem;
}

.store-dash-overview-copy {
  min-width: 0;
}

.store-dash-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.55rem;
}

.store-dash-overview-copy h2 {
  margin: 0;
  color: #0f172a;
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.store-dash-overview-copy p {
  margin: 0.18rem 0 0.4rem;
  color: #000;
  font-size: 0.8rem;
}

.store-dash-ids {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1rem;
  color: #000;
  font-size: 0.75rem;
}

.store-dash-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.3rem;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  background: #f1f5f9;
  color: #475569;
}

.store-dash-pill.is-ok {
  background: #ecfdf3;
  color: #166534;
}

.store-dash-pill.is-pending {
  background: #fff7ed;
  color: #c2410c;
}

.store-dash-pill.is-bad {
  background: #fef2f2;
  color: #b91c1c;
}

.store-dash-pill.is-muted {
  background: #eff6ff;
  color: #2563eb;
}

.store-dash-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.45rem;
  height: 1.45rem;
  margin-left: 0.15rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: #94a3b8;
  border-radius: 0.3rem;
}

.store-dash-icon-btn:hover:not(:disabled) {
  color: #334155;
  background: #f1f5f9;
}

.store-dash-overview-status {
  display: grid;
  grid-template-columns: repeat(3, minmax(8.5rem, 1fr));
  align-items: stretch;
  grid-column: 2;
  justify-self: center;
  align-self: center;
  justify-items: center;
  width: 30rem;
  max-width: 100%;
  gap: 0;
  margin: 0;
  padding: 0;
}

.store-dash-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.4rem;
  width: 100%;
  min-width: 0;
  padding: 0.15rem 1.15rem;
  box-sizing: border-box;
}

.store-dash-stat span {
  color: #000;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.store-dash-overview-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  grid-column: 3;
  justify-self: end;
  align-self: center;
  padding-left: 1rem;
}

.store-dash-overview-btns {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.store-dash-overview-btns .store-dash-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

.store-dash-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.15rem;
  padding: 0.4rem 0.85rem;
  border-radius: 0.5rem;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #334155;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
}

.store-dash-btn-edit {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}

.store-dash-btn-edit:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: #fff;
}

.store-dash-btn-orders {
  background: #16a34a;
  color: #fff;
  border-color: #16a34a;
}

.store-dash-btn-orders:hover {
  background: #15803d;
  border-color: #15803d;
  color: #fff;
}

.store-dash-btn-disconnect {
  color: #dc2626;
  border-color: #fecaca;
}

.store-dash-btn-disconnect:hover:not(:disabled) {
  background: #fef2f2;
  color: #b91c1c;
}

.store-dash-btn-primary {
  background: var(--mp-sidebar-bg);
  border-color: var(--mp-sidebar-bg);
  color: #fff;
}

.store-dash-overview-url a,
.store-dash-info a {
  color: #2563eb;
  font-size: 0.8rem;
  font-weight: 650;
  text-decoration: none;
  word-break: break-all;
  justify-self: start;
  text-align: left;
}

.store-dash-info a {
  margin-left: 220px;
}

.store-dash-info a i {
  margin-left: 0.25rem;
  font-size: 0.65rem;
}

.store-dash-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  align-items: start;
}

.store-dash-grid-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.store-dash-sync-bar {
  padding: 0.85rem 0.95rem;
}

.store-dash-sync-bar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.store-dash-sync-bar-head h3 {
  margin: 0;
  color: #0f172a;
  font-size: 0.95rem;
  font-weight: 800;
}

.store-dash-sync-bar-body {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.35fr) minmax(0, 0.95fr);
  align-items: start;
  gap: 1rem;
}

.store-dash-sync-bar .store-dash-steps {
  margin: 0;
}

.store-dash-sync-bar .store-dash-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
}

.store-dash-sync-bar .store-dash-sync-meta {
  margin: 0;
  align-self: stretch;
  padding-left: 0.85rem;
  border-left: 1px solid #e8eef5;
}

.store-dash-sync-bar .store-dash-sync-filters {
  margin: 0.85rem 0 0;
  padding-top: 0.85rem;
  border-top: 1px solid #e8eef5;
}

.store-dash-sync-btn-inline {
  width: auto;
  min-width: 11rem;
  flex-shrink: 0;
}

.store-dash-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  padding: 0.85rem 0.95rem;
}

.store-dash-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 1.75rem;
  margin-bottom: 0.7rem;
  flex-shrink: 0;
}

.store-dash-panel h3,
.store-dash-logs h3 {
  margin: 0;
  color: #0f172a;
  font-size: 0.95rem;
  font-weight: 800;
}

.store-dash-logs h3 {
  white-space: nowrap;
  flex-shrink: 0;
}

.store-dash-panel-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.store-dash-panel > .store-dash-btn {
  margin-top: auto;
  width: 100%;
  flex-shrink: 0;
}

.store-dash-secrets {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.store-dash-secret > span,
.store-dash-meta {
  color: #000;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.store-dash-info li > span {
  color: #000;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.store-dash-secret-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 2.15rem;
  margin-top: 0.25rem;
  padding: 0 0.7rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  background: #fff;
  color: #0f172a;
  font-size: 0.82rem;
}

.store-dash-secret-box.is-plain {
  background: #f8fafc;
}

.store-dash-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0.55rem 0 0.45rem;
  padding: 0.55rem 0.65rem;
  border-radius: 0.5rem;
  background: #fff7ed;
  color: #9a3412;
}

.store-dash-notice i {
  margin-top: 0.1rem;
  color: #ea580c;
}

.store-dash-notice p {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.4;
}

.store-dash-notice.is-info {
  background: #eff6ff;
  color: #1e3a5f;
  border: 1px solid #bfdbfe;
}

.store-dash-notice.is-info i {
  color: #2563eb;
}

.store-dash-notice.is-info div {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.store-dash-notice.is-info strong {
  display: block;
  font-size: 0.8rem;
  font-weight: 650;
  color: #1e40af;
}

.store-dash-meta {
  margin-top: auto;
  margin-bottom: 0.65rem;
}

.store-dash-meta-block {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-top: auto;
  margin-bottom: 0.65rem;
}

.store-dash-meta-block .store-dash-meta {
  margin-top: 0;
  margin-bottom: 0;
}

.store-dash-meta.is-muted {
  color: #64748b;
}

.store-dash-meta.is-warn {
  color: #b45309;
}

.store-dash-meta.is-danger {
  color: #b91c1c;
}

.store-dash-btn-revalidate {
  width: 100%;
  background: gainsboro;
  border-color: gainsboro;
  color: #334155;
}

.store-dash-btn-revalidate:hover:not(:disabled) {
  background: #d0d0d0;
  border-color: #d0d0d0;
  color: #0f172a;
}

.store-dash-sync-btn {
  width: 100%;
  min-width: 0;
  align-self: stretch;
  background: var(--mp-sidebar-bg);
  border-color: var(--mp-sidebar-bg);
  color: #fff;
}

.store-dash-sync-btn:disabled {
  opacity: 0.85;
  cursor: not-allowed;
}

.store-dash-sync-btn i.is-spinning {
  display: inline-block;
  animation: store-dash-sync-spin 0.75s linear infinite;
}

@keyframes store-dash-sync-spin {
  to {
    transform: rotate(360deg);
  }
}

.store-dash-sync-btn:hover:not(:disabled) {
  background: var(--mp-sidebar-hover);
  border-color: var(--mp-sidebar-hover);
  color: #fff;
}

.store-dash-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0 0 1.05rem;
  padding: 0;
  list-style: none;
}

.store-dash-steps::before {
  content: "";
  position: absolute;
  top: 0.72rem;
  left: 16%;
  right: 16%;
  height: 2px;
  background: #dbeafe;
  z-index: 0;
}

.store-dash-steps li {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.28rem;
}

.store-dash-steps li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  border: 0;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
}

.store-dash-steps li:nth-child(1) span {
  background: #2563eb;
}

.store-dash-steps li:nth-child(2) span {
  background: #38bdf8;
}

.store-dash-steps li:nth-child(3) span {
  background: #14b8a6;
}

.store-dash-steps li strong {
  color: #0f172a;
  font-size: 0.74rem;
  font-weight: 700;
}

.store-dash-steps li small {
  color: #94a3b8;
  font-size: 0.68rem;
  font-weight: 400;
}

.store-dash-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  margin: 27px 0 0.95rem;
}

.store-dash-kpis > div,
.store-dash-kpis > a {
  position: relative;
  min-height: 3.55rem;
  padding: 0.5rem 1.85rem 0.5rem 0.85rem;
  background: #fff;
  border: 1px solid #e8eef5;
  border-radius: 0.5rem;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}

.store-dash-kpis > a:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.store-dash-kpis > div::before,
.store-dash-kpis > a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
}

.store-dash-kpis i {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 0.82rem;
}

.store-dash-kpis .is-orders::before { background: #14b8a6; }
.store-dash-kpis .is-products::before { background: #14b8a6; }
.store-dash-kpis .is-inventory::before { background: #fb923c; }
.store-dash-kpis .is-failed::before { background: #ef4444; }

.store-dash-kpis .is-orders i { color: #14b8a6; }
.store-dash-kpis .is-products i { color: #14b8a6; }
.store-dash-kpis .is-inventory i { color: #fb923c; }
.store-dash-kpis .is-failed i { color: #ef4444; }

.store-dash-kpis strong {
  display: block;
  color: #0f172a;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.1;
}

.store-dash-kpis span {
  display: block;
  margin-top: 0.22rem;
  color: #000;
  font-size: 0.7rem;
  font-weight: 400;
}

.store-dash-sync-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1rem;
  margin: 0 0 1rem;
}

.store-dash-sync-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(11rem, 1.35fr);
  gap: 0.65rem;
  align-items: end;
  margin: 0 0 1.1rem;
}

.store-dash-sync-filters.is-compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.store-dash-sync-field {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  min-width: 0;
}

.store-dash-sync-field span {
  color: #94a3b8;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.store-dash-sync-field input,
.store-dash-sync-field select,
.store-dash-sync-field .form-control {
  width: 100%;
  min-height: 2.15rem;
  height: 2.15rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.45rem;
  background: #fff;
  color: #0f172a;
  font-size: 0.82rem;
  box-sizing: border-box;
}

.store-dash-sync-field .searchable-select {
  width: 100%;
}

.store-dash-sync-field .searchable-select-control {
  min-height: 2.15rem;
  height: 2.15rem;
}

.store-dash-sync-field .searchable-select-input,
.store-dash-sync-field .store-dash-sync-select .searchable-select-input {
  width: 100%;
  min-height: 2.15rem;
  height: 2.15rem;
  padding-top: 0.35rem !important;
  padding-bottom: 0.35rem !important;
  padding-left: 0.65rem !important;
  padding-right: 1.85rem !important;
  font-size: 0.82rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.store-dash-sync-field .store-dash-sync-select .searchable-select-icon {
  display: none;
}

.store-dash-sync-field .searchable-select-icon,
.store-dash-sync-field .searchable-select-caret {
  top: 50%;
}

.store-dash-sync-field .searchable-select-clear {
  right: 0.25rem;
  width: 1.25rem;
  height: 1.25rem;
  font-size: 0.7rem;
}

@media (max-width: 767.98px) {
  .store-dash-sync-filters {
    grid-template-columns: 1fr;
  }
}

.store-dash-sync-meta span {
  display: block;
  color: #94a3b8;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.store-dash-sync-meta strong {
  display: block;
  margin-top: 0.2rem;
  color: #0f172a;
  font-size: 0.82rem;
  font-weight: 700;
}

.store-dash-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin: 0;
  padding: 0;
  list-style: none;
}

.store-dash-info li {
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1fr);
  align-items: center;
  column-gap: 0.55rem;
  padding: 0.42rem 0;
  border-bottom: 1px solid #f1f5f9;
}

.store-dash-info li:last-child {
  border-bottom: 0;
}

.store-dash-info li > i {
  color: #94a3b8;
  text-align: center;
}

.store-dash-info li > span {
  grid-column: 2;
  grid-row: 1;
}

.store-dash-info strong,
.store-dash-info a {
  grid-column: 2;
  grid-row: 1;
  margin-left: 220px;
  justify-self: start;
  text-align: left;
  color: #0f172a;
  font-size: 0.84rem;
  font-weight: 700;
}

.store-dash-info a {
  color: #2563eb;
  font-weight: 650;
}

.store-dash-note {
  white-space: pre-line;
  line-height: 1.45;
}

.store-dash-logs {
  padding: 0.75rem 0.9rem 0.7rem;
}

.store-dash-logs header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.store-dash-filter {
  min-height: 2rem;
  padding: 0.25rem 0.7rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.45rem;
  background: #fff;
  color: #334155;
  font-size: 0.78rem;
  font-weight: 600;
}

.store-dash-logs header .store-dash-filter-select {
  flex: 0 0 auto;
  width: 23rem;
  max-width: 23rem;
  min-width: 0;
}

.store-dash-logs header .searchable-select-input {
  min-height: 2rem;
  font-size: 0.78rem;
  font-weight: 600;
}

.store-dash-table-wrap {
  overflow-x: auto;
}

.store-dash-logs table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.store-dash-logs th,
.store-dash-logs td {
  padding: 0.5rem 0.55rem;
  border-bottom: 1px solid #f1f5f9;
  text-align: left;
  vertical-align: middle;
  font-size: 0.8rem;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.store-dash-logs th {
  background: #f1f5f9;
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.store-dash-logs th:nth-child(1),
.store-dash-logs td:nth-child(1) { width: 14%; }
.store-dash-logs th:nth-child(2),
.store-dash-logs td:nth-child(2) { width: 26%; }
.store-dash-logs th:nth-child(3),
.store-dash-logs td:nth-child(3) { width: 36%; }
.store-dash-logs th:nth-child(4),
.store-dash-logs td:nth-child(4) { width: 20%; }
.store-dash-logs th:nth-child(5),
.store-dash-logs td:nth-child(5) { width: 4%; text-align: right; }

.store-dash-log-message {
  font-weight: 700;
}

.store-dash-empty {
  text-align: center;
  color: #94a3b8 !important;
  white-space: normal;
}

.store-dash-log-type {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 650;
}

.store-dash-log-type.warning {
  color: #d97706;
}

.store-dash-log-type.info {
  color: #2563eb;
}

.store-dash-row-chevron {
  color: #cbd5e1;
  font-size: 0.7rem;
}

.store-dash-view-all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.55rem;
  border: 0;
  background: transparent;
  color: #2563eb;
  font-size: 0.78rem;
  font-weight: 700;
}

@media (max-width: 1199.98px) {
  .store-dash-overview {
    grid-template-columns: 1fr;
    row-gap: 0.85rem;
    align-items: start;
  }

  .store-dash-overview-left,
  .store-dash-overview-actions {
    grid-column: 1;
    padding: 0;
    justify-self: stretch;
  }

  .store-dash-overview-status {
    grid-column: 1;
    justify-self: center;
    width: 100%;
    max-width: 30rem;
    border-left: 0;
    border-right: 0;
    border-top: 1px solid #e8eef5;
    border-bottom: 1px solid #e8eef5;
    padding: 0.75rem 0;
  }

  .store-dash-overview-actions {
    justify-content: flex-start;
  }

  .store-dash-overview-btns {
    flex-wrap: wrap;
  }

  .store-dash-sync-bar-body {
    grid-template-columns: 1fr;
  }

  .store-dash-sync-bar .store-dash-sync-meta {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid #e8eef5;
    padding-top: 0.85rem;
  }
}

@media (max-width: 991.98px) {
  .store-dash-grid,
  .store-dash-grid-two {
    grid-template-columns: 1fr;
  }

  .store-dash-overview-btns {
    justify-content: flex-start;
  }

  .store-dash-sync-bar .store-dash-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Manual store details */
.store-dash-logo.is-manual {
  background: #16a34a;
}

.store-manual-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.store-manual-settings-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.store-manual-settings-list li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.15rem;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.82rem;
  color: #334155;
}

.store-manual-settings-list li:last-child {
  border-bottom: 0;
}

.store-manual-settings-list li > i {
  color: #94a3b8;
  font-size: 0.75rem;
}

.store-manual-settings-list strong.is-yes {
  color: #16a34a;
  font-weight: 700;
}

.store-manual-settings-list strong.is-no {
  color: #64748b;
  font-weight: 650;
}

.store-manual-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

.store-manual-summary > div {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.75rem 0.7rem;
  border-radius: 0.6rem;
  background: #f8fafc;
  border: 1px solid #eef2f7;
}

.store-manual-summary i {
  font-size: 0.95rem;
  margin-bottom: 0.15rem;
}

.store-manual-summary strong {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.1;
}

.store-manual-summary span {
  font-size: 0.72rem;
  font-weight: 650;
/*  color: #64748b;
*/}

.store-manual-summary .is-total i { color: #2563eb; }
.store-manual-summary .is-done i { color: #16a34a; }
.store-manual-summary .is-progress i { color: #ea580c; }
.store-manual-summary .is-cancelled i { color: #dc2626; }

.store-manual .store-dash-logs header h3,
.store-manual .store-dash-panel header h3 {
  font-size: 0.95rem;
  font-weight: 750;
}

.store-manual .store-dash-table-wrap table {
  font-size: 0.82rem;
}

.store-manual .store-dash-empty {
  font-size: 0.82rem;
}

@media (max-width: 1100px) {
  .store-manual-overview {
    grid-template-columns: 1fr;
    row-gap: 0.85rem;
  }

  .store-manual-grid {
    grid-template-columns: 1fr;
  }
}

/* Keep Order Details page static in the viewport (no page scroll). */
.app-main:has(> main .order-view) {
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
}

.app-main > main:has(.order-view) {
  padding: 0.35rem 0.75rem 0.4rem !important;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.order-view {
  --ov-green: #64748b;
  --ov-green-soft: #f1f5f9;
  --ov-accent: var(--mp-sidebar-bg, #2a3441);
  --ov-font: 0.875rem;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: var(--ov-font);
}

.order-view-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.order-view-back {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #64748b;
  font-size: 0.86rem;
  font-weight: 500;
  text-decoration: none;
}

.order-view-back:hover {
  color: #0f172a;
}

.order-view-actions {
  position: relative;
}

.order-view-actions-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 1.9rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  background: #fff;
  color: #334155;
  font-size: 0.8rem;
  font-weight: 600;
}

.order-view-actions-btn:hover,
.order-view-actions.is-open .order-view-actions-btn {
  background: #f8fafc;
  color: #0f172a;
}

.order-view-actions-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.35rem);
  z-index: 5;
  min-width: 8.5rem;
  padding: 0.3rem;
  background: #fff;
  border: 1px solid #e8eef5;
  border-radius: 0.55rem;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.order-view-actions-item {
  display: block;
  width: 100%;
  padding: 0.45rem 0.65rem;
  border: 0;
  background: transparent;
  color: #334155;
  font-size: 0.8rem;
  font-weight: 500;
  text-align: left;
  border-radius: 0.35rem;
}

.order-view-actions-item:hover {
  background: #f8fafc;
  color: #0f172a;
}

.order-view-titlebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
  flex-shrink: 0;
}

.order-view-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.55rem;
  min-width: 0;
}

.order-view-titlebar h1 {
  margin: 0;
  color: #0f172a;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.order-view-date {
  color: #94a3b8;
  font-size: var(--ov-font);
  font-weight: 500;
}

.order-view-status {
  display: inline-block;
  color: #334155;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: none;
}

.order-view-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 1.55rem;
  padding: 0.18rem 0.65rem;
  border-radius: 999px;
  font-size: var(--ov-font);
  font-weight: 600;
  background: #f1f5f9;
  color: #475569;
}

.order-view-badge i {
  font-size: 0.75rem;
}

.order-view-badge.is-complete {
  background: var(--ov-green-soft);
  color: var(--ov-green);
}

.order-view-badge.is-paid {
  background: #eef2f6;
  color: #475569;
}

.order-view-badge.is-unpaid,
.order-view-badge.is-pending {
  background: #fff7ed;
  color: #c2410c;
}

.order-view-badge.is-imported,
.order-view-badge.is-ready {
  background: #eff6ff;
  color: #1d4ed8;
}

.order-view-badge.is-cancelled {
  background: #fef2f2;
  color: #b91c1c;
}

.order-view-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
  gap: 0.45rem;
  width: 100%;
  flex-shrink: 0;
}

.order-view-metric {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 0;
  padding: 0.55rem 0.8rem;
  background: #fff;
  border: 1px solid #e6ebe8;
  border-radius: 0.7rem;
}

.order-view-metric-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: 0.5rem;
  background: var(--ov-green-soft);
  color: var(--ov-green);
  font-size: 0.78rem;
}

.order-view-metric > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.order-view-metric-label {
  font-size: var(--ov-font);
  font-weight: 500;
}

.order-view-metric-value {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.order-view-metric-value strong {
  color: #0f172a;
  font-size: var(--ov-font);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.order-view-metric-value em {
  color: #94a3b8;
  font-size: var(--ov-font);
  font-style: normal;
  font-weight: 500;
}

/* Content cards */
.order-view-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  overflow: hidden;
  height: fit-content;
}

.order-view-main-row {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.5rem;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.order-view-right-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  align-self: stretch;
  overflow: hidden;
}

.order-view-right-col > .order-view-right-panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.order-view-right-col > .order-view-items,
.order-view-right-panel > .order-view-items {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  height: auto;
}

.order-view-note-alert {
  border-radius: 0.75rem;
  font-size: var(--ov-font, 0.8125rem);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.order-view-note-alert strong {
  font-size: var(--ov-font, 0.8125rem);
}

.order-view-note-card {
  background: #fff;
  flex: 0 0 auto;
  border-top: 1px solid #e5e7eb;
  margin-top: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.order-view-note-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.order-view-note-toolbar .btn {
  font-weight: 600;
  min-width: 4.75rem;
}

.order-view-note-body {
  padding: 0 0.9rem 0.55rem;
  flex: 0 0 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.order-view-note-input {
  display: block;
  width: 100%;
  flex: 0 0 auto;
  min-height: 3.25rem;
  height: auto;
  resize: vertical;
  font-size: var(--ov-font, 0.8125rem);
  line-height: 1.45;
  border-color: #cbd5e1;
  background: #fff;
}

.order-view-note-input:focus {
  border-color: #94a3b8;
  box-shadow: 0 0 0 0.2rem rgba(15, 23, 42, 0.08);
}

/* Hide legacy bottom Cancel/Save row (kept only in Note header). */
.order-view-note-actions {
  display: none !important;
}

.order-view-note.is-empty {
  color: #94a3b8;
  font-style: italic;
}

.order-view-ghost-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.order-view-left-col {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  width: max-content;
  max-width: 44rem;
  min-width: 38rem;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

.order-view-buyer-card {
  width: 100%;
  min-width: 0;
  flex: 0 0 auto;
}

.order-view-amounts-card {
  min-width: 0;
  width: 100%;
  flex: 1 1 auto;
  min-height: 12rem;
  display: flex;
  flex-direction: column;
}

.order-view-amounts-card .order-view-section-head {
  padding: 0.55rem 0.75rem 0.4rem;
  flex-shrink: 0;
}

.order-view-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.9rem 0.35rem;
}

.order-view-section-head h2 {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  color: #111827;
  font-size: var(--ov-font);
  font-weight: 700;
}

.order-view-section-head h2 i {
  color: #64748b;
  font-size: var(--ov-font);
}

.order-view-ghost-btn {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0.22rem 0.7rem;
  border: 1px solid #d7dee6;
  border-radius: 0.45rem;
  background: #f1f5f9;
  color: #374151;
  font-size: var(--ov-font);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.order-view-ghost-btn:hover {
  background: #e2e8f0;
  color: #111827;
}

.order-view-buyer {
  display: block;
  padding: 0 0.9rem 0.65rem;
}

.order-view-buyer-fields {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  column-gap: 0.65rem;
  row-gap: 0.35rem;
  align-items: start;
}

.order-view-field {
  display: contents;
}

.order-view-field-label {
  color: #64748b;
  font-size: var(--ov-font);
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  text-align: right;
}

.order-view-field-value {
  color: #111827;
  font-size: var(--ov-font);
  font-weight: 600;
  line-height: 1.3;
  word-break: break-word;
  min-width: 0;
  margin-left: 60px;
}

.order-view-address {
  white-space: pre-line;
  line-height: 1.3;
}

.order-view-note {
  white-space: pre-line;
  line-height: 1.35;
  flex: 0 0 auto;
  min-height: 0;
  margin: 0;
  padding: 0.3rem 0.55rem;
  border: 1px solid #eef2f6;
  border-radius: 0.45rem;
  background: #f8fafc;
}

.order-view-external-id {
  overflow-wrap: anywhere;
}

.order-view-email {
  color: #475569;
  font-weight: 600;
  text-decoration: none;
}

.order-view-email:hover {
  color: #0f172a;
  text-decoration: underline;
}

.order-view-amounts {
  margin: 0;
  padding: 0.15rem 0.9rem 0.85rem;
  list-style: none;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.order-view-amounts li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.32rem 0;
  color: #64748b;
  font-size: var(--ov-font);
}

.order-view-amounts strong {
  color: #0f172a;
  font-size: var(--ov-font);
  font-weight: 600;
}

.order-view-amounts .is-total {
  margin-top: 0.1rem;
  padding-top: 0.45rem;
  border-top: 1px solid #eef2f6;
  color: #475569;
  font-size: var(--ov-font);
  font-weight: 700;
}

.order-view-amounts .is-total strong {
  color: #334155;
  font-size: var(--ov-font);
  font-weight: 700;
}

.order-view-items {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.order-view-items .order-view-section-head {
  padding: 0.4rem 0.85rem 0.25rem;
}

.order-view-table-wrap {
  overflow-x: auto;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}

.order-view-items table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.order-view-items th,
.order-view-items td {
  padding: 0.3rem 0.85rem;
  border-bottom: 1px solid #f1f5f9;
  text-align: left;
  vertical-align: middle;
  font-size: var(--ov-font);
  color: #0f172a;
}

.order-view-items tbody tr:nth-child(even) {
  background: #fafbfc;
}

.order-view-items th {
  background: #fff;
  font-size: var(--ov-font);
  font-weight: 600;
}

.order-view-items th:nth-child(1),
.order-view-items td:nth-child(1) { width: 34%; }
.order-view-items th:nth-child(2),
.order-view-items td:nth-child(2) { width: 18%; }
.order-view-items th:nth-child(3),
.order-view-items td:nth-child(3) { width: 12%; }
.order-view-items th:nth-child(4),
.order-view-items td:nth-child(4) { width: 18%; }
.order-view-items th:nth-child(5),
.order-view-items td:nth-child(5) { width: 18%; }

.order-view-items tbody tr:last-child td {
  border-bottom: 0;
}
.order-view-product {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.order-view-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: 0.45rem;
  background: #e2e8f0;
  color: #475569;
  font-size: 0.75rem;
  font-weight: 700;
}

.order-view-product span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.order-view-product strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--ov-font);
  font-weight: 600;
}

.order-view-product small {
  color: #94a3b8;
  font-size: var(--ov-font);
  font-weight: 500;
}

.order-view-empty {
  text-align: center;
  color: #94a3b8 !important;
}

.order-view-items-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem 0.5rem;
  padding: 0.45rem 0.85rem 0.55rem;
  margin-top: auto;
  color: #94a3b8;
  font-size: var(--ov-font);
  border-top: 1px solid #f1f5f9;
  background: #fff;
  flex-shrink: 0;
}

.order-view-pager {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.order-view-pager button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border: 0;
  background: transparent;
  color: #94a3b8;
  border-radius: 0.35rem;
}

.order-view-pager button:hover:not(:disabled) {
  background: #f1f5f9;
  color: #0f172a;
}

.order-view-pager button:disabled {
  opacity: 0.35;
  cursor: default;
}

.order-view-pager span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 0.3rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.35rem;
  color: #475569;
  font-size: var(--ov-font);
  font-weight: 600;
}

@media (max-width: 1199.98px) {
  .order-view-metrics {
    grid-template-columns: 1fr 1fr;
  }

  .order-view-main-row {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }

  .order-view-left-col {
    width: 100%;
    max-width: none;
    min-width: 0;
    max-height: none;
    overflow: visible;
  }

  .order-view-right-col {
    height: auto;
    min-height: 16rem;
  }
}

@media (max-width: 767.98px) {
  .order-view-metrics {
    grid-template-columns: 1fr;
  }

  .order-view-buyer-fields {
    grid-template-columns: 8.5rem minmax(0, 1fr);
  }

  .order-view-titlebar h1 {
    font-size: 1.15rem;
  }
}

.store-detail-page {
  width: min(720px, 100%);
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.store-detail-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}

.store-detail-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 1.15rem 1.25rem 0.95rem;
}

.store-detail-toolbar h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #1e293b;
}

.store-detail-toolbar p {
  margin: 0.2rem 0 0;
  font-size: 0.78rem;
  font-weight: 400;
  color: #94a3b8;
}

.store-detail-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

.store-detail-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-right: 0.15rem;
  color: #334155;
  font-size: 0.74rem;
  font-weight: 700;
  text-decoration: none;
}

.store-detail-actions .profile-btn {
  min-height: 1.85rem;
  padding: 0.28rem 0.72rem;
  font-size: 0.7rem;
}

.store-detail-actions .profile-btn i {
  font-size: 0.74rem;
}

.store-detail-back:hover {
  color: #0f172a;
}

.store-detail-card .profile-edit-grid,
.store-detail-facts {
  padding: 0 1.25rem 0.35rem;
}

.store-detail-facts {
  display: flex;
  flex-direction: column;
  padding-bottom: 0.55rem;
}

.store-detail-fact:last-child {
  padding-bottom: 1.05rem;
}

.store-detail-fact {
  display: grid;
  grid-template-columns: minmax(9.5rem, 34%) minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem 1.25rem;
  min-width: 0;
  margin: 0;
  padding: 0.78rem 0;
  border: 0;
  border-top: 1px solid #eef2f6;
  border-radius: 0;
  background: transparent;
}

.store-detail-fact-wide {
  grid-column: auto;
}

.store-detail-fact > span {
  display: block;
  margin: 0;
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: #64748b;
}

.store-detail-fact > strong {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.4rem;
  font-size: 0.84rem;
  font-weight: 700;
  color: #1e293b;
  word-break: break-word;
}

.store-detail-fact > strong.store-detail-muted {
  font-weight: 500;
  color: #64748b;
}

.store-detail-fact > strong i {
  color: #64748b;
  font-size: 0.7rem;
}

.store-detail-fact a {
  color: #1e293b;
}

.store-detail-fact a:hover {
  color: #4f46e5;
}

.store-detail-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 1.4rem;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.75rem;
  font-weight: 650;
}

.store-detail-dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.store-detail-status.is-pending {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #c2410c;
}

.store-detail-status.is-ok {
  background: #ecfdf3;
  border-color: #bbf7d0;
  color: #067647;
}

.store-detail-status.is-bad {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b42318;
}

.store-detail-status.is-muted {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #64748b;
}

.store-detail-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.store-detail-mask {
  letter-spacing: 0.12em;
  font-weight: 700;
  color: #1e293b;
}

.store-detail-saved {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 1.3rem;
  padding: 0.08rem 0.48rem;
  border-radius: 999px;
  background: #ecfdf3;
  border: 1px solid #bbf7d0;
  color: #166534;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

@media (max-width: 767.98px) {
  .store-detail-facts {
    grid-template-columns: none;
  }

  .store-detail-fact {
    grid-template-columns: 1fr;
    gap: 0.2rem;
    align-items: start;
  }
}

.shopify-connect-summary {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  width: 100%;
  padding: 0.85rem 0.9rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.65rem;
  background: #f8fafc;
}

.shopify-connect-summary-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.6rem;
  background: #0f172a;
  color: #f8fafc;
  font-size: 0.95rem;
}

.shopify-connect-summary-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.shopify-connect-summary-copy strong {
  display: block;
  font-size: 0.86rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.shopify-connect-summary-copy p {
  margin: 0.2rem 0 0;
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.4;
}

.shopify-connect-summary-copy ol {
  margin: 0.45rem 0 0.7rem;
  padding-left: 1.1rem;
  color: #475569;
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.45;
}

.shopify-connect-summary-copy li + li {
  margin-top: 0.12rem;
}

/* ── User invite create ────────────────────────────────── */

.user-invite-card {
  width: min(920px, 100%);
}

.user-invite-aside {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.85rem;
  padding: 1.6rem 1.35rem;
  background:
    radial-gradient(120% 90% at 10% 0%, rgba(148, 163, 184, 0.18), transparent 55%),
    linear-gradient(165deg, #0f172a 0%, #1e293b 48%, #334155 100%);
  color: #e2e8f0;
  border-radius: 0.85rem 0 0 0.85rem;
  overflow: hidden;
}

.user-invite-aside-glow {
  position: absolute;
  inset: auto -20% -30% auto;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(226, 232, 240, 0.16), transparent 70%);
  pointer-events: none;
}

.user-invite-aside-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #f8fafc;
  font-size: 1.05rem;
}

.user-invite-aside-title {
  position: relative;
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #f8fafc;
  line-height: 1.2;
}

.user-invite-aside-copy {
  position: relative;
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #cbd5e1;
  font-weight: 500;
}

.user-invite-steps {
  position: relative;
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.user-invite-steps li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: #e2e8f0;
}

.user-invite-step-num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.12);
  border: 1px solid rgba(248, 250, 252, 0.18);
  font-size: 0.68rem;
  font-weight: 700;
  color: #f8fafc;
}

.user-invite-body {
  padding: 1.25rem 1.35rem 1.35rem;
}

.store-create-aside {
  justify-content: flex-start;
  gap: 0.75rem;
}

.store-create-aside-media {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 9.5rem;
  border-radius: 0.75rem;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.store-create-aside-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.user-invite-grid {
  gap: 0.7rem 0.65rem;
}

.user-invite-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.user-invite-input-wrap > i {
  position: absolute;
  left: 0.7rem;
  color: #94a3b8;
  font-size: 0.78rem;
  pointer-events: none;
  z-index: 1;
}

.user-invite-input {
  padding-left: 2rem !important;
}

.user-invite-roles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.5rem;
  text-transform: none;
}

.user-invite-role {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  width: 100%;
  text-align: left;
  padding: 0.7rem 0.75rem;
  border-radius: 0.65rem;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #0f172a;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.user-invite-role:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
  transform: translateY(-1px);
}

.user-invite-role.is-selected {
  border-color: #0f172a;
  background: #f8fafc;
  box-shadow: 0 0 0 1px #0f172a, 0 8px 18px rgba(15, 23, 42, 0.08);
}

.user-invite-role-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 0.5rem;
  background: #f1f5f9;
  color: #334155;
  font-size: 0.78rem;
}

.user-invite-role.is-selected .user-invite-role-icon {
  background: #0f172a;
  color: #fff;
}

.user-invite-role-text {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}

.user-invite-role-text strong {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.user-invite-role-text small {
  font-size: 0.68rem;
  font-weight: 500;
  color: #64748b;
  line-height: 1.25;
}

.user-invite-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.15rem;
  padding: 0.65rem 0.75rem;
  border-radius: 0.55rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #475569;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.35;
}

.user-invite-note i {
  margin-top: 0.12rem;
  color: #64748b;
}

.user-invite-note strong {
  color: #0f172a;
  font-weight: 700;
}

.user-invite-check {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0;
  cursor: pointer;
}

.user-invite-check input {
  margin-top: 0.2rem;
  width: 1rem;
  height: 1rem;
  accent-color: #0f172a;
}

.user-invite-check strong {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: #0f172a;
}

.user-invite-check small {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.7rem;
  font-weight: 500;
  color: #64748b;
  line-height: 1.3;
}

.user-invite-success {
  margin-top: 1rem;
  padding: 0.85rem 0.9rem;
  border-radius: 0.7rem;
  background: linear-gradient(180deg, #f0fdf4 0%, #ecfdf5 100%);
  border: 1px solid #bbf7d0;
}

.user-invite-success-head {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}

.user-invite-success-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  background: #16a34a;
  color: #fff;
  font-size: 0.75rem;
}

.user-invite-success-head strong {
  display: block;
  font-size: 0.84rem;
  color: #14532d;
}

.user-invite-success-head p {
  margin: 0.1rem 0 0;
  font-size: 0.74rem;
  color: #166534;
}

.user-invite-success-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.7rem;
}

.user-invite-success-link code {
  flex: 1 1 12rem;
  min-width: 0;
  padding: 0.45rem 0.6rem;
  border-radius: 0.45rem;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #bbf7d0;
  color: #14532d;
  font-size: 0.7rem;
  word-break: break-all;
}

@media (max-width: 991.98px) {
  .user-invite-aside {
    border-radius: 0.85rem 0.85rem 0 0;
    min-height: auto;
  }
}

.user-invite-page {
  --ui-accent: var(--mp-primary);
  --ui-accent-hover: var(--mp-sidebar-active);
  --ui-accent-soft: var(--mp-primary-soft);
  --ui-aside: #f0fdf9;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.user-invite-page .user-invite-card {
  width: min(1080px, 100%);
  grid-template-columns: minmax(250px, 290px) 1px minmax(0, 1fr);
  border-radius: 1rem;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.user-invite-page .user-invite-aside {
  justify-content: flex-start;
  gap: 0.45rem;
  min-height: 100%;
  padding: 1.15rem 1.15rem 1.2rem;
  background:
    radial-gradient(90% 70% at 12% 0%, rgba(255, 255, 255, 0.95), transparent 55%),
    linear-gradient(180deg, #f0fdf9 0%, #ecfdf5 42%, #f8fafc 100%);
  color: #0f172a;
  border-radius: 1rem 0 0 1rem;
}

.user-invite-aside-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.65rem;
  height: 2.65rem;
  border-radius: 999px;
  border: 2px solid var(--ui-accent);
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
  font-size: 1rem;
  margin-bottom: 0.15rem;
}

.user-invite-page .user-invite-aside-title {
  color: #0f172a;
  font-size: 1.12rem;
  font-weight: 800;
}

.user-invite-page .user-invite-aside-copy {
  color: #64748b;
  font-size: 0.8rem;
  line-height: 1.5;
}

.user-invite-hero {
  position: relative;
  width: 4.6rem;
  height: 3.6rem;
  margin: 0 0 0.35rem;
}

.user-invite-hero-envelope {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 3.1rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.6rem;
  background: #475569;
  color: #fff;
  font-size: 1.15rem;
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.16);
}

.user-invite-hero-card {
  position: absolute;
  left: 1.85rem;
  top: 0;
  width: 2.15rem;
  height: 1.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.45rem;
  background: #fff;
  color: #475569;
  font-size: 0.82rem;
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.1);
}

.user-invite-hero-check {
  position: absolute;
  right: 0;
  bottom: 0.15rem;
  width: 1.45rem;
  height: 1.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #22c55e;
  color: #fff;
  font-size: 0.68rem;
  border: 2px solid #fff;
}

.user-invite-page .user-invite-steps {
  margin-top: 0.45rem;
  gap: 0.65rem;
  flex: 1 1 auto;
}

.user-invite-page .user-invite-steps-tracked {
  position: relative;
  padding-left: 0;
}

.user-invite-page .user-invite-steps-tracked::before {
  content: "";
  position: absolute;
  left: 0.82rem;
  top: 1.65rem;
  bottom: 1.65rem;
  width: 1px;
  background: #cbd5e1;
}

.user-invite-page .user-invite-steps li {
  position: relative;
  align-items: flex-start;
  color: #334155;
}

.user-invite-page .user-invite-steps li span:last-child {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}

.user-invite-page .user-invite-steps strong {
  font-size: 0.8rem;
  font-weight: 700;
  color: #0f172a;
}

.user-invite-page .user-invite-steps small {
  font-size: 0.72rem;
  font-weight: 500;
  color: #64748b;
  line-height: 1.3;
}

.user-invite-step-icon {
  flex: 0 0 auto;
  width: 1.7rem;
  height: 1.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1.5px solid #cbd5e1;
  color: #475569;
  background: rgba(255, 255, 255, 0.7);
  font-size: 0.68rem;
}

.user-invite-page .user-invite-steps li.is-current .user-invite-step-icon {
  border-color: var(--ui-accent);
  background: var(--ui-accent);
  color: #fff;
}

.user-invite-aside-art {
  position: relative;
  width: 100%;
  min-height: 4.5rem;
  margin-top: auto;
  padding-top: 0.75rem;
}

.user-invite-art-envelope {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.2rem;
  height: 3rem;
  border-radius: 0.55rem;
  background: #fff;
  color: #94a3b8;
  font-size: 1.45rem;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
  border: 1px solid #e2e8f0;
}

.user-invite-art-doc {
  position: absolute;
  left: 0.85rem;
  top: 0.55rem;
  width: 1.45rem;
  height: 1.75rem;
  border-radius: 0.2rem;
  background: linear-gradient(180deg, #99f6e4 0%, var(--ui-accent) 100%);
  box-shadow: 0 2px 6px rgba(13, 148, 136, 0.25);
}

.user-invite-art-trail {
  position: absolute;
  left: 4.35rem;
  bottom: 1.35rem;
  width: 3.5rem;
  height: 1.35rem;
  border-top: 1.5px dashed #cbd5e1;
  border-radius: 50%;
  transform: rotate(-8deg);
}

.user-invite-art-plane {
  position: absolute;
  left: 7.1rem;
  bottom: 1.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  background: var(--ui-accent);
  color: #fff;
  font-size: 0.62rem;
  box-shadow: 0 6px 14px rgba(13, 148, 136, 0.28);
  transform: rotate(-18deg);
}

.user-invite-form-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  margin-top: 0.5rem;
  padding-top: 0.25rem;
  border-top: 1px solid #f1f5f9;
}

.user-invite-page .user-invite-body {
  padding: 0.95rem 1.1rem 1.05rem;
}

.user-invite-page .store-create-form {
  gap: 0.55rem;
}

.user-invite-page .store-create-toolbar {
  justify-content: flex-start;
  gap: 0.45rem 0.65rem;
  margin-bottom: 0.15rem;
}

.user-invite-page .store-create-subtitle {
  margin-top: 0.08rem;
}

.user-invite-page .user-invite-grid {
  gap: 0.5rem 0.55rem;
}

.user-invite-page .store-create-title {
  font-size: 1.12rem;
  font-weight: 800;
}

.user-invite-submit,
.user-invite-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 36px;
  padding: 0.45rem 0.95rem;
  border-radius: 0.55rem;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.user-invite-page .user-invite-submit {
  border: 1px solid var(--ui-accent);
  background: var(--ui-accent);
  color: #fff;
  box-shadow: 0 8px 16px rgba(13, 148, 136, 0.22);
}

.user-invite-page .user-invite-submit:hover:not(:disabled) {
  background: var(--ui-accent-hover);
  border-color: var(--ui-accent-hover);
}

.user-invite-submit:disabled {
  opacity: 0.7;
  cursor: default;
}

.user-invite-cancel {
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #0f172a;
}

.user-invite-cancel:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.user-invite-page .profile-edit-field {
  color: #64748b;
}

.user-invite-page .profile-edit-field > span {
  color: #0f172a;
  font-size: 0.875rem;
  font-weight: 700;
}

.user-invite-page .form-control {
  min-height: 2.15rem;
  border-radius: 0.5rem;
  border-color: #e2e8f0;
}

.user-invite-page .form-control:focus {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12);
}

.user-invite-page .user-invite-roles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-content: stretch;
  gap: 0.45rem;
}

.user-invite-page .user-invite-role {
  position: relative;
  flex-direction: column;
  gap: 0.22rem;
  padding: 0.55rem 0.55rem 0.45rem 1.35rem;
  border-radius: 0.55rem;
  min-height: 0;
  transform: none;
}

.user-invite-page .user-invite-role:hover {
  transform: none;
  background: #f8fafc;
}

.user-invite-page .user-invite-role.is-selected {
  border-color: var(--ui-accent);
  background: var(--ui-accent-soft);
  box-shadow: 0 0 0 1px var(--ui-accent);
}

.user-invite-page .user-invite-role-check {
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  right: auto;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 999px;
  border: 1.5px solid #cbd5e1;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.45rem;
}

.user-invite-page .user-invite-role.is-selected .user-invite-role-check {
  border-color: var(--ui-accent);
  background: var(--ui-accent);
}

.user-invite-page .user-invite-role-icon {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.4rem;
  font-size: 0.68rem;
}

.user-invite-page .user-invite-role.is-selected .user-invite-role-icon {
  background: rgba(13, 148, 136, 0.14);
  color: var(--ui-accent);
}

.user-invite-page .user-invite-role.is-owner .user-invite-role-icon {
  background: rgba(13, 148, 136, 0.1);
  color: var(--ui-accent);
}

.user-invite-page .user-invite-role.is-operator .user-invite-role-icon {
  background: #f1f5f9;
  color: #64748b;
}

.user-invite-page .user-invite-role.is-readonly .user-invite-role-icon {
  background: #f8fafc;
  color: #64748b;
}

.user-invite-page .user-invite-role-text strong {
  font-size: 0.72rem;
}

.user-invite-page .user-invite-role-text small {
  font-size: 0.62rem;
  line-height: 1.2;
}

.user-invite-page .user-invite-company .searchable-select-input {
  min-height: 2.15rem;
  padding-left: 2rem;
  border-radius: 0.5rem;
}

@media (max-width: 991.98px) {
  .user-invite-page .user-invite-card {
    grid-template-columns: 1fr;
    width: min(640px, 100%);
  }

  .user-invite-page .user-invite-aside {
    border-radius: 1rem 1rem 0 0;
  }

  .user-invite-page .user-invite-roles {
    grid-template-columns: 1fr;
  }

  .user-invite-page .user-invite-role {
    min-height: 0;
  }
}

/* ── Shared split cards (invite-style panels) ──────────── */

.mp-split-card {
  width: min(920px, 100%);
}

.mp-split-card.mp-split-wide {
  width: min(980px, 100%);
}

.mp-split-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 0.95rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #f8fafc;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.mp-split-meta {
  position: relative;
  list-style: none;
  margin: 0.45rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.mp-split-meta li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.76rem;
  font-weight: 500;
  color: #e2e8f0;
}

.mp-split-meta li i {
  width: 1rem;
  text-align: center;
  color: #94a3b8;
  font-size: 0.72rem;
}

.mp-split-body-details {
  margin: 0;
}

.customer-detail-stack > .mp-split-card,
.customer-detail-stack > .store-create-card,
.customer-detail-stack > .user-invite-card,
.customer-detail-stack > .customer-stores-panel,
.customer-detail-stack > .list-panel {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
}

/* ── Searchable select ─────────────────────────────────── */

.searchable-select {
  position: relative;
  width: 100%;
  z-index: 1;
}

.searchable-select.is-open {
  z-index: 40;
}

.searchable-select-control {
  position: relative;
  display: flex;
  align-items: center;
}

.searchable-select-icon,
.searchable-select-caret {
  position: absolute;
  top: 55%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 0.72rem;
  pointer-events: none;
  z-index: 1;
}

.searchable-select-icon {
  left: 0.55rem;
}

.searchable-select-caret {
  right: 0.55rem;
}

.searchable-select-clear {
  position: absolute;
  right: 0.3rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.4rem;
  height: 1.4rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}

.searchable-select-clear:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.searchable-select-input {
  padding-left: 1.7rem !important;
  padding-right: 1.7rem !important;
}

.searchable-select-input:disabled {
  background: #f8fafc;
  color: #64748b;
  cursor: default;
}

.searchable-select-menu {
  position: absolute;
  top: calc(100% + 0.2rem);
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  z-index: 50;
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  max-height: 11rem;
  overflow-x: hidden;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.45rem;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.searchable-select-menu.is-fixed-menu {
  position: fixed;
  right: auto;
  top: auto;
  bottom: auto;
  left: auto;
  width: auto;
  max-width: none;
  z-index: 2000;
}

.searchable-select-empty {
  padding: 0.55rem 0.65rem;
  color: #94a3b8;
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
}

.searchable-select-group {
  padding: 0.45rem 0.55rem 0.3rem;
  margin: 0.15rem 0 0.05rem;
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  cursor: default;
  user-select: none;
  background: #f1f5f9;
  border-radius: 0.3rem;
}

.searchable-select-group + .searchable-select-option {
  margin-top: 0.05rem;
}

.searchable-select-menu:has(.searchable-select-group) .searchable-select-option {
  padding-left: 0.85rem;
}

.searchable-select-option {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 0.45rem 0.55rem;
  border-radius: 0.35rem;
  color: #0f172a;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
  white-space: normal;
  word-break: break-word;
}

.searchable-select-option:hover,
.searchable-select-option.is-selected {
  background: #f1f5f9;
}

.searchable-select-option.is-selected {
  font-weight: 600;
}

.searchable-multi-select-control {
  align-items: flex-start;
  min-height: 1.85rem;
  padding-top: 0.15rem;
  padding-bottom: 0.15rem;
  background: #fff;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.searchable-multi-select.is-open .searchable-multi-select-control,
.searchable-multi-select-control:focus-within {
  border-color: #94a3b8;
  box-shadow: 0 0 0 0.15rem rgba(148, 163, 184, 0.2);
}

.searchable-multi-select .searchable-select-input:disabled {
  background: transparent;
}

.searchable-multi-select-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1rem 1.55rem 0.1rem 1.7rem;
}

.searchable-multi-select-body.is-no-icon {
  padding-left: 0.55rem;
}

.searchable-multi-select-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  max-width: 100%;
}

.searchable-multi-select-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  max-width: 100%;
  padding: 0.15rem 0.4rem;
  border-radius: 0.35rem;
  background: #eef2f7;
  color: #1f2937;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
}

.searchable-multi-select-chip > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.searchable-multi-select-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #64748b;
  padding: 0;
  line-height: 1;
  cursor: pointer;
}

.searchable-multi-select-chip-remove:hover {
  color: #0f172a;
}

.searchable-multi-select-input {
  flex: 1 1 6rem;
  min-width: 5rem;
  width: auto !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  min-height: 1.5rem;
}

.searchable-multi-select-option {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-align: left;
}

.searchable-multi-select-check {
  width: 0.9rem;
  flex: 0 0 0.9rem;
  color: #0f766e;
  font-size: 0.72rem;
}

.table-filter-row .table-column-filter-select {
  width: 100%;
  min-width: 0;
}

.table-filter-row .table-column-filter-select .searchable-select-input {
  height: 1.6rem;
  min-height: 1.6rem;
  padding-top: 0.1rem !important;
  padding-bottom: 0.1rem !important;
  padding-left: 1.45rem !important;
  padding-right: 1.35rem !important;
  font-size: 0.72rem;
  line-height: 1.2;
  border-color: #ced4da;
  border-radius: 0.25rem;
  box-shadow: none;
}

.table-filter-row .table-column-filter-select .searchable-select-input:focus {
  border-color: #94a3b8;
  box-shadow: none;
}

.table-filter-row .table-column-filter-select .searchable-select-icon {
  left: 0.35rem;
  font-size: 0.62rem;
}

.table-filter-row .table-column-filter-select .searchable-select-caret,
.table-filter-row .table-column-filter-select .searchable-select-clear {
  right: 0.25rem;
  font-size: 0.62rem;
}

.table-filter-row .table-column-filter-select .searchable-select-menu {
  font-size: 0.72rem;
  max-height: 10rem;
}

.table-filter-row th {
  overflow: visible;
}

.user-list-page .list-panel .table-shell,
.order-list-page .list-panel .table-shell,
.warehouse-list-page .list-panel .table-shell {
  overflow: visible;
}

.stores-list-page .list-panel .table-shell {
  overflow-x: auto;
  overflow-y: visible;
}

.profile-edit-field .searchable-select {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
}

/* ── Customer detail ───────────────────────────────────── */

.customer-detail-stack {
  width: min(980px, 100%);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
}

.customer-detail-card,
.customer-stores-panel {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

.customer-detail-card {
  margin-bottom: 0;
  overflow: hidden;
}

.customer-detail-card .customer-detail-left {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.25rem 1.5rem;
  background:
    linear-gradient(165deg, #f8fafc 0%, #ffffff 48%, #f1f5f9 100%);
}

.customer-detail-back {
  position: absolute;
  top: 0.75rem;
  left: 0.85rem;
  z-index: 1;
  padding: 0.35rem 0.7rem;
  font-size: 0.75rem;
}

.customer-detail-side-actions {
  position: absolute;
  top: 0.75rem;
  right: 0.85rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.customer-detail-side-actions .profile-btn {
  padding: 0.35rem 0.7rem;
  font-size: 0.75rem;
}

.customer-detail-icon-btn {
  width: 2rem;
  min-height: 2rem;
  padding: 0 !important;
  justify-content: center;
}

.customer-detail-icon-btn i {
  font-size: 0.85rem;
}

.profile-card-actions.customer-detail-back {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
}

.profile-card-actions.customer-detail-back .profile-btn {
  padding: 0.35rem 0.7rem;
  font-size: 0.75rem;
}

.customer-detail-identity {
  width: 100%;
  align-items: center;
  text-align: center;
  gap: 0.35rem;
}

.customer-detail-eyebrow {
  margin: 0 0 0.15rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
}

.customer-detail-card .profile-card-name {
  font-size: 1.35rem;
  letter-spacing: -0.03em;
}

.customer-detail-company {
  margin-top: 0.45rem;
  margin-inline: auto;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  width: fit-content;
  justify-content: center;
}

.customer-detail-identity .profile-card-title {
  color: #64748b;
}

.customer-detail-right {
  padding: 1.15rem 1.3rem;
  background:
    linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
  align-self: stretch;
  min-width: 0;
}

.customer-detail-value {
  gap: 0.45rem !important;
}

.customer-detail-value i {
  color: #94a3b8;
  font-size: 0.78rem;
  width: 0.9rem;
  text-align: center;
}

.customer-stores-panel {
  border-radius: 0.85rem;
  border-color: #e2e8f0;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 14px 36px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

.customer-stores-toolbar {
  align-items: flex-start;
  padding: 0.9rem 1rem;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.customer-stores-heading {
  min-width: 0;
}

.customer-stores-title {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.98rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.customer-stores-title i {
  color: #475569;
  font-size: 0.9rem;
}

.customer-stores-subtitle {
  margin: 0.2rem 0 0;
  font-size: 0.78rem;
  color: #64748b;
}

.customer-stores-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.customer-stores-count {
  min-width: 1.85rem;
  height: 1.85rem;
  padding: 0 0.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #0f172a;
  background: #e2e8f0;
}

.customer-stores-actions .profile-btn {
  padding: 0.4rem 0.8rem;
  font-size: 0.78rem;
}

.customer-profile-page {
  --cd-accent: #475569;
  --cd-accent-hover: #334155;
  --cd-accent-soft: #f1f5f9;
  --cd-accent-mid: #e2e8f0;
  --cd-avatar-bg: #e2e8f0;
  --cd-avatar-fg: #334155;
  --cd-aside-bg: #f8fafc;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.customer-profile-card {
  width: 100%;
  max-width: 75rem;
  min-width: 0;
  background: #fff;
  border: 1px solid #e8eef5;
  border-radius: 1rem;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
  overflow: hidden;
}

.customer-profile-stores {
  overflow: hidden;
}

.customer-profile-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid #eef2f6;
}

.customer-profile-heading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.customer-profile-head-icon {
  flex: 0 0 auto;
  width: 2.35rem;
  height: 2.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--cd-accent-soft);
  color: var(--cd-accent);
  font-size: 0.95rem;
}

.customer-profile-heading h1,
.customer-profile-heading h2 {
  margin: 0;
  color: #0f172a;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.customer-profile-heading p {
  margin: 0.12rem 0 0;
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 500;
}

.customer-profile-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.customer-profile-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.15rem;
  padding: 0.4rem 0.95rem;
  border-radius: 0.55rem;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
}

.customer-profile-btn i {
  font-size: 0.78rem;
}

.customer-profile-btn:disabled {
  opacity: 0.7;
  cursor: default;
}

.customer-profile-btn-outline {
  background: #fff;
  color: var(--cd-accent);
  border-color: #cbd5e1;
}

.customer-profile-btn-outline:hover:not(:disabled) {
  background: var(--cd-accent-soft);
  color: var(--cd-accent-hover);
}

.customer-profile-btn-solid {
  background: var(--cd-accent);
  color: #fff;
  border-color: var(--cd-accent);
}

.customer-profile-btn-solid:hover:not(:disabled) {
  background: var(--cd-accent-hover);
  border-color: var(--cd-accent-hover);
  color: #fff;
}

.customer-profile-btn-approve {
  background: #0d9488;
  color: #fff;
  border-color: #0d9488;
}

.customer-profile-btn-approve:hover:not(:disabled) {
  background: #0f766e;
  border-color: #0f766e;
  color: #fff;
}

.customer-profile-btn-primary {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}

.customer-profile-btn-primary:hover:not(:disabled) {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: #fff;
}

.customer-profile-btn-reject {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
}

.customer-profile-btn-reject:hover:not(:disabled) {
  background: #b91c1c;
  border-color: #b91c1c;
  color: #fff;
}

.customer-profile-count {
  min-width: 1.85rem;
  height: 1.85rem;
  padding: 0 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.4rem;
  background: var(--cd-accent-mid);
  color: var(--cd-accent);
  font-size: 0.82rem;
  font-weight: 700;
}

.customer-profile-body {
  display: grid;
  grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
  align-items: stretch;
}

.customer-profile-aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.35rem;
  padding: 1.75rem 0.85rem 1.5rem;
  background: var(--cd-aside-bg);
  min-width: 0;
}

.customer-profile-avatar {
  width: 5.25rem;
  height: 5.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--cd-avatar-bg);
  color: var(--cd-avatar-fg);
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.customer-profile-aside h2 {
  margin: 0.7rem 0 0;
  color: #0f172a;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  word-break: break-word;
}

.customer-profile-company {
  margin: 0;
  color: var(--cd-accent);
  font-size: 0.82rem;
  font-weight: 600;
  word-break: break-word;
}

.customer-profile-meta {
  list-style: none;
  margin: 0.85rem 0 0;
  padding: 0.85rem 0 0;
  width: 100%;
  border-top: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.customer-profile-meta li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  color: #475569;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.35;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}

.customer-profile-meta .customer-profile-email {
  text-align: left;
  white-space: nowrap;
}

.customer-profile-meta i {
  margin-top: 0;
  color: #94a3b8;
  font-size: 0.78rem;
  width: 0.9rem;
  text-align: center;
  flex-shrink: 0;
}

.customer-profile-details {
  min-width: 0;
  padding: 1.15rem 1.35rem 1.25rem;
}

.customer-profile-details h3 {
  margin: 0 0 0.85rem;
  font-size: 0.92rem;
  font-weight: 700;
}

.customer-profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 2rem;
}

.customer-profile-field {
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1fr);
  gap: 0.65rem;
  align-items: center;
  padding: 0.7rem 0;
  border-bottom: 1px solid #eef2f6;
}

.customer-profile-col .customer-profile-field:first-child {
  padding-top: 0;
}

.customer-profile-field > i {
  color: var(--cd-accent);
  font-size: 0.82rem;
  text-align: center;
}

.customer-profile-field > div {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.customer-profile-label {
/*  color: #64748b;
*/  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.customer-profile-hint {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.72rem;
  color: #94a3b8;
  font-weight: 400;
}

.customer-profile-value {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  margin: 0;
  color: #475569;
  font-size: 0.84rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.customer-profile-email {
  max-width: 100%;
  line-height: 1.35;
}

.customer-profile-status {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.customer-profile-status-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.customer-profile-status-input:disabled {
  cursor: default;
}

.customer-profile-status-select {
  min-width: 10rem;
  width: 100%;
  max-width: 14rem;
}

.customer-profile-status-select .searchable-select-input {
  min-height: 1.85rem;
  font-size: 0.78rem;
  line-height: 1.25;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.customer-profile-warehouse-select {
  min-width: 12rem;
  width: 100%;
  max-width: 22rem;
}

.customer-profile-warehouse-select .searchable-select-input {
  min-height: 1.85rem;
  font-size: 0.78rem;
}

.customer-profile-edit-input {
  width: 100%;
  max-width: 22rem;
  min-height: 1.85rem;
  font-size: 0.78rem;
}

.customer-profile-location-edit {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.35rem;
  width: 100%;
  max-width: 22rem;
}

.customer-profile-location-select,
.customer-profile-country-select {
  width: 100%;
  max-width: 22rem;
}

.customer-profile-location-select .searchable-select-input,
.customer-profile-country-select .searchable-select-input {
  min-height: 1.85rem;
  font-size: 0.78rem;
  line-height: 1.25;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.customer-profile-warehouse-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.customer-profile-warehouse-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.45rem;
  border-radius: 0.35rem;
  background: #eef2f7;
  color: #1f2937;
  font-size: 0.72rem;
  font-weight: 600;
}

.customer-profile-stores .customer-profile-head {
  border-bottom: 1px solid #eef2f6;
}

.customer-profile-page .table-shell,
.customer-profile-stores .table-responsive {
  border: 0;
  overflow-x: auto;
}

.customer-profile-page .customer-profile-table {
  width: 100%;
  margin: 0;
  font-size: 0.82rem;
}

.customer-profile-page .customer-profile-table > :not(caption) > * > * {
  border-right: none;
  padding: 0.7rem 0.9rem;
  vertical-align: middle;
}

.customer-profile-page .customer-profile-table thead th,
.customer-profile-page .customer-profile-table thead.table-light th {
  background: #f8fafc !important;
  color: #000;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid #eef2f6;
}

.customer-profile-page .customer-profile-table thead th.table-sortable {
  padding: 0 !important;
}

.customer-profile-page .customer-profile-table .table-sort-btn {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem;
  padding: 0.7rem 0.9rem;
  color: #000;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.customer-profile-page .customer-profile-table .table-sort-btn span {
  min-width: 0;
}

.customer-profile-page .customer-profile-table .table-sort-btn i {
  margin-top: 0;
  line-height: 1;
}

.customer-profile-page .customer-profile-table tbody td {
  color: #334155;
  border-bottom: 1px solid #f1f5f9;
}

.customer-store-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: #0f172a;
  font-weight: 600;
  text-decoration: none;
}

.customer-store-link:hover {
  color: var(--cd-accent);
}

.customer-store-icon {
  width: 1.7rem;
  height: 1.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.4rem;
  background: var(--cd-accent-soft);
  color: var(--cd-accent);
  font-size: 0.72rem;
}

@media (max-width: 991.98px) {
  .customer-profile-body,
  .customer-profile-grid {
    grid-template-columns: 1fr;
  }

  .customer-profile-aside {
    padding-bottom: 1.25rem;
  }
}

.user-profile-page {
  --up-accent: #475569;
  --up-accent-hover: #334155;
  --up-accent-soft: #f1f5f9;
  --up-accent-mid: #e2e8f0;
  --up-avatar-bg: #e2e8f0;
  --up-avatar-fg: #334155;
  --up-aside-bg: #f8fafc;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.user-profile-card {
  width: 100%;
  max-width: 63rem;
  min-width: 0;
  background: #fff;
  border: 1px solid #e8eef5;
  border-radius: 1rem;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
  overflow: hidden;
}

.user-profile-page > .user-profile-card:first-child {
  display: grid;
  grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
  align-items: stretch;
}

.user-profile-aside {
  position: relative;
  background: var(--up-aside-bg);
  border-right: 1px solid #e8eef5;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.user-profile-banner {
  height: 7.25rem;
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(255, 255, 255, 0.55), transparent 46%),
    radial-gradient(80% 70% at 88% 18%, rgba(255, 255, 255, 0.35), transparent 42%),
    linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 48%, #f1f5f9 100%);
  position: relative;
}

.user-profile-banner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2.15rem;
  background: var(--up-aside-bg);
  border-radius: 100% 100% 0 0 / 100% 100% 0 0;
}

.user-profile-aside-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 1.15rem 1.35rem;
}

.user-profile-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5.15rem;
  height: 5.15rem;
  margin-top: -2.55rem;
  border-radius: 50%;
  background: var(--up-avatar-bg);
  color: var(--up-avatar-fg);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 4px solid #fff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
  position: relative;
  z-index: 1;
}

.user-profile-aside-body h2 {
  margin: 0.7rem 0 0.4rem;
  color: #0f172a;
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.user-profile-meta {
  list-style: none;
  margin: 0.95rem 0 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  text-align: left;
}

.user-profile-meta li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  color: #475569;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.35;
  word-break: break-word;
}

.user-profile-meta i {
  width: 0.95rem;
  margin-top: 0.12rem;
  text-align: center;
  color: #94a3b8;
  font-size: 0.78rem;
}

.user-profile-main {
  min-width: 0;
  padding: 1.15rem 1.25rem 1.25rem;
}

.user-profile-main-head,
.user-profile-company-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}

.user-profile-main-head h1,
.user-profile-company-head h2 {
  margin: 0;
  color: #0f172a;
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.user-profile-main-head p,
.user-profile-company-head p {
  margin: 0.18rem 0 0;
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 500;
}

.user-profile-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.user-profile-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 34px;
  padding: 0.4rem 0.85rem;
  border-radius: 0.5rem;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #0f172a;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.user-profile-btn:hover:not(:disabled) {
  background: #f8fafc;
}

.user-profile-btn:disabled {
  opacity: 0.65;
  cursor: default;
}

.user-profile-btn-danger {
  color: #b91c1c;
  border-color: #fecaca;
}

.user-profile-btn-danger:hover:not(:disabled) {
  background: #fef2f2;
  border-color: #f87171;
}

.user-profile-btn-back {
  color: #334155;
  border-color: #dbe3ee;
}

.user-profile-btn-accent {
  color: var(--up-accent);
  border-color: #cbd5e1;
}

.user-profile-btn-accent:hover:not(:disabled) {
  background: var(--up-accent-soft);
  color: var(--up-accent-hover);
  border-color: #94a3b8;
}

.user-profile-details {
  margin: 0.85rem 0 0;
}

.user-profile-row {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 0.65rem;
  align-items: center;
  padding: 0.58rem 0;
  border-bottom: 1px solid #f1f5f9;
}

.user-profile-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.user-profile-row dt {
  margin: 0;
  color: #94a3b8;
  font-size: 0.78rem;
  font-weight: 600;
}

.user-profile-row dd {
  margin: 0;
  color: #0f172a;
  font-size: 0.84rem;
  font-weight: 600;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.user-profile-row dd i {
  color: #94a3b8;
  font-size: 0.78rem;
  width: 0.9rem;
  text-align: center;
}

.user-profile-check {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-weight: 600;
  cursor: pointer;
}

.user-profile-check input {
  width: 1rem;
  height: 1rem;
  accent-color: #0f172a;
}

.user-profile-company-link {
  color: var(--up-accent-hover);
  text-decoration: none;
  font-weight: 700;
}

.user-profile-company-link:hover {
  text-decoration: underline;
}

.user-profile-status-select {
  min-width: 7.5rem;
}

.user-profile-status-select .searchable-select-control {
  min-height: 1.85rem;
  border-radius: 999px;
  border: 1px solid #bbf7d0;
  background-color: #ecfdf3;
}

.user-profile-status-select .searchable-select-input {
  min-height: 1.85rem;
  color: #067647;
  font-size: 0.75rem;
  font-weight: 700;
}

.user-profile-status-select .searchable-select-icon,
.user-profile-status-select .searchable-select-caret {
  color: #067647;
}

.user-profile-status-select.is-inactive .searchable-select-control {
  border-color: #e2e8f0;
  background-color: #f1f5f9;
}

.user-profile-status-select.is-inactive .searchable-select-input,
.user-profile-status-select.is-inactive .searchable-select-icon,
.user-profile-status-select.is-inactive .searchable-select-caret {
  color: #475569;
}

.user-profile-status-select.is-open {
  z-index: 5;
}

.user-profile-verify {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
  background: #ecfdf3;
  color: #067647;
  font-size: 0.68rem;
  font-weight: 700;
}

.user-profile-verify.is-unverified {
  background: #fff7ed;
  color: #c2410c;
}

.user-profile-company-head {
  padding: 1rem 1.15rem;
  border-bottom: 1px solid #eef2f6;
}

.user-profile-company-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.95rem 1.15rem 1.15rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid #e8eef5;
  border-radius: 0.75rem;
  background: var(--up-aside-bg);
}

.user-profile-company-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.55rem;
  background: var(--up-avatar-bg);
  color: var(--up-avatar-fg);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.user-profile-company-name {
  color: #0f172a;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.28rem;
}

@media (max-width: 991.98px) {
  .user-profile-page > .user-profile-card:first-child {
    grid-template-columns: 1fr;
  }

  .user-profile-aside {
    border-right: 0;
    border-bottom: 1px solid #eef2f6;
  }
}

@media (max-width: 767.98px) {
  .user-profile-row {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }
}

@media (max-width: 991.98px) {
  .store-create-card {
    width: min(560px, 100%);
    grid-template-columns: 1fr;
  }

  .store-create-layout,
  .store-create-card-solo {
    width: 100%;
  }

  .store-create-layout {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .store-create-panels,
  .store-create-help,
  .store-create-page-actions {
    grid-column: 1;
    grid-row: auto;
  }

  .store-create-help {
    position: static;
    height: auto;
    min-height: 0;
  }

  .store-create-grid {
    grid-template-columns: 1fr;
  }

  .store-create-row.has-custom-platform,
  .store-create-row.has-customer-name,
  .store-create-row.has-store-type-manual {
    grid-template-columns: 1fr;
  }

  .store-create-sync-tiles {
    flex-wrap: wrap;
  }

  .store-create-sync-tile {
    flex: 1 1 calc(50% - 0.3rem);
    white-space: normal;
  }

  .store-create-col-right {
    grid-column: 1;
  }

  .store-create-page-actions {
    justify-content: flex-start;
  }

  .store-create-divider {
    width: 100%;
    height: 1px;
  }

  .store-create-media {
    min-height: 260px;
    aspect-ratio: 1 / 1;
  }
}

@media (max-width: 991.98px) {
  .profile-card {
    width: min(560px, 100%);
    grid-template-columns: 1fr;
  }

  .profile-card-divider {
    width: 100%;
    height: 1px;
    background: #e2e8f0;
  }

  .profile-card-left,
  .profile-card-right {
    padding: 1rem;
  }
}

@media (max-width: 575.98px) {
  .profile-card {
    width: 100%;
  }

  .profile-card-left {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .profile-card-actions {
    justify-content: center;
  }

  .profile-detail-row {
    grid-template-columns: 1fr;
    gap: 0.12rem;
  }

  .profile-edit-grid {
    grid-template-columns: 1fr;
  }
}

.list-panel-empty {
  padding: 1.5rem 1rem;
}

.list-panel-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  padding: 0.45rem 0.75rem;
  border-top: 1px solid #e2e8f0;
  font-size: 0.72rem;
  color: #64748b;
}

.list-footer-meta {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.list-footer-attention {
  color: #c2410c;
  font-weight: 500;
}

.list-footer-attention i {
  font-size: 0.62rem;
}

.list-rows-select {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: #64748b;
}

.list-rows-select select {
  border: 1px solid #e2e8f0;
  border-radius: 0.28rem;
  background: #fff;
  color: #334155;
  font-size: 0.72rem;
  padding: 0.1rem 0.25rem;
  cursor: pointer;
}

.list-pager {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
}

.list-pager-btn {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: #94a3b8;
  border-radius: 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.62rem;
}

.list-pager-btn:hover:not(:disabled) {
  background: #f1f5f9;
  color: #0f172a;
}

.list-pager-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.list-pager-label {
  min-width: 2.5rem;
  text-align: center;
  color: #64748b;
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
}

.list-row-link {
  color: #64748b;
  text-decoration: none;
  font-size: 0.75rem;
  padding: 0.15rem 0.3rem;
  border-radius: 0.25rem;
}

.list-row-link:hover {
  color: #0f172a;
  background: #f1f5f9;
}

.auth-layout {
  background:
    linear-gradient(160deg, #eef2f6 0%, #e2e8f0 45%, #f8fafc 100%);
  min-height: 100vh;
  display: flex;
  align-items: safe center;
  justify-content: center;
  padding: 1rem;
  overflow-x: hidden;
  overflow-y: auto;
}

.auth-card {
  border-radius: 0.75rem;
}

/* ── Login split shell ───────────────────────────────── */

.login-shell {
  --login-accent: #0f172a;
  --login-accent-dark: #020617;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(920px, 100%);
  min-height: 480px;
  background: #fff;
  border-radius: 1.35rem;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.12);
}

.login-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem 1.25rem;
  background: #000;
  min-height: 280px;
}

.login-hero-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: min(360px, 58vh);
  object-fit: contain;
  object-position: center;
  background: #000;
  flex: 1 1 auto;
}

.login-hero-content {
  width: 100%;
  max-width: 22rem;
  text-align: center;
  color: #f8fafc;
}

.login-hero-title {
  margin: 0 0 0.55rem;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  color: #e0f2fe;
}

.login-hero-title::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 3px;
  margin: 0.55rem auto 0;
  background: #22d3ee;
  border-radius: 999px;
}

.login-hero-text {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.55;
  color: #94a3b8;
  white-space: normal;
  overflow: visible;
}

.login-form-pane {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.75rem;
  background: #fff;
}

.login-form-inner {
  width: min(300px, 100%);
}

.login-form-inner-wide {
  width: min(520px, 100%);
}

.login-shell-register {
  width: min(1040px, 100%);
  min-height: 0;
  align-items: stretch;
  overflow: visible;
}

.login-shell-register .login-hero {
  min-height: 0;
  padding: 1.35rem 1.1rem;
  gap: 0.85rem;
  justify-content: center;
}

.login-shell-register .login-hero-img {
  max-height: min(360px, 58vh);
  width: 100%;
  flex: 1 1 auto;
}

.login-shell-register .login-hero-title {
  font-size: 1.25rem;
  margin-bottom: 0.45rem;
}

.login-shell-register .login-hero-text {
  font-size: 0.84rem;
  line-height: 1.5;
}

.login-shell-register .login-form-pane {
  align-items: center;
  overflow: visible;
  max-height: none;
  padding: 1rem 1.35rem 1.1rem;
}

.login-shell-register .login-form-title {
  margin: 0 0 0.85rem;
  font-size: 1.2rem;
}

.login-shell-register .login-form-title::after {
  margin-top: 0.4rem;
}

.login-shell-register .login-progress {
  margin: 0 0 0.75rem;
}

.login-shell-register .login-progress-dot {
  width: 1.55rem;
  height: 1.55rem;
  font-size: 0.65rem;
}

.login-shell-register .login-progress-track {
  top: 0.75rem;
}

.login-shell-register .login-progress-label {
  font-size: 0.62rem;
}

.login-shell-register .login-step-copy {
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.35;
}

.login-shell-register .login-form-register {
  gap: 0.5rem;
}

.login-shell-register .login-form-grid {
  gap: 0.4rem 0.65rem;
}

.login-shell-register .login-label {
  margin-bottom: 0.12rem;
  font-size: 0.68rem;
}

.login-shell-register .login-input {
  padding-top: 0.42rem;
  padding-bottom: 0.42rem;
  font-size: 0.82rem;
  min-height: 2.15rem;
}

.login-searchable-select {
  width: 100%;
}

.login-searchable-select .searchable-select-input {
  border: 1px solid transparent;
  border-radius: 0.5rem;
  background: #e8f1fb;
  min-height: 2.15rem;
  font-size: 0.82rem;
  color: #0f172a;
  box-shadow: none !important;
}

.login-shell-register .login-searchable-select .searchable-select-input {
  padding-top: 0.42rem;
  padding-bottom: 0.42rem;
}

.login-searchable-select .searchable-select-input:focus {
  border-color: #93c5fd;
  background: #fff;
}

.login-searchable-select .searchable-select-menu {
  z-index: 30;
}

.login-shell-register .login-field-error {
  font-size: 0.68rem;
  margin-top: 0.1rem;
}

.login-shell-register .login-terms {
  margin: 0.1rem 0 0;
  font-size: 0.72rem;
}

.login-shell-register .login-submit {
  margin-top: 0.15rem;
  padding: 0.5rem 1rem;
  font-size: 0.88rem;
}

.login-shell-register .login-switch {
  margin-top: 0.65rem;
  margin-bottom: 0;
}

.login-form-title {
  margin: 0 0 1.75rem;
  text-align: center;
  font-size: 1.45rem;
  font-weight: 700;
  color: #1e293b;
  letter-spacing: -0.02em;
}

.login-form-title::after {
  content: "";
  display: block;
  width: 2.25rem;
  height: 3px;
  margin: 0.55rem auto 0;
  background: var(--login-accent);
  border-radius: 999px;
}

.login-progress {
  position: relative;
  margin: -0.35rem 0 1.25rem;
  padding: 0.15rem 0 0;
}

.login-progress-track {
  position: absolute;
  top: 0.9rem;
  left: 12%;
  right: 12%;
  height: 3px;
  border-radius: 999px;
  background: #e2e8f0;
  z-index: 0;
}

.login-progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--login-accent) 0%, #334155 100%);
  transition: width 0.35s ease;
}

.login-progress-steps {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0.25rem;
}

.login-progress-steps li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
}

.login-progress-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #94a3b8;
  background: #fff;
  border: 2px solid #e2e8f0;
  box-shadow: 0 0 0 3px #fff;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.login-progress-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #94a3b8;
  line-height: 1.2;
}

.login-progress-steps li.active .login-progress-dot {
  color: #fff;
  background: var(--login-accent);
  border-color: var(--login-accent);
  transform: scale(1.06);
}

.login-progress-steps li.active .login-progress-label {
  color: #0f172a;
}

.login-progress-steps li.done .login-progress-dot {
  color: #fff;
  background: #0f172a;
  border-color: #0f172a;
}

.login-progress-steps li.done .login-progress-label {
  color: #64748b;
}

.login-step-copy {
  margin: 0 0 0.25rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #64748b;
}

.login-dev-otp {
  margin: 0;
  padding: 0.5rem 0.7rem;
  border-radius: 0.45rem;
  background: #f0fdf4;
  color: #166534;
  font-size: 0.78rem;
}

.login-input-otp {
  letter-spacing: 0.35em;
  text-align: center;
  font-weight: 700;
  padding-right: 0.75rem;
}

.login-step-actions {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.login-form-register {
  gap: 0.85rem;
}

.login-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 0.85rem;
}

.login-field-span {
  grid-column: 1 / -1;
}

.login-phone-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}

.login-phone-code {
  flex: 0 0 5.25rem;
  padding-right: 0.5rem;
  appearance: auto;
  cursor: pointer;
}

.login-phone-number {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 0.75rem;
}

select.login-input {
  appearance: auto;
  cursor: pointer;
  padding-right: 0.75rem;
}

.login-required {
  color: #b42318;
}

.login-terms {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: #475569;
  margin: 0.15rem 0 0;
  cursor: pointer;
}

.login-terms input {
  margin-top: 0.15rem;
}

.login-switch {
  margin: 1.1rem 0 0;
  text-align: center;
  font-size: 0.8rem;
  color: #64748b;
}

.login-switch-link {
  border: none;
  background: none;
  padding: 0;
  color: #0f172a;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.login-switch-link:disabled {
  opacity: 0.6;
  cursor: default;
}

.login-field {
  position: relative;
}

.login-label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #334155;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.login-input-wrap {
  position: relative;
}

.login-input {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  background: #e8f1fb;
  padding: 0.55rem 2.1rem 0.55rem 0.75rem;
  font-size: 0.9rem;
  color: #0f172a;
  outline: none;
  box-shadow: none !important;
}

.login-input::placeholder {
  color: #94a3b8;
}

.login-input:focus {
  border-color: #cbd5e1;
  background: #eef5fc;
}

.login-field-icon {
  position: absolute;
  right: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 0.85rem;
  pointer-events: none;
}

.password-field-wrap {
  position: relative;
  width: 100%;
}

.password-field-wrap .login-input,
.password-field-wrap .form-control {
  padding-right: 2.35rem;
}

.password-toggle {
  position: absolute;
  right: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  padding: 0;
  border: 0;
  border-radius: 0.4rem;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  line-height: 1;
}

.password-toggle:hover:not(:disabled) {
  color: #0f172a;
  background: rgba(15, 23, 42, 0.06);
}

.password-toggle:disabled {
  opacity: 0.55;
  cursor: default;
}

.password-toggle i {
  font-size: 0.9rem;
}

.login-field-error {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.72rem;
  color: #b42318;
}

.login-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem 0.85rem;
  margin-top: -0.15rem;
}

.login-remember {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: 0.78rem;
  font-weight: 500;
  color: #475569;
  cursor: pointer;
  user-select: none;
}

.login-remember input {
  width: 0.95rem;
  height: 0.95rem;
  margin: 0;
  accent-color: #0f172a;
  cursor: pointer;
}

.login-forgot-link {
  font-size: 0.78rem;
  font-weight: 600;
  color: #0f172a;
  text-decoration: none;
}

.login-forgot-link:hover {
  text-decoration: underline;
}

.login-success {
  margin: 0;
  padding: 0.7rem 0.8rem;
  border-radius: 0.45rem;
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
  color: #166534;
  font-size: 0.84rem;
  line-height: 1.4;
}

.login-error {
  margin: 0;
  padding: 0.55rem 0.7rem;
  border-radius: 0.45rem;
  background: #fef3f2;
  color: #b42318;
  font-size: 0.78rem;
}

.login-submit {
  margin-top: 0.65rem;
  width: 100%;
  border: none;
  border-radius: 999px;
  background: #0f172a;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.7rem 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.22);
  transition: background 0.15s ease, transform 0.15s ease;
}

.login-submit:hover:not(:disabled) {
  background: #020617;
}

.login-submit:disabled {
  opacity: 0.75;
  cursor: default;
}

@media (max-width: 767.98px) {
  .login-shell {
    grid-template-columns: 1fr;
    min-height: auto;
    border-radius: 1rem;
  }

  .login-hero {
    min-height: auto;
    padding: 1.25rem 1rem 0.5rem;
  }

  .login-hero-img {
    width: 100%;
    max-height: 220px;
  }

  .login-hero-title {
    font-size: 1.2rem;
  }

  .login-form-pane {
    padding: 1.25rem 1.25rem 1.75rem;
  }

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

  .login-progress-track {
    left: 8%;
    right: 8%;
  }

  .login-progress-label {
    font-size: 0.62rem;
  }

  .login-progress-dot {
    width: 1.65rem;
    height: 1.65rem;
    font-size: 0.68rem;
  }

  .login-shell-register .login-form-pane {
    max-height: none;
    overflow: visible;
    padding: 1rem 1.15rem 1.25rem;
  }

  .login-shell-register .login-hero-img {
    max-height: 240px;
  }
}

.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(248, 250, 252, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  color: #0f172a;
}

.loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 12rem;
  text-align: center;
  color: #0f172a;
  margin: 0 auto;
}

.loading-spinner.compact {
  min-height: 8rem;
  padding-top: 1.25rem !important;
  padding-bottom: 1.25rem !important;
}

.loading-spinner.compact .loading-spinner-message {
  margin-top: 0.5rem !important;
  font-size: 0.78rem;
}

/* Center spinner under the toolbar (full panel width, not beside search) */
.list-panel > .loading-spinner,
.list-panel > .loading-spinner.compact {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 18rem;
  margin: 0;
  box-sizing: border-box;
}

.table td .loading-spinner,
.table td .loading-spinner.compact {
  min-height: 7rem;
}

.lds-hourglass,
.lds-hourglass:after {
  box-sizing: border-box;
}

.lds-hourglass {
  display: inline-block;
  position: relative;
  width: 40px;
  height: 40px;
  color: inherit;
}

.lds-hourglass:after {
  content: " ";
  display: block;
  border-radius: 50%;
  width: 0;
  height: 0;
  margin: 4px;
  box-sizing: border-box;
  border: 16px solid currentColor;
  border-color: currentColor transparent currentColor transparent;
  animation: lds-hourglass 1.2s infinite;
}

@keyframes lds-hourglass {
  0% {
    transform: rotate(0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  50% {
    transform: rotate(900deg);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  100% {
    transform: rotate(1800deg);
  }
}

.empty-state {
  background: #fff;
  border: 1px dashed var(--mp-border);
  border-radius: 0.5rem;
}

.list-panel-empty .empty-state {
  background: transparent;
  border: none;
  border-radius: 0;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.list-panel-empty .empty-state .fa-3x {
  font-size: 1.75rem !important;
}

.page-header-actions {
  margin-top: 0;
}

.page-header h1 {
  letter-spacing: -0.02em;
}

.table {
  background: #fff;
  border: 1px solid var(--mp-border);
  border-radius: 0.5rem;
  overflow: hidden;
}

/* Outer wrapper — full default width */
.table-shell {
  width: 100%;
  max-width: 100%;
}

.table-shell > .table {
  width: 100%;
  min-width: 0;
}

.store-list-page.product-manage-page .product-grid-scroll .table-shell > .table,
.store-list-page.product-manage-page .product-grid-scroll .table.product-list-table {
  width: var(--pg-table-w) !important;
  min-width: var(--pg-table-w) !important;
  max-width: none !important;
}

.list-panel .table-shell > .table,
.list-panel .table.list-table {
  width: 100%;
}

/* Vertical column splitters */
.table > :not(caption) > * > * {
  border-right: 1px solid #eef2f7;
}

.table > :not(caption) > * > *:last-child {
  border-right: none;
}

.table > thead > tr > th,
.table thead.table-light th {
  background: #e2e8f0 !important;
  border-bottom-color: #cbd5e1;
  color: #334155;
  font-weight: 700;
}

/* Universal zebra / double-color rows */
.table > tbody > tr:nth-child(even) > * {
  background-color: #f8fafc;
}

.table > tbody > tr:nth-child(odd) > * {
  background-color: #fff;
}

.table.table-hover > tbody > tr:hover > * {
  background-color: #eef2f7;
}

@media (max-width: 991.98px) {
  .app-sidebar {
    position: fixed;
    left: 0;
    transform: translateX(-100%);
  }

  .app-sidebar.mobile-open {
    transform: translateX(0);
  }

  /* Mobile drawer always shows full labels — ignore icon-only collapse */
  .app-sidebar.collapsed {
    width: var(--mp-sidebar-width);
  }

  .app-sidebar.collapsed .brand-text,
  .app-sidebar.collapsed .link-label,
  .app-sidebar.collapsed .link-chevron {
    display: inline !important;
  }

  .app-sidebar.collapsed .nav-submenu {
    display: block !important;
  }

  .app-sidebar.collapsed .sidebar-brand,
  .app-sidebar.collapsed .sidebar-brand-link {
    justify-content: space-between;
  }

  .app-sidebar.collapsed .sidebar-link {
    justify-content: flex-start;
    padding: 0 0.65rem !important;
    gap: 0.55rem;
  }

  .app-sidebar.collapsed .sidebar-nav {
    padding: 0.5rem 0.5rem 1rem;
  }

  .app-sidebar.collapsed .sidebar-collapse-btn {
    display: none !important;
    position: static;
    transform: none;
    right: auto;
    box-shadow: none;
  }

  .settings-sidebar {
    width: min(var(--mp-settings-sidebar-width), 70vw);
    height: auto;
    min-height: calc(100vh - var(--mp-topnav-height));
    position: sticky;
    top: var(--mp-topnav-height);
  }
}

.mp-toast {
  min-width: 18rem;
  max-width: 26rem;
  border-radius: 0.5rem !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}

.mp-toast .toast-body {
  font-size: 0.84rem;
  line-height: 1.4;
}

.mp-toast-success {
  background: #dcfce7 !important;
  border: 1px solid #86efac !important;
  color: #166534 !important;
}

.mp-toast-error {
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  color: #b91c1c !important;
}

.mp-toast-warning {
  background: #fff7ed !important;
  border: 1px solid #fed7aa !important;
  color: #c2410c !important;
}

.mp-toast-info {
  background: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  color: #1e40af !important;
}

.list-panel-toolbar .store-list-new-btn {
  margin-left: auto;
  min-height: 30px;
  padding: 0.3rem 0.85rem;
  font-size: 0.78rem;
}

.list-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  white-space: nowrap;
  vertical-align: middle;
}

.list-row-action {
  box-sizing: border-box;
  flex: 0 0 1.65rem;
  width: 1.65rem !important;
  height: 1.65rem !important;
  min-width: 1.65rem !important;
  max-width: 1.65rem;
  min-height: 1.65rem !important;
  max-height: 1.65rem;
  padding: 0 !important;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0.35rem;
  background: #f1f5f9;
  color: #334155;
  font-size: 0.82rem;
  line-height: 1;
  cursor: pointer;
}

.list-row-action i,
.list-row-action i.fa-fw,
.list-row-action.is-primary i,
.list-row-action.is-success i,
.list-row-action.is-danger i,
.list-row-action.is-active-status i,
.list-row-action.is-inactive-status i {
  font-size: 0.82rem !important;
  line-height: 1;
  width: 1em;
  height: 1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.list-row-action:hover:not(:disabled) {
  background: #e2e8f0;
  color: #0f172a;
}

.list-row-action.is-primary {
  background: #dbeafe;
  color: var(--bs-primary, #0d6efd);
}

.list-row-action.is-primary:hover:not(:disabled) {
  background: #bfdbfe;
  color: var(--bs-btn-hover-bg, #0b5ed7);
}

.list-row-action.is-success {
  background: #dcfce7;
  color: #15803d;
}

.list-row-action.is-success:hover:not(:disabled) {
  background: #bbf7d0;
  color: #166534;
}

.list-row-action.is-danger {
  background: #fee2e2;
  color: #dc2626;
}

.list-row-action.is-danger:hover:not(:disabled) {
  background: #fecaca;
  color: #b91c1c;
}

.list-row-action.is-active-status {
  background: #dcfce7;
  color: #15803d;
}

.list-row-action.is-active-status:hover:not(:disabled) {
  background: #bbf7d0;
  color: #166534;
}

.list-row-action.is-inactive-status {
  background: #e2e8f0;
  color: #64748b;
}

.list-row-action.is-inactive-status:hover:not(:disabled) {
  background: #cbd5e1;
  color: #475569;
}

.list-row-action:disabled {
  opacity: 0.35;
  cursor: default;
}

.list-table th:last-child,
.list-table td.list-row-actions {
  text-align: right;
}

.warehouse-list-page {
  width: 100%;
  max-width: 100rem;
}

.platform-list-page {
  width: 50%;
  max-width: 52rem;
}

.platform-list-page .store-list-head {
  margin-bottom: 0.45rem;
}

.platform-list-page .store-list-stats {
  margin-bottom: 0.55rem;
  gap: 0.55rem;
}

.platform-list-page .store-list-filterbar {
  margin-bottom: 0.55rem;
  gap: 0.45rem;
}

.platform-list-page .store-list-filterbar .store-list-new-btn {
  min-height: 30px;
  padding: 0.3rem 0.75rem;
  font-size: 0.76rem;
  gap: 0.3rem;
  border-radius: 0.35rem;
}

.platform-list-page .list-panel .table-shell {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
}

.platform-list-page .list-panel .table.platform-list-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border: 1px solid #e2e8f0;
  font-size: 0.78rem;
}

.platform-list-page .list-panel .table.platform-list-table > :not(caption) > * > * {
  border-right: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 0.28rem 0.5rem !important;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-list-page .list-panel .table.platform-list-table > :not(caption) > * > *:last-child {
  border-right: none !important;
}

.platform-list-page .platform-inline-input {
  width: 100%;
  max-width: 100%;
  font-family: inherit;
  font-size: 0.78rem !important;
  font-weight: 400;
  line-height: 1.2;
  color: #334155;
  min-height: 1.6rem;
  height: 1.6rem;
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
  box-sizing: border-box;
}

.platform-list-page select.form-select.platform-inline-status {
  display: inline-block !important;
  width: auto !important;
  min-width: 6.75rem;
  max-width: 100%;
  margin: 0 auto;
  vertical-align: middle;
  font-family: inherit;
  font-size: 0.78rem !important;
  font-weight: 400;
  line-height: 1.2;
  color: #334155;
  min-height: 1.6rem;
  height: 1.6rem;
  padding: 0.1rem 1.65rem 0.1rem 0.45rem !important;
  box-sizing: border-box;
  text-align: left;
  background-position: right 0.4rem center;
}

.platform-list-page .list-panel .table.platform-list-table thead th,
.platform-list-page .list-panel .table.platform-list-table thead.table-light th {
  background: #f1f5f9 !important;
  border-right: 1px solid #cbd5e1 !important;
  border-bottom: 1px solid #cbd5e1 !important;
  color: #000;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center !important;
  padding: 0 !important;
}

.platform-list-page .list-panel .table.platform-list-table thead th.table-sortable {
  padding: 0 !important;
}

.platform-list-page .list-panel .table.platform-list-table thead th:not(.table-sortable) {
  padding: 0.32rem 0.5rem !important;
}

.platform-list-page .list-panel .table.platform-list-table .table-sort-btn {
  text-align: center;
  padding: 0.32rem 0.5rem;
  box-sizing: border-box;
}

.platform-list-page .list-panel .table.platform-list-table th:nth-child(1),
.platform-list-page .list-panel .table.platform-list-table td:nth-child(1) {
  width: 16%;
}

.platform-list-page .list-panel .table.platform-list-table td:nth-child(1) {
  text-align: left !important;
}

.platform-list-page .list-panel .table.platform-list-table th:nth-child(2),
.platform-list-page .list-panel .table.platform-list-table td:nth-child(2) {
  width: 16%;
}

.platform-list-page .list-panel .table.platform-list-table td:nth-child(2) {
  text-align: left !important;
}

.platform-list-page .list-panel .table.platform-list-table th:nth-child(3),
.platform-list-page .list-panel .table.platform-list-table td:nth-child(3),
.platform-list-page .list-panel .table.platform-list-table th:nth-child(4),
.platform-list-page .list-panel .table.platform-list-table td:nth-child(4),
.platform-list-page .list-panel .table.platform-list-table th:nth-child(5),
.platform-list-page .list-panel .table.platform-list-table td:nth-child(5),
.platform-list-page .list-panel .table.platform-list-table th:nth-child(6),
.platform-list-page .list-panel .table.platform-list-table td:nth-child(6) {
  width: 12%;
  text-align: center !important;
  overflow: visible;
  text-overflow: unset;
  white-space: nowrap;
  padding-left: 0.35rem !important;
  padding-right: 0.35rem !important;
}

.platform-list-page .list-panel .table.platform-list-table th:nth-child(7),
.platform-list-page .list-panel .table.platform-list-table td:nth-child(7) {
  width: 12%;
  min-width: 5.5rem;
  text-align: center !important;
  overflow: visible;
  text-overflow: unset;
  white-space: nowrap;
  padding-left: 0.35rem !important;
  padding-right: 0.35rem !important;
}

.platform-list-page .list-panel .table.platform-list-table tbody td {
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 400;
  color: #334155;
}

.platform-list-page .entity-name {
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 400;
  color: #334155;
}

.platform-list-page .status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-size: 0.78rem;
  font-weight: 400;
}

.platform-list-page .status-pill::before {
  display: none;
}

.platform-list-page .list-panel .table.platform-list-table td.list-row-actions {
  display: table-cell !important;
  text-align: center !important;
  vertical-align: middle !important;
}

.platform-list-page .list-row-actions-group {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin: 0 auto;
  flex-wrap: nowrap;
}

.platform-list-page .list-row-action {
  flex-shrink: 0;
}

.platform-list-page .list-row-action:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.platform-list-page .table-filter-row th {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0 !important;
  padding: 0.25rem 0.35rem !important;
  vertical-align: middle;
}

.platform-list-page .table-filter-row th.table-filter-spacer {
  padding: 0.25rem 0.35rem !important;
}

.platform-list-page .table-column-filter {
  width: 100%;
  min-width: 0;
  height: 1.6rem;
  min-height: 1.6rem;
  padding: 0.1rem 0.35rem;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.2;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  background: #fff;
  color: #334155;
}

.platform-list-page .table-column-filter:focus {
  border-color: #94a3b8;
  box-shadow: none;
}

.platform-list-page .list-panel-footer {
  padding: 0.35rem 0.5rem;
}

.platform-form-dialog {
  width: min(28rem, calc(100vw - 2rem));
}

.platform-form-copy {
  margin: 0.15rem 0 0.85rem;
  color: #64748b;
  font-size: 0.875rem;
}

.platform-form-grid {
  display: grid;
  gap: 0.85rem;
}

.platform-form-actions {
  margin-top: 1.1rem;
}

.warehouse-list-page .store-list-filterbar .store-list-new-btn {
  min-height: 30px;
  padding: 0.3rem 0.75rem;
  font-size: 0.76rem;
}

.warehouse-list-page .list-panel .table-shell {
  width: 100%;
  overflow-x: auto;
}

.warehouse-list-page.is-inline-editing .list-panel .table-shell,
.warehouse-list-page.is-inline-editing .list-panel .table-responsive {
  overflow: visible !important;
}

.warehouse-list-page.is-inline-editing .list-panel {
  overflow: visible !important;
}

.warehouse-list-page.is-inline-editing .store-list-card {
  overflow: visible !important;
}

/* Table overflow:hidden on cells clips absolute menus; open fully while editing. */
.warehouse-list-page.is-inline-editing .list-panel .table.warehouse-list-table,
.warehouse-list-page.is-inline-editing .list-panel .table.warehouse-list-table tbody,
.warehouse-list-page.is-inline-editing .list-panel .table.warehouse-list-table tr {
  overflow: visible !important;
}

.warehouse-list-page.is-inline-editing .list-panel .table.warehouse-list-table > :not(caption) > * > * {
  overflow: visible !important;
  text-overflow: unset;
}

.warehouse-list-page .list-panel .table.warehouse-list-table {
  width: 100%;
  min-width: 78rem;
  table-layout: fixed;
  border-collapse: collapse;
  border: 1px solid #e2e8f0;
  font-size: 0.78rem;
}

.warehouse-list-page .list-panel .table.warehouse-list-table > :not(caption) > * > * {
  border-right: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 0.4rem 0.65rem !important;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.warehouse-list-page .list-panel .table.warehouse-list-table > :not(caption) > * > *:last-child {
  border-right: none !important;
}

.warehouse-list-page .list-panel .table.warehouse-list-table thead th,
.warehouse-list-page .list-panel .table.warehouse-list-table thead.table-light th {
  background: #f1f5f9 !important;
  border-right: 1px solid #cbd5e1 !important;
  border-bottom: 1px solid #cbd5e1 !important;
  color: #000;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center !important;
  padding: 0 !important;
}

.warehouse-list-page .list-panel .table.warehouse-list-table thead th.table-sortable {
  padding: 0 !important;
}

.warehouse-list-page .list-panel .table.warehouse-list-table thead th:not(.table-sortable) {
  padding: 0.45rem 0.65rem !important;
}

.warehouse-list-page .list-panel .table.warehouse-list-table .table-sort-btn {
  text-align: center;
  padding: 0.45rem 0.65rem;
  box-sizing: border-box;
}

.warehouse-list-page .list-panel .table.warehouse-list-table th:nth-child(1),
.warehouse-list-page .list-panel .table.warehouse-list-table td:nth-child(1) {
  width: 14%;
  min-width: 9rem;
}

.warehouse-list-page .list-panel .table.warehouse-list-table td:nth-child(1) {
  text-align: left !important;
}

.warehouse-list-page .list-panel .table.warehouse-list-table th:nth-child(2),
.warehouse-list-page .list-panel .table.warehouse-list-table td:nth-child(2) {
  width: 8%;
  min-width: 4.5rem;
}

.warehouse-list-page .list-panel .table.warehouse-list-table td:nth-child(2) {
  text-align: left !important;
}

.warehouse-list-page .list-panel .table.warehouse-list-table th:nth-child(3),
.warehouse-list-page .list-panel .table.warehouse-list-table td:nth-child(3) {
  width: 14%;
  min-width: 8rem;
}

.warehouse-list-page .list-panel .table.warehouse-list-table td:nth-child(3) {
  text-align: left !important;
}

.warehouse-list-page .list-panel .table.warehouse-list-table th:nth-child(4),
.warehouse-list-page .list-panel .table.warehouse-list-table td:nth-child(4) {
  width: 9%;
  min-width: 5rem;
}

.warehouse-list-page .list-panel .table.warehouse-list-table td:nth-child(4) {
  text-align: left !important;
}

.warehouse-list-page .list-panel .table.warehouse-list-table th:nth-child(5),
.warehouse-list-page .list-panel .table.warehouse-list-table td:nth-child(5) {
  width: 10%;
  min-width: 5.5rem;
}

.warehouse-list-page .list-panel .table.warehouse-list-table td:nth-child(5) {
  text-align: left !important;
}

.warehouse-list-page .list-panel .table.warehouse-list-table th:nth-child(6),
.warehouse-list-page .list-panel .table.warehouse-list-table td:nth-child(6) {
  width: 8%;
  min-width: 4.5rem;
}

.warehouse-list-page .list-panel .table.warehouse-list-table td:nth-child(6) {
  text-align: left !important;
}

.warehouse-list-page .list-panel .table.warehouse-list-table th:nth-child(7),
.warehouse-list-page .list-panel .table.warehouse-list-table td:nth-child(7) {
  width: 7%;
  min-width: 4rem;
}

.warehouse-list-page .list-panel .table.warehouse-list-table td:nth-child(7) {
  text-align: left !important;
}

.warehouse-list-page .list-panel .table.warehouse-list-table th:nth-child(8),
.warehouse-list-page .list-panel .table.warehouse-list-table td:nth-child(8) {
  width: 8%;
  min-width: 5rem;
}

.warehouse-list-page .list-panel .table.warehouse-list-table td:nth-child(8) {
  text-align: left !important;
  overflow: visible;
  text-overflow: unset;
}

.warehouse-list-page .list-panel .table.warehouse-list-table th:nth-child(9),
.warehouse-list-page .list-panel .table.warehouse-list-table td:nth-child(9) {
  width: 9%;
  min-width: 5.5rem;
}

.warehouse-list-page .list-panel .table.warehouse-list-table td:nth-child(9) {
  text-align: left !important;
}

.warehouse-list-page .list-panel .table.warehouse-list-table th:nth-child(10),
.warehouse-list-page .list-panel .table.warehouse-list-table td:nth-child(10) {
  width: 10%;
  min-width: 7.5rem;
  text-align: center !important;
  overflow: visible;
  text-overflow: unset;
  padding-left: 0.45rem !important;
  padding-right: 0.45rem !important;
}

.warehouse-list-page .table-filter-row th {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0 !important;
  padding: 0.35rem 0.45rem !important;
  vertical-align: middle;
}

.warehouse-list-page .table-filter-row th.table-filter-spacer {
  padding: 0.35rem 0.45rem !important;
}

.warehouse-list-page .table-column-filter {
  width: 100%;
  min-width: 0;
  height: 1.6rem;
  min-height: 1.6rem;
  padding: 0.1rem 0.35rem;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.2;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  background: #fff;
  color: #334155;
}

.warehouse-list-page .table-column-filter:focus {
  border-color: #94a3b8;
  box-shadow: none;
}

.warehouse-list-page .list-panel .table.warehouse-list-table tbody td:nth-child(8),
.warehouse-list-page .list-panel .table.warehouse-list-table tbody td:nth-child(10) {
  overflow: visible;
  text-overflow: unset;
}

.warehouse-list-page .warehouse-inline-input {
  max-width: 100%;
}

.warehouse-list-page .warehouse-inline-input,
.warehouse-list-page .warehouse-inline-status {
  font-family: inherit;
  font-size: 0.78rem !important;
  font-weight: 400;
  line-height: 1.2;
  color: #334155;
  min-height: 1.6rem;
  height: 1.6rem;
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
}

.warehouse-inline-select {
  min-width: 0;
  width: 100%;
  position: relative;
  z-index: 1;
}

.warehouse-inline-select:has(.searchable-select.is-open) {
  z-index: 80;
}

.warehouse-list-page .list-panel .table.warehouse-list-table tbody tr:has(.warehouse-inline-select) {
  position: relative;
  z-index: 5;
}

.warehouse-list-page .list-panel .table.warehouse-list-table tbody tr:has(.searchable-select.is-open) {
  z-index: 60;
}

.warehouse-list-page .list-panel .table.warehouse-list-table tbody td:has(.warehouse-inline-select) {
  overflow: visible !important;
  text-overflow: unset;
  white-space: normal;
  position: relative;
}

.warehouse-list-page .warehouse-inline-searchable {
  width: 100%;
}

.warehouse-list-page .warehouse-inline-searchable.searchable-select.is-open,
.warehouse-list-page .warehouse-inline-searchable.is-open {
  z-index: 90;
}

.warehouse-list-page .warehouse-inline-searchable .searchable-select-input {
  min-height: 1.6rem;
  height: 1.6rem;
  font-family: inherit;
  font-size: 0.78rem !important;
  font-weight: 400;
  line-height: 1.2;
  color: #334155;
  padding-top: 0.1rem !important;
  padding-bottom: 0.1rem !important;
}

.warehouse-list-page .warehouse-inline-searchable .searchable-select-icon,
.warehouse-list-page .warehouse-inline-searchable .searchable-select-caret {
  font-size: 0.65rem;
}

.warehouse-list-page .warehouse-inline-searchable .searchable-select-menu,
.warehouse-list-page .warehouse-inline-searchable .searchable-select-option,
.warehouse-list-page .warehouse-inline-searchable .searchable-select-empty {
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 400;
}

.warehouse-list-page .warehouse-inline-searchable .searchable-select-menu {
  position: absolute;
  top: calc(100% + 0.15rem);
  left: 0;
  right: auto;
  width: max(100%, 14rem);
  min-width: 14rem;
  max-height: 14rem;
  z-index: 100;
  overflow-y: auto;
}

.warehouse-list-page .warehouse-inline-searchable .searchable-select-menu.is-fixed-menu {
  position: fixed;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  width: auto;
  min-width: 14rem;
  max-width: none;
  max-height: 14rem;
  z-index: 2000;
}

.warehouse-list-page .entity-cell-btn {
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  width: 100%;
  max-width: 100%;
  cursor: pointer;
}

.warehouse-list-page .entity-cell-btn:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

.warehouse-list-page .list-panel .table.warehouse-list-table tbody td {
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 400;
  color: #334155;
}

.warehouse-list-page .entity-cell,
.warehouse-list-page .entity-cell-btn,
.warehouse-list-page .entity-name,
.warehouse-list-page .store-list-platform,
.warehouse-list-page .store-list-date {
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 400;
  color: #334155;
}

.warehouse-list-page .entity-cell-btn:hover:not(:disabled) .entity-name {
  color: var(--mp-primary, #0d6efd);
}

.warehouse-list-page .status-pill {
  font-size: 0.78rem;
  font-weight: 400;
}

.warehouse-list-page .status-pill::before {
  display: none;
}

.warehouse-list-page .list-panel .table.warehouse-list-table td.list-row-actions {
  display: table-cell !important;
  text-align: center !important;
  vertical-align: middle !important;
}

.warehouse-list-page .list-row-actions-group {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin: 0 auto;
  flex-wrap: nowrap;
}

.warehouse-list-page .list-row-action {
  flex-shrink: 0;
}

.warehouse-inline-edit-name {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}

.warehouse-inline-edit-name .entity-avatar {
  flex-shrink: 0;
}

.warehouse-inline-input {
  min-width: 0;
  width: 100%;
  max-width: 14rem;
}

.warehouse-list-page .warehouse-inline-edit-name .warehouse-inline-input {
  max-width: none;
}

.warehouse-inline-status {
  min-width: 6.5rem;
  width: auto;
  max-width: 8rem;
}

.warehouse-list-page .list-panel-footer {
  padding: 0.45rem 0.65rem;
}

.warehouse-form-dialog {
  width: min(480px, 100%);
  padding-top: 1.5rem;
  overflow: visible;
}

.warehouse-form-copy {
  margin: 0.15rem 0 0.85rem;
  color: #64748b;
  font-size: 0.8rem;
}

.warehouse-form-grid {
  margin-bottom: 0.85rem;
}

.warehouse-form-actions {
  margin-top: 0.25rem;
}

.warehouse-form-dialog .profile-btn-primary {
  background: #0d9488;
  border-color: #0d9488;
  color: #fff;
  box-shadow: none;
}

.warehouse-form-dialog .profile-btn-primary:hover:not(:disabled) {
  background: #0f766e;
  border-color: #0f766e;
  color: #fff;
  transform: none;
}

.warehouse-active-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  min-height: 30px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: #0f172a;
  cursor: pointer;
}

/* Product Import */

.product-import-page {
  width: 100%;
  max-width: 68rem;
  margin: 0;
  padding: 0 0 1rem;
}

.product-import-head {
  margin: 0 0 0.75rem;
}

.product-import-head h1 {
  margin: 0 0 0.2rem;
  font-size: 1.4rem;
  font-weight: 700;
  color: #0f172a;
}

.product-import-head p {
  margin: 0;
  color: #64748b;
  font-size: 0.86rem;
  line-height: 1.4;
}

.product-import-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(15rem, 0.7fr);
  gap: 0.75rem;
  align-items: stretch;
}

.product-import-card,
.product-import-guide,
.product-import-file-card,
.product-import-errors {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.7rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.product-import-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0.7rem 0.8rem 0.8rem;
}

.product-import-store-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  margin-bottom: 0.65rem;
}

.product-import-store-field {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 28rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.product-import-store-label {
  display: inline-block;
  margin: 0;
  flex-shrink: 0;
  color: #64748b;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.product-import-store-value {
  display: inline-block;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #0f172a;
  font-size: 0.88rem;
  font-weight: 700;
  margin-top:-2px;
}

.product-import-store-value .is-muted {
  color: #94a3b8;
  font-weight: 400;
}

.product-import-store-lock {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding-bottom: 0;
  color: #94a3b8;
  font-size: 0.74rem;
  white-space: nowrap;
}

.product-import-dropzone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 10.5rem;
  padding: 1rem 0.75rem;
  border: 1.5px dashed #cbd5e1;
  border-radius: 0.7rem;
  background: #f1f5f9;
  overflow: hidden;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.product-import-dropzone.is-dragover {
  border-color: #94a3b8;
  background: #e2e8f0;
}

.product-import-dropzone.is-busy {
  opacity: 0.7;
  pointer-events: none;
}

.product-import-file-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

.product-import-drop-content {
  position: relative;
  z-index: 1;
  text-align: center;
  pointer-events: none;
}

.product-import-drop-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  margin-bottom: 0.5rem;
  border-radius: 999px;
  background: var(--mp-primary-soft, rgba(13, 148, 136, 0.12));
  color: var(--mp-primary, #0d9488);
  font-size: 1.1rem;
}

.product-import-drop-title {
  margin: 0 0 0.45rem;
  color: #334155;
  font-size: 0.88rem;
  font-weight: 500;
}

.product-import-choose-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 1.95rem;
  padding: 0.3rem 0.85rem;
  border-radius: 0.4rem;
  background: var(--mp-primary, #0d9488);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
}

.product-import-drop-hint {
  margin: 0.5rem 0 0;
  color: #94a3b8;
  font-size: 0.74rem;
}

.product-import-inline-error {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin-top: 0.55rem;
  padding: 0.5rem 0.7rem;
  border-radius: 0.45rem;
  background: #fef2f2;
  color: #b91c1c;
  font-size: 0.8rem;
}

.product-import-uploading {
  margin-top: 0.55rem;
}

.product-import-info-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.65rem;
  padding: 0.55rem 0.75rem;
  border-radius: 0.5rem;
  background: #f0fdfa;
  color: #0f766e;
}

.product-import-info-copy {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  font-size: 0.78rem;
  line-height: 1.35;
}

.product-import-sample-link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 0;
  background: transparent;
  color: var(--mp-primary, #0d9488);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.product-import-sample-link:hover:not(:disabled) {
  text-decoration: underline;
}

.product-import-sample-link:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.product-import-guide {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0.75rem 0.85rem;
}

.product-import-guide-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  margin-bottom: 0.65rem;
}

.product-import-guide-head h2 {
  margin: 0;
  color: #0f172a;
  font-size: 0.92rem;
  font-weight: 700;
}

.product-import-guide-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 999px;
  background: #dcfce7;
  color: #16a34a;
  font-size: 0.65rem;
  flex-shrink: 0;
}

.product-import-guide-section + .product-import-guide-section {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #e2e8f0;
}

.product-import-guide-section h3 {
  margin: 0 0 0.55rem;
  color: #0f172a;
  font-size: 0.84rem;
  font-weight: 700;
}

.product-import-guide-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-import-guide-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  color: #334155;
  font-size: 0.8rem;
  line-height: 1.35;
}

.product-import-guide-list li + li {
  margin-top: 0.4rem;
}

.product-import-guide-list i {
  margin-top: 0.1rem;
  color: #16a34a;
  flex-shrink: 0;
}

.product-import-columns {
  margin: 0;
}

.product-import-columns > div {
  display: grid;
  grid-template-columns: 6.25rem minmax(0, 1fr);
  gap: 0.4rem;
  align-items: baseline;
}

.product-import-columns > div + div {
  margin-top: 0.35rem;
}

.product-import-columns dt {
  margin: 0;
  color: #0f172a;
  font-size: 0.8rem;
  font-weight: 700;
}

.product-import-columns dd {
  margin: 0;
  color: #64748b;
  font-size: 0.78rem;
}

.product-import-grid-panel {
  margin-top: 0.85rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.7rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}

.product-import-grid-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid #e2e8f0;
}

.product-import-grid-banner strong {
  display: block;
  font-size: 0.9rem;
}

.product-import-grid-banner span {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.78rem;
}

.product-import-grid-banner.is-success {
  background: #ecfdf5;
  color: #047857;
}

.product-import-grid-banner.is-failed {
  background: #fef2f2;
  color: #b91c1c;
}

.product-import-grid-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.product-import-grid-wrap {
  overflow-x: auto;
}

.product-import-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.product-import-grid th,
.product-import-grid td {
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
  vertical-align: top;
}

.product-import-grid thead th {
  background: #f8fafc;
  color: #64748b;
  font-weight: 600;
  white-space: nowrap;
}

.product-import-grid tbody tr.is-error-row {
  background: #fff5f5;
}

.product-import-grid tbody tr.is-skipped-row {
  background: #fffbeb;
}

.product-import-grid tbody tr.is-ok-row {
  background: #fff;
}

.product-import-grid td.is-error-cell {
  background: #fee2e2;
  color: #991b1b;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px #fca5a5;
}

.product-import-grid.is-editable td {
  padding: 0.35rem 0.45rem;
}

.product-import-grid-input {
  width: 100%;
  min-width: 4.5rem;
  height: 1.85rem;
  padding: 0.2rem 0.4rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.3rem;
  background: #fff;
  color: #0f172a;
  font-size: 0.8rem;
}

.product-import-grid td.is-error-cell .product-import-grid-input {
  border-color: #f87171;
  background: #fff7f7;
}

.product-import-grid-input:focus {
  outline: none;
  border-color: var(--mp-primary, #0d9488);
  box-shadow: 0 0 0 2px var(--mp-primary-soft, rgba(13, 148, 136, 0.2));
}

.product-import-grid-status ul {
  margin: 0;
  padding-left: 1rem;
  color: #b91c1c;
}

.product-import-grid-status .is-ok {
  color: #047857;
  font-weight: 600;
}

.product-import-result {
  max-width: 48rem;
}

.product-import-file-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
  padding: 1rem 1.15rem;
}

.product-import-file-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.product-import-file-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.55rem;
  background: #ecfdf5;
  color: #059669;
  font-size: 1.1rem;
}

.product-import-file-meta strong {
  display: block;
  color: #0f172a;
  font-size: 0.92rem;
}

.product-import-file-meta span {
  display: block;
  color: #64748b;
  font-size: 0.78rem;
}

.product-import-status {
  flex-shrink: 0;
  min-width: 9.5rem;
  padding: 0.55rem 0.75rem;
  border-radius: 0.55rem;
  text-align: right;
}

.product-import-status strong {
  display: block;
  font-size: 0.88rem;
}

.product-import-status span {
  display: block;
  font-size: 0.76rem;
}

.product-import-status.is-failed {
  background: #fef2f2;
  color: #b91c1c;
}

.product-import-status.is-success {
  background: #ecfdf5;
  color: #047857;
}

.product-import-warn-bar {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin-bottom: 0.85rem;
  padding: 0.8rem 1rem;
  border-radius: 0.65rem;
  background: #fef2f2;
  color: #b91c1c;
  font-size: 0.86rem;
}

.product-import-errors {
  margin-bottom: 1rem;
  padding: 1rem 1.15rem;
}

.product-import-errors h2 {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
}

.product-import-errors-table-wrap {
  overflow-x: auto;
}

.product-import-errors-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}

.product-import-errors-table th,
.product-import-errors-table td {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid #fee2e2;
  text-align: left;
  vertical-align: middle;
}

.product-import-errors-table thead th {
  background: #fff;
  color: #64748b;
  font-weight: 600;
  border-bottom-color: #fecaca;
}

.product-import-errors-table tbody tr {
  background: #fff5f5;
}

.product-import-row-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #b91c1c;
  font-weight: 600;
}

.product-import-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.product-import-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.35rem;
  padding: 0.45rem 1.15rem;
  border-radius: 0.45rem;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.product-import-btn-secondary {
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
}

.product-import-btn-secondary:hover {
  background: #f8fafc;
  color: #0f172a;
}

.product-import-btn-primary {
  border: 1px solid var(--mp-primary, #0d9488);
  background: var(--mp-primary, #0d9488);
  color: #fff;
}

.product-import-btn-primary:hover {
  background: var(--mp-sidebar-active, #0f766e);
  border-color: var(--mp-sidebar-active, #0f766e);
  color: #fff;
}

@media (max-width: 960px) {
  .product-import-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .product-import-store-row,
  .product-import-info-bar,
  .product-import-file-card,
  .product-import-actions,
  .product-import-grid-banner {
    flex-direction: column;
    align-items: stretch;
  }

  .product-import-grid-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .product-import-store-field {
    max-width: none;
  }

  .product-import-store-lock,
  .product-import-status {
    text-align: left;
  }

  .product-import-store-lock {
    padding-bottom: 0;
  }

  .product-import-sample-link {
    justify-content: flex-start;
  }

  .product-import-columns > div {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
}