/* ═══════════════════════════════════════════════════════════════════════════════
 *
 *  EL MATAJER — ROLE-SPECIFIC DESIGN TOKENS
 *  Additive override file — loaded AFTER tokens.css, BEFORE style.css.
 *
 *  Provides per-role CSS custom properties consumed by sidebar, topbar,
 *  focus rings, badge chips, and gradient utilities across the admin panel.
 *
 *  Role → body class mapping (set via PHP in default.blade.php):
 *  ┌─────────────────────────┬──────────────────────┬────────────────────────┐
 *  │ User Type               │ Body Class           │ Accent Color           │
 *  ├─────────────────────────┼──────────────────────┼────────────────────────┤
 *  │ type=1  (Super Admin)   │ body.role-admin      │ Rose   #e11d48         │
 *  │ type=4  (Admin Staff)   │ body.role-admin      │ Rose   #e11d48         │
 *  │ type=6, vendor_id=1     │ body.role-admin      │ Rose   #e11d48         │
 *  │ type=2  (Vendor/Owner)  │ body.role-vendor     │ Indigo #5B3DF5         │
 *  │ type=6, vendor_id≠1     │ body.role-vendor-staff│ Indigo #5B3DF5 (soft) │
 *  │ type=5  (Marketer)      │ body.role-marketer   │ Emerald #10b981        │
 *  └─────────────────────────┴──────────────────────┴────────────────────────┘
 *
 *  Token set per role:
 *    --role-accent        Main accent color
 *    --role-accent-hover  Darker hover state
 *    --role-accent-soft   Low-opacity background tint (active items, unread bg)
 *    --role-accent-focus  Focus ring glow color
 *    --role-gradient      Linear gradient for hero cards / premium buttons
 *    --role-badge-bg      Badge chip background
 *    --role-badge-text    Badge chip text color
 *    --role-name          String identifier (for JS/data attrs if needed)
 *
 *  RULES:
 *  - Never hardcode role colors inside components — always use var(--role-*)
 *  - These tokens are additive — they do NOT override dark/light mode tokens
 *  - Dark mode and RTL remain fully compatible (these are accent-only tokens)
 *  - Bootstrap compatibility: these do NOT touch any --bs-* variables
 *
 * ═══════════════════════════════════════════════════════════════════════════════ */


/* ── DEFAULTS: Vendor / Store Owner ────────────────────────────────────────────
   Safe fallback for any unauthenticated or unknown role.
   Deliberately set to vendor blue so the base :root is meaningful.
   Blue #2563EB = professional SaaS blue (Tailwind blue-600).                  */
:root {
  --role-accent:        #2563EB;
  --role-accent-hover:  #1d4ed8;
  --role-accent-soft:   rgba(37, 99, 235, 0.12);
  --role-accent-focus:  rgba(37, 99, 235, 0.30);
  --role-gradient:      linear-gradient(135deg, #2563EB 0%, #1d4ed8 100%);
  --role-badge-bg:      rgba(37, 99, 235, 0.10);
  --role-badge-text:    #2563EB;
  --role-name:          "vendor";
}


/* ── Admin — Super Admin + Admin Staff + Platform Staff ─────────────────────── */
body.role-admin {
  --role-accent:        #e11d48;
  --role-accent-hover:  #be123c;
  --role-accent-soft:   rgba(225, 29, 72, 0.12);
  --role-accent-focus:  rgba(225, 29, 72, 0.30);
  --role-gradient:      linear-gradient(135deg, #e11d48 0%, #9f1239 100%);
  --role-badge-bg:      rgba(225, 29, 72, 0.10);
  --role-badge-text:    #e11d48;
  --role-name:          "admin";
}


/* ── Vendor / Store Owner — Professional SaaS Blue ─────────────────────────── */
body.role-vendor {
  --role-accent:        #2563EB;
  --role-accent-hover:  #1d4ed8;
  --role-accent-soft:   rgba(37, 99, 235, 0.12);
  --role-accent-focus:  rgba(37, 99, 235, 0.30);
  --role-gradient:      linear-gradient(135deg, #2563EB 0%, #1d4ed8 100%);
  --role-badge-bg:      rgba(37, 99, 235, 0.10);
  --role-badge-text:    #2563EB;
  --role-name:          "vendor";
}


/* ── Vendor Staff — operates within vendor context ──────────────────────────── */
/*    Shares vendor blue; lighter tint to visually distinguish staff from owner */
body.role-vendor-staff {
  --role-accent:        #2563EB;
  --role-accent-hover:  #1d4ed8;
  --role-accent-soft:   rgba(37, 99, 235, 0.08);
  --role-accent-focus:  rgba(37, 99, 235, 0.22);
  --role-gradient:      linear-gradient(135deg, #3b82f6 0%, #2563EB 100%);
  --role-badge-bg:      rgba(37, 99, 235, 0.08);
  --role-badge-text:    #3b82f6;
  --role-name:          "vendor-staff";
}


/* ── Marketer / Affiliate ───────────────────────────────────────────────────── */
body.role-marketer {
  --role-accent:        #10b981;
  --role-accent-hover:  #059669;
  --role-accent-soft:   rgba(16, 185, 129, 0.12);
  --role-accent-focus:  rgba(16, 185, 129, 0.30);
  --role-gradient:      linear-gradient(135deg, #10b981 0%, #047857 100%);
  --role-badge-bg:      rgba(16, 185, 129, 0.10);
  --role-badge-text:    #10b981;
  --role-name:          "marketer";
}


/* ═══════════════════════════════════════════════════════════════════════════════
 *  ROLE UTILITY CLASSES
 *  These consume --role-* tokens. Use them anywhere a role-aware style is needed
 *  without hardcoding any color. Safe in dark mode, RTL, and all breakpoints.
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* Role badge chip — compact label showing the user's role */
.role-badge {
  display:         inline-flex;
  align-items:     center;
  gap:             4px;
  padding:         2px 8px;
  border-radius:   var(--radius-full, 9999px);
  background:      var(--role-badge-bg);
  color:           var(--role-badge-text);
  font-size:       0.7rem;
  font-weight:     600;
  letter-spacing:  0.04em;
  text-transform:  uppercase;
  white-space:     nowrap;
}

/* Focus ring using role accent — attach to interactive elements */
.focus-ring-role:focus-visible {
  outline:    2px solid var(--role-accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--role-accent-focus);
}

/* Gradient background using role accent */
.bg-gradient-role {
  background: var(--role-gradient) !important;
  color:      #ffffff !important;
}

/* Solid fill using role accent */
.bg-role {
  background: var(--role-accent) !important;
  color:      #ffffff !important;
}

/* Text colored with role accent */
.text-role {
  color: var(--role-accent) !important;
}

/* Border colored with role accent */
.border-role {
  border-color: var(--role-accent) !important;
}

/* Soft tinted background using role accent */
.bg-role-soft {
  background:  var(--role-accent-soft) !important;
  color:       var(--role-accent) !important;
}

/* Hover utility — role accent on hover (border highlight) */
.hover-border-role:hover {
  border-color: var(--role-accent) !important;
  transition:   border-color var(--duration-fast, 150ms) ease;
}

/* Active sidebar indicator dot */
.role-indicator {
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    var(--role-accent);
  flex-shrink:   0;
}

/* Role-tinted divider line */
.divider-role {
  border: none;
  height: 2px;
  background: var(--role-gradient);
  border-radius: 9999px;
  opacity: 0.6;
}