:root {
  --brown-dark: #705649;
  --brown: #836c61;
  --brown-soft: #ab9388;
  --beige: #d3c4b7;
  --rose-brown: #b88e7d;
  --rose-soft: #b58f7c;

  --white: #ffffff;

  --bg: #f7f3f0;
  --bg-soft: #fbf9f7;
  --line: #e8dfd9;

  --text: #5e4b42;
  --text-soft: #8e7c73;

  --shadow:
    0 0.2rem 0.7rem rgba(112, 86, 73, .06);

  --shadow-soft:
    0 0.1rem 0.4rem rgba(112, 86, 73, .045);

  /*
   * 整套 UI 都跟著 viewport 自動變
   * 不分手機 / 平板 / 電腦
   */
  --base-size:
    clamp(17px, calc(14px + 0.8vw), 21px);

  --font-xs: .78rem;
  --font-sm: .88rem;
  --font-md: 1rem;
  --font-lg: 1.14rem;
  --font-xl: 1.3rem;
  --font-2xl: 1.5rem;

  --space-xs: .3rem;
  --space-sm: .45rem;
  --space-md: .65rem;
  --space-lg: .9rem;
  --space-xl: 1.1rem;

  --control-height: 3.25rem;
}


/* ==================================================
   基礎
================================================== */

html {
  font-size: var(--base-size);

  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}


* {
  box-sizing: border-box;
}


html,
body {
  margin: 0;
  padding: 0;

  width: 100%;
  min-height: 100%;

  background: var(--bg);

  color: var(--text);

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Noto Sans TC",
    "PingFang TC",
    "Microsoft JhengHei",
    sans-serif;

  line-height: 1.28;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


body {
  min-height: 100vh;
}


button,
input,
select,
textarea {
  font-family: inherit;
}


button {
  border: none;
}


.hidden {
  display: none !important;
}


.app-shell {
  width: 100%;
  min-height: 100vh;
}


/* ==================================================
   Header
================================================== */

.top-header {
  position: sticky;
  top: 0;
  z-index: 20;

  width: 100%;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding:
    var(--space-md)
    var(--space-lg);

  background:
    rgba(247, 243, 240, .96);

  border-bottom:
    1px solid rgba(211, 196, 183, .6);
}


.brand-title {
  font-size: var(--font-xl);
  font-weight: 800;
  color: var(--brown-dark);
}


.store-badge {
  padding:
    .45rem
    .72rem;

  border-radius: 999px;

  background: #fff;

  border:
    1px solid var(--beige);

  color: var(--brown-dark);

  font-size: var(--font-sm);
  font-weight: 700;

  box-shadow: var(--shadow-soft);
}


/* ==================================================
   Page
================================================== */

.page {
  display: none;
  width: 100%;
}


.page.active {
  display: block;
}


/*
 * 只看現在可用寬度
 * 窄視窗自然變窄，寬視窗最多到合理寬度
 */
.home-wrap,
.content-section,
.page-topbar {
  width:
    min(
      calc(100% - clamp(.8rem, 3vw, 1.5rem)),
      68rem
    );

  margin-left: auto;
  margin-right: auto;
}


/* ==================================================
   首頁
================================================== */

.home-wrap {
  padding:
    var(--space-xl)
    0
    1.4rem;
}


.home-date-card {
  width: fit-content;

  margin-left: auto;
  margin-bottom: var(--space-md);

  padding:
    .55rem
    .8rem;

  border-radius: .82rem;

  background: var(--brown-dark);

  color: #fff;
}


.home-date-card span {
  display: block;
  margin-bottom: .1rem;

  font-size: var(--font-xs);
  opacity: .75;
}


.home-date-card strong {
  font-size: var(--font-lg);
}


.home-actions {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        min(14rem, 100%),
        1fr
      )
    );

  gap: var(--space-md);
}


.home-card {
  min-height:
    clamp(
      5.8rem,
      11vw,
      7rem
    );

  padding: var(--space-lg);

  display: flex;
  align-items: center;

  gap: var(--space-md);

  border-radius: 1rem;

  background: #fff;

  border:
    1px solid var(--line);

  color: var(--brown-dark);

  box-shadow: var(--shadow-soft);

  cursor: pointer;
}


.primary-card {
  background:
    linear-gradient(
      135deg,
      var(--brown-dark),
      var(--brown)
    );

  color: #fff;

  border-color: transparent;
}


.home-card-icon {
  width:
    clamp(2.7rem, 8vw, 3.2rem);

  height:
    clamp(2.7rem, 8vw, 3.2rem);

  display: grid;
  place-items: center;

  flex: 0 0 auto;

  border-radius: .75rem;

  background:
    rgba(255, 255, 255, .16);

  font-size: 1.6rem;
}


.outline-icon {
  background: var(--bg-soft);

  border:
    1px solid var(--line);

  color: var(--brown-dark);
}


.home-card-title {
  flex: 1;

  font-size: var(--font-xl);
  font-weight: 800;
}


.home-card-arrow {
  font-size: var(--font-xl);
  opacity: .7;
}


/* ==================================================
   Page top
================================================== */

.page-topbar {
  padding:
    var(--space-md)
    0
    var(--space-xs);

  display: grid;

  grid-template-columns:
    auto 1fr auto;

  align-items: center;
}


.page-topbar h2 {
  margin: 0;

  text-align: center;

  font-size: var(--font-2xl);

  color: var(--brown-dark);
}


.back-button {
  width: 2.7rem;
  height: 2.7rem;

  display: grid;
  place-items: center;

  border-radius: .72rem;

  background: #fff;

  border:
    1px solid var(--line);

  color: var(--brown-dark);

  font-size: var(--font-lg);

  box-shadow: var(--shadow-soft);

  cursor: pointer;
}


.page-topbar-spacer {
  width: 2.7rem;
}


/* ==================================================
   Content
================================================== */

.content-section {
  padding:
    var(--space-sm)
    0
    1.4rem;
}


.section-card,
.table-card {
  width: 100%;

  margin-bottom: var(--space-md);

  padding: var(--space-lg);

  border-radius: 1rem;

  background: #fff;

  border:
    1px solid var(--line);

  box-shadow: var(--shadow-soft);
}


.section-title-row {
  display: flex;

  justify-content: space-between;
  align-items: flex-start;

  gap: var(--space-md);

  margin-bottom: var(--space-md);
}


.section-title-row.simple {
  margin-bottom: var(--space-sm);
}


.section-title-row h3,
.overview-section-heading h3 {
  margin: 0;

  color: var(--brown-dark);

  font-size: var(--font-xl);

  font-weight: 800;
}


/* ==================================================
   訂單編號
================================================== */

.order-number-box {
  min-width:
    clamp(
      6.8rem,
      18vw,
      8rem
    );

  padding:
    .5rem
    .65rem;

  border-radius: .75rem;

  background: var(--bg-soft);

  border:
    1px solid var(--line);

  text-align: right;
}


.order-number-box span {
  display: block;
  margin-bottom: .1rem;

  font-size: var(--font-xs);

  color: var(--text-soft);
}


.order-number-box strong {
  font-size: var(--font-md);
  color: var(--brown-dark);
}


/* ==================================================
   Forms
================================================== */

.form-group {
  margin-top: var(--space-md);
}


.form-group:first-of-type {
  margin-top: 0;
}


.form-group label,
.item-field label {
  display: block;

  margin-bottom: var(--space-sm);

  color: var(--brown);

  font-size: var(--font-md);

  font-weight: 700;
}


.form-control,
.item-select,
.item-input {
  width: 100%;

  min-height: var(--control-height);

  padding:
    0
    .8rem;

  border-radius: .72rem;

  border:
    1px solid var(--line);

  background: var(--bg-soft);

  color: var(--text);

  font-size: 1rem;

  outline: none;
}


/*
 * Safari / Chrome 共通：
 * 表單永遠至少 16px
 * Safari 才不會因為點選欄位自動放大
 */
input,
select,
textarea {
  font-size:
    max(
      1rem,
      16px
    );
}


/* ==================================================
   管理員總覽館別
================================================== */

.overview-toolbar-controls {
  display: flex;

  align-items: center;
  justify-content: flex-end;

  gap: var(--space-sm);

  flex: 0 0 auto;

  min-width: 0;
}


.overview-store-select {
  min-height: 2.7rem;

  min-width:
    clamp(
      6rem,
      18vw,
      9rem
    );

  max-width: 10rem;

  padding:
    0
    1.7rem
    0
    .65rem;

  border-radius: .68rem;

  border:
    1px solid var(--line);

  background: var(--bg-soft);

  color: var(--brown);

  font-size:
    max(
      var(--font-sm),
      16px
    );

  font-weight: 700;

  outline: none;
}


/* ==================================================
   Add buttons
================================================== */

.add-button-row {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: var(--space-sm);
}


.add-item-button {
  min-height: 3.15rem;

  padding:
    .65rem
    .7rem;

  border-radius: .75rem;

  background: var(--brown-dark);

  color: #fff;

  font-size: var(--font-md);

  font-weight: 800;

  cursor: pointer;
}


.add-item-button.secondary {
  background: #fff;

  color: var(--brown-dark);

  border:
    1px solid var(--brown-soft);
}


/* ==================================================
   Items
================================================== */

.items-container {
  margin-top: var(--space-sm);

  display: flex;

  flex-direction: column;

  gap: var(--space-sm);
}


.item-card {
  padding: var(--space-md);

  border-radius: .85rem;

  background: var(--bg-soft);

  border:
    1px solid var(--line);
}


.item-card-header {
  display: flex;

  align-items: center;
  justify-content: space-between;

  margin-bottom: var(--space-sm);
}


.item-type-badge {
  padding:
    .35rem
    .58rem;

  border-radius: 999px;

  background:
    rgba(184, 142, 125, .14);

  color: var(--rose-brown);

  font-size: var(--font-sm);

  font-weight: 800;
}


.remove-item-button {
  width: 2.2rem;
  height: 2.2rem;

  display: grid;
  place-items: center;

  border-radius: .6rem;

  background: #fff;

  border:
    1px solid var(--line);

  color: var(--brown);

  font-size: var(--font-xl);

  cursor: pointer;
}


/*
 * 關鍵：
 * 課程 / 產品明細全部一欄
 *
 * 不再左右並排
 * 不會出現細長框
 */
.item-grid {
  display: grid;

  grid-template-columns: 1fr;

  gap: var(--space-md);
}


.item-grid .full {
  grid-column: 1;
}


.readonly-field {
  width: 100%;

  min-height: var(--control-height);

  padding:
    0
    .8rem;

  display: flex;
  align-items: center;

  border-radius: .72rem;

  border:
    1px solid var(--line);

  background: #f1ece8;

  color: var(--text-soft);

  font-size:
    max(
      1rem,
      16px
    );
}


/* ==================================================
   Empty
================================================== */

.empty-state {
  padding:
    var(--space-lg)
    var(--space-md);

  border-radius: .75rem;

  background: var(--bg-soft);

  border:
    1px dashed var(--beige);

  text-align: center;

  color: var(--text-soft);

  font-size: var(--font-sm);
}


.empty-state.large {
  padding:
    var(--space-xl)
    var(--space-lg);
}


/* ==================================================
   Summary
================================================== */

.summary-row {
  display: flex;

  flex-wrap: wrap;

  gap:
    var(--space-sm)
    var(--space-md);

  padding:
    var(--space-sm)
    0;

  border-bottom:
    1px solid var(--line);

  font-size: var(--font-md);
}


.summary-row strong {
  color: var(--brown-dark);
}


.grand-total-row {
  margin-top: var(--space-sm);

  padding: var(--space-md);

  display: flex;
  align-items: center;
  justify-content: space-between;

  border-radius: .8rem;

  background: var(--brown-dark);

  color: #fff;
}


.grand-total-row span {
  font-size: var(--font-md);
}


.grand-total-row strong {
  font-size: var(--font-2xl);
}


/* ==================================================
   Signature input
================================================== */

.signature-box {
  position: relative;

  overflow: hidden;

  width: 100%;

  min-height:
    clamp(
      14rem,
      40vw,
      19rem
    );

  border-radius: .85rem;

  background: #fffdfa;

  border:
    1.5px dashed var(--brown-soft);

  touch-action: none;
}


.signature-canvas {
  position: relative;

  z-index: 2;

  display: block;

  width: 100%;

  height:
    clamp(
      14rem,
      40vw,
      19rem
    );
}


.signature-placeholder {
  position: absolute;

  inset: 0;

  z-index: 1;

  display: grid;
  place-items: center;

  pointer-events: none;

  color: #c6b7af;

  font-size: var(--font-md);
}


.signature-actions {
  margin-top: var(--space-sm);

  display: flex;

  justify-content: flex-end;
}


.text-button {
  padding:
    .3rem
    .1rem;

  background: transparent;

  color: var(--brown);

  font-size: var(--font-sm);

  font-weight: 700;

  cursor: pointer;
}


/* ==================================================
   Main button
================================================== */

.primary-button {
  width: 100%;

  min-height: 3.2rem;

  padding:
    .7rem
    .85rem;

  border-radius: .75rem;

  background: var(--brown-dark);

  color: #fff;

  font-size: var(--font-md);

  font-weight: 800;

  cursor: pointer;
}


.primary-button:disabled {
  opacity: .55;

  cursor: default;
}


.submit-area {
  padding-bottom: var(--space-sm);
}


/* ==================================================
   Date toolbar
================================================== */

.date-toolbar {
  margin-bottom: var(--space-lg);

  padding: var(--space-md);

  display: flex;

  justify-content: space-between;
  align-items: center;

  gap: var(--space-sm);

  border-radius: .9rem;

  background: #fff;

  border:
    1px solid var(--line);

  box-shadow: var(--shadow-soft);
}


.date-toolbar-text {
  min-width: 0;
}


.date-toolbar-text span {
  display: block;

  margin-bottom: .1rem;

  font-size: var(--font-xs);

  color: var(--text-soft);
}


.date-toolbar-text strong {
  font-size: var(--font-lg);

  color: var(--brown-dark);
}


.date-picker-wrap {
  position: relative;

  flex: 0 0 auto;

  width:
    clamp(
      5rem,
      15vw,
      6rem
    );

  height: 2.7rem;

  overflow: hidden;

  border-radius: .68rem;
}


.date-picker-button {
  position: absolute;

  inset: 0;

  z-index: 1;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: .68rem;

  background: var(--bg-soft);

  border:
    1px solid var(--line);

  color: var(--brown);

  font-size: var(--font-sm);

  font-weight: 700;

  pointer-events: none;
}


/*
 * Safari / Chrome 都直接點真正的 date input
 */
.native-date-input {
  position: absolute;

  inset: 0;

  z-index: 5;

  display: block;

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  opacity: 0;

  border: 0;

  border-radius: .68rem;

  background: transparent;

  font-size: 16px !important;

  cursor: pointer;

  pointer-events: auto;

  touch-action: manipulation;

  -webkit-appearance: auto;
  appearance: auto;
}


.native-date-input::-webkit-calendar-picker-indicator {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  cursor: pointer;
}


/* ==================================================
   Overview
================================================== */

.section-block {
  margin-bottom: var(--space-lg);
}


.overview-section-heading {
  margin-bottom: var(--space-sm);

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: var(--space-sm);
}


.count-badge,
.confirmed-badge {
  padding:
    .38rem
    .6rem;

  border-radius: 999px;

  background:
    rgba(184, 142, 125, .14);

  color: var(--rose-brown);

  font-size: var(--font-sm);

  font-weight: 800;
}


.overview-orders-container {
  display: flex;

  flex-direction: column;

  gap: var(--space-sm);
}


.overview-order-card {
  padding: var(--space-md);

  border-radius: 1rem;

  background: #fff;

  border:
    1px solid var(--line);

  box-shadow: var(--shadow-soft);
}


.overview-order-header {
  margin-bottom: var(--space-sm);
}


.overview-order-number {
  font-size: var(--font-lg);

  font-weight: 800;

  color: var(--brown-dark);
}


.overview-order-time {
  margin-top: .1rem;

  font-size: var(--font-sm);

  color: var(--text-soft);
}


.overview-item-list {
  display: flex;

  flex-direction: column;

  gap: var(--space-xs);
}


.overview-item {
  padding:
    .55rem
    .65rem;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  align-items: start;

  gap: var(--space-sm);

  border-radius: .7rem;

  background: var(--bg-soft);
}


.overview-item-title {
  font-size: var(--font-md);

  font-weight: 800;

  color: var(--brown-dark);
}


.overview-item-sub {
  margin-top: .12rem;

  font-size: var(--font-sm);

  color: var(--text-soft);
}


.overview-item-value {
  min-width: 4.4rem;

  text-align: right;
}


.overview-item-amount {
  font-size: var(--font-md);

  font-weight: 800;

  color: var(--brown-dark);
}


.overview-item-duration {
  margin-top: .12rem;

  font-size: var(--font-sm);

  color: var(--text-soft);
}


.overview-order-summary {
  margin-top: var(--space-sm);

  padding-top: var(--space-sm);

  display: flex;

  flex-wrap: wrap;

  gap:
    var(--space-xs)
    var(--space-md);

  border-top:
    1px solid var(--line);

  font-size: var(--font-sm);
}


.overview-order-summary strong {
  color: var(--brown-dark);
}


/* ==================================================
   Signature preview
================================================== */

.signature-preview {
  width: 100%;

  margin-top: var(--space-sm);

  padding-top: var(--space-sm);

  border-top:
    1px solid var(--line);
}


.signature-preview-label {
  margin-bottom: var(--space-xs);

  font-size: var(--font-sm);

  color: var(--text-soft);
}


.signature-preview img,
.confirmed-signature-preview img {
  display: block;

  width: 100%;

  max-width: 100%;

  height: auto;

  max-height: none;

  margin: 0;

  object-fit: contain;
  object-position: center;

  border-radius: .6rem;

  background: #fffdfa;

  border:
    1px solid var(--line);
}


/* ==================================================
   Table
================================================== */

.table-card {
  padding: 0;

  overflow: hidden;
}


.table-scroll {
  overflow-x: auto;

  -webkit-overflow-scrolling: touch;
}


.summary-table {
  width: 100%;

  min-width: 34rem;

  border-collapse: collapse;
}


.summary-table th,
.summary-table td {
  padding:
    .65rem
    .75rem;

  border-bottom:
    1px solid var(--line);

  text-align: left;

  white-space: nowrap;

  font-size: var(--font-sm);
}


.summary-table th {
  background: #f4eeea;

  color: var(--brown);

  font-weight: 800;
}


.summary-table td {
  background: #fff;
}


.table-empty {
  padding:
    var(--space-xl)
    !important;

  text-align:
    center
    !important;

  color: var(--text-soft);
}


/* ==================================================
   Supervisor
================================================== */

.supervisor-heading {
  align-items: center;
}


.confirmed-info {
  width: 100%;

  padding: var(--space-md);

  border-radius: .8rem;

  background: var(--bg-soft);

  border:
    1px solid var(--line);
}


.confirmed-signature-preview {
  width: 100%;

  margin-bottom: var(--space-sm);
}


.confirmed-time-row {
  padding-top: var(--space-sm);

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: var(--space-sm);

  border-top:
    1px solid var(--line);

  font-size: var(--font-sm);
}


/* ==================================================
   Loading
================================================== */

.loading-overlay {
  position: fixed;

  inset: 0;

  z-index: 999;

  display: grid;
  place-items: center;

  background:
    rgba(90, 72, 63, .18);

  backdrop-filter: blur(2px);

  -webkit-backdrop-filter: blur(2px);
}


.loading-content {
  display: flex;

  flex-direction: column;

  align-items: center;

  gap: var(--space-xs);

  padding: 0;

  background: transparent;

  border: none;

  box-shadow: none;

  color: var(--brown-dark);

  font-size: var(--font-md);

  font-weight: 800;
}


.loading-spinner {
  width: 1.9rem;
  height: 1.9rem;

  border:
    .18rem solid rgba(112, 86, 73, .22);

  border-top-color:
    var(--brown-dark);

  border-radius: 50%;

  animation:
    spin .8s linear infinite;
}


@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}


/* ==================================================
   Toast
================================================== */

.toast {
  position: fixed;

  left: 50%;

  bottom:
    max(
      1.2rem,
      env(safe-area-inset-bottom)
    );

  z-index: 1000;

  max-width:
    calc(100% - 1.2rem);

  padding:
    .6rem
    .8rem;

  border-radius: 999px;

  background: var(--brown-dark);

  color: #fff;

  font-size: var(--font-sm);

  font-weight: 700;

  text-align: center;

  opacity: 0;

  pointer-events: none;

  transform:
    translate(
      -50%,
      .6rem
    );

  transition:
    .2s ease;
}


.toast.show {
  opacity: 1;

  transform:
    translate(
      -50%,
      0
    );
}


.toast.error {
  background: #8a5f52;
}


/* ==================================================
   窄 viewport

   不是手機版
   只是目前真的不夠寬才換行
================================================== */

@media (max-width: 32rem) {

  .home-actions {
    grid-template-columns: 1fr;
  }


  .summary-row {
    flex-direction: column;

    gap: .2rem;
  }


  .date-toolbar {
    align-items: flex-start;
  }


  .overview-toolbar-controls {
    flex-wrap: wrap;

    justify-content: flex-end;
  }

}


/* ==================================================
   非常窄 viewport
================================================== */

@media (max-width: 23rem) {

  .add-button-row {
    grid-template-columns: 1fr;
  }

}


/* ==================================================
   Safari 相容性

   Safari 特別容易對表單做 zoom，
   所以只補這件事，不另外做 Safari UI
================================================== */

@supports (-webkit-touch-callout: none) {

  input,
  select,
  textarea {
    font-size:
      max(
        1rem,
        16px
      );
  }


  .native-date-input {
    font-size: 16px !important;
  }

}


/* ==================================================
   Chrome / Chromium 相容性

   日期 input 保持整區可點
================================================== */

@supports selector(input::-webkit-calendar-picker-indicator) {

  .native-date-input::-webkit-calendar-picker-indicator {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    cursor: pointer;
  }

}


/* ==================================================
   Safe area
================================================== */

@supports (
  padding:
    max(0px)
) {

  .top-header {
    padding-left:
      max(
        var(--space-lg),
        env(safe-area-inset-left)
      );

    padding-right:
      max(
        var(--space-lg),
        env(safe-area-inset-right)
      );
  }


  body {
    padding-bottom:
      env(safe-area-inset-bottom);
  }

}


/* V1.7c: compact summary header and stable expanded card layout */
.overview-order-card { padding:0; overflow:hidden; min-width:0; }
.overview-order-header {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin:0; padding:12px 15px;
  cursor:pointer; list-style:none; min-width:0;
}
.overview-order-header::-webkit-details-marker { display:none; }
.overview-order-header::marker { content:''; }
.overview-order-header::after {
  content:''; display:block; width:9px; height:9px; flex:none;
  margin:0 4px 5px 3px;
  border-right:2px solid var(--brown); border-bottom:2px solid var(--brown);
  transform:rotate(45deg); transition:transform .15s ease;
}
.overview-order-card[open]>.overview-order-header {
  border-bottom:1px solid var(--line);
}
.overview-order-card[open]>.overview-order-header::after {
  transform:rotate(225deg); margin-top:5px; margin-bottom:0;
}
/* Expanded contents get inner padding, not extra outside width: prevents clipping
   at the card's right side and removes the awkward top/bottom blank strips. */
.overview-order-card>.overview-item-list {
  margin:0; padding:14px 14px 0; width:100%; min-width:0;
}
.overview-order-card>.overview-order-summary {
  margin:10px 14px 0; padding:10px 0 0;
}
.overview-order-card>.compact-button {
  display:inline-flex; width:auto; max-width:calc(100% - 28px);
  margin:10px 14px 14px; padding:8px 12px;
}
.overview-order-card>.signature-preview {
  width:auto; max-width:none; min-width:0;
  margin:0 14px 14px; padding:12px 0 0;
}
/* Fit signatures fully inside each card; never crop or distort the saved image. */
.overview-order-card .signature-preview img {
  display:block; width:auto; height:auto;
  max-width:100%; max-height:310px;
  margin:0 auto; padding:0; object-fit:contain;
  border:1px solid var(--line); border-radius:10px;
}
.confirmed-signature-preview {
  width:100%; min-width:0; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.confirmed-signature-preview img {
  display:block; width:auto; height:auto;
  max-width:100%; max-height:340px;
  margin:0 auto; padding:0; object-fit:contain;
  border:1px solid var(--line); border-radius:10px;
}
.confirmed-info { min-width:0; overflow:hidden; }
.overview-item-list,.overview-item,.overview-order-summary,.signature-preview { min-width:0; }
.overview-order-time { margin-left:auto; margin-top:0; }
#adminAuditTools,#adminRevokeWrap { display:inline-flex;max-width:100%;margin:5px 8px 8px 0!important; }
#adminAuditTools.hidden,#adminRevokeWrap.hidden { display:none; }
#adminAuditTools .add-item-button,#adminRevokeWrap .add-item-button,.compact-button {
  min-height:38px;padding:8px 12px;font-size:14px;font-weight:650;border-radius:9px;width:auto;
}
.overview-orders-container { gap:9px; }
.section-block { margin-bottom:16px; }
@media(max-width:540px) {
  .overview-order-header { gap:7px; }
  .overview-order-time { font-size:12px; }
  .overview-order-number { font-size:15px; }
  .overview-order-card .signature-preview img { max-height:230px; }
  .confirmed-signature-preview img { max-height:260px; }
}


/* V1.7b: horizontal monthly report with first two columns frozen across all devices */
#monthlyResult.table-scroll {position:relative; overflow-x:auto; overflow-y:visible; max-width:100%; -webkit-overflow-scrolling:touch; isolation:isolate;}
#monthlyResult .monthly-report-table {width:max-content; min-width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed;}
#monthlyResult .monthly-report-table th,
#monthlyResult .monthly-report-table td {box-sizing:border-box; min-width:94px; white-space:nowrap; padding:9px 11px; font-variant-numeric:tabular-nums;}
#monthlyResult .monthly-report-table th:nth-child(1),
#monthlyResult .monthly-report-table td:nth-child(1) {position:sticky; left:0; z-index:3; min-width:92px; width:92px; max-width:92px; background:#fff;}
#monthlyResult .monthly-report-table th:nth-child(2),
#monthlyResult .monthly-report-table td:nth-child(2) {position:sticky; left:92px; z-index:3; min-width:116px; width:116px; max-width:116px; background:#fff; box-shadow:2px 0 5px -3px #70544899;}
#monthlyResult .monthly-report-table th:nth-child(-n+2) {z-index:4; background:#f4eeea;}
#monthlyResult .monthly-report-table th {background:#f4eeea;}
/* Tablet: reduce wasted space; keep horizontal tables scrollable instead of squeezing columns. */
@media (min-width: 541px) and (max-width: 1100px) {
  .content-section {width:100%;max-width:100%;min-width:0;padding-inline:clamp(12px,2vw,22px);}
  .section-card {max-width:100%;min-width:0;}
  .item-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
  .table-scroll {max-width:100%;}
  #monthlyResult .monthly-report-table th, #monthlyResult .monthly-report-table td {padding:8px 9px;}
}
/* Phone: text remains readable; actions wrap instead of causing side-scroll. */
@media (max-width: 540px) {
  .content-section,.section-card,.page {max-width:100%;min-width:0;}
  .add-button-row {flex-wrap:wrap;gap:8px;}
  .page-topbar {min-width:0;}
  #monthlyResult .monthly-report-table th,#monthlyResult .monthly-report-table td {min-width:88px;padding:8px;}
  #monthlyResult .monthly-report-table th:nth-child(1),#monthlyResult .monthly-report-table td:nth-child(1) {min-width:70px;width:70px;max-width:70px;}
  #monthlyResult .monthly-report-table th:nth-child(2),#monthlyResult .monthly-report-table td:nth-child(2) {left:70px;min-width:93px;width:93px;max-width:93px;}
}