/* SaloCart V5.1 — English-first Taglish copy + role color system
   Loaded last so it standardizes all earlier UI layers without changing business rules. */

:root {
  --role-primary: #087a57;
  --role-primary-deep: #075b42;
  --role-accent: #7ed957;
  --role-soft: #e8f7ee;
  --role-ink: #102d22;
  --role-muted: #61756b;
  --role-line: #dcece3;
  --role-page: #f6fbf8;
  --role-glow: rgba(8, 122, 87, .16);
  --role-gradient: linear-gradient(135deg, #087a57 0%, #0ba16e 58%, #7ed957 145%);
  --role-contrast: #ffffff;
}

html[data-role-theme="shopper"] {
  --sc-green: #087a57;
  --sc-green-deep: #075b42;
  --sc-lime: #7ed957;
  --sc-mint: #e8f7ee;
  --sc-ink: #102d22;
  --sc-muted: #61756b;
  --sc-line: #dcece3;
  --sc-soft: #f6fbf8;
  --sc-blue: #0479ad;
  --role-primary: #087a57;
  --role-primary-deep: #075b42;
  --role-accent: #7ed957;
  --role-soft: #e8f7ee;
  --role-ink: #102d22;
  --role-muted: #61756b;
  --role-line: #dcece3;
  --role-page: #f6fbf8;
  --role-glow: rgba(8, 122, 87, .16);
  --role-gradient: linear-gradient(135deg, #087a57 0%, #0ba16e 58%, #7ed957 145%);
}

html[data-role-theme="seller"] {
  --sc-green: #b95308;
  --sc-green-deep: #833706;
  --sc-lime: #f6b451;
  --sc-mint: #fff0df;
  --sc-ink: #3c1d09;
  --sc-muted: #7e5a3b;
  --sc-line: #f1ddc4;
  --sc-soft: #fffaf5;
  --sc-blue: #a64b00;
  --role-primary: #b95308;
  --role-primary-deep: #833706;
  --role-accent: #f6b451;
  --role-soft: #fff0df;
  --role-ink: #3c1d09;
  --role-muted: #7e5a3b;
  --role-line: #f1ddc4;
  --role-page: #fffaf5;
  --role-glow: rgba(185, 83, 8, .16);
  --role-gradient: linear-gradient(135deg, #9e4104 0%, #cf6710 56%, #f6b451 145%);
}

html[data-role-theme="partner"] {
  --sc-green: #0878ae;
  --sc-green-deep: #07527a;
  --sc-lime: #4cc8f0;
  --sc-mint: #e7f6fd;
  --sc-ink: #092d45;
  --sc-muted: #587487;
  --sc-line: #d7eaf4;
  --sc-soft: #f5fbfe;
  --sc-blue: #0878ae;
  --role-primary: #0878ae;
  --role-primary-deep: #07527a;
  --role-accent: #4cc8f0;
  --role-soft: #e7f6fd;
  --role-ink: #092d45;
  --role-muted: #587487;
  --role-line: #d7eaf4;
  --role-page: #f5fbfe;
  --role-glow: rgba(8, 120, 174, .16);
  --role-gradient: linear-gradient(135deg, #06628f 0%, #0b93cd 56%, #4cc8f0 145%);
}

html[data-role-theme="admin"] {
  --sc-green: #5c3ac1;
  --sc-green-deep: #3e248d;
  --sc-lime: #a78bfa;
  --sc-mint: #f0ebff;
  --sc-ink: #27194e;
  --sc-muted: #72698b;
  --sc-line: #e4ddf7;
  --sc-soft: #faf8ff;
  --sc-blue: #5c3ac1;
  --role-primary: #5c3ac1;
  --role-primary-deep: #3e248d;
  --role-accent: #a78bfa;
  --role-soft: #f0ebff;
  --role-ink: #27194e;
  --role-muted: #72698b;
  --role-line: #e4ddf7;
  --role-page: #faf8ff;
  --role-glow: rgba(92, 58, 193, .16);
  --role-gradient: linear-gradient(135deg, #4a2fad 0%, #7252de 56%, #a78bfa 145%);
}

html[data-theme="dark"][data-role-theme="shopper"] {
  --sc-soft: #071711;
  --sc-ink: #e7fff1;
  --sc-muted: #a4c6b2;
  --sc-line: #183b2b;
  --sc-mint: #0e2b20;
  --role-page: #071711;
  --role-soft: #0e2b20;
}
html[data-theme="dark"][data-role-theme="seller"] {
  --sc-soft: #1b0f07;
  --sc-ink: #fff0e3;
  --sc-muted: #d5ad87;
  --sc-line: #432815;
  --sc-mint: #311a0c;
  --role-page: #1b0f07;
  --role-soft: #311a0c;
}
html[data-theme="dark"][data-role-theme="partner"] {
  --sc-soft: #06141d;
  --sc-ink: #e4f6ff;
  --sc-muted: #9fc4d7;
  --sc-line: #17384b;
  --sc-mint: #0b2736;
  --role-page: #06141d;
  --role-soft: #0b2736;
}
html[data-theme="dark"][data-role-theme="admin"] {
  --sc-soft: #100b20;
  --sc-ink: #f0ebff;
  --sc-muted: #b8afd2;
  --sc-line: #302653;
  --sc-mint: #21173d;
  --role-page: #100b20;
  --role-soft: #21173d;
}

html[data-role-theme] body {
  background:
    radial-gradient(760px 380px at 100% -180px, var(--role-glow), transparent 68%),
    var(--role-page);
}

html[data-role-theme] .topbar {
  border-bottom-color: var(--role-line);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--role-primary) 8%, transparent);
}
html[data-role-theme] .brand-mark,
html[data-role-theme] .dashboard-banner,
html[data-role-theme] .workspace-hero {
  background: var(--role-gradient);
}
html[data-role-theme] .brand-mark {
  box-shadow: 0 8px 18px var(--role-glow);
}
html[data-role-theme] .brand-copy strong span,
html[data-role-theme] .desktop-nav button:hover,
html[data-role-theme] .desktop-nav button.active,
html[data-role-theme] .icon-button:hover,
html[data-role-theme] .sale-price,
html[data-role-theme] .section-kicker,
html[data-role-theme] .workspace-text-button,
html[data-role-theme] .shopper-link-button,
html[data-role-theme] .app-footer strong {
  color: var(--role-primary);
}
html[data-role-theme] .desktop-nav button:hover,
html[data-role-theme] .desktop-nav button.active,
html[data-role-theme] .icon-button:hover {
  background: var(--role-soft);
}
html[data-role-theme] .filter-chip:hover,
html[data-role-theme] .filter-chip.active,
html[data-role-theme] .btn-sc,
html[data-role-theme] .install-button:hover,
html[data-role-theme] .role-chip {
  background: var(--role-primary);
  border-color: var(--role-primary);
  color: var(--role-contrast);
}
html[data-role-theme] .btn-sc:hover {
  background: var(--role-primary-deep);
}
html[data-role-theme] .btn-sc-alt,
html[data-role-theme] .how-step i,
html[data-role-theme] .progress-line > span,
html[data-role-theme] .deal-next-tier,
html[data-role-theme] .avatar-initial,
html[data-role-theme] .avatar,
html[data-role-theme] .account-avatar,
html[data-role-theme] .shopper-welcome-avatar,
html[data-role-theme] .profile-progress-ring {
  background: var(--role-soft);
  color: var(--role-primary);
}
html[data-role-theme] .progress-line > span,
html[data-role-theme] .avatar-initial,
html[data-role-theme] .avatar,
html[data-role-theme] .account-avatar,
html[data-role-theme] .shopper-welcome-avatar,
html[data-role-theme] .profile-progress-ring {
  background: linear-gradient(135deg, var(--role-primary), var(--role-accent));
  color: #fff;
}
html[data-role-theme] .btn-sc-light,
html[data-role-theme] .install-button,
html[data-role-theme] .info-card,
html[data-role-theme] .stat-card,
html[data-role-theme] .list-card,
html[data-role-theme] .timeline-card,
html[data-role-theme] .deal-card,
html[data-role-theme] .workspace-card,
html[data-role-theme] .workspace-action,
html[data-role-theme] .shopper-section,
html[data-role-theme] .role-panel {
  border-color: var(--role-line);
}
html[data-role-theme] .btn-sc-light:hover {
  background: var(--role-soft);
  color: var(--role-primary);
  border-color: color-mix(in srgb, var(--role-primary) 42%, var(--role-line));
}

/* Stable account identity: visible on desktop, compact on phones. */
.role-chip {
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:24px;
  padding:4px 8px;
  border-radius:999px;
  font-size:.63rem;
  font-weight:850;
  letter-spacing:.01em;
  white-space:nowrap;
  box-shadow:0 4px 10px var(--role-glow);
}
.role-chip i { font-size:.72rem; }
.role-chip--guest {
  background:#edf4ef;
  border:1px solid #dce9df;
  color:#466054;
  box-shadow:none;
}
html[data-theme="dark"] .role-chip--guest { background:#183025; border-color:#274b37; color:#c6ddcd; }

/* One coherent treatment for workspaces. The role accent follows the logged-in account. */
html[data-role-theme] .workspace-hero,
html[data-role-theme] .shopper-welcome-bar,
html[data-role-theme] .production-readiness-hero {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border:1px solid color-mix(in srgb, var(--role-primary) 54%, transparent);
  box-shadow:0 16px 34px var(--role-glow);
}
html[data-role-theme] .workspace-hero::after,
html[data-role-theme] .shopper-welcome-bar::after,
html[data-role-theme] .production-readiness-hero::after {
  content:"";
  position:absolute;
  z-index:-1;
  width:220px;
  height:220px;
  right:-78px;
  top:-118px;
  border:34px solid rgba(255,255,255,.16);
  border-radius:50%;
  pointer-events:none;
}
html[data-role-theme] .workspace-hero .section-kicker,
html[data-role-theme] .shopper-welcome-bar .section-kicker,
html[data-role-theme] .production-readiness-hero .section-kicker { color:rgba(255,255,255,.78); }

/* Correct older hard-coded dashboard accents and cards. */
html[data-role-theme] .workspace-stat > i,
html[data-role-theme] .workspace-action > span,
html[data-role-theme] .workspace-empty-state > i,
html[data-role-theme] .empty-state > i,
html[data-role-theme] .profile-card-header > i,
html[data-role-theme] .info-card > i,
html[data-role-theme] .shopper-command-item.active > span,
html[data-role-theme] .shopper-command-item:hover > span {
  color:var(--role-primary);
  background:var(--role-soft);
}
html[data-role-theme] .workspace-action:hover,
html[data-role-theme] .shopper-command-item.active,
html[data-role-theme] .shopper-command-item:hover {
  border-color:color-mix(in srgb, var(--role-primary) 45%, var(--role-line));
  box-shadow:0 10px 22px var(--role-glow);
}
html[data-role-theme] .status-pill,
html[data-role-theme] .role-status-pill {
  border-color:color-mix(in srgb, var(--role-primary) 26%, var(--role-line));
}

/* Checkout, modals and mobile navigation share the current account color. */
html[data-role-theme] .modal-sheet .sheet-head,
html[data-role-theme] .checkout-reserve-header,
html[data-role-theme] .shopper-checkout-hero {
  border-color:var(--role-line);
}
html[data-role-theme] .checkout-step-card.is-active,
html[data-role-theme] .checkout-step-card.active,
html[data-role-theme] .shopper-checkout-step.is-active {
  border-color:var(--role-primary);
  box-shadow:0 10px 24px var(--role-glow);
}
html[data-role-theme] .mobile-nav .nav-item.active,
html[data-role-theme] .mobile-nav .nav-item:hover { color:var(--role-primary); }
html[data-role-theme] .mobile-nav .nav-primary { background:var(--role-primary); }
html[data-role-theme] .mobile-nav .nav-primary::after { box-shadow:0 8px 18px var(--role-glow); }

/* Desktop visual consistency and safer long text. */
html[data-role-theme] .workspace-card,
html[data-role-theme] .workspace-action,
html[data-role-theme] .shopper-section,
html[data-role-theme] .order-card,
html[data-role-theme] .profile-card,
html[data-role-theme] .table-card,
html[data-role-theme] .cart-summary,
html[data-role-theme] .cart-line {
  box-shadow:0 8px 22px color-mix(in srgb, var(--role-primary) 5%, transparent);
}
html[data-role-theme] .workspace-card:hover,
html[data-role-theme] .workspace-action:hover,
html[data-role-theme] .deal-card:hover {
  box-shadow:0 14px 30px var(--role-glow);
}
html[data-role-theme] .workspace-card h1,
html[data-role-theme] .workspace-card h2,
html[data-role-theme] .workspace-card h3,
html[data-role-theme] .shopper-section h2,
html[data-role-theme] .deal-title { color:var(--role-ink); }

/* Stable Taglish headline rhythm. */
html[data-role-theme] .section-kicker {
  letter-spacing:.085em;
  font-weight:850;
}
html[data-role-theme] .workspace-hero h1,
html[data-role-theme] .shopper-welcome-bar h1,
html[data-role-theme] .dashboard-banner h1 {
  text-wrap:balance;
}

@media (max-width: 991.98px) {
  html[data-role-theme] .topbar { background:color-mix(in srgb, var(--role-page) 92%, transparent); }
  html[data-role-theme] .workspace-hero,
  html[data-role-theme] .shopper-welcome-bar { border-radius:22px; }
  .role-chip { display:none; }
}

@media (max-width: 575.98px) {
  html[data-role-theme] body { background:var(--role-page); }
  html[data-role-theme] .workspace-hero,
  html[data-role-theme] .shopper-welcome-bar,
  html[data-role-theme] .dashboard-banner { border-radius:18px; }
  html[data-role-theme] .workspace-hero::after,
  html[data-role-theme] .shopper-welcome-bar::after { width:150px; height:150px; right:-70px; top:-86px; border-width:22px; }
  html[data-role-theme] .btn-sc,
  html[data-role-theme] .btn-sc-light,
  html[data-role-theme] .btn-sc-alt { min-height:44px; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-role-theme] .workspace-card,
  html[data-role-theme] .workspace-action,
  html[data-role-theme] .deal-card,
  html[data-role-theme] .btn-sc { transition:none!important; }
}