/* Core Page Layout & Global Typography Override */
s-page, .s-page,
s-stack, .s-stack,
s-grid, .s-grid,
s-grid-item, .s-grid-item,
s-box, .s-box,
s-text, .s-text,
s-heading, .s-heading,
s-paragraph, .s-paragraph,
s-badge, .s-badge,
s-button, .s-button,
s-table, .s-table,
s-table-row, .s-table-row,
s-table-cell, .s-table-cell,
.s-box *, .s-stack *, s-box *, s-stack * {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

s-page, .s-page {
  display: block;
  padding: 12px 16px;
  max-width: 1400px;
  margin: 0 auto;
  color: #1a1f25;
  animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Flex Stack Component styling */
s-stack, .s-stack {
  display: flex;
  width: 100%;
}

s-stack[direction="block"], .s-stack.direction-block {
  flex-direction: column;
}

s-stack[direction="inline"], .s-stack.direction-inline {
  flex-direction: row;
  flex-wrap: wrap;
}

/* Alignment rules */
s-stack[align="center"], .s-stack.align-center {
  align-items: center;
}
s-stack[align="start"], .s-stack.align-start {
  align-items: flex-start;
}
s-stack[align="end"], .s-stack.align-end {
  align-items: flex-end;
}

/* Spacing gaps */
s-stack[gap="none"], .s-stack.gap-none { gap: 0px; }
s-stack[gap="extra-tight"], .s-stack.gap-extra-tight { gap: 2px; }
s-stack[gap="tight"], .s-stack.gap-tight { gap: 4px; }
s-stack[gap="small"], .s-stack.gap-small { gap: 8px; }
s-stack[gap="base"], .s-stack.gap-base { gap: 12px; }
s-stack[gap="large"], .s-stack.gap-large { gap: 16px; }
s-stack[gap="extra-large"], .s-stack.gap-extra-large { gap: 24px; }

/* Grid Layout styling */
s-grid, .s-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
  width: 100%;
}

s-grid-item, .s-grid-item {
  display: block;
  min-width: 0;
}

/* Grid Item spanning columns */
s-grid-item[span="1"], .s-grid-item.span-1 { grid-column: span 1; }
s-grid-item[span="2"], .s-grid-item.span-2 { grid-column: span 2; }
s-grid-item[span="3"], .s-grid-item.span-3 { grid-column: span 3; }
s-grid-item[span="4"], .s-grid-item.span-4 { grid-column: span 4; }
s-grid-item[span="5"], .s-grid-item.span-5 { grid-column: span 5; }
s-grid-item[span="6"], .s-grid-item.span-6 { grid-column: span 6; }
s-grid-item[span="7"], .s-grid-item.span-7 { grid-column: span 7; }
s-grid-item[span="8"], .s-grid-item.span-8 { grid-column: span 8; }
s-grid-item[span="9"], .s-grid-item.span-9 { grid-column: span 9; }
s-grid-item[span="10"], .s-grid-item.span-10 { grid-column: span 10; }
s-grid-item[span="11"], .s-grid-item.span-11 { grid-column: span 11; }
s-grid-item[span="12"], .s-grid-item.span-12 { grid-column: span 12; }

/* Box / Card Styling */
s-box, .s-box {
  display: block;
  background: #ffffff;
  border: 1px solid #e1e3e6;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
  box-sizing: border-box;
}

s-box[borderRadius="large"], .s-box.borderRadius-large {
  border-radius: 12px;
}
s-box[borderRadius="base"], .s-box.borderRadius-base {
  border-radius: 8px;
}
s-box[borderRadius="small"], .s-box.borderRadius-small {
  border-radius: 4px;
}

s-box[borderWidth="base"], .s-box.borderWidth-base {
  border-width: 1px;
}
s-box[borderWidth="none"], .s-box.borderWidth-none {
  border-width: 0px;
}

/* Padding classes */
s-box[padding="none"], .s-box.padding-none { padding: 0; }
s-box[padding="tight"], .s-box.padding-tight { padding: 6px; }
s-box[padding="base"], .s-box.padding-base { padding: 10px 14px; }
s-box[padding="large"], .s-box.padding-large { padding: 14px 20px; }

/* Shadow styling and premium card lifts */
s-box[background="base"], .s-box.background-base {
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.02);
}

s-box[background="base"]:hover, .s-box.background-base:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.04), 0 2px 6px rgba(0, 0, 0, 0.02);
  border-color: #d1d3d6;
}

/* Divider line */
s-divider, .s-divider {
  display: block;
  height: 1px;
  background-color: #e1e3e6;
  margin: 8px 0;
  width: 100%;
}

/* Text & Typography */
s-heading, .s-heading {
  display: block;
  font-size: 1.25rem;
  font-weight: 600;
  color: #1a1f25;
  margin: 0;
}

s-paragraph, .s-paragraph {
  display: block;
  font-size: 0.95rem;
  color: #616a75;
  margin: 0 0 8px 0;
  line-height: 1.5;
}

s-text, .s-text {
  display: inline-block;
  font-size: 1rem;
  color: #1a1f25;
}

s-text[tone="subdued"], .s-text.tone-subdued {
  color: #616a75;
  font-size: 0.9rem;
}
s-text[tone="critical"], .s-text.tone-critical {
  color: #be123c;
}
s-text[tone="success"], .s-text.tone-success {
  color: #0f766e;
}
s-text[size="small-400"], .s-text.size-small-400 {
  font-size: 0.9rem;
  font-weight: 400;
  white-space: nowrap;
}
s-text[size="small-500"], .s-text.size-small-500 {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* Badges styling */
s-badge, .s-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

s-badge[tone="success"], .s-badge.tone-success {
  background-color: #e6f6f4;
  color: #0d5c54;
}
s-badge[tone="caution"], .s-badge.tone-caution {
  background-color: #fffbeb;
  color: #b45309;
}
s-badge[tone="critical"], .s-badge.tone-critical {
  background-color: #fff1f2;
  color: #9f1239;
}
s-badge[tone="info"], .s-badge.tone-info {
  background-color: #f0f9ff;
  color: #0369a1;
}
s-badge[tone="subdued"], .s-badge.tone-subdued {
  background-color: #f3f4f6;
  color: #4b5563;
}
s-badge[tone="attention"], .s-badge.tone-attention {
  background-color: #faf5ff;
  color: #6b21a8;
}

/* Button layout and hover animations */
s-button, .s-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

s-button[variant="primary"], .s-button.variant-primary {
  background-color: #108043;
  color: #ffffff;
}

s-button[variant="primary"]:hover, .s-button.variant-primary:hover {
  background-color: #0b6633;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 128, 67, 0.15);
}

s-button[variant="secondary"], .s-button.variant-secondary {
  background-color: #f6f6f7;
  border-color: #d2d5d9;
  color: #1a1f25;
}

s-button[variant="secondary"]:hover, .s-button.variant-secondary:hover {
  background-color: #edeff1;
  border-color: #a4acb5;
}

/* Custom Table Components */
s-table, .s-table {
  display: table;
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}

s-table-header-row, .s-table-header-row {
  display: table-row;
  border-bottom: 2px solid #e1e3e6;
  background-color: #fafbfc;
}

s-table-row, .s-table-row {
  display: table-row;
  border-bottom: 1px solid #e1e3e6;
  transition: background-color 0.15s ease;
}

s-table-row:hover, .s-table-row:hover {
  background-color: #f7f9fa;
}

s-table-cell, .s-table-cell {
  display: table-cell;
  padding: 6px 10px;
  vertical-align: middle;
  font-size: 0.925rem;
}

s-table-header-row s-table-cell, .s-table-header-row .s-table-cell {
  font-weight: 600;
}

/* Banners announcements */
s-banner, .s-banner {
  display: block;
  padding: 16px;
  border-radius: 8px;
  border-left: 4px solid transparent;
  margin-top: 12px;
}

s-banner[tone="critical"], .s-banner.tone-critical {
  background-color: #fff1f2;
  border-color: #e11d48;
}

s-banner[tone="success"], .s-banner.tone-success {
  background-color: #e6f6f4;
  border-color: #0d5c54;
}

/* Standard custom form element styles */
s-text-field, .s-text-field, s-number-field, .s-number-field, s-select, .s-select {
  display: block;
  width: 100%;
  margin-bottom: 16px;
}

s-text-field label, .s-text-field label, s-number-field label, .s-number-field label, s-select label, .s-select label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 6px;
  color: #4b5563;
}

/* Inputs design */
s-text-field input, .s-text-field input, s-number-field input, .s-number-field input, s-select select, .s-select select {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1px solid #d2d5d9;
  border-radius: 6px;
  font-size: 0.925rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  background-color: #ffffff;
}

s-text-field input:focus, .s-text-field input:focus, s-number-field input:focus, .s-number-field input:focus, s-select select:focus, .s-select select:focus {
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);
}

s-checkbox, .s-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  font-size: 0.9rem;
}

s-checkbox input[type="checkbox"], .s-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #0f766e;
  cursor: pointer;
}

/* Responsive grid and adaptive layouts */
@media (max-width: 1200px) {
  /* On tablets and medium viewports, group smaller metrics and stretch primary columns */
  s-grid-item[span="2"], .s-grid-item.span-2,
  s-grid-item[span="3"], .s-grid-item.span-3,
  s-grid-item[span="4"], .s-grid-item.span-4 {
    grid-column: span 6 !important;
  }
  
  s-grid-item[span="5"], .s-grid-item.span-5,
  s-grid-item[span="6"], .s-grid-item.span-6,
  s-grid-item[span="7"], .s-grid-item.span-7,
  s-grid-item[span="8"], .s-grid-item.span-8,
  s-grid-item[span="9"], .s-grid-item.span-9,
  s-grid-item[span="10"], .s-grid-item.span-10,
  s-grid-item[span="11"], .s-grid-item.span-11 {
    grid-column: span 12 !important;
  }

  s-stack[direction="inline"], .s-stack.direction-inline {
    flex-direction: row;
    align-items: center;
  }
}

@media (max-width: 768px) {
  /* On compact viewports, collapse completely into full-width stacks to prevent wrapping */
  s-grid, .s-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  s-grid-item[span], .s-grid-item {
    grid-column: span 12 !important;
  }
  
  s-stack[direction="inline"], .s-stack.direction-inline {
    flex-direction: column;
    align-items: stretch;
  }
  
  s-page, .s-page {
    padding: 16px;
  }
}

/* Premium Styling and Input Spacing Layouts */
.premium-input-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
  width: 100%;
}

.premium-input-label {
  font-size: 13px;
  font-weight: 600;
  color: #202223;
  display: block;
}

.premium-input-field {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #c9cccf;
  border-radius: 6px;
  font-size: 14px;
  background-color: #ffffff;
  color: #202223;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
  outline: none;
  min-height: 40px;
}

.premium-input-field:focus {
  border-color: #008060;
  box-shadow: 0 0 0 2px rgba(0, 128, 96, 0.15);
}

.premium-select-field {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #c9cccf;
  border-radius: 6px;
  font-size: 14px;
  background-color: #ffffff;
  color: #202223;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
  outline: none;
  min-height: 40px;
  cursor: pointer;
}

.premium-select-field:focus {
  border-color: #008060;
  box-shadow: 0 0 0 2px rgba(0, 128, 96, 0.15);
}

.premium-checkbox-container {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  cursor: pointer;
  user-select: none;
}

.premium-checkbox-input {
  width: 18px;
  height: 18px;
  accent-color: #008060;
  cursor: pointer;
}

.premium-checkbox-label {
  font-size: 14px;
  color: #202223;
}

/* Premium Responsive Table Designs */
.premium-table-container {
  width: 100%;
  overflow-x: auto;
  margin-top: 8px;
  border-radius: 8px;
  border: 1px solid #e1e3e6;
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.premium-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  min-width: 800px;
}

.premium-table th {
  background-color: #f6f6f7;
  color: #4b5563;
  font-weight: 600;
  font-size: 12px;
  padding: 12px 16px;
  border-bottom: 2px solid #e1e3e6;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.premium-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #e1e3e6;
  font-size: 13.5px;
  color: #1a1f25;
  vertical-align: middle;
}

.premium-table tr:hover {
  background-color: #f8fafc;
}

.premium-table tr.expanded-details-row {
  background-color: #fafbfc;
}

.premium-table tr.expanded-details-row:hover {
  background-color: #fafbfc;
}

/* Premium Badges with left indicator dots */
.premium-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 50px;
  text-transform: capitalize;
}

.premium-badge::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.premium-badge.status-success {
  background-color: #e6f6f4;
  color: #0d5c54;
}

.premium-badge.status-success::before {
  background-color: #0d5c54;
}

.premium-badge.status-caution {
  background-color: #fffbeb;
  color: #b45309;
}

.premium-badge.status-caution::before {
  background-color: #b45309;
}

.premium-badge.status-critical {
  background-color: #fff1f2;
  color: #9f1239;
}

.premium-badge.status-critical::before {
  background-color: #9f1239;
}

.premium-badge.status-info {
  background-color: #f0f9ff;
  color: #0369a1;
}

.premium-badge.status-info::before {
  background-color: #0369a1;
}

/* Competitor-like Custom Radio Groups */
.competitor-radio-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 12px 0;
}

.competitor-radio-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
}

.competitor-radio-input {
  margin-top: 4px;
  cursor: pointer;
}

.competitor-radio-content {
  display: flex;
  flex-direction: column;
}

.competitor-radio-title {
  font-size: 14px;
  font-weight: 600;
  color: #1A1F25;
}

.competitor-radio-desc {
  font-size: 12px;
  color: #616A75;
  margin-top: 2px;
}

/* Competitor Warning Callout */
.competitor-warning-box {
  background-color: #FEF9C3;
  border-left: 4px solid #CA8A04;
  padding: 12px;
  border-radius: 4px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 16px 0;
}

.competitor-warning-text {
  font-size: 12px;
  color: #854D0E;
  line-height: 1.4;
  margin: 0;
}

/* GS1 Info Side Box */
.competitor-info-box {
  background-color: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  padding: 14px;
  margin-top: 16px;
}

.competitor-info-title {
  font-size: 13.5px;
  font-weight: 600;
  color: #1E293B;
  margin-bottom: 6px;
}

.competitor-info-text {
  font-size: 12px;
  color: #475569;
  line-height: 1.4;
  margin: 0;
}

.competitor-info-link {
  color: #0284C7;
  text-decoration: underline;
  font-weight: 600;
}

/* Premium Switch Toggle */
.premium-switch-container {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background-color: #FFF1F2; /* subtle crimson tint for warning operations */
  border: 1px solid #FECDD3;
  border-radius: 6px;
  margin-top: 12px;
}

.premium-switch-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #E11D48; /* alert rose color */
}

.premium-switch-content {
  display: flex;
  flex-direction: column;
}

.premium-switch-title {
  font-size: 13.5px;
  font-weight: 600;
  color: #9F1239;
}

.premium-switch-desc {
  font-size: 12px;
  color: #BE123C;
  margin-top: 2px;
}

/* Premium CSS Spinner Animation */
.premium-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #ffffff;
  animation: premium-spin 0.8s linear infinite;
}

@keyframes premium-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Interactive Label Designer Modal CSS Rules */
.designer-modal-container {
  width: 860px;
  max-width: 90vw;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.designer-modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.designer-modal-body {
  padding: 20px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 24px;
}

.designer-editor-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.designer-row-builder {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 12px;
  background-color: #f8fafc;
}

.designer-token-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  margin-bottom: 8px;
}

.designer-token-title {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 6px;
}

.designer-token-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.designer-action-btn {
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid #cbd5e1;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.designer-action-btn.active {
  background-color: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
}

/* live WYSIWYG Thermal Mockup Card */
.thermal-preview-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f1f5f9;
  border-radius: 8px;
  padding: 20px;
  border: 1px dashed #cbd5e1;
}

.thermal-live-label {
  width: 260px;
  height: 150px;
  background-color: #ffffff;
  border-radius: 6px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  border: 1px solid #cbd5e1;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  font-family: 'Courier New', Courier, monospace;
}

.thermal-live-row {
  font-size: 13px;
  line-height: 1.2;
  color: #000000;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.thermal-live-barcode {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 6px 0;
}

.thermal-barcode-lines {
  height: 42px;
  width: 100%;
  background: repeating-linear-gradient(
    90deg,
    #000,
    #000 2px,
    transparent 2px,
    transparent 5px,
    #000 5px,
    #000 7px,
    transparent 7px,
    transparent 10px
  );
}

.thermal-live-barcode-text {
  font-size: 10px;
  margin-top: 2px;
  color: #000;
}
/* Utility to hide scrollbars for clean custom horizontal tabs navigation */
.no-scrollbar::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
}
.no-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}