:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #f7f3ea;
  color: #20201d;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(247, 243, 234, 0.2)),
    #f7f3ea;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
}

button,
input {
  font: inherit;
}

button {
  touch-action: manipulation;
}

.shell {
  width: min(1120px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding: max(28px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(26px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 20px;
}

.reportsShell {
  grid-template-rows: auto auto 1fr;
}

.topbar,
.statusStrip,
.receiptPanel,
.cartHeader,
.adminHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.topbar h1,
.receiptPanel h2,
.adminPanel h2,
.dialog h2 {
  margin: 0;
  letter-spacing: 0;
}

.topbar h1 {
  font-size: clamp(32px, 6vw, 62px);
  line-height: 1;
}

.eyebrow {
  margin: 0 0 6px;
  color: #6b655c;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.operator {
  min-width: 230px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.operator span,
.operator small {
  display: block;
  text-align: right;
}

.operator span {
  font-weight: 800;
}

.operator small {
  color: #6b655c;
}

.iconButton {
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 50%;
  color: #fff8eb;
  background: #20201d;
  font-size: 14px;
  font-weight: 900;
}

.statusStrip,
.receiptPanel,
.cartPanel,
.adminPanel {
  padding: 16px 18px;
  border: 1px solid rgba(32, 32, 29, 0.12);
  border-radius: 8px;
  background: rgba(255, 252, 246, 0.86);
}

.statusStrip div {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #565046;
  font-weight: 750;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #d68b23;
}

.dot.online {
  background: #1f7a68;
}

.adminPanel {
  display: grid;
  gap: 14px;
}

.monthControls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.monthControls input {
  min-height: 50px;
  border: 1px solid rgba(32, 32, 29, 0.18);
  border-radius: 8px;
  padding: 0 12px;
  background: #fffaf0;
  font-weight: 850;
}

.dangerButton {
  border-color: rgba(181, 69, 60, 0.28);
  color: #b5453c;
}

.summaryCards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.summaryCards article {
  min-height: 82px;
  border-radius: 8px;
  padding: 12px;
  background: #20201d;
  color: #fff8eb;
  display: grid;
  align-content: space-between;
  gap: 8px;
}

.summaryCards span,
.summaryFact span,
.summaryProduct span {
  color: inherit;
  opacity: 0.78;
  font-size: 13px;
  font-weight: 850;
}

.summaryCards strong {
  font-size: 26px;
  line-height: 1;
}

.summaryBreakdown {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.summaryBreakdown h3 {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  font-size: 16px;
}

.summaryFact,
.summaryProduct {
  min-height: 50px;
  border: 1px solid rgba(32, 32, 29, 0.1);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fffaf0;
  display: grid;
  gap: 4px;
}

.summaryFact strong,
.summaryProduct strong {
  font-size: 16px;
}

.annualSummary {
  display: grid;
  gap: 12px;
  padding-top: 4px;
}

.annualSummaryHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.annualSummaryHeader div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.annualSummaryHeader span {
  color: #6e665b;
  font-size: 13px;
  font-weight: 850;
}

.annualSummaryHeader strong {
  color: #20201d;
  font-size: 24px;
  line-height: 1;
}

.annualChart {
  min-height: 220px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
  padding: 14px 8px 8px;
  border: 1px solid rgba(32, 32, 29, 0.1);
  border-radius: 8px;
  background: #fffaf0;
}

.annualBar {
  min-width: 0;
  height: 190px;
  display: grid;
  grid-template-rows: 1fr auto auto;
  align-items: end;
  gap: 6px;
  color: #4d463d;
  font-size: 12px;
  font-weight: 850;
  text-align: center;
}

.annualBar::before {
  content: "";
  width: 100%;
  height: var(--bar-height);
  min-height: 6px;
  border-radius: 8px 8px 3px 3px;
  background: linear-gradient(180deg, #1f7a68 0%, #2f9b86 100%);
}

.annualBar strong,
.annualBar small,
.annualBar span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.annualBar strong {
  color: #20201d;
  font-size: 12px;
}

.annualBar small {
  color: #7b7267;
  font-size: 11px;
}

.productGrid {
  min-height: 520px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  align-content: start;
}

.emptyState {
  grid-column: 1 / -1;
  min-height: 420px;
  border: 1px dashed rgba(32, 32, 29, 0.22);
  border-radius: 8px;
  background: rgba(255, 252, 246, 0.82);
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  padding: 32px;
}

.emptyState h2 {
  max-width: 620px;
  margin: 0;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.04;
}

.emptyState p:last-child {
  max-width: 560px;
  margin: 14px 0 0;
  color: #565046;
  font-weight: 700;
}

.productButton {
  position: relative;
  min-height: 188px;
  padding: 22px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: var(--product-color);
  box-shadow: 0 18px 40px rgba(32, 32, 29, 0.16);
  display: grid;
  align-content: space-between;
  justify-items: start;
  text-align: left;
  overflow: hidden;
}

.productButton:active {
  transform: translateY(2px) scale(0.995);
}

.productButton[disabled] {
  opacity: 0.45;
}

.productIcon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.22);
  font-size: 25px;
  font-weight: 900;
}

.productName {
  max-width: 100%;
  font-size: clamp(22px, 2.8vw, 34px);
  line-height: 1.02;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.productPrice {
  display: block;
  font-size: clamp(21px, 2.5vw, 32px);
  font-weight: 850;
}

.productMeta {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  font-weight: 850;
  opacity: 0.82;
}

.cartPanel {
  display: grid;
  gap: 14px;
}

.cartHeader h2 {
  margin: 0;
  font-size: 26px;
}

.cartLines {
  display: grid;
  gap: 8px;
}

.cartEmpty {
  margin: 0;
  color: #6b655c;
  font-weight: 750;
}

.cartLine {
  min-height: 66px;
  border: 1px solid rgba(32, 32, 29, 0.1);
  border-radius: 8px;
  padding: 8px 10px 8px 14px;
  background: #fffaf0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cartLine strong,
.cartLine span {
  display: block;
}

.cartLine strong {
  font-size: 17px;
}

.cartLine span {
  color: #565046;
  font-weight: 750;
}

.cartLineControls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.emailTicketControl {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid rgba(32, 32, 29, 0.1);
  border-radius: 8px;
  background: #fffaf0;
}

.checkboxControl {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #20201d;
  font-size: 17px;
  font-weight: 850;
}

.checkboxControl input {
  width: 28px;
  height: 28px;
  accent-color: #1f7a68;
}

.emailTicketControl input[type="email"] {
  width: 100%;
  min-height: 54px;
  border: 1px solid rgba(32, 32, 29, 0.2);
  border-radius: 8px;
  padding: 0 14px;
  background: #fff;
  color: #20201d;
  font-size: 20px;
  font-weight: 750;
}

.cartActionButton,
.cartRemoveButton {
  min-width: 48px;
  height: 48px;
  border: 0;
  border-radius: 8px;
  background: #20201d;
  color: #fff8eb;
  padding: 0 13px;
  font-size: 20px;
  font-weight: 800;
}

.cartActionButton.wide {
  min-width: 78px;
  font-size: 15px;
}

.finishSaleButton {
  min-height: 92px;
  width: 100%;
  border: 0;
  border-radius: 8px;
  padding: 0 24px;
  background: #1f7a68;
  color: #fff;
  box-shadow: 0 16px 34px rgba(31, 122, 104, 0.24);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  text-align: left;
}

.finishSaleButton span {
  font-size: clamp(23px, 2.6vw, 34px);
  font-weight: 950;
}

.finishSaleButton strong {
  font-size: clamp(23px, 2.5vw, 32px);
  white-space: nowrap;
}

.finishSaleButton[disabled] {
  opacity: 0.45;
  box-shadow: none;
}

.receiptPanel p {
  margin: 6px 0 0;
  color: #565046;
}

.receiptActions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.primaryButton,
.secondaryButton {
  min-height: 50px;
  border-radius: 8px;
  padding: 0 18px;
  font-weight: 850;
}

.primaryButton {
  border: 0;
  color: #fff8eb;
  background: #20201d;
}

.secondaryButton {
  border: 1px solid rgba(32, 32, 29, 0.18);
  color: #20201d;
  background: #fffaf0;
}

.dialog {
  width: min(480px, calc(100% - 28px));
  border: 0;
  border-radius: 8px;
  padding: 0;
  background: #fffaf0;
  box-shadow: 0 30px 80px rgba(32, 32, 29, 0.28);
}

.dialog::backdrop {
  background: rgba(32, 32, 29, 0.35);
}

.dialogContent {
  padding: 26px;
}

.dialogContent input {
  width: 100%;
  min-height: 56px;
  margin-top: 10px;
  border: 1px solid rgba(32, 32, 29, 0.2);
  border-radius: 8px;
  padding: 0 14px;
  background: #fff;
  font-size: 22px;
}

.dialogContent label {
  display: block;
  margin-top: 18px;
  color: #565046;
  font-weight: 800;
}

.dialogContent menu {
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.errorText {
  min-height: 22px;
  color: #b5453c;
  font-weight: 750;
}

.quantityTotal {
  margin: 16px 0 0;
  font-size: 24px;
  font-weight: 900;
}

@media (max-width: 700px) {
  .topbar,
  .receiptPanel,
  .cartHeader,
  .adminHeader,
  .finishSaleButton {
    align-items: flex-start;
    flex-direction: column;
  }

  .monthControls {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  .summaryCards,
  .summaryBreakdown,
  .annualChart {
    grid-template-columns: 1fr;
  }

  .annualBar {
    height: 44px;
    grid-template-columns: 42px 1fr 70px 44px;
    grid-template-rows: 1fr;
    align-items: center;
    text-align: left;
  }

  .annualBar::before {
    width: var(--bar-height);
    height: 14px;
    grid-column: 2;
    grid-row: 1;
    border-radius: 4px;
  }

  .annualBar span {
    grid-column: 1;
  }

  .annualBar strong {
    grid-column: 3;
  }

  .annualBar small {
    grid-column: 4;
    text-align: right;
  }

  .operator {
    width: 100%;
    justify-content: flex-start;
  }

  .operator span,
  .operator small {
    text-align: left;
  }

  .statusStrip {
    align-items: flex-start;
    flex-direction: column;
  }

  .productGrid {
    grid-template-columns: 1fr;
    min-height: 0;
  }
}

@media (min-width: 960px) {
  .shell {
    width: min(1180px, 100%);
    height: 100vh;
    height: 100dvh;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "topbar topbar"
      "status status"
      "admin admin"
      "products cart"
      "receipt receipt";
  }

  .reportsShell {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "topbar"
      "status"
      "admin";
  }

  .topbar {
    grid-area: topbar;
  }

  .statusStrip {
    grid-area: status;
  }

  .adminPanel {
    grid-area: admin;
  }

  .productGrid {
    grid-area: products;
    min-height: 0;
    overflow: auto;
    padding-right: 2px;
    overflow-x: hidden;
    grid-template-columns: minmax(0, 1fr);
  }

  .cartPanel {
    grid-area: cart;
    min-height: 0;
    align-self: stretch;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
  }

  .cartLines {
    overflow: auto;
    align-content: start;
  }

  .receiptPanel {
    grid-area: receipt;
  }
}

@media (min-width: 1120px) {
  .shell {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 390px);
  }

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

@media (min-width: 1024px) {
  .productGrid {
    grid-template-columns: repeat(3, minmax(190px, 1fr));
  }
}