/* BudgetSync Point of Sale 1.0 */
.pos-nav-svg svg,
.mobile-menu-icon-v219 svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pos-module {
  display: grid;
  gap: 1.1rem;
}

.pos-tabs {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  gap: .45rem;
  overflow-x: auto;
  padding: .55rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(7, 16, 13, .94);
  backdrop-filter: blur(16px);
  scrollbar-width: none;
}
.pos-tabs::-webkit-scrollbar { display: none; }
.pos-tabs a {
  flex: 0 0 auto;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .62rem .78rem;
  border-radius: 12px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
}
.pos-tabs a svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pos-tabs a:hover,
.pos-tabs a.active {
  color: #06170f;
  background: var(--green);
}

.pos-content { display: grid; gap: 1.15rem; }
.pos-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}
.pos-page-head h1 {
  margin: .25rem 0 .35rem;
  font-size: clamp(2.3rem, 5vw, 4.7rem);
  letter-spacing: -.065em;
  line-height: .92;
}
.pos-page-head p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}
.pos-page-actions { display: flex; gap: .65rem; flex-wrap: wrap; justify-content: flex-end; }

.pos-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .9rem;
}
.pos-kpi-grid.compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pos-kpi {
  position: relative;
  min-height: 150px;
  display: grid;
  align-content: space-between;
  gap: .55rem;
  padding: 1.15rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(22, 47, 38, .92), rgba(10, 24, 19, .94));
}
.pos-kpi::after {
  content: "";
  position: absolute;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  right: -35px;
  top: -35px;
  background: rgba(99, 243, 186, .06);
}
.pos-kpi-green { background: linear-gradient(145deg, #29c7a4, #158c76); color: #04120d; }
.pos-kpi-green span,
.pos-kpi-green small { color: rgba(4, 18, 13, .72); }
.pos-kpi-warn { background: linear-gradient(145deg, rgba(255, 159, 67, .18), rgba(44, 31, 21, .92)); }
.pos-kpi span {
  color: #a9bdb4;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.pos-kpi strong { font-size: clamp(1.45rem, 3vw, 2.25rem); letter-spacing: -.04em; }
.pos-kpi small { color: var(--muted); }

.pos-two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .95rem; }
.pos-panel {
  min-width: 0;
  padding: 1.1rem;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(14, 31, 25, .92);
}
.pos-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.pos-panel > header h2 { margin: 0 0 .2rem; font-size: 1.05rem; }
.pos-panel > header p { margin: 0; color: var(--muted); font-size: .82rem; }
.pos-panel > header > a { color: var(--green); font-size: .8rem; font-weight: 800; }

.pos-list { display: grid; }
.pos-list-row {
  width: 100%;
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.pos-list-row:last-child { border-bottom: 0; }
.pos-list-row.static { cursor: default; }
.pos-list-row > span { display: grid; gap: .25rem; }
.pos-list-row > span:last-child { justify-items: end; text-align: right; }
.pos-list-row strong { font-size: .88rem; }
.pos-list-row small { color: var(--muted); }

.pos-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 25px;
  padding: .2rem .5rem;
  border-radius: 999px;
  color: #dfeae5;
  background: rgba(255, 255, 255, .06);
  font-size: .65rem;
  font-weight: 900;
  text-transform: capitalize;
}
.pos-status.completed,
.pos-status.paid,
.pos-status.active { color: var(--green); background: rgba(99, 243, 186, .09); }
.pos-status.held,
.pos-status.partial,
.pos-status.unpaid,
.pos-status.low,
.pos-status.received { color: var(--yellow); background: rgba(255, 209, 102, .09); }
.pos-status.refunded,
.pos-status.void,
.pos-status.inactive,
.pos-status.damaged,
.pos-status.expired,
.pos-status.lost { color: var(--red); background: rgba(255, 107, 107, .1); }

.pos-empty {
  min-height: 240px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: .65rem;
  padding: 2rem;
  border: 1px dashed var(--line);
  border-radius: 18px;
  color: var(--muted);
  text-align: center;
}
.pos-empty strong { color: var(--text); }
.pos-empty p { max-width: 470px; margin: 0; }
.pos-empty-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: var(--green);
  background: rgba(99, 243, 186, .08);
}
.pos-empty-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.pos-sell-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr); gap: .95rem; align-items: start; }
.pos-product-browser { min-height: 680px; }
.pos-product-browser > header { align-items: flex-end; }
.pos-search { max-width: 300px; }
.pos-product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.pos-product-card {
  min-height: 185px;
  display: grid;
  align-content: start;
  gap: .42rem;
  padding: .9rem;
  border: 1px solid var(--line);
  border-radius: 17px;
  color: var(--text);
  background: rgba(255, 255, 255, .025);
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
}
.pos-product-card:hover { transform: translateY(-2px); border-color: rgba(99, 243, 186, .3); background: rgba(99, 243, 186, .045); }
.pos-product-card:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.pos-product-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #04140d;
  background: linear-gradient(135deg, var(--green), var(--green-2));
  font-size: .75rem;
  font-weight: 950;
}
.pos-product-card strong { font-size: .88rem; }
.pos-product-card small { min-height: 34px; color: var(--muted); font-size: .72rem; }
.pos-product-card b { margin-top: auto; color: var(--green); font-size: 1rem; }
.pos-product-card em { color: #a7bab1; font-size: .68rem; font-style: normal; }
.pos-cart-panel { position: sticky; top: 80px; }
.pos-cart-count { color: var(--muted); font-size: .72rem; }
.pos-cart-lines { max-height: 380px; overflow-y: auto; }
.pos-cart-empty { min-height: 110px; display: grid; place-items: center; color: var(--muted); text-align: center; }
.pos-cart-line { display: grid; gap: .6rem; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.pos-cart-line > div:first-child { display: grid; gap: .2rem; }
.pos-cart-line small { color: var(--muted); }
.pos-cart-controls { display: grid; grid-template-columns: 32px 62px 32px 1fr 32px; gap: .35rem; align-items: center; }
.pos-cart-controls button {
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--text);
  background: rgba(255,255,255,.035);
  cursor: pointer;
}
.pos-cart-controls button.danger { color: var(--red); }
.pos-cart-controls input { height: 34px; padding: .35rem; text-align: center; }
.pos-cart-controls strong { justify-self: end; }
.pos-sale-fields { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .7rem; margin: 1rem 0; }
.pos-sale-fields label,
.pos-form-grid label,
.pos-toolbar label { display: grid; gap: .35rem; color: #d8e5de; font-size: .75rem; font-weight: 760; }
.pos-sale-fields .full,
.pos-form-grid .full { grid-column: 1 / -1; }
.pos-cart-summary { display: grid; gap: .55rem; padding: 1rem 0; border-top: 1px solid var(--line); }
.pos-cart-summary span { display: flex; justify-content: space-between; color: var(--muted); }
.pos-cart-summary strong { color: var(--text); }
.pos-cart-summary .total { padding-top: .65rem; border-top: 1px solid var(--line); color: var(--text); font-size: 1rem; }
.pos-cart-summary .total strong { color: var(--green); font-size: 1.4rem; }
.pos-checkout-actions { display: grid; grid-template-columns: 1fr 1.3fr; gap: .65rem; }

.pos-toolbar { display: flex !important; align-items: flex-end !important; justify-content: flex-start !important; flex-wrap: wrap; }
.pos-toolbar input,
.pos-toolbar select { min-width: 170px; }
.pos-table-wrap { width: 100%; overflow-x: auto; }
.pos-table { width: 100%; min-width: 760px; border-collapse: collapse; }
.pos-table th {
  padding: .65rem .75rem;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  font-size: .68rem;
  letter-spacing: .07em;
  text-align: left;
  text-transform: uppercase;
}
.pos-table td { padding: .78rem .75rem; border-bottom: 1px solid var(--line); font-size: .8rem; }
.pos-table tr:last-child td { border-bottom: 0; }
.pos-table td strong,
.pos-table td small { display: block; }
.pos-table td small { margin-top: .2rem; color: var(--muted); }
.pos-row-action {
  min-height: 34px;
  padding: .4rem .65rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  background: rgba(255,255,255,.03);
  cursor: pointer;
}
.text-good { color: var(--green) !important; }
.text-bad { color: var(--red) !important; }
.text-warn { color: var(--yellow) !important; }

.pos-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .75rem; }
.pos-contact-card { display: grid; gap: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.02); }
.pos-contact-card > header { display: grid; grid-template-columns: 42px 1fr auto; gap: .7rem; align-items: center; }
.pos-contact-card > header > span:first-child { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: #06170f; background: var(--green); font-size: .72rem; font-weight: 950; }
.pos-contact-card h3 { margin: 0; font-size: .9rem; }
.pos-contact-card p { margin: .2rem 0 0; color: var(--muted); font-size: .72rem; }
.pos-contact-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; margin: 0; }
.pos-contact-card dl div { display: grid; gap: .2rem; padding: .65rem; border-radius: 12px; background: rgba(255,255,255,.025); }
.pos-contact-card dt { color: var(--muted); font-size: .65rem; }
.pos-contact-card dd { margin: 0; font-size: .8rem; font-weight: 800; }
.pos-card-actions { display: grid; grid-template-columns: .7fr 1.3fr; gap: .55rem; }

.pos-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.pos-check { display: flex !important; grid-template-columns: auto 1fr; align-items: center; gap: .55rem !important; }
.pos-check input { width: 18px; }
.pos-form-actions { display: flex; justify-content: flex-end; padding-top: 1rem; }
.pos-settings-section { padding-top: .6rem; border-top: 1px solid var(--line); }
.pos-settings-section h3 { margin: 0 0 .3rem; }
.pos-settings-section p { margin: 0; color: var(--muted); }
.pos-purchase-lines { padding: .8rem; border: 1px solid var(--line); border-radius: 15px; }
.pos-purchase-lines > header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .65rem; }
.pos-purchase-line { display: grid; grid-template-columns: minmax(180px,1fr) 90px 110px 38px; gap: .45rem; margin-bottom: .45rem; }
.pos-purchase-line button { border: 1px solid var(--line); border-radius: 10px; color: var(--red); background: transparent; cursor: pointer; }

.pos-modal { width: min(840px, calc(100vw - 28px)); max-height: calc(100vh - 28px); padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; color: var(--text); background: #0b1a15; box-shadow: var(--shadow); }
.pos-modal::backdrop { background: rgba(0, 7, 5, .72); backdrop-filter: blur(6px); }
.pos-modal-shell { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: calc(100vh - 28px); }
.pos-modal-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 1.2rem; border-bottom: 1px solid var(--line); }
.pos-modal-head h2 { margin: .25rem 0 0; }
.pos-icon-button { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 12px; color: var(--text); background: rgba(255,255,255,.03); cursor: pointer; }
.pos-modal-body { padding: 1.2rem; overflow-y: auto; }
.pos-modal-actions { display: flex; justify-content: flex-end; gap: .65rem; padding: 1rem 1.2rem; border-top: 1px solid var(--line); }
.pos-detail-actions { display: flex; justify-content: flex-end; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
.pos-detail-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .65rem; margin-bottom: 1rem; }
.pos-detail-grid > div { display: grid; gap: .25rem; padding: .7rem; border-radius: 12px; background: rgba(255,255,255,.03); }
.pos-detail-grid span { color: var(--muted); font-size: .68rem; }
.pos-receipt { max-width: 620px; margin: auto; padding: 1rem; color: #f8fffb; background: #0e211a; border: 1px solid var(--line); border-radius: 18px; }
.pos-receipt > header { text-align: center; }
.pos-receipt > header h2 { margin: 0; }
.pos-receipt > header p { margin: .2rem 0; color: var(--muted); }
.pos-receipt-meta { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: 1rem 0; }
.pos-receipt-meta span,
.pos-receipt-totals span { display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); }
.pos-receipt-meta strong,
.pos-receipt-totals strong { color: var(--text); text-align: right; }
.pos-receipt table { width: 100%; border-collapse: collapse; }
.pos-receipt th,
.pos-receipt td { padding: .6rem .4rem; border-bottom: 1px solid var(--line); text-align: left; font-size: .78rem; }
.pos-receipt th:last-child,
.pos-receipt td:last-child { text-align: right; }
.pos-receipt td small { display: block; color: var(--muted); }
.pos-receipt-totals { display: grid; gap: .45rem; max-width: 340px; margin: 1rem 0 1rem auto; }
.pos-receipt-totals .total { padding-top: .6rem; border-top: 1px solid var(--line); font-size: 1rem; }
.pos-receipt > footer { padding-top: 1rem; border-top: 1px dashed var(--line); color: var(--muted); text-align: center; }
.pos-muted { color: var(--muted); }

@media (max-width: 1180px) {
  .pos-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pos-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pos-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pos-sell-layout { grid-template-columns: 1fr; }
  .pos-cart-panel { position: static; }
}

@media (max-width: 900px) {
  .pos-tabs { top: 64px; border-radius: 0; margin-inline: -14px; padding-inline: 14px; border-inline: 0; }
  .pos-page-head { align-items: stretch; flex-direction: column; }
  .pos-page-actions { justify-content: flex-start; }
  .pos-two-column { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .pos-page-head h1 { font-size: 2.65rem; }
  .pos-page-actions { display: grid; grid-template-columns: 1fr; }
  .pos-kpi-grid,
  .pos-kpi-grid.compact { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .pos-kpi { min-height: 130px; padding: .9rem; }
  .pos-kpi strong { font-size: 1.35rem; }
  .pos-panel { padding: .85rem; border-radius: 18px; }
  .pos-product-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: .55rem; }
  .pos-product-card { min-height: 160px; padding: .72rem; }
  .pos-sale-fields,
  .pos-form-grid { grid-template-columns: 1fr; }
  .pos-sale-fields .full,
  .pos-form-grid .full { grid-column: auto; }
  .pos-card-grid { grid-template-columns: 1fr; }
  .pos-purchase-line { grid-template-columns: 1fr 72px 90px 36px; }
  .pos-detail-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .pos-receipt-meta { grid-template-columns: 1fr; }
  .pos-modal-body { padding: .9rem; }
}

@media (max-width: 420px) {
  .pos-kpi-grid,
  .pos-kpi-grid.compact { grid-template-columns: 1fr; }
  .pos-product-grid { grid-template-columns: 1fr; }
  .pos-product-card { min-height: 140px; }
  .pos-cart-controls { grid-template-columns: 30px 54px 30px 1fr 30px; }
  .pos-checkout-actions { grid-template-columns: 1fr; }
  .pos-purchase-line { grid-template-columns: 1fr 1fr; }
  .pos-purchase-line select { grid-column: 1 / -1; }
  .pos-detail-grid { grid-template-columns: 1fr; }
}


/* BUDGETSYNC_POS_VISUAL_FIX_V234_START */

/* Correct heading spacing: the actual POS class is .pos-page-head. */
.pos-page-head {
  align-items: flex-start;
  row-gap: 1.15rem;
  margin-bottom: 1.2rem;
}

.pos-page-head > div:first-child {
  min-width: 0;
}

.pos-page-head h1 {
  margin: .42rem 0 1rem;
  line-height: 1;
  letter-spacing: -.058em;
  text-wrap: balance;
}

.pos-page-head p {
  margin: 0;
  max-width: 760px;
  color: rgba(226, 243, 235, .84);
  line-height: 1.55;
}

.pos-page-actions {
  padding-top: 3.7rem;
}

/* Improve readability on the actual KPI class: .pos-kpi. */
.pos-kpi span {
  color: rgba(210, 232, 222, .82);
}

.pos-kpi small {
  color: rgba(202, 225, 214, .76);
  line-height: 1.4;
}

.pos-kpi strong {
  color: #f4fffa;
}

/* The first green sales card needs dark, high-contrast text. */
.pos-kpi.pos-kpi-green,
.pos-kpi.pos-kpi-green strong {
  color: #031710;
}

.pos-kpi.pos-kpi-green span {
  color: rgba(3, 23, 16, .78);
}

.pos-kpi.pos-kpi-green small {
  color: rgba(3, 23, 16, .74);
}

/* Warning card readability. */
.pos-kpi.pos-kpi-warn span {
  color: rgba(255, 228, 197, .88);
}

.pos-kpi.pos-kpi-warn small {
  color: rgba(250, 218, 181, .76);
}

@media (max-width: 1100px) {
  .pos-page-actions {
    padding-top: 2.8rem;
  }
}

@media (max-width: 720px) {
  .pos-page-head {
    row-gap: .9rem;
    margin-bottom: 1rem;
  }

  .pos-page-head h1 {
    margin: .35rem 0 .8rem;
    font-size: clamp(2.45rem, 11vw, 3.6rem);
    line-height: 1;
  }

  .pos-page-head p {
    font-size: .96rem;
  }

  .pos-page-actions {
    width: 100%;
    padding-top: 0;
  }
}

/* BUDGETSYNC_POS_VISUAL_FIX_V234_END */


/* BUDGETSYNC_POS_SCROLL_FIX_V235_START */

/*
  The POS section navigation previously used position: sticky.
  Keeping it in normal document flow makes the complete POS page,
  including its navigation, scroll as one unit.
*/
.pos-tabs {
  position: static !important;
  top: auto !important;
}

@media (max-width: 900px) {
  .pos-tabs {
    position: static !important;
    top: auto !important;
  }
}

/* BUDGETSYNC_POS_SCROLL_FIX_V235_END */


/* BudgetSync POS v2.9 — visible horizontal section scrollbar */
.pos-tabs {
  scrollbar-width: auto !important;
  scrollbar-color: rgba(99,243,186,.72) rgba(255,255,255,.07) !important;
  padding-bottom: .72rem !important;
  overscroll-behavior-x: contain;
}
.pos-tabs::-webkit-scrollbar {
  display: block !important;
  height: 9px;
}
.pos-tabs::-webkit-scrollbar-track {
  background: rgba(255,255,255,.06);
  border-radius: 999px;
}
.pos-tabs::-webkit-scrollbar-thumb {
  background: rgba(99,243,186,.62);
  border-radius: 999px;
  border: 2px solid rgba(7,16,13,.94);
}
.pos-tabs::-webkit-scrollbar-thumb:hover {
  background: rgba(99,243,186,.9);
}
@media (max-width: 900px) {
  .pos-tabs { padding-bottom: .72rem !important; }
  .pos-page-head { min-width: 0; }
  .pos-page-head > div:first-child { min-width: 0; }
  .pos-page-actions { justify-content: flex-start; }
}