/* Tsukount v7.43.196 — POS layout proportions
   Single POS source: ts-pos* only.
   Goal: closer to the reference proportions while keeping Pacific/Harmony tokens. */

/* Page geometry */
.ts-pos {
  display: grid;
  grid-template-columns: minmax(820px, 1fr) minmax(430px, 470px);
  gap: 26px;
  align-items: start;
  width: 100%;
  max-width: 1840px;
  margin: 0 auto;
  padding: 0 18px 0 0;
  box-sizing: border-box;
}

.ts-pos-main {
  min-width: 0;
  max-width: 1180px;
}

/* Compact command bar: search + loyalty, no extra filter/select clutter */
.ts-pos-toolbar {
  display: grid;
  grid-template-columns: minmax(360px, 560px) minmax(280px, 380px);
  gap: 12px;
  align-items: center;
  margin: 0 0 18px;
  padding: 7px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ts-surface, #15171d) 84%, transparent), color-mix(in srgb, var(--ts-surface-2, #1b1f27) 78%, transparent));
  border: 1px solid color-mix(in srgb, var(--ts-line, rgba(255,255,255,.12)) 82%, transparent);
  box-shadow: 0 18px 44px rgba(0,0,0,.14);
}

.ts-pos-search {
  height: 42px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--ts-bg, #0b0c0f) 62%, transparent);
  border: 1px solid color-mix(in srgb, var(--ts-line, rgba(255,255,255,.12)) 58%, transparent);
  box-sizing: border-box;
}

.ts-pos-search span {
  color: var(--ts-muted-2, rgba(244,244,245,.44));
  font-size: 16px;
}

.ts-pos-search-field {
  min-width: 0;
  width: 100%;
  height: 42px;
  color: var(--ts-text, #fff);
  font-family: var(--ts-font-ui, Poppins, Inter, system-ui, sans-serif);
  font-size: 13px;
  font-weight: 750;
  line-height: 42px;
  overflow: hidden;
  white-space: nowrap;
  outline: none;
  border: 0;
  background: transparent;
  box-shadow: none;
  box-sizing: border-box;
}

.ts-pos-search-field:empty::before {
  content: attr(data-placeholder);
  color: var(--ts-muted-2, rgba(244,244,245,.44));
  pointer-events: none;
}

.ts-pos-loyalty {
  min-width: 0;
  justify-self: stretch;
  width: 100%;
}

.ts-pos-loyalty > * {
  min-height: 42px;
  max-height: 56px;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ts-surface-2, #1b1f27) 72%, transparent);
  border-color: var(--ts-line, rgba(255,255,255,.12));
}

/* Category rhythm */
.ts-pos-section {
  margin-top: 18px;
}

.ts-pos-section + .ts-pos-section {
  margin-top: 22px;
}

.ts-pos-section-title {
  margin: 0 0 10px;
  color: color-mix(in srgb, var(--ts-text, #fff) 76%, transparent);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.ts-pos-section-title::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--ts-accent, #9b6bb3);
  box-shadow: 0 0 12px var(--ts-accent-border, rgba(155,107,179,.34));
  vertical-align: 1px;
}

.ts-pos-section-title span {
  margin-left: 7px;
  padding: 1px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ts-text, #fff) 6%, transparent);
  color: var(--ts-muted-2, rgba(244,244,245,.44));
  font-size: 10px;
  letter-spacing: 0;
}

.ts-pos-section-hint {
  margin: -4px 0 10px;
  color: var(--ts-muted-2, rgba(244,244,245,.44));
  font-size: 12px;
}

/* Product grid: wider, more balanced, less "boxed dashboard" */
.ts-pos-products {
  display: grid;
  grid-template-columns: repeat(4, minmax(198px, 1fr));
  gap: 13px;
  max-width: 1120px;
  align-items: stretch;
}

.ts-pos-product {
  position: relative;
  min-height: 78px;
  height: 78px;
  padding: 0 13px 0 0;
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 0 12px;
  align-items: center;
  text-align: left;
  border-radius: 14px;
  overflow: hidden;
  color: var(--ts-text, #fff);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ts-text, #fff) 5%, transparent), color-mix(in srgb, var(--ts-text, #fff) 2.4%, transparent));
  border: 1px solid color-mix(in srgb, var(--ts-line, rgba(255,255,255,.12)) 74%, transparent);
  box-shadow: 0 12px 30px rgba(0,0,0,.15);
  cursor: pointer;
  transition: transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease;
}

.ts-pos-product:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--ts-accent, #9b6bb3) 30%, var(--ts-line, rgba(255,255,255,.12)));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ts-accent, #9b6bb3) 8%, transparent), color-mix(in srgb, var(--ts-text, #fff) 3%, transparent));
}

.ts-pos-product.is-active {
  border-color: var(--ts-accent-border, rgba(155,107,179,.34));
  background:
    linear-gradient(180deg, var(--ts-accent-soft, rgba(155,107,179,.14)), color-mix(in srgb, var(--ts-text, #fff) 2.4%, transparent));
}

.ts-pos-product.is-tombola {
  border-color: var(--ts-lux-border, rgba(243,212,155,.34));
  background:
    linear-gradient(180deg, var(--ts-lux-soft, rgba(243,212,155,.14)), color-mix(in srgb, var(--ts-text, #fff) 2.4%, transparent));
}

.ts-pos-product-icon {
  width: 70px;
  height: 78px;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 29px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--ts-text, #fff) 11%, transparent), color-mix(in srgb, var(--ts-text, #fff) 3.8%, transparent));
  border-right: 1px solid color-mix(in srgb, var(--ts-line, rgba(255,255,255,.12)) 58%, transparent);
}

.ts-pos-product-icon img,
.ts-pos-product-icon svg {
  display: block;
  max-width: 50px;
  max-height: 54px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 9px;
}

.ts-pos-product-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
}

.ts-pos-product-body strong {
  display: block;
  max-width: 100%;
  margin: 0;
  font-size: 13px;
  line-height: 1.08;
  font-weight: 900;
  color: var(--ts-text, #fff);
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 30px;
}

.ts-pos-product-body small {
  display: block;
  margin: 0;
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
  color: color-mix(in srgb, var(--ts-text, #fff) 78%, transparent);
  white-space: nowrap;
}

.ts-pos-qty {
  position: absolute;
  top: 7px;
  right: 7px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--ts-accent, #9b6bb3);
  color: #fff;
  font-size: 11px;
  line-height: 20px;
  font-weight: 1000;
  text-align: center;
  z-index: 3;
}

.ts-pos-provisional {
  position: absolute;
  top: 6px;
  left: 7px;
  z-index: 2;
  padding: 2px 5px;
  border-radius: 999px;
  background: var(--ts-lux-soft, rgba(243,212,155,.14));
  border: 1px solid var(--ts-lux-border, rgba(243,212,155,.34));
  color: var(--ts-lux, #f3d49b);
  font-size: 8px;
  line-height: 1;
  font-weight: 900;
  text-transform: uppercase;
}

.ts-pos-empty {
  margin-top: 20px;
  padding: 22px;
  border-radius: 14px;
  border: 1px dashed var(--ts-line, rgba(255,255,255,.12));
  color: var(--ts-muted, rgba(244,244,245,.68));
  background: color-mix(in srgb, var(--ts-text, #fff) 2.5%, transparent);
}

/* Cart: bigger like the reference, but internally disciplined */
.ts-pos-cart {
  width: 100%;
  height: calc(100vh - 120px);
  min-height: 560px;
  max-height: 820px;
  align-self: start;
  position: sticky;
  top: 72px;
  display: flex;
  flex-direction: column;
  padding: 18px;
  border-radius: 18px;
  overflow: hidden;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ts-surface, #15171d) 94%, transparent), color-mix(in srgb, var(--ts-bg, #0b0c0f) 92%, transparent));
  border: 1px solid var(--ts-accent-border, rgba(155,107,179,.34));
  box-shadow: var(--ts-shadow, 0 24px 70px rgba(0,0,0,.28));
  box-sizing: border-box;
}

.ts-cart-header,
.ts-cart-subtitle,
.ts-cart-discount,
.ts-cart-summary,
.ts-cart-actions {
  flex: 0 0 auto;
}

.ts-cart-header {
  display: flex;
  align-items: center;
  gap: 9px;
}

.ts-cart-header h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1;
}

.ts-cart-header span {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--ts-accent, #9b6bb3), var(--ts-accent-2, #65417f));
  color: #fff;
  font-size: 12px;
  font-weight: 1000;
  line-height: 22px;
  text-align: center;
}

.ts-cart-subtitle {
  margin: 10px 0 0;
  color: var(--ts-muted-2, rgba(244,244,245,.44));
  font-size: 12px;
}

.ts-cart-scroll {
  flex: 1 1 240px;
  min-height: 180px;
  margin: 14px 0 12px;
  overflow: auto;
  padding-right: 4px;
}

.ts-cart-empty {
  min-height: 240px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
  text-align: center;
  border: 1px dashed color-mix(in srgb, var(--ts-line, rgba(255,255,255,.12)) 70%, transparent);
  border-radius: 16px;
}

.ts-cart-empty-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, var(--ts-accent-soft, rgba(155,107,179,.14)), transparent 68%);
  font-size: 31px;
}

.ts-cart-empty b {
  font-size: 14px;
}

.ts-cart-empty span {
  color: var(--ts-muted, rgba(244,244,245,.68));
  font-size: 12px;
}

.ts-cart-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px 32px;
  gap: 10px;
  align-items: center;
  min-height: 52px;
  padding: 10px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--ts-text, #fff) 4.5%, transparent);
  border: 1px solid color-mix(in srgb, var(--ts-line, rgba(255,255,255,.12)) 62%, transparent);
  margin-bottom: 8px;
}

.ts-cart-line-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ts-cart-line-main strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.ts-cart-line-main small {
  color: var(--ts-muted, rgba(244,244,245,.68));
  font-size: 11px;
}

.ts-cart-qty {
  width: 58px;
  height: 34px;
  text-align: center;
  border-radius: 10px;
}

.ts-cart-special {
  text-align: center;
  color: var(--ts-muted, rgba(244,244,245,.68));
  font-weight: 900;
}

.ts-cart-remove {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 0;
  background: color-mix(in srgb, var(--ts-accent, #9b6bb3) 72%, var(--ts-danger));
  color: #fff;
  font-size: 18px;
  font-weight: 1000;
  cursor: pointer;
}

.ts-cart-discount {
  padding: 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--ts-text, #fff) 3.5%, transparent);
  border: 1px solid color-mix(in srgb, var(--ts-line, rgba(255,255,255,.12)) 66%, transparent);
}

.ts-cart-discount > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ts-cart-discount strong {
  font-size: 12px;
}

.ts-cart-discount small {
  display: block;
  margin-top: 8px;
  color: var(--ts-muted, rgba(244,244,245,.68));
  line-height: 1.35;
  font-size: 12px;
}

.ts-cart-discount button {
  width: 100%;
  min-height: 36px;
  margin-top: 10px;
  border-radius: 11px;
  border: 1px solid color-mix(in srgb, var(--ts-line, rgba(255,255,255,.12)) 86%, transparent);
  background: color-mix(in srgb, var(--ts-text, #fff) 6%, transparent);
  color: var(--ts-text, #fff);
  font-weight: 900;
  cursor: pointer;
}

.ts-cart-summary {
  margin-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--ts-line, rgba(255,255,255,.12)) 66%, transparent);
}

.ts-cart-summary > div {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--ts-line, rgba(255,255,255,.12)) 58%, transparent);
  color: var(--ts-muted, rgba(244,244,245,.68));
  font-size: 12px;
}

.ts-cart-summary b {
  color: var(--ts-text, #fff);
}

.ts-cart-summary .muted {
  opacity: .55;
  font-size: 11px;
}

.ts-cart-summary .grand {
  min-height: 46px;
  font-size: 13px;
  border-bottom: 0;
}

.ts-cart-summary .grand b {
  font-size: 24px;
  line-height: 1;
}

.ts-cart-actions {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 10px;
  margin-top: 12px;
}

.ts-cart-actions button {
  min-height: 42px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  font-weight: 1000;
  cursor: pointer;
}

.ts-cart-actions button:first-child {
  background: color-mix(in srgb, var(--ts-text, #fff) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--ts-line, rgba(255,255,255,.12)) 70%, transparent);
}

.ts-cart-actions button:last-child {
  background: linear-gradient(135deg, var(--ts-accent, #9b6bb3), var(--ts-accent-2, #65417f));
  box-shadow: 0 18px 42px var(--ts-accent-soft, rgba(155,107,179,.14));
}

/* Large laptop tuning */
@media (max-width: 1500px) {
  .ts-pos {
    grid-template-columns: minmax(720px, 1fr) minmax(400px, 430px);
    gap: 22px;
  }

  .ts-pos-products {
    grid-template-columns: repeat(4, minmax(172px, 1fr));
    max-width: 980px;
  }
}

/* Tablet / narrow */
@media (max-width: 1260px) {
  .ts-pos {
    grid-template-columns: 1fr;
    padding-right: 0;
  }

  .ts-pos-main {
    max-width: none;
  }

  .ts-pos-cart {
    position: relative;
    top: auto;
    height: auto;
    max-height: none;
  }

  .ts-pos-toolbar {
    grid-template-columns: 1fr;
  }

  .ts-pos-loyalty {
    justify-self: stretch;
    width: 100%;
  }

  .ts-pos-products {
    grid-template-columns: repeat(3, minmax(170px, 1fr));
    max-width: none;
  }
}


/* v7.43.259 — Henderson theme clean rebuild, loaded last in pos.css */

/* Global theme tokens */
html body.ts-henderson-shell:not([data-appearance="light"]):not([data-theme="light"]),
html body.ts-henderson-shell[data-theme="dark"],
html body.ts-henderson-shell[data-appearance="dark"]{
  color-scheme:dark;
  --h-bg:#07080d;
  --h-bg-2:#0d1018;
  --h-surface:rgba(18,20,29,.78);
  --h-surface-2:rgba(23,27,39,.72);
  --h-surface-strong:rgba(28,32,45,.92);
  --h-text:#f6f7fb;
  --h-muted:rgba(246,247,251,.64);
  --h-muted-2:rgba(246,247,251,.42);
  --h-line:rgba(255,255,255,.11);
  --h-line-strong:rgba(255,255,255,.17);
  --h-shadow:0 24px 70px rgba(0,0,0,.30);
  --h-glass:blur(18px) saturate(1.15);

  --ts-bg:var(--h-bg);
  --ts-bg-2:var(--h-bg-2);
  --ts-surface:var(--h-surface);
  --ts-surface-2:var(--h-surface-2);
  --ts-text:var(--h-text);
  --ts-muted:var(--h-muted);
  --ts-line:var(--h-line);

  background:
    radial-gradient(circle at 12% -10%, color-mix(in srgb, var(--ts-accent,#9b6bb3) 24%, transparent), transparent 34%),
    radial-gradient(circle at 86% -12%, color-mix(in srgb, var(--ts-lux,#f3d49b) 14%, transparent), transparent 32%),
    linear-gradient(180deg, var(--h-bg) 0%, var(--h-bg-2) 54%, #07080d 100%) !important;
  color:var(--h-text) !important;
}

html body.ts-henderson-shell[data-theme="light"],
html body.ts-henderson-shell[data-appearance="light"]{
  color-scheme:light;
  --h-bg:#f5f1e9;
  --h-bg-2:#ebe5da;
  --h-surface:rgba(255,255,255,.74);
  --h-surface-2:rgba(255,255,255,.62);
  --h-surface-strong:rgba(255,255,255,.88);
  --h-text:#171717;
  --h-muted:rgba(23,23,23,.64);
  --h-muted-2:rgba(23,23,23,.42);
  --h-line:rgba(23,23,23,.11);
  --h-line-strong:rgba(23,23,23,.17);
  --h-shadow:0 20px 60px rgba(23,23,23,.10);
  --h-glass:blur(18px) saturate(1.08);

  --ts-bg:var(--h-bg);
  --ts-bg-2:var(--h-bg-2);
  --ts-surface:var(--h-surface);
  --ts-surface-2:var(--h-surface-2);
  --ts-text:var(--h-text);
  --ts-muted:var(--h-muted);
  --ts-line:var(--h-line);

  background:
    radial-gradient(circle at 12% -10%, color-mix(in srgb, var(--ts-accent,#9b6bb3) 18%, transparent), transparent 36%),
    radial-gradient(circle at 86% -12%, color-mix(in srgb, var(--ts-lux,#f3d49b) 16%, transparent), transparent 34%),
    linear-gradient(180deg, var(--h-bg) 0%, var(--h-bg-2) 100%) !important;
  color:var(--h-text) !important;
}

/* Base layout inherits theme */
html body.ts-henderson-shell .layout,
html body.ts-henderson-shell .hendersonShell,
html body.ts-henderson-shell .main,
html body.ts-henderson-shell .pageChrome,
html body.ts-henderson-shell .content,
html body.ts-henderson-shell .page{
  background:transparent !important;
  color:var(--h-text) !important;
}

/* Henderson sidebar */
html body.ts-henderson-shell .sidebar{
  background:linear-gradient(180deg, color-mix(in srgb, var(--h-surface-strong) 88%, transparent), color-mix(in srgb, var(--h-surface) 88%, transparent)) !important;
  border-right:1px solid var(--h-line) !important;
  box-shadow:18px 0 60px rgba(0,0,0,.10) !important;
  backdrop-filter:var(--h-glass) !important;
  -webkit-backdrop-filter:var(--h-glass) !important;
}
html body.ts-henderson-shell .brand,
html body.ts-henderson-shell .brand *,
html body.ts-henderson-shell .nav,
html body.ts-henderson-shell .navItem,
html body.ts-henderson-shell .sideNav,
html body.ts-henderson-shell .sidebar strong,
html body.ts-henderson-shell .sidebar b{
  color:var(--h-text) !important;
}
html body.ts-henderson-shell .sidebar small,
html body.ts-henderson-shell .sectionLabel,
html body.ts-henderson-shell .nav small{
  color:var(--h-muted) !important;
}

/* Henderson header: premium, no black slab */
html body.ts-henderson-shell .appHeader,
html body.ts-henderson-shell .hendersonHeader,
html body.ts-henderson-shell header.appHeader{
  min-height:78px !important;
  margin-bottom:22px !important;
  padding:0 !important;
  background:
    radial-gradient(circle at 14% -20%, color-mix(in srgb, var(--ts-accent,#9b6bb3) 24%, transparent), transparent 38%),
    radial-gradient(circle at 92% -30%, color-mix(in srgb, var(--ts-lux,#f3d49b) 16%, transparent), transparent 36%),
    linear-gradient(180deg, color-mix(in srgb, var(--h-surface) 46%, transparent), transparent) !important;
  border:0 !important;
  border-bottom:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
html body.ts-henderson-shell .appHeader::before,
html body.ts-henderson-shell .appHeader::after,
html body.ts-henderson-shell .hendersonHeader::before,
html body.ts-henderson-shell .hendersonHeader::after{
  display:none !important;
  content:none !important;
}
html body.ts-henderson-shell .appHeader .title h1{
  color:var(--h-text) !important;
  letter-spacing:-.055em !important;
}
html body.ts-henderson-shell .appHeader .title p{
  color:var(--h-muted) !important;
}

/* Theme surfaces */
html body.ts-henderson-shell .card,
html body.ts-henderson-shell .panel,
html body.ts-henderson-shell .premiumPanel,
html body.ts-henderson-shell .modalBox,
html body.ts-henderson-shell .serviceBar,
html body.ts-henderson-shell .topAnnouncement,
html body.ts-henderson-shell .topAnnouncementMini,
html body.ts-henderson-shell .tableWrap,
html body.ts-henderson-shell .notice,
html body.ts-henderson-shell .serviceGate,
html body.ts-henderson-shell .kpiBox,
html body.ts-henderson-shell .metric,
html body.ts-henderson-shell .premiumKpi,
html body.ts-henderson-shell .companySwitchRow,
html body.ts-henderson-shell .userBox,
html body.ts-henderson-shell .activityItem,
html body.ts-henderson-shell .saleCard,
html body.ts-henderson-shell .roleCard,
html body.ts-henderson-shell .productCard,
html body.ts-henderson-shell .serviceCard,
html body.ts-henderson-shell .posCard,
html body.ts-henderson-shell .posShell,
html body.ts-henderson-shell .cartPanel,
html body.ts-henderson-shell .cartBox,
html body.ts-henderson-shell .salesProPanel,
html body.ts-henderson-shell .ts-pos-cart,
html body.ts-henderson-shell .ts-pos-toolbar,
html body.ts-henderson-shell .ts-pos-product,
html body.ts-henderson-shell .ts-cart-discount,
html body.ts-henderson-shell .ts-cart-line,
html body.ts-henderson-shell .ts-cart-item{
  background:var(--h-surface) !important;
  border-color:var(--h-line) !important;
  color:var(--h-text) !important;
  box-shadow:var(--h-shadow) !important;
  backdrop-filter:var(--h-glass) !important;
  -webkit-backdrop-filter:var(--h-glass) !important;
}

html body.ts-henderson-shell h1,
html body.ts-henderson-shell h2,
html body.ts-henderson-shell h3,
html body.ts-henderson-shell h4,
html body.ts-henderson-shell strong,
html body.ts-henderson-shell b,
html body.ts-henderson-shell label,
html body.ts-henderson-shell th,
html body.ts-henderson-shell td{
  color:var(--h-text) !important;
}
html body.ts-henderson-shell p,
html body.ts-henderson-shell small,
html body.ts-henderson-shell .muted,
html body.ts-henderson-shell .hint{
  color:var(--h-muted) !important;
}

html body.ts-henderson-shell input,
html body.ts-henderson-shell select,
html body.ts-henderson-shell textarea,
html body.ts-henderson-shell .searchInput{
  background:var(--h-surface-strong) !important;
  color:var(--h-text) !important;
  -webkit-text-fill-color:var(--h-text) !important;
  border-color:var(--h-line-strong) !important;
}

/* Switch */
html body.ts-henderson-shell .sidebarThemeSlot{
  flex:0 0 auto !important;
  padding:8px 8px 0 !important;
  display:flex !important;
  justify-content:center !important;
}
html body.ts-henderson-shell .themeModeToggle.sidebarThemeToggle{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  min-height:42px !important;
  padding:0 !important;
  border-radius:15px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:20px !important;
  line-height:1 !important;
  border:1px solid var(--h-line-strong) !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--ts-accent,#9b6bb3) 72%, var(--h-surface-strong)),
      color-mix(in srgb, var(--h-surface-strong) 84%, transparent)
    ) !important;
  color:var(--h-text) !important;
  box-shadow:0 14px 34px color-mix(in srgb, var(--ts-accent,#9b6bb3) 22%, transparent) !important;
  cursor:pointer !important;
  overflow:hidden !important;
}

/* Premium chart */
html body.ts-henderson-shell .comparisonChart{
  width:100% !important;
  margin-top:22px !important;
  padding:18px !important;
  border-radius:24px !important;
  border:1px solid var(--h-line) !important;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--ts-accent,#9b6bb3) 18%, transparent), transparent 34%),
    var(--h-surface) !important;
  box-shadow:var(--h-shadow) !important;
  color:var(--h-text) !important;
  backdrop-filter:var(--h-glass) !important;
}
html body.ts-henderson-shell .chartHeader{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:16px !important;
  margin-bottom:16px !important;
}
html body.ts-henderson-shell .chartHeader small,
html body.ts-henderson-shell .chartLegend{
  color:var(--h-muted) !important;
  font-weight:800 !important;
}
html body.ts-henderson-shell .chartHeader b{
  color:var(--h-text) !important;
  font-size:18px !important;
}
html body.ts-henderson-shell .chartLegend{
  display:flex !important;
  gap:10px !important;
  align-items:center !important;
  font-size:12px !important;
}
html body.ts-henderson-shell .chartLegend i{
  width:10px !important;
  height:10px !important;
  border-radius:999px !important;
  display:inline-block !important;
  background:var(--ts-accent,#9b6bb3) !important;
}
html body.ts-henderson-shell .chartPlot{
  height:190px !important;
  display:grid !important;
  grid-template-columns:repeat(7,minmax(0,1fr)) !important;
  align-items:end !important;
  gap:12px !important;
  padding:8px 4px 0 !important;
}
html body.ts-henderson-shell .chartDay{
  height:100% !important;
  display:grid !important;
  grid-template-rows:1fr auto !important;
  gap:9px !important;
  align-items:end !important;
  text-align:center !important;
}
html body.ts-henderson-shell .barStage{
  position:relative !important;
  height:100% !important;
  min-height:120px !important;
  display:flex !important;
  align-items:flex-end !important;
  justify-content:center !important;
  border-radius:18px !important;
  overflow:hidden !important;
  background:linear-gradient(180deg, color-mix(in srgb, var(--h-text) 5%, transparent), color-mix(in srgb, var(--h-text) 2%, transparent)) !important;
  border:1px solid var(--h-line) !important;
}
html body.ts-henderson-shell .currentBar{
  width:68% !important;
  min-height:4px !important;
  display:block !important;
  border-radius:14px 14px 6px 6px !important;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--ts-accent,#9b6bb3) 52%, white) 0%,
      var(--ts-accent,#9b6bb3) 58%,
      color-mix(in srgb, var(--ts-accent,#9b6bb3) 76%, black) 100%) !important;
}
html body.ts-henderson-shell .barStage em{
  position:absolute !important;
  top:8px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  white-space:nowrap !important;
  font-style:normal !important;
  font-size:11px !important;
  font-weight:950 !important;
  color:var(--h-text) !important;
  padding:4px 7px !important;
  border-radius:999px !important;
  background:var(--h-surface-strong) !important;
  border:1px solid var(--h-line) !important;
}
html body.ts-henderson-shell .chartDay span{
  color:var(--h-muted) !important;
  font-size:12px !important;
  font-weight:900 !important;
}


/* v7.43.260 — Light mode full coverage
   Covers: modals, cards/panels, inputs, tables, action menus, badges, misc
   Scoped to body[data-appearance="light"] for zero regression on dark. */

/* ── Modals ────────────────────────────────────────────────────────────────── */
body[data-appearance="light"] .modalBackdrop,
body[data-appearance="light"] .modalOverlay{
  background:rgba(23,23,23,.42) !important;
  backdrop-filter:blur(8px) !important;
}
body[data-appearance="light"] .modal,
body[data-appearance="light"] .modalCard,
body[data-appearance="light"] .tk-modal{
  background:var(--ts-surface,#fffdfa) !important;
  border:1px solid var(--ts-line,rgba(23,23,23,.12)) !important;
  color:var(--ts-text,#171717) !important;
  box-shadow:0 24px 80px rgba(23,23,23,.14) !important;
}
body[data-appearance="light"] .modalClose,
body[data-appearance="light"] .tk-modal .close{
  background:var(--ts-surface-2,#f6f2eb) !important;
  border-color:var(--ts-line,rgba(23,23,23,.12)) !important;
  color:var(--ts-text,#171717) !important;
}

/* ── Cards / panels ─────────────────────────────────────────────────────────── */
body[data-appearance="light"] .card,
body[data-appearance="light"] .panel,
body[data-appearance="light"] .tk-card,
body[data-appearance="light"] .stockCard,
body[data-appearance="light"] .roleCard,
body[data-appearance="light"] .gradeCard{
  background:var(--ts-surface,#fffdfa) !important;
  border-color:var(--ts-line,rgba(23,23,23,.12)) !important;
  color:var(--ts-text,#171717) !important;
  box-shadow:0 10px 30px rgba(23,23,23,.07) !important;
}

/* ── Tables ─────────────────────────────────────────────────────────────────── */
body[data-appearance="light"] .tableWrap,
body[data-appearance="light"] .tk-tableWrap{
  background:var(--ts-surface,#fffdfa) !important;
  border-color:var(--ts-line,rgba(23,23,23,.10)) !important;
}
body[data-appearance="light"] .table th,
body[data-appearance="light"] .tk-table th{
  background:var(--ts-surface-2,#f6f2eb) !important;
  color:var(--ts-text-secondary,rgba(23,23,23,.66)) !important;
  border-bottom:1px solid var(--ts-line,rgba(23,23,23,.10)) !important;
}
body[data-appearance="light"] .table td,
body[data-appearance="light"] .tk-table td{
  border-bottom:1px solid var(--ts-border-soft,rgba(23,23,23,.06)) !important;
  color:var(--ts-text,#171717) !important;
}
body[data-appearance="light"] .table tr:hover td,
body[data-appearance="light"] .tk-table tr:hover td{
  background:rgba(23,23,23,.04) !important;
}

/* ── Inputs / selects / textareas ────────────────────────────────────────────── */
body[data-appearance="light"] input,
body[data-appearance="light"] select,
body[data-appearance="light"] textarea{
  background:var(--ts-surface,#fffdfa) !important;
  border-color:var(--ts-line,rgba(23,23,23,.14)) !important;
  color:var(--ts-text,#171717) !important;
}
body[data-appearance="light"] input::placeholder,
body[data-appearance="light"] textarea::placeholder{
  color:var(--ts-text-muted,rgba(23,23,23,.44)) !important;
}
body[data-appearance="light"] select option{
  background:var(--ts-surface,#fffdfa) !important;
  color:var(--ts-text,#171717) !important;
}
body[data-appearance="light"] input:focus,
body[data-appearance="light"] select:focus,
body[data-appearance="light"] textarea:focus{
  border-color:var(--ts-accent,#8b5cf6) !important;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ts-accent,#8b5cf6) 18%, transparent) !important;
}

/* ── Edit items / choice blocks ─────────────────────────────────────────────── */
body[data-appearance="light"] .editItems,
body[data-appearance="light"] .totalBox,
body[data-appearance="light"] .rangeValue,
body[data-appearance="light"] .previewIcon{
  background:var(--ts-surface-2,#f6f2eb) !important;
  border-color:var(--ts-line,rgba(23,23,23,.12)) !important;
  color:var(--ts-text,#171717) !important;
}
body[data-appearance="light"] .editItemRow.header{
  background:var(--ts-surface-3,#eee8dc) !important;
  color:var(--ts-text-secondary,rgba(23,23,23,.66)) !important;
}
body[data-appearance="light"] .choiceBtn{
  background:var(--ts-surface,#fffdfa) !important;
  border-color:var(--ts-line,rgba(23,23,23,.14)) !important;
  color:var(--ts-text,#171717) !important;
}

/* ── Action menus (dropdown) ─────────────────────────────────────────────────── */
body[data-appearance="light"] .actionMenu,
body[data-appearance="light"] .tk-select-menu{
  background:var(--ts-surface,#fffdfa) !important;
  border-color:var(--ts-line,rgba(23,23,23,.12)) !important;
  color:var(--ts-text,#171717) !important;
  box-shadow:0 12px 40px rgba(23,23,23,.12) !important;
}
body[data-appearance="light"] .actionMenu button:hover,
body[data-appearance="light"] .tk-select-menu .option:hover{
  background:var(--ts-surface-2,#f6f2eb) !important;
}

/* ── Buttons (secondary/ghost/outline) ─────────────────────────────────────── */
body[data-appearance="light"] .btn,
body[data-appearance="light"] .miniBtn{
  background:var(--ts-surface-2,#f6f2eb) !important;
  border-color:var(--ts-line,rgba(23,23,23,.14)) !important;
  color:var(--ts-text,#171717) !important;
}
body[data-appearance="light"] .btn.blue,
body[data-appearance="light"] .btn.primary,
body[data-appearance="light"] .tk-btn--accent{
  background:var(--ts-accent,#8b5cf6) !important;
  color:#fff !important;
  border-color:transparent !important;
}
body[data-appearance="light"] .btn.red,
body[data-appearance="light"] .btn.danger,
body[data-appearance="light"] .tk-btn--danger{
  background:var(--ts-danger,#ef4444) !important;
  color:#fff !important;
  border-color:transparent !important;
}

/* ── Notice / alert bars ─────────────────────────────────────────────────────── */
body[data-appearance="light"] .notice,
body[data-appearance="light"] .noticeBar{
  background:var(--ts-surface-2,#f6f2eb) !important;
  border-color:var(--ts-line,rgba(23,23,23,.12)) !important;
  color:var(--ts-text,#171717) !important;
}

/* ── Body / html base ────────────────────────────────────────────────────────── */
body[data-appearance="light"]{
  background:var(--ts-bg,#f4f2ee) !important;
  color:var(--ts-text,#171717) !important;
}

/* ── Invoice sheet (stays white, fine) ──────────────────────────────────────── */
body[data-appearance="light"] .invoiceSheet{
  background:#fff !important;
  color:#111 !important;
}

/* v7.43.260b — Fix body background override from styles.css
   styles.css has html,body{background:#050515!important} which fights light mode.
   We re-assert the body background here (pos.css loads last = wins). */
html body.ts-henderson-shell[data-appearance="light"],
html body.ts-henderson-shell[data-theme="light"]{
  background:
    radial-gradient(circle at 12% -10%, color-mix(in srgb, var(--ts-accent,#9b6bb3) 18%, transparent), transparent 36%),
    radial-gradient(circle at 86% -12%, color-mix(in srgb, var(--ts-lux,#f3d49b) 16%, transparent), transparent 34%),
    linear-gradient(180deg, #f5f1e9 0%, #ebe5da 100%) !important;
  color:#171717 !important;
}