/*
 * ShopyCart UI theme
 * ------------------------------------------------------------------
 * A flat, calm theme layered over Bootstrap 5.3.
 * Palette, typography and control styling follow Flat UI by Designmodo
 * (https://github.com/designmodo/Flat-UI, MIT licence), ported to Bootstrap 5
 * markup so existing pages pick it up without template changes.
 *
 * Structure
 *   1. Design tokens (--ig-*)        shared by every page
 *   2. Bootstrap re-skin             cards, buttons, forms, tables, badges...
 *   3. App shell                     navbar, page header, messages, footer
 *   4. Guided components (.ig ...)  panel, steps, pills, btn-ig, callouts
 */

/* 1. Design tokens ------------------------------------------------ */
:root {
  /* Flat UI colours */
  --fu-turquoise: #1abc9c;
  --fu-green-sea: #16a085;
  --fu-emerald: #2ecc71;
  --fu-nephritis: #27ae60;
  --fu-peter-river: #3498db;
  --fu-belize-hole: #2980b9;
  --fu-amethyst: #9b59b6;
  --fu-wet-asphalt: #34495e;
  --fu-midnight-blue: #2c3e50;
  --fu-sun-flower: #f1c40f;
  --fu-carrot: #e67e22;
  --fu-pumpkin: #d35400;
  --fu-alizarin: #e74c3c;
  --fu-pomegranate: #c0392b;
  --fu-clouds: #ecf0f1;
  --fu-silver: #bdc3c7;
  --fu-concrete: #95a5a6;
  --fu-asbestos: #7f8c8d;

  /* Semantic tokens (names kept from the integrations page) */
  --ig-bg: #f0f3f4;
  --ig-surface: #ffffff;
  --ig-border: #dfe6e9;
  --ig-border-strong: #c8d1d6;
  --ig-text: #2c3e50;
  --ig-muted: #6b7c86;
  --ig-accent: #16a085;          /* green sea: primary actions */
  --ig-accent-hover: #128a72;
  --ig-accent-soft: #e6f6f2;
  --ig-accent-text: #0f7a65;
  --ig-ok: #1e8449;
  --ig-ok-soft: #e8f6ee;
  --ig-warn: #b4540a;
  --ig-warn-soft: #fdf1e5;
  --ig-warn-border: #f3d3b3;
  --ig-danger: #b03a2e;
  --ig-danger-soft: #fdecea;
  --ig-info: #21618c;
  --ig-info-soft: #eaf3fb;
  --ig-violet: #7d3c98;
  --ig-violet-soft: #f4ecf8;
  --ig-todo: #98a2b3;
  --ig-todo-soft: #eef1f3;
  --ig-nav: #34495e;             /* wet asphalt */
  --ig-nav-dark: #2c3e50;
  --ig-radius: 12px;
  --ig-radius-sm: 8px;
  --ig-font: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Bootstrap root variables */
  --bs-body-bg: #ffffff;          /* controls, tables, modals stay white */
  --bs-body-color: var(--ig-text);
  --bs-body-font-family: var(--ig-font);
  --bs-body-font-size: 0.95rem;
  --bs-border-color: var(--ig-border);
  --bs-border-radius: var(--ig-radius-sm);
  --bs-border-radius-lg: var(--ig-radius);
  --bs-link-color: var(--ig-accent-text);
  --bs-link-color-rgb: 15, 122, 101;
  --bs-link-hover-color: var(--ig-accent-hover);
  --bs-link-hover-color-rgb: 18, 138, 114;
  --bs-primary: var(--ig-accent);
  --bs-primary-rgb: 22, 160, 133;
  --bs-secondary-color: var(--ig-muted);
  --bs-emphasis-color: var(--ig-text);
  --bs-heading-color: var(--ig-text);
}

/* 2. Bootstrap re-skin ------------------------------------------- */
body {
  background: var(--ig-bg);
  color: var(--ig-text);
  font-family: var(--ig-font);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 700; color: var(--ig-text); }
.text-muted, .text-secondary { color: var(--ig-muted) !important; }
a { text-underline-offset: 2px; }
code { color: var(--fu-pumpkin); }

/* Cards: white, 1px border, 12px radius, no heavy shadows */
.card {
  --bs-card-border-color: var(--ig-border);
  --bs-card-border-radius: var(--ig-radius);
  --bs-card-inner-border-radius: calc(var(--ig-radius) - 1px);
  --bs-card-cap-bg: var(--ig-surface);
  --bs-card-bg: var(--ig-surface);
  border: 1px solid var(--ig-border) !important;
  box-shadow: none !important;
}
.card-header {
  font-weight: 700;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--ig-border);
}
.card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6 { font-size: 1rem; }
.card-footer { background: #fafbfc; border-top: 1px solid var(--ig-border); }

/* Coloured card headers / solid cards become soft tints with dark text */
.card-header.bg-primary, .card.bg-primary { background: var(--ig-accent-soft) !important; }
.card-header.bg-success, .card.bg-success { background: var(--ig-ok-soft) !important; }
.card-header.bg-warning, .card.bg-warning { background: var(--ig-warn-soft) !important; }
.card-header.bg-danger,  .card.bg-danger  { background: var(--ig-danger-soft) !important; }
.card-header.bg-info,    .card.bg-info    { background: var(--ig-info-soft) !important; }
.card-header.bg-secondary, .card.bg-secondary,
.card-header.bg-dark, .card.bg-dark,
.card-header.bg-light, .card-header.bg-white { background: #f6f8f9 !important; }
.card-header[class*="bg-"], .card-header[class*="bg-"] :is(h1, h2, h3, h4, h5, h6, p, small, strong, label),
.card.text-white, .card.text-white .card-title, .card.text-white .card-text,
.card.text-white h1, .card.text-white h2, .card.text-white h3, .card.text-white h4,
.card.text-white h5, .card.text-white h6, .card.text-white p, .card.text-white small,
.card-header.text-white { color: var(--ig-text) !important; }
.card-header.bg-primary > i, .card-header.bg-primary :is(h1,h2,h3,h4,h5,h6) i, .card.bg-primary .card-body i { color: var(--ig-accent) !important; }
.card-header.bg-success i, .card.bg-success i { color: var(--ig-ok) !important; }
.card-header.bg-warning i, .card.bg-warning i { color: var(--ig-warn) !important; }
.card-header.bg-danger i,  .card.bg-danger i  { color: var(--ig-danger) !important; }
.card-header.bg-info i,    .card.bg-info i    { color: var(--ig-info) !important; }
.card-header .btn i { color: inherit !important; }

/* Buttons: flat, borderless, Flat UI palette */
.btn {
  --bs-btn-font-weight: 700;
  --bs-btn-border-radius: var(--ig-radius-sm);
  --bs-btn-focus-box-shadow: 0 0 0 3px rgba(22, 160, 133, .25);
  --bs-btn-padding-x: 0.95rem;
  letter-spacing: .01em;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn-sm { --bs-btn-border-radius: 6px; --bs-btn-padding-x: .7rem; }
.btn i + *, .btn .fa + *, .btn .fas, .btn .fab, .btn .far { line-height: inherit; }
.btn-primary {
  --bs-btn-bg: var(--ig-accent); --bs-btn-border-color: var(--ig-accent);
  --bs-btn-hover-bg: var(--ig-accent-hover); --bs-btn-hover-border-color: var(--ig-accent-hover);
  --bs-btn-active-bg: #0f7a65; --bs-btn-active-border-color: #0f7a65;
  --bs-btn-disabled-bg: #8fd3c5; --bs-btn-disabled-border-color: #8fd3c5;
}
.btn-success {
  --bs-btn-bg: var(--fu-nephritis); --bs-btn-border-color: var(--fu-nephritis);
  --bs-btn-hover-bg: #229954; --bs-btn-hover-border-color: #229954;
  --bs-btn-active-bg: #1e8449; --bs-btn-active-border-color: #1e8449;
}
.btn-info {
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
  --bs-btn-bg: var(--fu-belize-hole); --bs-btn-border-color: var(--fu-belize-hole);
  --bs-btn-hover-bg: #2471a3; --bs-btn-hover-border-color: #2471a3;
  --bs-btn-active-bg: #21618c; --bs-btn-active-border-color: #21618c;
}
.btn-warning {
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
  --bs-btn-bg: var(--fu-carrot); --bs-btn-border-color: var(--fu-carrot);
  --bs-btn-hover-bg: #ca6f1e; --bs-btn-hover-border-color: #ca6f1e;
  --bs-btn-active-bg: var(--fu-pumpkin); --bs-btn-active-border-color: var(--fu-pumpkin);
}
.btn-danger {
  --bs-btn-bg: var(--fu-alizarin); --bs-btn-border-color: var(--fu-alizarin);
  --bs-btn-hover-bg: var(--fu-pomegranate); --bs-btn-hover-border-color: var(--fu-pomegranate);
  --bs-btn-active-bg: #a93226; --bs-btn-active-border-color: #a93226;
}
.btn-secondary, .btn-dark {
  --bs-btn-bg: var(--fu-wet-asphalt); --bs-btn-border-color: var(--fu-wet-asphalt);
  --bs-btn-hover-bg: var(--fu-midnight-blue); --bs-btn-hover-border-color: var(--fu-midnight-blue);
  --bs-btn-active-bg: #212f3d; --bs-btn-active-border-color: #212f3d;
}
.btn-light {
  --bs-btn-bg: var(--ig-surface); --bs-btn-border-color: var(--ig-border);
  --bs-btn-hover-bg: #f4f6f7; --bs-btn-hover-border-color: var(--ig-border-strong);
  --bs-btn-color: var(--ig-text);
}
/* Outline buttons read as calm secondary actions */
[class*="btn-outline-"] {
  --bs-btn-bg: var(--ig-surface);
  --bs-btn-border-color: var(--ig-border-strong);
  --bs-btn-hover-color: var(--ig-text);
  --bs-btn-hover-bg: #f4f6f7;
  --bs-btn-hover-border-color: #aab6bd;
  --bs-btn-active-bg: #eceff1;
  --bs-btn-active-color: var(--ig-text);
  --bs-btn-active-border-color: #aab6bd;
}
.btn-outline-primary   { --bs-btn-color: var(--ig-accent-text); }
.btn-outline-success   { --bs-btn-color: var(--ig-ok); }
.btn-outline-warning   { --bs-btn-color: var(--ig-warn); }
.btn-outline-danger    { --bs-btn-color: var(--ig-danger); --bs-btn-hover-color: var(--ig-danger); --bs-btn-hover-bg: var(--ig-danger-soft); }
.btn-outline-info      { --bs-btn-color: var(--ig-info); }
.btn-outline-secondary, .btn-outline-dark { --bs-btn-color: var(--ig-text); }
.btn-outline-light     { --bs-btn-color: var(--ig-text); }
.btn-link { --bs-btn-color: var(--ig-accent-text); --bs-btn-hover-color: var(--ig-accent-hover); font-weight: 700; }

/* Forms: Flat UI 2px borders that turn green-sea on focus */
.form-control, .form-select {
  border: 2px solid #d5dde1;
  border-radius: var(--ig-radius-sm);
  color: var(--ig-text);
  font-size: .925rem;
  padding: .45rem .75rem;
  transition: border-color .15s;
}
.form-select { padding-right: 2.25rem; }
.form-control-sm, .form-select-sm { padding: .25rem .5rem; font-size: .85rem; border-radius: 6px; }
.form-select-sm { padding-right: 2rem; }
.form-control:focus, .form-select:focus {
  border-color: var(--ig-accent);
  box-shadow: none;
}
.form-control::placeholder { color: #a7b4bb; }
.form-label, label { font-weight: 600; color: var(--ig-text); }
.form-check-label { font-weight: 400; }
.form-text { color: var(--ig-muted); }
.form-check-input { border: 2px solid var(--fu-silver); }
.form-check-input:checked { background-color: var(--ig-accent); border-color: var(--ig-accent); }
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(22, 160, 133, .2); border-color: var(--ig-accent); }
.input-group-text { background: #f4f6f7; border: 2px solid #d5dde1; color: var(--ig-muted); }
.input-group > .form-control + .btn, .input-group > .btn { border-width: 2px; }

/* Tables */
.table {
  --bs-table-color: var(--ig-text);
  --bs-table-border-color: var(--ig-border);
  --bs-table-hover-bg: #f6faf9;
  --bs-table-striped-bg: #fafbfc;
  font-size: .9rem;
  vertical-align: middle;
}
.table > thead th, .table th.sortable, .table-light th, .table-dark th, thead.table-dark th, thead.table-light th {
  background: #f6f8f9 !important;
  color: var(--ig-muted) !important;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--ig-border) !important;
  white-space: nowrap;
}
.table > :not(caption) > * > * { padding: .7rem .75rem; }
.table-responsive { border-radius: var(--ig-radius-sm); }
.table-primary, .table-info { --bs-table-bg: var(--ig-accent-soft); --bs-table-color: var(--ig-text); }
.table-success { --bs-table-bg: var(--ig-ok-soft); --bs-table-color: var(--ig-text); }
.table-warning { --bs-table-bg: var(--ig-warn-soft); --bs-table-color: var(--ig-text); }
.table-danger  { --bs-table-bg: var(--ig-danger-soft); --bs-table-color: var(--ig-text); }

/* Badges become soft pills with plain colours */
.badge {
  border-radius: 999px;
  font-weight: 700;
  padding: .32em .7em;
  letter-spacing: .01em;
}
.badge.bg-primary   { background: var(--ig-accent-soft) !important; color: var(--ig-accent-text) !important; }
.badge.bg-success   { background: var(--ig-ok-soft) !important; color: var(--ig-ok) !important; }
.badge.bg-warning   { background: var(--ig-warn-soft) !important; color: var(--ig-warn) !important; }
.badge.bg-danger    { background: var(--ig-danger-soft) !important; color: var(--ig-danger) !important; }
.badge.bg-info      { background: var(--ig-info-soft) !important; color: var(--ig-info) !important; }
.badge.bg-secondary, .badge.bg-light, .badge.bg-dark { background: var(--ig-todo-soft) !important; color: #4d5f6a !important; }

/* Alerts: soft tint, 12px radius, icon friendly */
.alert {
  border-radius: var(--ig-radius);
  border: 1px solid transparent;
  padding: .85rem 1rem;
}
.alert-success { background: var(--ig-ok-soft); border-color: #bfe3cd; color: #17603a; }
.alert-info, .alert-primary { background: var(--ig-info-soft); border-color: #c3dcef; color: #1b4f72; }
.alert-warning { background: var(--ig-warn-soft); border-color: var(--ig-warn-border); color: #7e3d07; }
.alert-danger, .alert-error { background: var(--ig-danger-soft); border-color: #f2c4bf; color: #8e2c22; }
.alert-secondary, .alert-light, .alert-debug { background: #f6f8f9; border-color: var(--ig-border); color: var(--ig-text); }
.alert .alert-heading { color: inherit; }

/* Tabs and pills */
.nav-tabs { border-bottom: 2px solid var(--ig-border); gap: 4px; }
.nav-tabs .nav-link {
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  color: var(--ig-muted);
  font-weight: 700;
  background: transparent;
  border-radius: 0;
  padding: .6rem .9rem;
}
.nav-tabs .nav-link:hover { color: var(--ig-text); border-bottom-color: var(--ig-border-strong); background: transparent; }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
  color: var(--ig-accent-text);
  border-bottom-color: var(--ig-accent);
  background: transparent;
}
.nav-pills .nav-link { border-radius: var(--ig-radius-sm); color: var(--ig-muted); font-weight: 700; }
.nav-pills .nav-link.active { background: var(--ig-accent); color: #fff; }

/* Dropdowns, modals, pagination, list groups, progress */
.dropdown-menu {
  border: 1px solid var(--ig-border);
  border-radius: var(--ig-radius-sm);
  box-shadow: 0 8px 24px rgba(44, 62, 80, .10);
  padding: .35rem;
  font-size: .9rem;
}
.dropdown-item { border-radius: 6px; padding: .45rem .7rem; color: var(--ig-text); }
.dropdown-item i { width: 1.1rem; text-align: center; color: var(--ig-muted); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--ig-accent-soft); color: var(--ig-accent-text); }
.dropdown-item:hover i { color: var(--ig-accent-text); }
.dropdown-header { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.modal-content { border: 1px solid var(--ig-border); border-radius: var(--ig-radius); }
.modal-header { border-bottom-color: var(--ig-border); }
.modal-header[class*="bg-"] { background: #f6f8f9 !important; color: var(--ig-text) !important; }
.modal-header[class*="bg-"] .btn-close-white { filter: none; }
.modal-footer { border-top-color: var(--ig-border); }
.pagination { --bs-pagination-color: var(--ig-text); --bs-pagination-border-color: var(--ig-border);
  --bs-pagination-active-bg: var(--ig-accent); --bs-pagination-active-border-color: var(--ig-accent);
  --bs-pagination-hover-bg: var(--ig-accent-soft); --bs-pagination-focus-box-shadow: none; }
.list-group { --bs-list-group-border-color: var(--ig-border); --bs-list-group-active-bg: var(--ig-accent); --bs-list-group-active-border-color: var(--ig-accent); }
.progress { background: var(--ig-todo-soft); border-radius: 999px; }
.progress-bar { background-color: var(--ig-accent); }
.breadcrumb { font-size: .85rem; }
.breadcrumb-item.active { color: var(--ig-muted); }
.border-primary { border-color: var(--ig-accent) !important; }
.text-primary { color: var(--ig-accent-text) !important; }
.text-success { color: var(--ig-ok) !important; }
.text-warning { color: var(--fu-carrot) !important; }
.text-danger  { color: var(--ig-danger) !important; }
.text-info    { color: var(--fu-belize-hole) !important; }
.bg-light { background-color: #f6f8f9 !important; }
.shadow, .shadow-sm, .shadow-lg { box-shadow: none !important; }
hr { border-color: var(--ig-border); opacity: 1; }

/* 3. App shell --------------------------------------------------- */
.sc-navbar {
  background: var(--ig-nav);
  padding-top: .5rem;
  padding-bottom: .5rem;
}
.sc-navbar .navbar-brand {
  display: flex; align-items: center; gap: .6rem;
  font-weight: 900; letter-spacing: .01em; color: #fff;
}
.sc-navbar .brand-mark {
  width: 36px; height: 36px; border-radius: 9px; background: #fff;
  display: grid; place-items: center; overflow: hidden;
}
.sc-navbar .brand-mark img { width: 32px; height: 32px; object-fit: contain; }
.sc-navbar .nav-link {
  color: rgba(255, 255, 255, .78);
  font-weight: 700;
  font-size: .9rem;
  border-radius: var(--ig-radius-sm);
  padding: .5rem .75rem !important;
}
.sc-navbar .nav-link:hover, .sc-navbar .nav-link:focus, .sc-navbar .nav-link.show { color: #fff; background: rgba(255, 255, 255, .08); }
.sc-navbar .nav-link.active { color: #fff; background: rgba(26, 188, 156, .22); box-shadow: inset 0 -2px 0 var(--fu-turquoise); }
.sc-navbar .nav-link i { width: 1.15rem; text-align: center; opacity: .9; }
.sc-navbar .navbar-toggler { border: 0; box-shadow: none; }
.sc-navbar .org-chip {
  background: rgba(255, 255, 255, .12); color: #fff; border-radius: 999px;
  padding: .15rem .6rem; font-size: .75rem; font-weight: 700; margin-left: .35rem;
}
.sc-navbar .org-chip.super { background: rgba(241, 196, 15, .25); }
.sc-navbar .avatar {
  width: 28px; height: 28px; border-radius: 50%; background: var(--fu-turquoise); color: #fff;
  display: inline-grid; place-items: center; font-size: .8rem; font-weight: 900; text-transform: uppercase;
  margin-right: .35rem;
}
@media (max-width: 991.98px) {
  .sc-navbar .navbar-collapse { padding: .5rem 0 .75rem; }
  .sc-navbar .dropdown-menu { background: var(--ig-nav-dark); border-color: rgba(255,255,255,.1); box-shadow: none; }
  .sc-navbar .dropdown-item { color: rgba(255,255,255,.85); }
  .sc-navbar .dropdown-item i { color: rgba(255,255,255,.6); }
  .sc-navbar .dropdown-item:hover { background: rgba(255,255,255,.08); color: #fff; }
  .sc-navbar .dropdown-divider { border-color: rgba(255,255,255,.12); }
  .sc-navbar .dropdown-header, .sc-navbar .dropdown-item-text { color: rgba(255,255,255,.6); }
}

.sc-main { padding-top: 1.5rem; padding-bottom: 2rem; }
@media (max-width: 576px) { .sc-main { padding-top: 1rem; padding-left: 12px; padding-right: 12px; } }

/* Flash messages */
.sc-messages { max-width: 1180px; margin: 0 auto 1rem; }
.sc-messages .alert { display: flex; gap: .75rem; align-items: flex-start; }
.sc-messages .alert .msg-icon { margin-top: .15rem; }
.sc-messages .alert .btn-close { margin-left: auto; padding: .5rem; position: static; }

.sc-footer {
  border-top: 1px solid var(--ig-border);
  background: var(--ig-surface);
  color: var(--ig-muted);
  font-size: .85rem;
  padding: 1rem 0;
  margin-top: 2rem;
}

/* 4. Guided components (scoped under .ig page wrapper) ------------ */
.ig {
  color: var(--ig-text);
  max-width: 1180px;
  margin: 0 auto;
}
.ig.wide { max-width: none; }
.ig h1 { font-size: 1.5rem; font-weight: 700; margin: 0; }
.ig h2 { font-size: 1.05rem; font-weight: 700; margin: 0 0 12px; }
.ig .muted { color: var(--ig-muted); }
.ig .panel {
  background: var(--ig-surface);
  border: 1px solid var(--ig-border);
  border-radius: var(--ig-radius);
  padding: 20px;
}
.ig .panel.flush { padding: 0; overflow: hidden; }
.ig .panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px 20px; border-bottom: 1px solid var(--ig-border);
}
.ig .panel-head h2 { margin: 0; }
.ig .panel-body { padding: 20px; }
.ig .section { margin-top: 28px; }
.ig .section:first-child { margin-top: 0; }

/* Page header: title, one-line explanation, one primary action */
.ig .page-head { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.ig .page-head .title { display: flex; gap: 14px; align-items: center; }
.ig .page-icon {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 44px;
  background: var(--ig-accent-soft); color: var(--ig-accent-text); font-size: 1.15rem;
}
.ig .page-head p { margin: 2px 0 0; color: var(--ig-muted); }
.ig .page-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Stepper */
.ig .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ig .steps.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 992px) { .ig .steps.four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .ig .steps, .ig .steps.four { grid-template-columns: 1fr; } }
.ig .step { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: var(--ig-radius);
            border: 1px solid var(--ig-border); background: var(--ig-surface); }
.ig .step.current { border-color: var(--ig-accent); box-shadow: 0 0 0 3px var(--ig-accent-soft); }
.ig .step-num { flex: 0 0 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
                font-weight: 700; font-size: .9rem; background: #eef0f3; color: var(--ig-muted); }
.ig .step.done .step-num { background: var(--ig-ok-soft); color: var(--ig-ok); }
.ig .step.current .step-num { background: var(--ig-accent); color: #fff; }
.ig .step-title { font-weight: 700; margin-bottom: 2px; }
.ig .step-text { font-size: .875rem; color: var(--ig-muted); margin-bottom: 8px; }

/* Buttons */
.btn-ig { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--ig-radius-sm);
          font-weight: 700; font-size: .9rem; text-decoration: none; border: 1px solid transparent; cursor: pointer;
          transition: background .15s, border-color .15s; line-height: 1.4; white-space: nowrap; }
.btn-ig.primary { background: var(--ig-accent); color: #fff; }
.btn-ig.primary:hover { background: var(--ig-accent-hover); color: #fff; }
.btn-ig.secondary { background: var(--ig-surface); color: var(--ig-text); border-color: var(--ig-border-strong); }
.btn-ig.secondary:hover { border-color: #aab6bd; background: #f8fafa; color: var(--ig-text); }
.btn-ig.warn { background: var(--ig-warn); color: #fff; }
.btn-ig.warn:hover { background: #95440a; color: #fff; }
.btn-ig.danger { background: var(--ig-surface); color: var(--ig-danger); border-color: #f2c4bf; }
.btn-ig.danger:hover { background: var(--ig-danger-soft); }
.btn-ig.sm { padding: 5px 12px; font-size: .825rem; }
.ig .link, .link-ig { color: var(--ig-accent-text); text-decoration: none; font-size: .85rem; font-weight: 700; }
.ig .link:hover, .link-ig:hover { text-decoration: underline; }

/* Action-needed callout */
.ig .attention { background: var(--ig-warn-soft); border: 1px solid var(--ig-warn-border); border-radius: var(--ig-radius); padding: 16px 20px; }
.ig .attention.info { background: var(--ig-info-soft); border-color: #c3dcef; }
.ig .attention.ok { background: var(--ig-ok-soft); border-color: #bfe3cd; }
.ig .attention-row { display: flex; justify-content: space-between; align-items: center; gap: 12px;
                     padding: 10px 0; border-top: 1px solid var(--ig-warn-border); flex-wrap: wrap; }
.ig .attention-row:first-of-type { border-top: 0; }

/* "Next step" list: each row = icon, what & why, one button */
.ig .todo-list { list-style: none; margin: 0; padding: 0; }
.ig .todo-list li { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-top: 1px solid var(--ig-border); flex-wrap: wrap; }
.ig .todo-list li:first-child { border-top: 0; }
.ig .todo-list .todo-text { flex: 1 1 220px; min-width: 0; }
.ig .todo-list .todo-title { font-weight: 700; }
.ig .todo-list .todo-sub { font-size: .85rem; color: var(--ig-muted); }

/* Metric tiles */
.ig .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 992px) { .ig .stats { grid-template-columns: repeat(2, 1fr); } }
.ig .stat { background: var(--ig-surface); border: 1px solid var(--ig-border); border-radius: var(--ig-radius);
            padding: 16px; display: flex; gap: 12px; align-items: center; text-decoration: none; color: var(--ig-text); }
a.stat:hover { border-color: var(--ig-border-strong); color: var(--ig-text); }
.ig .stat .stat-value { font-size: 1.5rem; font-weight: 900; line-height: 1.1; }
.ig .stat .stat-label { font-size: .82rem; color: var(--ig-muted); }

/* Tiles: square icons for logos and quick links */
.ig .logo, .ig .tile-icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-size: 1.1rem; flex: 0 0 40px; }
.ig .logo.amazon, .tone-amazon { background: #fff4e0; color: #c26a00; }
.ig .logo.ebay, .tone-ebay { background: #e9f0fd; color: #2453b8; }
.ig .logo.etsy, .tone-etsy { background: #fdece6; color: #c4461b; }
.ig .logo.ship, .tone-neutral { background: #eef0f3; color: #475467; }
.tone-accent { background: var(--ig-accent-soft); color: var(--ig-accent-text); }
.tone-ok { background: var(--ig-ok-soft); color: var(--ig-ok); }
.tone-warn { background: var(--ig-warn-soft); color: var(--ig-warn); }
.tone-danger { background: var(--ig-danger-soft); color: var(--ig-danger); }
.tone-info { background: var(--ig-info-soft); color: var(--ig-info); }
.tone-violet { background: var(--ig-violet-soft); color: var(--ig-violet); }

.ig .quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.ig .quick a { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: var(--ig-radius);
               background: var(--ig-surface); border: 1px solid var(--ig-border); text-decoration: none; color: var(--ig-text); }
.ig .quick a:hover { border-color: var(--ig-accent); }
.ig .quick .q-title { font-weight: 700; }
.ig .quick .q-sub { font-size: .8rem; color: var(--ig-muted); }

/* Status pills */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px;
        font-size: .78rem; font-weight: 700; white-space: nowrap; line-height: 1.6; }
.pill.ok { background: var(--ig-ok-soft); color: var(--ig-ok); }
.pill.warn { background: var(--ig-warn-soft); color: var(--ig-warn); }
.pill.danger { background: var(--ig-danger-soft); color: var(--ig-danger); }
.pill.info { background: var(--ig-info-soft); color: var(--ig-info); }
.pill.accent { background: var(--ig-accent-soft); color: var(--ig-accent-text); }
.pill.todo { background: #eef0f3; color: var(--ig-muted); }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.no-dot::before { display: none; }

/* Integrations page pieces */
.ig .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
@media (max-width: 576px) { .ig .grid { grid-template-columns: 1fr; } }
.ig .card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ig .accounts { list-style: none; padding: 0; margin: 0 0 16px; }
.ig .accounts li { display: flex; justify-content: space-between; align-items: center; gap: 8px;
                   padding: 10px 0; border-top: 1px solid var(--ig-border); flex-wrap: wrap; }
.ig .acc-name { font-weight: 700; overflow-wrap: anywhere; }
.ig .acc-meta { font-size: .8rem; color: var(--ig-muted); }
.ig .how { counter-reset: how; list-style: none; padding: 0; margin: 12px 0 16px; font-size: .875rem; color: var(--ig-muted); }
.ig .how li { counter-increment: how; position: relative; padding-left: 32px; margin-bottom: 8px; min-height: 22px; line-height: 22px; }
.ig .how li::before { content: counter(how); position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; display: grid;
                      place-items: center; font-size: .72rem; font-weight: 700; background: var(--ig-accent-soft); color: var(--ig-accent-text); }
.ig .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Empty state with numbered guidance */
.ig .empty { text-align: center; padding: 36px 20px; }
.ig .empty .empty-icon { width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 12px; display: grid; place-items: center; font-size: 1.4rem; }
.ig .empty .how { display: inline-block; text-align: left; margin: 12px auto 18px; }

/* Data lists (key/value) */
.ig .kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: .9rem; margin: 0; }
.ig .kv dt { color: var(--ig-muted); font-weight: 400; }
.ig .kv dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }

/* Auth pages */
.sc-auth { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--ig-bg); }
.sc-auth .auth-card { width: 100%; max-width: 420px; background: var(--ig-surface); border: 1px solid var(--ig-border); border-radius: 16px; padding: 32px; }
@media (max-width: 576px) { .sc-auth .auth-card { padding: 24px 20px; } }
.sc-auth .auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.sc-auth .auth-brand .mark { width: 44px; height: 44px; border-radius: 12px; background: var(--ig-nav); color: #fff; display: grid; place-items: center; font-size: 1.2rem; }
.sc-auth .input-icon { position: relative; }
.sc-auth .input-icon > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #a7b4bb; pointer-events: none; }
.sc-auth .input-icon > .form-control { padding-left: 40px; }
.sc-auth .btn-ig { width: 100%; justify-content: center; padding: 11px 16px; font-size: .95rem; }

/* Legacy helpers kept from the old base layout */
.status-badge { font-size: .75rem; padding: .25rem .55rem; }
.platform-logo { max-height: 30px; width: auto; }
.organization-badge { background: var(--ig-accent-soft); color: var(--ig-accent-text); }
.super-user-badge { background: #fef5d4; color: #8a6d0b; }

/* Order progress tracker */
.track-wrap { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; }
.track { list-style: none; display: flex; margin: 0; padding: 0; flex: 1 1 420px; max-width: 620px; }
.track li { flex: 1; position: relative; text-align: center; font-size: .78rem; color: var(--ig-muted); font-weight: 700; }
.track li::before { content: ""; position: absolute; top: 15px; left: -50%; right: 50%; height: 3px; background: var(--ig-border); z-index: 0; }
.track li:first-child::before { display: none; }
.track li.done::before, .track li.current::before { background: var(--ig-accent); }
.track .dot { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; margin: 0 auto 6px;
              display: grid; place-items: center; background: #eef0f3; color: var(--ig-muted); font-size: .8rem; }
.track li.done .dot { background: var(--ig-ok-soft); color: var(--ig-ok); }
.track li.current .dot { background: var(--ig-accent); color: #fff; box-shadow: 0 0 0 4px var(--ig-accent-soft); }
.track li.current { color: var(--ig-text); }
.track .lbl { display: block; }
.track.paused { opacity: .55; }
.next-step { display: flex; gap: 10px; align-items: flex-start; flex: 1 1 300px; background: var(--ig-accent-soft); color: #0b5c4c;
             border-radius: var(--ig-radius-sm); padding: 10px 14px; font-size: .9rem; }
.next-step i { margin-top: 3px; }
.next-step.warn { background: var(--ig-warn-soft); color: #7e3d07; }
.next-step.ok { background: var(--ig-ok-soft); color: #17603a; }
.next-step.muted-step { background: #f3f5f6; color: var(--ig-muted); }
@media (max-width: 576px) { .track li { font-size: .7rem; } }

/* Keep the footer at the bottom of short pages */
body { min-height: 100vh; display: flex; flex-direction: column; }
body > .sc-main, body > main { flex: 1 0 auto; }

/* Orders: compact filter bar */
.filter-bar .fb-search { flex: 1 1 260px; min-width: 200px; }
.filter-bar .fb-select { flex: 0 1 185px; min-width: 150px; }
.filter-bar .input-group-text { background: #fff; border-right: 0; padding-right: .35rem; }
.filter-bar .input-group > .form-control, .filter-bar .input-group > .form-select { border-left: 0; padding-left: .35rem; }
.filter-bar .input-group:focus-within .input-group-text { border-color: var(--ig-accent); color: var(--ig-accent); }
.filter-bar .btn-check:checked + .fb-chip { background: var(--ig-accent-soft); border-color: var(--ig-accent); color: var(--ig-accent-text); }
.filter-bar .form-label.small { font-size: .78rem; margin-bottom: .2rem; color: var(--ig-muted); }
@media (max-width: 576px) {
  .filter-bar .fb-search { flex: 1 1 100%; }
  .filter-bar .fb-select { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .filter-bar .fb-select .input-group-text { display: none; }
  .filter-bar .fb-select .form-select { border-left: 2px solid #d5dde1; border-radius: var(--ig-radius-sm) !important; padding-left: .6rem; }
}
/* Status tabs scroll sideways on small screens instead of stacking */
@media (max-width: 991.98px) {
  #statusTabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  #statusTabs::-webkit-scrollbar { display: none; }
  #statusTabs .nav-link { white-space: nowrap; }
}
.legend-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border-left: 3px solid; margin-right: 6px; vertical-align: -1px; }
.bulk-bar { position: sticky; top: 8px; z-index: 20; border-color: var(--ig-accent) !important; box-shadow: 0 6px 18px rgba(44,62,80,.08) !important; }

/* Orders: row actions, phone cards, saved views, live counts */
.order-actions .btn-light { border: 1px solid var(--ig-border); background: #fff; line-height: 1.6; }
.order-actions .dropdown-menu { min-width: 220px; }
.order-cards { display: grid; gap: 10px; }
.order-card { border: 1px solid var(--ig-border); border-left: 4px solid var(--ig-border); border-radius: var(--ig-radius); padding: 12px; background: #fff; }
.order-card.is-priority { border-left-color: var(--fu-alizarin); background: #fff7f6; }
.order-card.is-urgent { border-left-color: var(--fu-sun-flower); background: #fffbea; }
.order-card.is-merge { border-left-color: var(--fu-carrot); }
.order-card .order-actions { margin-top: 6px; }
.min-w-0 { min-width: 0; }
.d-contents { display: contents; }
.view-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: .82rem; font-weight: 700;
             background: #fff; border: 1px solid var(--ig-border); color: var(--ig-text); text-decoration: none; white-space: nowrap; }
.view-chip i { color: var(--ig-muted); }
.view-chip:hover { border-color: var(--ig-accent); color: var(--ig-accent-text); }
.view-chip.active { background: var(--ig-accent-soft); border-color: var(--ig-accent); color: var(--ig-accent-text); }
.view-chip.active i, .view-chip:hover i { color: var(--ig-accent-text); }
.view-chip.mine i { color: var(--fu-carrot); }
.view-chip .chip-x { border: 0; background: none; padding: 0 0 0 4px; line-height: 1; font-size: 1rem; color: var(--ig-muted); }
.view-chip .chip-x:hover { color: var(--ig-danger); }
@media (max-width: 576px) { .saved-views { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .saved-views::-webkit-scrollbar { display: none; } }
.count-bump { animation: count-bump 1.2s ease; }
@keyframes count-bump { 0% { transform: scale(1); } 30% { transform: scale(1.35); background: var(--fu-carrot) !important; color: #fff !important; } 100% { transform: scale(1); } }
.new-orders-toast { position: fixed; right: 16px; bottom: 16px; z-index: 1080; display: flex; align-items: center; gap: 8px;
                    background: var(--fu-wet-asphalt); color: #fff; border-radius: var(--ig-radius); padding: 10px 12px 10px 16px;
                    box-shadow: 0 10px 30px rgba(44,62,80,.25); font-weight: 700; }
.new-orders-toast[hidden] { display: none; }
@media (max-width: 576px) { .new-orders-toast { left: 12px; right: 12px; bottom: 12px; } }

/* Navbar quick find */
.sc-navbar .quick-find { position: relative; }
.sc-navbar .quick-find input { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); color: #fff; border-radius: 8px;
                               padding: .4rem .75rem .4rem 2rem; font-size: .88rem; width: 230px; }
.sc-navbar .quick-find input::placeholder { color: rgba(255,255,255,.6); }
.sc-navbar .quick-find input:focus { background: #fff; color: var(--ig-text); outline: none; border-color: #fff; }
.sc-navbar .quick-find input:focus::placeholder { color: #a7b4bb; }
.sc-navbar .quick-find > i { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,.65); font-size: .85rem; pointer-events: none; }
.sc-navbar .quick-find:focus-within > i { color: var(--ig-muted); }
.sc-navbar .quick-find kbd { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.15); color: rgba(255,255,255,.8); font-size: .7rem; padding: 1px 6px; }
.sc-navbar .quick-find:focus-within kbd { display: none; }
@media (max-width: 991.98px) { .sc-navbar .quick-find { margin: .5rem 0; } .sc-navbar .quick-find input { width: 100%; } .sc-navbar .quick-find kbd { display: none; } }
.sc-navbar .nav-new-count { background: var(--fu-carrot); color: #fff; border-radius: 999px; font-size: .7rem; padding: 1px 7px; margin-left: 4px; }
.sc-navbar .nav-link { white-space: nowrap; }
@media (min-width: 992px) and (max-width: 1399.98px) {
  .sc-navbar .quick-find input { width: 190px; }
  .sc-navbar .nav-link { padding-left: .55rem !important; padding-right: .55rem !important; }
}
.alerts-menu { width: 340px; max-width: calc(100vw - 24px); }
.alerts-menu .alert-item { display: flex; gap: 10px; align-items: flex-start; white-space: normal; padding: .55rem .7rem; }
.alerts-menu .alert-item i { margin-top: 3px; width: 1.1rem; text-align: center; }