/* ============================================
   STREEEX DESIGN TOKENS
   Single source of truth for all visual values
   ============================================ */

:root {
  /* Brand Colors */
  --stx-purple:        #7B2FBE;
  --stx-coral:         #F05A28;
  --stx-amber:         #F5A623;
  --stx-gradient:      linear-gradient(135deg, #7B2FBE 0%, #E0196E 40%, #F05A28 70%, #F5A623 100%);

  /* Neutral Colors */
  --stx-charcoal:      #2D3142;
  --stx-dark-grey:     #4A4E69;
  --stx-mid-grey:      #9A9BB4;
  --stx-light-grey:    #E8EAF0;
  --stx-near-white:    #F4F6F8;
  --stx-white:         #FFFFFF;

  /* Status Colors */
  --stx-success:       #27AE60;
  --stx-warning:       #F5A623;
  --stx-error:         #E0196E;
  --stx-info:          #2D9CDB;

  /* Spacing — 8px grid */
  --stx-space-1:       8px;
  --stx-space-2:       16px;
  --stx-space-3:       24px;
  --stx-space-4:       32px;
  --stx-space-6:       48px;
  --stx-space-8:       64px;

  /* Border Radius */
  --stx-radius-card:   12px;
  --stx-radius-btn:    8px;
  --stx-radius-badge:  24px;
  --stx-radius-input:  8px;

  /* Shadows */
  --stx-shadow-card:   0 2px 12px rgba(45, 49, 66, 0.08);
  --stx-shadow-hover:  0 8px 24px rgba(123, 47, 190, 0.15);

  /* Transitions */
  --stx-transition:    all 0.2s ease;

  /* Font Sizes */
  --stx-text-xs:       12px;
  --stx-text-sm:       13px;
  --stx-text-base:     14px;
  --stx-text-md:       16px;
  --stx-text-lg:       18px;
  --stx-text-xl:       20px;
  --stx-text-2xl:      24px;
  --stx-text-3xl:      32px;
}
/* ============================================
   STREEEX TYPOGRAPHY
   Inter (EN) + Cairo (AR)
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Cairo:wght@400;500;600;700&display=swap');

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Inter', 'Cairo', sans-serif;
  font-size: var(--stx-text-base);
  color: var(--stx-charcoal);
}

[dir="rtl"] body,
[lang="ar"] body {
  font-family: 'Cairo', 'Inter', sans-serif;
}

.stx-h1 { font-size: var(--stx-text-3xl); font-weight: 700; color: var(--stx-charcoal); }
.stx-h2 { font-size: var(--stx-text-2xl); font-weight: 700; color: var(--stx-charcoal); }
.stx-h3 { font-size: var(--stx-text-xl);  font-weight: 600; color: var(--stx-charcoal); }
.stx-h4 { font-size: var(--stx-text-lg);  font-weight: 600; color: var(--stx-charcoal); }
.stx-subheading { font-size: var(--stx-text-md); font-weight: 600; color: var(--stx-charcoal); }
.stx-body { font-size: var(--stx-text-base); font-weight: 400; color: var(--stx-dark-grey); }
.stx-label { font-size: var(--stx-text-xs); font-weight: 500; color: var(--stx-mid-grey); }
/* ============================================
   STREEEX BUTTONS
   ============================================ */

.stx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--stx-radius-btn);
  padding: 12px 24px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: var(--stx-text-base);
  cursor: pointer;
  border: none;
  transition: var(--stx-transition);
  text-decoration: none;
}

/* Primary — gradient */
.stx-btn-primary {
  background: var(--stx-gradient);
  color: var(--stx-white);
}
.stx-btn-primary:hover {
  opacity: 0.9;
  box-shadow: var(--stx-shadow-hover);
}

/* Secondary — outlined */
.stx-btn-secondary {
  background: transparent;
  border: 2px solid var(--stx-purple);
  color: var(--stx-purple);
}
.stx-btn-secondary:hover {
  background: var(--stx-purple);
  color: var(--stx-white);
}

/* Danger */
.stx-btn-danger {
  background: var(--stx-error);
  color: var(--stx-white);
}
.stx-btn-danger:hover {
  opacity: 0.9;
}

/* Disabled */
.stx-btn:disabled,
.stx-btn-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Sizes */
.stx-btn-sm { padding: 8px 16px; font-size: var(--stx-text-xs); }
.stx-btn-lg { padding: 16px 32px; font-size: var(--stx-text-md); }
/* ============================================
   STREEEX STATUS BADGES
   ============================================ */

.stx-badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--stx-radius-badge);
  padding: 4px 12px;
  font-weight: 500;
  font-size: var(--stx-text-xs);
}

.stx-badge-approved  { background: #E8F8F0; color: var(--stx-success); }
.stx-badge-pending   { background: #FEF6E4; color: var(--stx-warning); }
.stx-badge-rejected  { background: #FDE8F0; color: var(--stx-error); }
.stx-badge-review    { background: #EAF4FC; color: var(--stx-info); }
.stx-badge-purple    { background: rgba(123,47,190,0.1); color: var(--stx-purple); }

/* Product Quality Tiers */
.stx-badge-draft     { background: #F0F0F0; color: var(--stx-mid-grey); }
.stx-badge-basic     { background: #EAF4FC; color: var(--stx-info); }
.stx-badge-good      { background: #E8F8F0; color: var(--stx-success); }
.stx-badge-featured  { background: rgba(245,166,35,0.15); color: #B7791F; }
.stx-badge-pick      { background: var(--stx-gradient); color: var(--stx-white); }

/* Vendor Reputation Tiers */
.stx-badge-new-seller        { background: #F0F0F0; color: var(--stx-mid-grey); }
.stx-badge-established       { background: #EAF4FC; color: var(--stx-info); }
.stx-badge-trusted           { background: #E8F8F0; color: var(--stx-success); }
.stx-badge-top-seller        { background: rgba(245,166,35,0.15); color: #B7791F; }
.stx-badge-certified         { background: var(--stx-gradient); color: var(--stx-white); }
/* ============================================
   STREEEX CARDS
   ============================================ */

.stx-card {
  background: var(--stx-white);
  border-radius: var(--stx-radius-card);
  box-shadow: var(--stx-shadow-card);
  padding: var(--stx-space-3);
  transition: var(--stx-transition);
}

.stx-card:hover {
  box-shadow: var(--stx-shadow-hover);
}

.stx-card-title {
  font-size: var(--stx-text-md);
  font-weight: 600;
  color: var(--stx-charcoal);
  margin-bottom: var(--stx-space-2);
}

.stx-card-value {
  font-size: var(--stx-text-2xl);
  font-weight: 700;
  color: var(--stx-charcoal);
  margin: var(--stx-space-1) 0;
}

.stx-card-label {
  font-size: var(--stx-text-xs);
  color: var(--stx-mid-grey);
}

/* Stat card variants */
.stx-card-green  .stx-card-value { color: var(--stx-success); }
.stx-card-blue   .stx-card-value { color: var(--stx-info); }
.stx-card-purple .stx-card-value { color: var(--stx-purple); }
.stx-card-coral  .stx-card-value { color: var(--stx-coral); }
.stx-card-amber  .stx-card-value { color: var(--stx-amber); }
.stx-card-red    .stx-card-value { color: var(--stx-error); }

/* Modal */
.stx-modal {
  background: var(--stx-white);
  border-radius: var(--stx-radius-card);
  box-shadow: 0 20px 60px rgba(45, 49, 66, 0.2);
  padding: var(--stx-space-4);
}
/* ============================================
   STREEEX SIDEBAR NAVIGATION
   ============================================ */

.stx-sidebar {
  background: var(--stx-charcoal);
  min-height: 100vh;
  width: 280px;
}

.stx-sidebar-logo {
  padding: var(--stx-space-3) var(--stx-space-3);
  background: var(--stx-charcoal);
}

.stx-nav-item {
  display: flex;
  align-items: center;
  gap: var(--stx-space-2);
  padding: 12px 24px;
  color: var(--stx-mid-grey);
  font-size: var(--stx-text-base);
  font-weight: 500;
  transition: var(--stx-transition);
  cursor: pointer;
  text-decoration: none;
}

.stx-nav-item:hover {
  color: var(--stx-white);
  background: rgba(123, 47, 190, 0.08);
}

.stx-nav-item.active {
  color: var(--stx-white);
  background: rgba(123, 47, 190, 0.15);
  border-left: 4px solid var(--stx-purple);
}

.stx-nav-icon {
  width: 20px;
  height: 20px;
  color: inherit;
}

.stx-nav-section-label {
  font-size: var(--stx-text-xs);
  font-weight: 600;
  color: var(--stx-mid-grey);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: var(--stx-space-2) var(--stx-space-3) var(--stx-space-1);
}
/* ============================================
   STREEEX FORM CONTROLS
   ============================================ */

.stx-input,
.stx-select,
.stx-textarea {
  width: 100%;
  border-radius: var(--stx-radius-input);
  border: 1px solid var(--stx-light-grey);
  padding: 10px 16px;
  font-family: 'Inter', 'Cairo', sans-serif;
  font-size: var(--stx-text-base);
  color: var(--stx-charcoal);
  background: var(--stx-white);
  transition: var(--stx-transition);
  outline: none;
}

.stx-input:focus,
.stx-select:focus,
.stx-textarea:focus {
  border-color: var(--stx-purple);
  box-shadow: 0 0 0 3px rgba(123, 47, 190, 0.1);
}

.stx-input::placeholder,
.stx-textarea::placeholder {
  color: var(--stx-mid-grey);
}

.stx-input.error,
.stx-select.error {
  border-color: var(--stx-error);
}

.stx-label {
  display: block;
  font-size: var(--stx-text-xs);
  font-weight: 500;
  color: var(--stx-dark-grey);
  margin-bottom: 6px;
}

.stx-label.required::after {
  content: " *";
  color: var(--stx-error);
}

.stx-field-error {
  font-size: var(--stx-text-xs);
  color: var(--stx-error);
  margin-top: 4px;
}

.stx-form-group {
  margin-bottom: var(--stx-space-2);
}
/* ============================================
   STREEEX RTL SUPPORT
   Arabic right-to-left utilities
   ============================================ */

[dir="rtl"] {
  font-family: 'Cairo', 'Inter', sans-serif;
}

[dir="rtl"] .stx-nav-item.active {
  border-left: none;
  border-right: 4px solid var(--stx-purple);
}

[dir="rtl"] .stx-nav-item {
  flex-direction: row-reverse;
}

/* RTL margin/padding utilities */
[dir="rtl"] .stx-ml-auto { margin-left: unset; margin-right: auto; }
[dir="rtl"] .stx-mr-auto { margin-right: unset; margin-left: auto; }
[dir="rtl"] .stx-pl-3 { padding-left: unset; padding-right: var(--stx-space-3); }
[dir="rtl"] .stx-pr-3 { padding-right: unset; padding-left: var(--stx-space-3); }

/* Flip icons in RTL */
[dir="rtl"] .stx-icon-flip { transform: scaleX(-1); }

/* Arabic text rendering */
[lang="ar"] * {
  font-family: 'Cairo', sans-serif;
  line-height: 1.8;
}
/* ============================================
   STREEEX UTILITIES
   ============================================ */

/* Display */
.stx-flex         { display: flex; }
.stx-flex-col     { display: flex; flex-direction: column; }
.stx-grid         { display: grid; }
.stx-hidden       { display: none; }

/* Alignment */
.stx-items-center  { align-items: center; }
.stx-justify-between { justify-content: space-between; }
.stx-justify-center  { justify-content: center; }
.stx-gap-1        { gap: var(--stx-space-1); }
.stx-gap-2        { gap: var(--stx-space-2); }
.stx-gap-3        { gap: var(--stx-space-3); }

/* Spacing */
.stx-p-1 { padding: var(--stx-space-1); }
.stx-p-2 { padding: var(--stx-space-2); }
.stx-p-3 { padding: var(--stx-space-3); }
.stx-p-4 { padding: var(--stx-space-4); }
.stx-m-1 { margin: var(--stx-space-1); }
.stx-m-2 { margin: var(--stx-space-2); }
.stx-mb-2 { margin-bottom: var(--stx-space-2); }
.stx-mb-3 { margin-bottom: var(--stx-space-3); }
.stx-mt-2 { margin-top: var(--stx-space-2); }

/* Text */
.stx-text-purple  { color: var(--stx-purple); }
.stx-text-coral   { color: var(--stx-coral); }
.stx-text-amber   { color: var(--stx-amber); }
.stx-text-success { color: var(--stx-success); }
.stx-text-error   { color: var(--stx-error); }
.stx-text-muted   { color: var(--stx-mid-grey); }
.stx-text-bold    { font-weight: 700; }
.stx-text-semibold { font-weight: 600; }
.stx-text-center  { text-align: center; }
.stx-text-right   { text-align: right; }

/* Background */
.stx-bg-gradient  { background: var(--stx-gradient); }
.stx-bg-purple    { background: var(--stx-purple); }
.stx-bg-near-white { background: var(--stx-near-white); }

/* Divider */
.stx-divider {
  border: none;
  border-top: 1px solid var(--stx-light-grey);
  margin: var(--stx-space-2) 0;
}

/* Table */
.stx-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--stx-text-base);
}
.stx-table th {
  text-align: left;
  font-weight: 600;
  color: var(--stx-mid-grey);
  font-size: var(--stx-text-xs);
  padding: var(--stx-space-1) var(--stx-space-2);
  border-bottom: 1px solid var(--stx-light-grey);
}
.stx-table td {
  padding: var(--stx-space-1) var(--stx-space-2);
  border-bottom: 1px solid var(--stx-light-grey);
  color: var(--stx-dark-grey);
}
.stx-table tr:hover td {
  background: var(--stx-near-white);
}


/* Hide manage_stock toggle - Streeex manages stock internally - always on */
label[for="manage_stock"],
.control-group:has([name="manage_stock"]) {
    display: none !important;
}