/*
 * GAINVO v3.6.1
 * Complete authenticated-workspace theming and appearance controls.
 * Customer documents intentionally continue to use --receipt-brand/--receipt-accent.
 */

body.portal-theme-ocean {
  --brand-2: #0f315f;
  --brand-3: #2671aa;
  --brand-soft: #e8f0fa;
  --brand-surface: #f4f8fd;
  --brand-border: #c8d9eb;
  --brand-shadow: rgba(21, 62, 117, .22);
  --brand-glow: rgba(38, 113, 170, .16);
  --accent-soft: #fff5dc;
}

body.portal-theme-emerald {
  --brand-2: #084a3e;
  --brand-3: #15927b;
  --brand-soft: #e4f4ef;
  --brand-surface: #f2faf7;
  --brand-border: #badfd5;
  --brand-shadow: rgba(15, 107, 91, .22);
  --brand-glow: rgba(21, 146, 123, .16);
  --accent-soft: #fff7d9;
}

body.portal-theme-plum {
  --brand-2: #472554;
  --brand-3: #9660a8;
  --brand-soft: #f1eaf4;
  --brand-surface: #faf6fb;
  --brand-border: #dbc9e2;
  --brand-shadow: rgba(104, 64, 120, .22);
  --brand-glow: rgba(150, 96, 168, .16);
  --accent-soft: #fff0e9;
}

body.portal-theme-graphite {
  --brand-2: #1e293b;
  --brand-3: #0f8f86;
  --brand-soft: #e9eef2;
  --brand-surface: #f6f8fa;
  --brand-border: #cbd5df;
  --brand-shadow: rgba(51, 65, 85, .22);
  --brand-glow: rgba(20, 184, 166, .14);
  --accent-soft: #dcfaf6;
}

body.portal-theme-cocoa {
  --brand-2: #46281d;
  --brand-3: #9e6846;
  --brand-soft: #f5ece7;
  --brand-surface: #fcf7f4;
  --brand-border: #e2cabc;
  --brand-shadow: rgba(107, 63, 42, .22);
  --brand-glow: rgba(217, 151, 61, .15);
  --accent-soft: #fff1dc;
}

body.portal-theme-indigo {
  --brand-2: #312e81;
  --brand-3: #6366f1;
  --brand-soft: #ecebff;
  --brand-surface: #f7f7ff;
  --brand-border: #cbc9f7;
  --brand-shadow: rgba(67, 56, 202, .22);
  --brand-glow: rgba(99, 102, 241, .17);
  --accent-soft: #fff3d6;
}

body.portal-theme-coral {
  --brand-2: #70263a;
  --brand-3: #d06472;
  --brand-soft: #fae9ed;
  --brand-surface: #fff7f8;
  --brand-border: #efc5cf;
  --brand-shadow: rgba(159, 63, 82, .22);
  --brand-glow: rgba(208, 100, 114, .16);
  --accent-soft: #fff0df;
}

body.portal-theme-forest {
  --brand-2: #173d2d;
  --brand-3: #4c7a5d;
  --brand-soft: #e8f2eb;
  --brand-surface: #f5faf6;
  --brand-border: #c4d9ca;
  --brand-shadow: rgba(40, 89, 67, .22);
  --brand-glow: rgba(76, 122, 93, .16);
  --accent-soft: #fff6d9;
}

/* Shared semantic surfaces */
.app-body {
  --soft: var(--brand-surface);
  --focus-ring: var(--brand-glow);
  --themed-gradient: linear-gradient(128deg, var(--brand-2), var(--brand) 58%, var(--brand-3));
  background:
    radial-gradient(circle at 82% 0, var(--brand-glow), transparent 28rem),
    var(--brand-surface);
}

.app-body .topbar {
  background: color-mix(in srgb, var(--brand-surface) 90%, white);
  border-bottom-color: color-mix(in srgb, var(--brand-border) 65%, white);
}

.app-body .panel,
.app-body .stat-card,
.app-body .quick-create-bar,
.app-body .builder-card,
.app-body .summary-card,
.app-body .customer-card {
  border-color: color-mix(in srgb, var(--brand-border) 45%, var(--line));
}

.app-body .btn-primary {
  background: var(--brand);
  box-shadow: 0 9px 24px var(--brand-shadow);
}

.app-body .btn-primary:hover {
  background: var(--brand-2);
  box-shadow: 0 12px 30px var(--brand-shadow);
}

.app-body .btn-secondary,
.app-body .settings-plan-badge,
.app-body .builder-number,
.app-body .large-avatar,
.app-body .business-table-cell i,
.app-body .product-table-cell i,
.app-body .empty-mini > span,
.app-body .empty-large > span,
.app-body .v30-action-links > a > span,
.app-body .bi-insight-list article > span,
.app-body .bi-rank,
.app-body .bi-team-list article > span,
.app-body .pos-guest-avatar {
  background: var(--brand-soft);
  color: var(--brand);
}

.app-body input:focus,
.app-body select:focus,
.app-body textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.app-body :focus-visible {
  outline-color: var(--brand);
}

.app-body .workspace-brand:focus-visible {
  outline-color: var(--focus-ring);
}

.app-body .workspace-brand-mark:not(.has-logo) {
  background: linear-gradient(145deg, var(--brand-2), var(--brand-3));
  box-shadow: 0 10px 24px var(--brand-shadow);
}

.app-body .workspace-identity::after,
.app-body .product-name i b,
.app-body .method-list i b,
.app-body .bi-product-share b,
.app-body .bi-team-list i b {
  background: linear-gradient(90deg, var(--brand), var(--accent));
}

.app-body .nav-link.active,
.app-body .sidebar-nav .nav-link.active {
  background: var(--brand-soft);
  color: var(--brand);
}

.app-body .nav-link:hover {
  background: var(--brand-surface);
}

.app-body .mobile-nav a.active {
  color: var(--brand);
}

.app-body .mobile-create {
  background: var(--brand);
  box-shadow: 0 9px 22px var(--brand-shadow);
}

/* Major workspace identities */
.app-body .welcome-panel,
.app-body .sales-summary,
.app-body .team-hero,
.app-body .billing-current,
.app-body .report-hero,
.app-body .bi-hero,
.app-body .v30-hero,
.app-body .purchasing.v30-hero,
.app-body .stock-product-hero,
.app-body .statement-hero,
.app-body .support-hero,
.app-body .role-hero,
.app-body .owner-hero,
.app-body .manager-hero,
.app-body .seller-hero,
.app-body .seller-counter-v312,
.app-body .guide-hero,
.app-body .accounts-hero {
  background: var(--themed-gradient);
  box-shadow: 0 18px 45px var(--brand-shadow);
}

.app-body .welcome-panel p,
.app-body .sales-summary p,
.app-body .team-hero p,
.app-body .billing-current p,
.app-body .report-hero p,
.app-body .bi-hero p,
.app-body .v30-hero p,
.app-body .role-hero p,
.app-body .stock-product-hero p,
.app-body .statement-hero p,
.app-body .support-hero p,
.app-body .seller-counter-copy p,
.app-body .guide-hero p {
  color: rgba(255, 255, 255, .82);
}

/*
 * The salesperson and guide heroes pre-date the semantic theme layer. Their
 * supporting accents must inherit the business palette as well as the panel
 * background, otherwise fixed purple/blue details make the theme look partial.
 */
.app-body .seller-counter-v312.is-paused {
  background: linear-gradient(
    128deg,
    color-mix(in srgb, var(--brand-2) 72%, #26384e),
    color-mix(in srgb, var(--brand) 58%, #4b3a63)
  );
}

.app-body .seller-start-card > span:first-child,
.app-body .guide-hero > aside > span {
  background: var(--accent-soft);
  color: color-mix(in srgb, var(--accent) 76%, #5b4300);
}

.app-body .seller-start-card > .icon {
  color: var(--brand);
}

.app-body .guide-hero > aside {
  border-color: rgba(255, 255, 255, .17);
  background: color-mix(in srgb, var(--brand-2) 62%, transparent);
}

.app-body .guide-hero > aside small {
  color: rgba(255, 255, 255, .78);
}

.app-body .guide-hero .btn-white {
  color: var(--brand);
  box-shadow: 0 10px 26px rgba(4, 20, 38, .16);
}

.app-body .smart-tip,
.app-body .keyboard-tip,
.app-body .bi-data-note,
.app-body .document-style-guidance,
.app-body .print-device-note {
  border-color: var(--brand-border);
  background: var(--brand-surface);
  color: var(--brand);
}

.app-body .v30-stat-grid article.accent,
.app-body .current-plan-label,
.app-body .plan-card.current,
.app-body .cycle-switch button.active,
.app-body .type-switch a.active,
.app-body .print-preference input:checked + span {
  border-color: var(--brand-border);
  background: var(--brand-soft);
  color: var(--brand);
}

.app-body .pos-unit-badge {
  border-color: var(--brand-border);
  background: var(--brand-soft);
  color: var(--brand-2);
}

.app-body .pos-buyer-summary > span:first-child > .icon {
  background: var(--brand-soft);
  color: var(--brand);
}

.app-body .pos-customer-modes input:checked + span,
.app-body .pos-quick-cash button:hover,
.app-body .pos-quick-cash button:focus-visible {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand-2);
  box-shadow: 0 0 0 2px var(--focus-ring);
}

.app-body .bi-bars i,
.app-body .bi-method-list em,
.app-body .bi-hour-bars i {
  background: linear-gradient(180deg, var(--brand-3), var(--brand));
}

.app-body th,
.app-body .v30-order-head {
  background: color-mix(in srgb, var(--brand-surface) 72%, white);
}

/* Sidebar choices */
.app-body.portal-style-light .sidebar {
  background: rgba(255, 255, 255, .96);
  border-right-color: var(--brand-border);
}

.app-body.portal-style-brand .sidebar {
  background: linear-gradient(165deg, var(--brand-2), var(--brand));
  border-right-color: transparent;
  box-shadow: 14px 0 38px var(--brand-shadow);
}

.app-body.portal-style-brand .workspace-brand-copy strong,
.app-body.portal-style-brand .workspace-brand-copy small,
.app-body.portal-style-brand .sidebar .nav-link,
.app-body.portal-style-brand .workspace-powered,
.app-body.portal-style-brand .workspace-powered strong,
.app-body.portal-style-brand .workspace-powered span {
  color: rgba(255, 255, 255, .82) !important;
}

.app-body.portal-style-brand .workspace-brand-copy strong {
  color: #fff !important;
}

.app-body.portal-style-brand .workspace-identity {
  border-bottom-color: rgba(255, 255, 255, .17);
}

.app-body.portal-style-brand .workspace-identity::after {
  background: var(--accent);
}

.app-body.portal-style-brand .workspace-brand-mark.has-logo {
  border-color: rgba(255, 255, 255, .35);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .2);
}

.app-body.portal-style-brand .sidebar .nav-link:hover {
  background: rgba(255, 255, 255, .1);
  color: #fff !important;
}

.app-body.portal-style-brand .sidebar .nav-link.active {
  background: #fff;
  color: var(--brand) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
}

.app-body.portal-style-brand .sidebar-close {
  color: #fff;
}

.app-body.portal-style-midnight .sidebar {
  background: linear-gradient(165deg, #172235, #0c1422);
  border-right-color: rgba(255, 255, 255, .07);
  box-shadow: 14px 0 38px rgba(8, 15, 26, .16);
}

.app-body.portal-style-midnight .workspace-brand-copy strong,
.app-body.portal-style-midnight .sidebar .nav-link {
  color: #dce5f0;
}

.app-body.portal-style-midnight .workspace-brand-copy small,
.app-body.portal-style-midnight .workspace-powered,
.app-body.portal-style-midnight .workspace-powered strong,
.app-body.portal-style-midnight .workspace-powered span {
  color: #92a1b5 !important;
}

.app-body.portal-style-midnight .workspace-identity {
  border-bottom-color: rgba(255, 255, 255, .09);
}

.app-body.portal-style-midnight .sidebar .nav-link:hover {
  background: rgba(255, 255, 255, .07);
  color: #fff;
}

.app-body.portal-style-midnight .sidebar .nav-link.active {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 8px 22px var(--brand-shadow);
}

.app-body.portal-style-midnight .sidebar-close {
  color: #dce5f0;
}

/* Appearance control centre */
.appearance-preview {
  min-height: 190px;
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  overflow: hidden;
  margin: 4px 0 26px;
  border: 1px solid var(--brand-border);
  border-radius: 20px;
  background: var(--brand-surface);
  box-shadow: 0 15px 38px rgba(18, 32, 51, .08);
}

.appearance-preview > aside {
  display: grid;
  grid-template-rows: 48px repeat(3, 11px);
  align-content: start;
  gap: 13px;
  padding: 20px 15px;
  background: #fff;
  border-right: 1px solid var(--brand-border);
}

.appearance-preview-logo {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(145deg, var(--brand-2), var(--brand-3));
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

.appearance-preview > aside i {
  width: 72px;
  border-radius: 999px;
  background: #dce4ed;
}

.appearance-preview > aside i:first-of-type {
  background: var(--brand-soft);
  box-shadow: inset 4px 0 var(--brand);
}

.appearance-preview > div {
  min-width: 0;
}

.appearance-preview header {
  height: 47px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  border-bottom: 1px solid var(--brand-border);
  background: color-mix(in srgb, var(--brand-surface) 80%, white);
}

.appearance-preview header span,
.appearance-preview header b,
.appearance-preview main > span,
.appearance-preview main section i {
  display: block;
  border-radius: 999px;
}

.appearance-preview header span {
  width: 34%;
  height: 9px;
  background: #cdd7e2;
}

.appearance-preview header b {
  width: 26px;
  height: 26px;
  background: var(--brand-soft);
}

.appearance-preview main {
  padding: 20px;
}

.appearance-preview main > strong {
  display: block;
  color: var(--brand-2);
  font-size: 15px;
}

.appearance-preview main > span {
  width: 48%;
  height: 8px;
  margin-top: 8px;
  background: #d8e0e9;
}

.appearance-preview main section {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
}

.appearance-preview main section i {
  height: 52px;
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  background: #fff;
}

.appearance-preview main section i:first-child {
  background: linear-gradient(135deg, var(--brand), var(--brand-3));
}

.portal-style-brand .appearance-preview > aside {
  background: linear-gradient(165deg, var(--brand-2), var(--brand));
  border-right-color: transparent;
}

.portal-style-brand .appearance-preview > aside i {
  background: rgba(255, 255, 255, .3);
}

.portal-style-brand .appearance-preview > aside i:first-of-type {
  background: #fff;
  box-shadow: inset 4px 0 var(--accent);
}

.portal-style-midnight .appearance-preview > aside {
  background: linear-gradient(165deg, #172235, #0c1422);
  border-right-color: transparent;
}

.portal-style-midnight .appearance-preview > aside i {
  background: rgba(255, 255, 255, .18);
}

.portal-style-midnight .appearance-preview > aside i:first-of-type {
  background: var(--brand);
  box-shadow: none;
}

.appearance-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.appearance-fieldset + .appearance-fieldset {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.appearance-fieldset legend {
  padding: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
}

.appearance-fieldset > p {
  margin: 4px 0 13px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
}

.portal-theme-picker {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.portal-theme-option,
.portal-style-option {
  border-color: color-mix(in srgb, var(--brand-border) 50%, var(--line));
}

.portal-theme-option:hover,
.portal-theme-option.selected,
.portal-theme-option:has(input:checked),
.portal-style-option:hover,
.portal-style-option.selected,
.portal-style-option:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-surface);
  box-shadow: 0 8px 24px var(--brand-glow);
  transform: translateY(-1px);
}

.theme-swatch-indigo {
  background: linear-gradient(135deg, #4338ca, #f59e0b);
}

.theme-swatch-coral {
  background: linear-gradient(135deg, #9f3f52, #f2a65a);
}

.theme-swatch-forest {
  background: linear-gradient(135deg, #285943, #c7a53b);
}

.portal-style-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.portal-style-option {
  position: relative;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  min-height: 88px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  transition: .18s ease;
}

.portal-style-option > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.portal-style-option > span:last-child {
  display: grid;
  gap: 3px;
}

.portal-style-option strong {
  font-size: 11px;
}

.portal-style-option small {
  color: var(--muted);
  font-size: 8px;
  line-height: 1.4;
}

.style-preview {
  height: 64px;
  display: grid;
  grid-template-columns: 25px 1fr;
  grid-template-rows: 15px 1fr;
  overflow: hidden;
  border: 1px solid #dbe3ec;
  border-radius: 9px;
  background: #f4f7fb;
}

.style-preview i {
  grid-row: 1 / 3;
  background: #fff;
  border-right: 1px solid #dbe3ec;
}

.style-preview b {
  background: #fff;
  border-bottom: 1px solid #dbe3ec;
}

.style-preview em {
  width: 60%;
  height: 18px;
  align-self: center;
  justify-self: center;
  border-radius: 5px;
  background: linear-gradient(135deg, var(--brand), var(--brand-3));
}

.style-preview-brand i {
  background: linear-gradient(180deg, var(--brand-2), var(--brand));
  border-right: 0;
}

.style-preview-midnight i {
  background: linear-gradient(180deg, #172235, #0c1422);
  border-right: 0;
}

.appearance-assurance {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 24px;
  padding: 13px 14px;
  border: 1px solid var(--brand-border);
  border-radius: 13px;
  background: var(--brand-surface);
  color: var(--brand);
}

.appearance-assurance > .icon {
  width: 20px;
}

.appearance-assurance > span {
  display: grid;
}

.appearance-assurance strong {
  font-size: 10px;
}

.appearance-assurance small {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
}

@media (max-width: 980px) {
  .portal-theme-picker {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .portal-style-picker {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .app-body .topbar {
    background: color-mix(in srgb, var(--brand-surface) 92%, white);
  }

  .app-body.portal-style-brand .sidebar,
  .app-body.portal-style-midnight .sidebar {
    box-shadow: 18px 0 50px rgba(8, 15, 26, .28);
  }

  .appearance-preview {
    min-height: 148px;
    grid-template-columns: 76px minmax(0, 1fr);
    margin-bottom: 22px;
    border-radius: 16px;
  }

  .appearance-preview > aside {
    grid-template-rows: 38px repeat(3, 8px);
    gap: 9px;
    padding: 14px 10px;
  }

  .appearance-preview-logo {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 9px;
  }

  .appearance-preview > aside i {
    width: 50px;
  }

  .appearance-preview header {
    height: 39px;
    padding: 0 12px;
  }

  .appearance-preview main {
    padding: 14px;
  }

  .appearance-preview main section {
    gap: 6px;
    margin-top: 15px;
  }

  .appearance-preview main section i {
    height: 38px;
    border-radius: 9px;
  }

  .portal-theme-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portal-style-option {
    grid-template-columns: 74px minmax(0, 1fr);
  }
}

@supports not (background: color-mix(in srgb, red, blue)) {
  .app-body .topbar,
  .appearance-preview header,
  .app-body th,
  .app-body .v30-order-head {
    background: var(--brand-surface);
  }
}

@media print {
  .receipt-paper,
  .receipt-book,
  .booklet-toolbar {
    --brand: initial;
    --accent: initial;
  }
}