/* SLABSNGRABSACO shared control system: Admin web, installed Admin, customer website/app.
   Loaded LAST to override legacy inline/early stylesheet button and select rules. */
:root {
  --sng-button-violet:#7347e5;
  --sng-button-blue:#267fdc;
  --sng-button-cyan:#08acda;
  --sng-button-teal:#08b89d;
}
body.admin-page #dashboard button:not(:is(.danger,.delete-button,.managed-delete-button,.admin-cancel-button,.remove-button,.destructive,[class*="delete" i],[class*="remove" i],[id*="delete" i],[data-action*="delete" i],#logout)),
body.admin-page .admin-login-card button:not(:is(.danger,.destructive)),
body.admin-page #dashboard :is(.admin-head-actions a,.admin-edit-button,.admin-save-button,.load-retailer-profiles),
body:not(.admin-page) :is(.account-card button,button.account-action-button,a.account-action-button,button.primary,button.secondary,a.primary,a.secondary,button.profile-support-button,a.profile-support-button),
#workspace :is(button,a.action,.item a,.panel a) {
  box-sizing:border-box;
  min-height:46px;
  max-width:100%;
  border-radius:14px;
  border:1px solid rgba(116,219,255,.78);
  background:linear-gradient(118deg,#6744c7 0%,#216da9 57%,#098f9e 100%);
  color:#fff;
  box-shadow:0 8px 19px rgba(50,90,184,.25),inset 0 1px 0 rgba(255,255,255,.19);
  font-weight:800;
  line-height:1.35;
  padding:11px 15px;
  overflow-wrap:anywhere;
  white-space:normal;
  text-align:center;
  transition:transform .16s,box-shadow .16s,filter .16s,border-color .16s;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
/* Different accent families make a grid of actions look intentional rather than
   seven identical grey rectangles. State beats nth-child coloring. */
body.admin-page #dashboard button:not(:is(.danger,.delete-button,.managed-delete-button,.admin-cancel-button,.destructive)):nth-of-type(3n+2),
#workspace .links :is(button,a):nth-child(3n+2),
body:not(.admin-page) .account-card button:nth-of-type(3n+2) {
  background:linear-gradient(116deg,#1766b7,#099abf 68%,#0b9f91);
}
body.admin-page #dashboard button:not(:is(.danger,.delete-button,.managed-delete-button,.admin-cancel-button,.destructive)):nth-of-type(3n),
#workspace .links :is(button,a):nth-child(3n) {
  background:linear-gradient(116deg,#6643cd,#6e5bdc 53%,#087eb2);
}
body.admin-page #dashboard :is(button,[role="button"]):not(:disabled):active,
body:not(.admin-page) :is(button,[role="button"]):not(:disabled):active,
#workspace :is(button,.action):not(:disabled):active {transform:translateY(1px) scale(.986);}
body.admin-page #dashboard :is(button,a):not(:disabled):hover,
body:not(.admin-page) :is(button,a):not(:disabled):hover,
#workspace :is(button,a):not(:disabled):hover {
  filter:brightness(1.075);
}
body.admin-page #dashboard :is(button,a):focus-visible,
body.admin-page #dashboard select:focus-visible,
body:not(.admin-page) :is(button,select,summary):focus-visible,
#workspace :is(button,a,select,summary):focus-visible {
  outline:3px solid #65ecff;
  outline-offset:3px;
}
body.admin-page #dashboard button:disabled,
#workspace button:disabled,
body:not(.admin-page) button:disabled {opacity:.52;filter:saturate(.62);cursor:not-allowed;}
/* Real native selects are intentionally retained for accessibility / iOS;
   their CLOSED surfaces receive the design treatment, with a visible arrow. */
body.admin-page #dashboard select,
body.admin-page .admin-login-card select,
body:not(.admin-page) :is(select,.account-card select,#my-profile select),
#workspace select {
  box-sizing:border-box;
  display:block;
  min-width:0;
  max-width:100%;
  min-height:49px;
  border:1px solid #70a3df;
  border-radius:14px;
  color:#f7fcff;
  background-color:#1b3157;
  background-image:linear-gradient(45deg,transparent 50%,#78eeff 50%),
    linear-gradient(135deg,#78eeff 50%,transparent 50%),
    linear-gradient(115deg,rgba(112,75,219,.3),rgba(18,141,192,.2));
  background-position:calc(100% - 22px) 51%,calc(100% - 16px) 51%,center;
  background-size:6px 6px,6px 6px,100% 100%;
  background-repeat:no-repeat;
  padding:10px 43px 10px 14px;
  font-size:16px;
  font-weight:750;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 5px 15px rgba(43,83,156,.14);
  appearance:none;-webkit-appearance:none;
}
body.admin-page #dashboard select option,
body:not(.admin-page) select option,
#workspace select option {background:#162540;color:#f5f9ff;}
/* Strong, unmistakable inactive AND selected period buttons. */
#workspace .admin-spend-ranges button,
#workspace .success-user-period button,
.app-dashboard .sng-range button,
.app-dashboard .sng-status-filters button,
.app-dashboard .sng-profile-menu button {
  min-width:0;min-height:46px;
  border-radius:13px;
  border:1px solid #7b8fd9;
  background:linear-gradient(120deg,#523c9a,#1b608f);
  color:#f5f8ff;
  padding:10px 5px;
  font-size:12px;
  font-weight:900;
  line-height:1.25;
  box-shadow:0 6px 13px rgba(28,56,124,.24);
}
#workspace .admin-spend-ranges button[aria-pressed="true"],
#workspace .success-user-period button[aria-pressed="true"],
.app-dashboard .sng-range button[aria-pressed="true"],
.app-dashboard .sng-status-filters button[aria-pressed="true"],
.app-dashboard .sng-profile-menu button[aria-pressed="true"] {
  color:#fff;
  background:linear-gradient(118deg,#9351fd,#268ff0 64%,#0dcbb0);
  border-color:#b1f6ff;
  box-shadow:0 0 0 2px rgba(105,225,255,.18),0 9px 19px rgba(75,96,213,.33);
}
#workspace .admin-spend-ranges,
#workspace .success-user-period,
.app-dashboard .sng-range {
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;max-width:100%;overflow:visible;
}
#workspace .admin-spend-ranges button,#workspace .success-user-period button {width:100%;}
#workspace .success-overview-accordion>summary,
#workspace .success-customer-summary,
body.admin-page #dashboard :is(details>summary,.admin-pool-disclosure>summary),
body:not(.admin-page) :is(.account-card details>summary,#my-profile details>summary) {
  min-height:51px;max-width:100%;
  border:1px solid rgba(116,166,238,.48);
  border-radius:15px;
  color:#e9f7ff;
  background:linear-gradient(117deg,rgba(100,64,200,.28),rgba(20,131,171,.22));
  box-shadow:inset 0 1px rgba(255,255,255,.08);
  overflow-wrap:anywhere;
  cursor:pointer;
}
#workspace .success-overview-accordion>summary,
#workspace .success-customer-summary {padding:15px 16px;}
#workspace .success-overview-accordion[open]>summary,
#workspace .success-user-accordion[open]>.success-customer-summary,
body.admin-page #dashboard details[open]>summary {
  border-color:#7fe8f4;
  background:linear-gradient(116deg,rgba(113,68,225,.38),rgba(7,158,187,.29));
}
#workspace .success-filter-label {
  border:1px solid #617dce;
  border-radius:16px;
  background:linear-gradient(118deg,rgba(91,57,183,.32),rgba(12,131,169,.26));
  padding:13px;
}
#workspace .success-filter-label select {margin-top:8px;}
/* Phone layout: never allow controls or customer detail cards to break the viewport. */
#workspace,#workspace .panel,#workspace .item,#workspace .success-overview-accordion,
#workspace .success-customer-body,#workspace .success-account-row,
.app-dashboard .sng-product-row,.app-dashboard .sng-order-card,
body.admin-page #dashboard,body.admin-page #dashboard .admin-feature-panel {
  min-width:0;max-width:100%;
}
#workspace .success-customer-summary {gap:7px;flex-wrap:wrap;}
body.admin-page #dashboard :is(button,select,summary),
#workspace :is(button,select,summary),
.app-dashboard :is(button,select,summary) {touch-action:manipulation;}
html[data-admin-mobile-theme="light"] #workspace select,
body.admin-page[data-admin-theme="light"] #dashboard select,
.app-dashboard[data-app-theme="day"] select {
  color:#1c3156;
  background-color:#eff6ff;
  border-color:#a6a7df;
  background-image:linear-gradient(45deg,transparent 50%,#5b4dcd 50%),
    linear-gradient(135deg,#5b4dcd 50%,transparent 50%),
    linear-gradient(115deg,#f0ebff,#e8faff);
}
html[data-admin-mobile-theme="light"] #workspace :is(.success-overview-accordion>summary,.success-customer-summary),
body.admin-page[data-admin-theme="light"] #dashboard details>summary,
.app-dashboard[data-app-theme="day"] :is(.account-card details>summary) {
  color:#273c70;
  border-color:#bec7ed;
  background:linear-gradient(115deg,#eee9ff,#e5f8ff);
}
html[data-admin-mobile-theme="light"] #workspace :is(.admin-spend-ranges button,.success-user-period button),
.app-dashboard[data-app-theme="day"] .sng-range button {
  color:#493d90;background:linear-gradient(118deg,#eee8ff,#dff4ff);
  border-color:#c3bff1;
}
html[data-admin-mobile-theme="light"] #workspace :is(.admin-spend-ranges button,.success-user-period button)[aria-pressed="true"],
.app-dashboard[data-app-theme="day"] .sng-range button[aria-pressed="true"] {
  color:#fff;background:linear-gradient(110deg,#8851f5,#2787e6 70%,#0cbbb4);
  border-color:#88dff5;
}
html[data-admin-mobile-theme="light"] #workspace .success-filter-label {
  color:#365884;border-color:#c1c8eb;
  background:linear-gradient(115deg,#f1eaff,#e2f6ff);
}
@media(max-width:375px){
  #workspace .admin-spend-ranges,#workspace .success-user-period,
  .app-dashboard .sng-range {gap:5px;}
  #workspace .admin-spend-ranges button,#workspace .success-user-period button,
  .app-dashboard .sng-range button {font-size:11px;padding-inline:3px;}
  #workspace .success-customer-summary {font-size:12px;}
}
@media(prefers-reduced-motion:reduce){
  body.admin-page button,body:not(.admin-page) button,
  #workspace button,#workspace summary {transition:none!important;}
}

/* Installed Admin bottom tabs are controls too: accent the entire active tab. */
#tabs{gap:3px;padding-inline:6px;}
#tabs button{
  min-width:0;min-height:54px;padding:8px 2px;
  border:1px solid rgba(104,151,222,.34);border-radius:12px;
  background:linear-gradient(180deg,rgba(65,63,121,.2),rgba(24,84,121,.16));
  color:#b6cbe7;box-shadow:inset 0 1px rgba(255,255,255,.06);
  font-weight:800;
}
#tabs button.active,#tabs button[aria-current="page"]{
  background:linear-gradient(140deg,#774ce5,#168cce 71%,#0cb89c);
  color:#fff;border-color:#8deaff;
  box-shadow:0 5px 15px rgba(38,112,193,.28);
}
#tabs button span{font-size:9px;line-height:1.25;}
html[data-admin-mobile-theme="light"] #tabs button{background:linear-gradient(135deg,#f0eaff,#e6f7ff);color:#4c5697;border-color:#c7cbeb;}
html[data-admin-mobile-theme="light"] #tabs button.active{background:linear-gradient(135deg,#7850e5,#228bcb);color:white;border-color:#8dddf8;}
/* Customer profile and account settings often use unclassified utility buttons.
   Cover them without recoloring destructive/remove controls. */
body:not(.admin-page) #my-profile button:not(:is(.danger,.delete-button,.remove-button,.destructive,[class*="delete" i],[class*="remove" i],[id*="delete" i])),
body:not(.admin-page) #home .public-success-controls button:not(:disabled),
body:not(.admin-page) #customer-dashboard button:not(:is(.danger,.delete-button,.remove-button,.destructive,[class*="delete" i],[class*="remove" i])) {
  min-height:44px;max-width:100%;
  border-radius:13px;border:1px solid rgba(98,201,241,.68);
  color:#f6fcff;background:linear-gradient(115deg,#6545bb,#246eaa 60%,#0b9d9e);
  box-shadow:0 6px 16px rgba(45,81,180,.2);
  font-weight:800;line-height:1.35;white-space:normal;
}
body:not(.admin-page) #my-profile button[aria-pressed="true"],
body:not(.admin-page) #customer-dashboard button[aria-pressed="true"],
.app-dashboard .sng-app-nav button.active{
  background:linear-gradient(115deg,#8f4ef4,#228bd4 70%,#12c4aa);
  color:white;border-color:#96eaff;
}
.app-dashboard[data-app-theme="day"] #my-profile button:not(:is(.danger,.delete-button,.remove-button,.destructive)),
.app-dashboard[data-app-theme="day"] #customer-dashboard button:not(:is(.danger,.delete-button,.remove-button,.destructive)){
  color:#fff;background:linear-gradient(115deg,#7245cc,#167db5);
}
.app-dashboard[data-app-theme="day"] .sng-app-nav button.active{
  color:#fff;background:linear-gradient(115deg,#8452ed,#128cca);border-color:#a5e2ff;
}

/* Admin's legacy light-mode sheet uses !important on every select, so the
   premium skin must explicitly override it instead of silently going plain. */
body.admin-page[data-admin-theme="light"] #dashboard select {
  background-color:#edf5ff!important;
  background-image:linear-gradient(45deg,transparent 50%,#654fc9 50%),
    linear-gradient(135deg,#654fc9 50%,transparent 50%),
    linear-gradient(115deg,#f1ebff,#e6f9ff)!important;
  background-position:calc(100% - 22px) 51%,calc(100% - 16px) 51%,center!important;
  background-size:6px 6px,6px 6px,100% 100%!important;
  background-repeat:no-repeat!important;
  border-color:#9db6df!important;
  color:#233658!important;
}


/* 2026-10-10: date-range and shipping-status controls are filled ONLY when
   selected. Previous color-by-position and generic primary-button styles
   made every choice appear active at once. */
#workspace .admin-spend-ranges button[aria-pressed="false"],
#workspace .success-user-period button[aria-pressed="false"],
body.admin-page #dashboard .periods button[aria-pressed="false"],
body.admin-page #dashboard .user-periods button[aria-pressed="false"],
body.app-dashboard #my-profile #app-dashboard .sng-range button[aria-pressed="false"],
body.app-dashboard #my-profile #app-dashboard .sng-status-filters button[aria-pressed="false"],
body.app-dashboard #my-profile #app-dashboard .sng-profile-menu button[aria-pressed="false"] {
  background:#17243a!important;
  background-image:none!important;
  color:#b5cbe5!important;
  border:1px solid #55729c!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045)!important;
  filter:none!important;
}
#workspace .admin-spend-ranges button[aria-pressed="true"],
#workspace .success-user-period button[aria-pressed="true"],
body.admin-page #dashboard .periods button[aria-pressed="true"],
body.admin-page #dashboard .user-periods button[aria-pressed="true"],
body.app-dashboard #my-profile #app-dashboard .sng-range button[aria-pressed="true"],
body.app-dashboard #my-profile #app-dashboard .sng-status-filters button[aria-pressed="true"],
body.app-dashboard #my-profile #app-dashboard .sng-profile-menu button[aria-pressed="true"] {
  background:linear-gradient(115deg,#9656fc,#278fed 64%,#04bba9)!important;
  background-image:linear-gradient(115deg,#9656fc,#278fed 64%,#04bba9)!important;
  color:#fff!important;
  border:2px solid #9dedff!important;
  box-shadow:0 0 0 2px rgba(95,216,251,.14),0 8px 20px rgba(72,101,236,.32)!important;
  filter:none!important;
}
body.app-dashboard #my-profile #app-dashboard .sng-status-filters button[aria-pressed="false"] span{
  color:#9ebdd6;opacity:1;
}
body.app-dashboard #my-profile #app-dashboard .sng-status-filters button[aria-pressed="true"] span{
  color:#fff;opacity:1;
}
html[data-admin-mobile-theme="light"] #workspace .admin-spend-ranges button[aria-pressed="false"],
html[data-admin-mobile-theme="light"] #workspace .success-user-period button[aria-pressed="false"],
body.admin-page[data-admin-theme="light"] #dashboard .periods button[aria-pressed="false"],
body.admin-page[data-admin-theme="light"] #dashboard .user-periods button[aria-pressed="false"],
body.app-dashboard[data-app-theme="day"] #my-profile #app-dashboard .sng-range button[aria-pressed="false"],
body.app-dashboard[data-app-theme="day"] #my-profile #app-dashboard .sng-status-filters button[aria-pressed="false"],
body.app-dashboard[data-app-theme="day"] #my-profile #app-dashboard .sng-profile-menu button[aria-pressed="false"] {
  background:#eff4ff!important;background-image:none!important;
  color:#344b71!important;border-color:#b4c7e4!important;
}

/* User-picked Option B: status color wraps ALL FOUR sides of recent orders,
   tracking packages, and order-history cards, with an unobtrusive glow. */
body.app-dashboard #my-profile #app-dashboard .sng-order-card {
  border:2px solid var(--sng-status-outline,#50cef7)!important;
  border-radius:20px;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--sng-status-outline,#50cef7) 16%,transparent),
             0 0 18px color-mix(in srgb,var(--sng-status-outline,#50cef7) 18%,transparent);
}
body.app-dashboard #my-profile #app-dashboard .sng-order-card.stage-ordered {--sng-status-outline:#ffd33b}
body.app-dashboard #my-profile #app-dashboard .sng-order-card.stage-shipped {--sng-status-outline:#c279ff}
body.app-dashboard #my-profile #app-dashboard .sng-order-card.stage-in_transit {--sng-status-outline:#37ddff}
body.app-dashboard #my-profile #app-dashboard .sng-order-card.stage-out_for_delivery {--sng-status-outline:#ff983f}
body.app-dashboard #my-profile #app-dashboard .sng-order-card.stage-delivered {--sng-status-outline:#29e8aa}
body.app-dashboard #my-profile #app-dashboard .sng-order-card.stage-review_hold {--sng-status-outline:#ffc366}
body.app-dashboard #my-profile #app-dashboard .sng-order-card.stage-cancelled {--sng-status-outline:#ff638a}
body.app-dashboard #my-profile #app-dashboard .sng-order-card[open] {
  box-shadow:0 0 0 1px var(--sng-status-outline,#50cef7),
             0 0 23px color-mix(in srgb,var(--sng-status-outline,#50cef7) 27%,transparent);
}
body.app-dashboard[data-app-theme="day"] #my-profile #app-dashboard .sng-order-card {
  box-shadow:0 3px 15px color-mix(in srgb,var(--sng-status-outline,#50cef7) 19%,transparent);
}

/* Admin order receipts also receive a vivid full-perimeter border. */
#workspace .success-order-card,
body.admin-page #dashboard .receipt-order {
  border:2px solid transparent;
  border-radius:16px;
  background:linear-gradient(#13233b,#102138) padding-box,
             linear-gradient(120deg,#ad6fff,#34d2fa 61%,#36e7b9) border-box;
  box-shadow:0 5px 20px rgba(48,140,235,.13);
  overflow:hidden;
}
#workspace .success-order-card>summary,
body.admin-page #dashboard .receipt-order>summary {
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 14px;cursor:pointer;list-style:none;min-height:62px;
  color:#f1faff;
}
#workspace .success-order-card>summary::-webkit-details-marker,
body.admin-page #dashboard .receipt-order>summary::-webkit-details-marker {display:none}
#workspace .success-order-card>summary .success-order-title,
body.admin-page #dashboard .receipt-order>summary .receipt-order-title {
  display:grid;gap:5px;min-width:0;flex:1;
}
#workspace .success-order-card>summary small,
body.admin-page #dashboard .receipt-order>summary small {
  color:#afc6e5;font-size:11px;line-height:1.35;font-weight:600;
}
#workspace .success-order-card .success-order-total,
body.admin-page #dashboard .receipt-order .receipt-order-total {
  color:#78e8f9;text-align:right;font-size:15px;font-weight:900;white-space:nowrap;
}
#workspace .success-order-card .success-order-total small,
body.admin-page #dashboard .receipt-order .receipt-order-total small {
  display:block;white-space:normal;max-width:120px;
}
#workspace .success-order-items,
body.admin-page #dashboard .receipt-order-items {
  display:grid;gap:0;padding:2px 12px 12px;
}
#workspace .success-order-item,
body.admin-page #dashboard .receipt-order-item {
  display:flex;align-items:center;gap:11px;min-width:0;
  padding:11px 4px;border-top:1px solid rgba(110,161,208,.25);
  color:#eef5ff;font-size:12px;
}
#workspace .success-order-item img,
body.admin-page #dashboard .receipt-order-item img {
  width:43px;height:43px;object-fit:contain;background:#fff;border-radius:9px;
  padding:3px;flex-shrink:0;
}
#workspace .success-order-item strong,
body.admin-page #dashboard .receipt-order-item strong {flex:1;min-width:0;overflow-wrap:anywhere;font-weight:750}
#workspace .success-order-item .success-qty,
body.admin-page #dashboard .receipt-order-item .receipt-qty {
  color:#71eaff;font-size:13px;font-weight:900;flex-shrink:0;
}
#workspace .success-order-card + .success-order-card,
body.admin-page #dashboard .receipt-order + .receipt-order {margin-top:10px}
#workspace .success-order-warning,
body.admin-page #dashboard .receipt-order-warning {color:#ffcf8a!important}
#workspace .success-order-list {display:grid;gap:10px}
body.admin-page #dashboard .receipt-order-list {display:grid;gap:10px}
html[data-admin-mobile-theme="light"] #workspace .success-order-card,
body.admin-page[data-admin-theme="light"] #dashboard .receipt-order{
  background:linear-gradient(#fcfdff,#f4f8ff) padding-box,
             linear-gradient(120deg,#8446e7,#12a6d1 64%,#16ad8b) border-box;
}
html[data-admin-mobile-theme="light"] #workspace .success-order-card>summary,
body.admin-page[data-admin-theme="light"] #dashboard .receipt-order>summary,
html[data-admin-mobile-theme="light"] #workspace .success-order-item,
body.admin-page[data-admin-theme="light"] #dashboard .receipt-order-item {color:#1e3552}
html[data-admin-mobile-theme="light"] #workspace .success-order-card>summary small,
body.admin-page[data-admin-theme="light"] #dashboard .receipt-order>summary small {color:#506583}