/* ===========================================================================
   COMPONENTS — buttons, cards, badges, forms, tables, modals, toasts
   =========================================================================== */

/* ---- Button ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px 20px;
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: 1.2;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-main);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-ios);
  min-height: var(--touch-min);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
}

.btn:disabled,
.btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn:active {
  transform: scale(0.98);
}

.btn-primary {
  background: var(--grad-gold);
  color: var(--text-on-gold);
  border-color: var(--gold-active);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  background: var(--grad-gold);
  filter: brightness(1.07);
  border-color: var(--gold-hover);
  box-shadow: var(--shadow-md);
}

.btn-primary:active {
  background: var(--grad-gold);
  filter: brightness(0.94);
}

.btn-secondary {
  background: var(--bg-card);
  color: var(--text-main);
  border-color: var(--border-medium);
}

.btn-secondary:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}

.btn-ghost {
  background: transparent;
  color: var(--text-body);
}

.btn-ghost:hover {
  background: var(--bg-hover);
  color: var(--text-main);
}

.btn-danger {
  background: var(--danger);
  color: var(--text-inverse);
  border-color: var(--danger);
}

.btn-danger:hover {
  background: #C93E42;
  border-color: #C93E42;
}

.btn-success {
  background: var(--success);
  color: var(--text-inverse);
  border-color: var(--success);
}

.btn-sm {
  min-height: 32px;
  padding: 6px 12px;
  font-size: var(--text-sm);
}

.btn-lg {
  min-height: 48px;
  padding: 12px 24px;
  font-size: var(--text-lg);
}

.btn-block {
  width: 100%;
}

.btn-icon {
  padding: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
}

/* ---- Card ---- */
/* Lightweight glass (matches .bento-widget): translucent fill + inner top
   highlight + soft gold depth. No backdrop-filter — the static aura painted
   on .app-main supplies the glass reading at zero runtime cost. */
.card {
  background: rgba(255, 255, 255, 0.64);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 18px 44px -24px rgba(183, 133, 46, 0.35);
  transition: box-shadow var(--dur-base) var(--ease-ios);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-soft);
}

.card-title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

.card-subtitle {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.card-body {
  padding: 0;
}

/* ---- KPI Card ---- */
.kpi {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  position: relative;
  overflow: hidden;
}

.kpi::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, var(--gold-light) 0%, transparent 70%);
  opacity: 0.6;
  border-radius: 50%;
  transform: translate(30%, -30%);
}

.kpi-label {
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-weight: var(--weight-medium);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  position: relative;
  z-index: 1;
}

.kpi-value {
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--text-main);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  position: relative;
  z-index: 1;
}

.kpi-diff {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  position: relative;
  z-index: 1;
}

.kpi-diff.up {
  background: var(--success-bg);
  color: var(--success);
}

.kpi-diff.down {
  background: var(--danger-bg);
  color: var(--danger);
}

.kpi-diff.flat {
  background: var(--bg-subtle);
  color: var(--text-muted);
}

/* ---- Badge ---- */
/* nowrap · ป้ายสถานะเป็นคำสั้น ๆ พอช่องแคบแล้วตัดคำไทยกลางคำ ข้อความจะอ่านสลับกัน
   เช่น “ปิดรับทันที (แผนนี้)” กลายเป็น “ปิดรับ (แผน / ทันที นี้)” · ให้ pill ดันคอลัมน์แทน
   line-height 1.6 · 1.4 ไม่พอสำหรับสระล่าง/วรรณยุกต์ล่างไทย (ู ใน “สูงสุด”) จะโดนเฉือน */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
  color: var(--text-body);
  border: 1px solid transparent;
  line-height: 1.6;
  white-space: nowrap;
}

.badge-success {
  background: var(--success-bg);
  color: var(--success);
  border-color: var(--success-border);
}

.badge-danger {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: var(--danger-border);
}

.badge-warning {
  background: var(--warning-bg);
  color: var(--warning);
  border-color: var(--warning-border);
}

.badge-info {
  background: var(--info-bg);
  color: var(--info);
  border-color: var(--info-border);
}

.badge-gold {
  background: var(--gold-soft);
  color: var(--gold-active);
  border-color: var(--gold-primary);
}

/* ลูกค้าที่ใช้เกินวงเงิน — สถานะรุนแรงสุดในตารางลูกค้าที่รับผิดชอบ
   (keyframe ข้างล่างเคยเป็น orphan ไม่มี selector ไหนเรียก badge จึงไม่มีสี) */
.badge-over-credit {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: var(--danger-border);
  animation: badge-over-credit-pulse 2s ease-in-out infinite;
}

/* ใช้วงเงินหมดพอดี — คีย์เพิ่มไม่ได้เหมือนกัน แต่ยังไม่ติดลบ จึงไม่ต้องกะพริบ */
.badge-out-of-credit {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: var(--danger-border);
}

@keyframes badge-over-credit-pulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(229, 72, 77, 0.35);
  }

  50% {
    box-shadow: 0 0 0 4px rgba(229, 72, 77, 0);
  }
}

.badge-dot::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ---- Form ---- */
.form-group {
  margin-bottom: var(--space-4);
}

.form-label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-body);
}

.form-label .required {
  color: var(--danger);
  margin-left: 2px;
}

.form-input,
.form-select,
.form-textarea {
  display: block;
  width: 100%;
  padding: 10px 14px;
  font-family: inherit;
  font-size: var(--text-base);
  line-height: 1.4;
  color: var(--text-main);
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease-ios),
    box-shadow var(--dur-fast) var(--ease-ios);
  min-height: 44px;
}

.form-input:hover,
.form-select:hover,
.form-textarea:hover {
  border-color: var(--border-medium);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--gold-primary);
  box-shadow: var(--shadow-focus);
}

.form-input::placeholder {
  color: var(--text-subtle);
}

.form-input.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid {
  border-color: var(--danger);
}

.form-input.is-invalid:focus {
  box-shadow: var(--shadow-danger-focus);
}

.form-textarea {
  min-height: 96px;
  resize: vertical;
}

.form-help {
  margin-top: 4px;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.form-error {
  margin-top: 4px;
  font-size: var(--text-xs);
  color: var(--danger);
}

.form-check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  user-select: none;
}

.form-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--gold-primary);
  cursor: pointer;
}

.input-group {
  display: flex;
  align-items: stretch;
}

.input-group>.form-input {
  border-radius: 0;
}

.input-group>.form-input:first-child {
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
}

.input-group>.form-input:last-child {
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

.input-group>.form-input+.form-input {
  border-left: 0;
}

/* ---- Segmented control (iOS style) ---- */
.segment {
  display: inline-flex;
  padding: 3px;
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  gap: 2px;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;

}

.segment-item {
  padding: 6px 14px;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-radius: calc(var(--radius-md) - 3px);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-ios);
  min-width: fit-content;
}

.segment-item:hover {
  color: var(--text-main);
}

.segment-item.is-active {
  background: var(--bg-card);
  color: var(--text-main);
  box-shadow: var(--shadow-xs);
}

/* ปุ่มช่วงที่ถูกปิดตอนเจาะลึกงวดเดียว — ต้องยังเห็นอยู่และบอกเหตุผลได้
   ไม่ใช่หายไปเงียบ ๆ จนผู้ใช้หาไม่เจอว่าตัวเลือกไปไหน */
.segment-item.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ---- Finance report · ตัวเลือกเจาะลึกรายงวด ---- */
.finance-round-picker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
}

.finance-round-picker__label {
  font-size: var(--text-sm);
  color: var(--text-muted);
  white-space: nowrap;
}

.finance-round-picker .form-select {
  width: auto;
  min-width: 200px;
}

.finance-drill-note {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
}

/* ---- Table ---- */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.table thead th {
  background: var(--gold-light);
  color: var(--text-body);
  font-weight: var(--weight-semibold);
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-soft);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-body);
}

.table tbody tr:hover {
  background: var(--bg-hover);
}

.table tbody tr:last-child td {
  border-bottom: 0;
}

.table td.num,
.table th.num {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.table-wrapper {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.table-scroll .table {
  min-width: max-content;
}

.table-scroll .table.table-cards-mobile {
  min-width: 100%;
}

/* ---- .table-fit · ตารางแอดมินที่ต้องพอดีจอ ไม่ต้องเลื่อนแนวนอน ----
   ปกติ .table-scroll บังคับ min-width: max-content ตารางจึงกว้างตามเนื้อหาเสมอ
   คอลัมน์ท้าย (ปุ่ม action) เลยหลุดขอบขวา ต้องเลื่อนถึงจะกดได้
   .table-fit ปล่อยให้ตารางย่อลงพอดีจอ แล้วให้ช่องยาว ๆ ตัดด้วย .cell-truncate แทน */
.table-scroll .table.table-fit {
  min-width: 0;
  width: 100%;
}

.table-fit thead th,
.table-fit tbody td {
  padding: 10px 12px;
}

.table-fit .cell-truncate {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- .table-sticky-actions · คอลัมน์ปุ่มค้างขอบขวาเสมอ ----
   กันเคสจอแคบ/เนื้อหายาวจนตารางยังล้น · ปุ่มต้องกดได้โดยไม่ต้องเลื่อนหา */
.table-sticky-actions thead th:last-child,
.table-sticky-actions tbody td:last-child {
  position: sticky;
  right: 0;
  z-index: 2;
  background: var(--bg-card);
}

.table-sticky-actions thead th:last-child {
  z-index: 3;
  background: var(--gold-light);
}

.table-sticky-actions tbody tr:hover td:last-child {
  background: var(--bg-hover);
}

/* เส้น/เงาคั่นวาดด้วย pseudo · border ของ td ใน border-collapse: collapse ไม่ติดไปกับ sticky */
.table-sticky-actions thead th:last-child::before,
.table-sticky-actions tbody td:last-child::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 12px;
  transform: translateX(-100%);
  pointer-events: none;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0));
}

@media (max-width: 640px) {
  .table-cards-mobile {
    border: 0;
    min-width: 0 !important;
    width: 100%;
  }

  .table-cards-mobile thead {
    position: absolute;
    left: -9999px;
    top: -9999px;
  }

  .table-cards-mobile,
  .table-cards-mobile tbody,
  .table-cards-mobile tr,
  .table-cards-mobile td {
    display: block;
    width: 100%;
  }

  .table-cards-mobile tr {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    padding: var(--space-3);
    box-shadow: var(--shadow-xs);
  }

  .table-cards-mobile tr:hover {
    background: var(--bg-card);
  }

  .table-cards-mobile td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    text-align: right;
    padding: 6px 0;
    border-bottom: 1px dashed var(--border-soft);
    gap: var(--space-3);
  }

  .table-cards-mobile td:last-child {
    border-bottom: 0;
  }

  .table-cards-mobile td[data-label]::before {
    content: attr(data-label);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
    flex-shrink: 0;
    max-width: 40%;
  }

  .table-cards-mobile td.num {
    text-align: right;
    font-weight: var(--weight-semibold);
  }

  .table-cards-mobile td[data-hide-mobile] {
    display: none;
  }

  .table-scroll:has(.table-cards-mobile) {
    overflow-x: visible;
  }
}

/* ---- Alert ---- */
.alert {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border: 1px solid;
  margin-bottom: var(--space-4);
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.alert-success {
  background: var(--success-bg);
  color: var(--success);
  border-color: var(--success-border);
}

.alert-danger {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: var(--danger-border);
}

.alert-warning {
  background: var(--warning-bg);
  color: var(--warning);
  border-color: var(--warning-border);
}

.alert-info {
  background: var(--info-bg);
  color: var(--info);
  border-color: var(--info-border);
}

/* ---- Toast ---- */
.toast-container {
  position: fixed;
  bottom: var(--space-5);
  right: var(--space-5);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
  max-width: calc(100% - 2 * var(--space-5));
}

.toast {
  min-width: 280px;
  max-width: 380px;
  padding: 12px 16px;
  background: var(--bg-card);
  color: var(--text-main);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-soft);
  border-left-width: 4px;
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  pointer-events: auto;
  transform: translateX(120%);
  transition: transform var(--dur-base) var(--ease-out);
  font-size: var(--text-sm);
}

.toast.is-visible {
  transform: translateX(0);
}

.toast-success {
  border-left-color: var(--success);
}

.toast-danger {
  border-left-color: var(--danger);
}

.toast-warning {
  border-left-color: var(--warning);
}

.toast-info {
  border-left-color: var(--info);
}

.toast-icon {
  flex-shrink: 0;
  font-size: var(--text-lg);
}

.toast-body {
  flex: 1;
  min-width: 0;
}

.toast-title {
  font-weight: var(--weight-semibold);
  margin-bottom: 2px;
}

.toast-close {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  font-size: var(--text-lg);
}

.toast-action {
  border: 1px solid var(--gold-primary);
  background: transparent;
  color: var(--gold-active);
  padding: 4px 10px;
  border-radius: var(--radius-xs);
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: all 120ms ease;
  white-space: nowrap;
}

.toast-action:hover {
  background: var(--gold-primary);
  color: white;
}

.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  overflow: hidden;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

.toast-progress-bar {
  height: 100%;
  background: var(--gold-primary);
  transform-origin: right center;
  animation: toast-progress linear forwards;
}

@keyframes toast-progress {
  from {
    transform: scaleX(1);
  }

  to {
    transform: scaleX(0);
  }
}

.toast {
  position: relative;
}

@media (max-width: 640px) {
  .toast-container {
    left: var(--space-3);
    right: var(--space-3);
    bottom: var(--space-3);
  }

  body:has(.mobile-nav) .toast-container {
    bottom: calc(64px + var(--space-3) + env(safe-area-inset-bottom, 0px));
  }

  .toast {
    min-width: unset;
    max-width: unset;
    width: 100%;
  }
}

/* ---- Draft Status Indicator (betting page) ---- */
.bet-draft-status {
  font-size: 12px;
  color: var(--text-muted);
  align-self: center;
  padding: 0 var(--space-2);
  white-space: nowrap;
  min-width: 0;
  transition: color 0.2s ease;
}

.bet-draft-status[data-status="saved"] {
  color: var(--success, #16a34a);
}

.bet-draft-status[data-status="failed"] {
  color: var(--danger, #dc2626);
  font-weight: 500;
}

@media (max-width: 640px) {
  .bet-draft-status {
    width: 100%;
    text-align: right;
    padding: 0;
  }
}

/* ---- Modal ---- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(28, 28, 30, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-ios);
  padding: var(--space-4);
}

.modal-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Modal surface — iOS glass: near-opaque (86%) so content stays fully
   readable, real blur is fine here (one transient element, static page
   behind it). Danger modals stay solid — see .danger-modal-card. */
.modal {
  background: rgba(255, 253, 247, 0.86);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: var(--radius-xl);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), var(--shadow-xl);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow: auto;
  transform: scale(0.94);
  transition: transform var(--dur-base) var(--ease-out);
}

.modal-backdrop.is-open .modal {
  transform: scale(1);
}

.modal-header {
  padding: var(--space-5);
  border-bottom: 1px solid var(--border-soft);
}

.modal-body {
  padding: var(--space-5);
}

.modal-footer {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-soft);
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
}

/* ---- Empty state ---- */
.empty-state {
  text-align: center;
  padding: var(--space-9) var(--space-5);
  color: var(--text-muted);
}

.empty-state-icon {
  font-size: 48px;
  margin-bottom: var(--space-3);
  opacity: 0.4;
  color: var(--gold-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-state-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--text-body);
  margin-bottom: var(--space-2);
}

.empty-state-desc {
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}

/* ---- Skeleton loader ---- */
.skeleton {
  background: linear-gradient(90deg,
      var(--bg-subtle) 0%,
      var(--bg-hover) 50%,
      var(--bg-subtle) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

@keyframes skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

.skeleton-text {
  height: 1em;
  margin-bottom: 8px;
}

.skeleton-block {
  width: 100%;
  height: 100px;
}

/* ---- Divider ---- */
.divider {
  height: 1px;
  background: var(--border-soft);
  margin: var(--space-5) 0;
}

/* ---- Chip ---- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px 10px;
  background: var(--bg-subtle);
  color: var(--text-body);
  font-size: var(--text-xs);
  border-radius: var(--radius-full);
  border: 1px solid var(--border-soft);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-ios);
}

.chip:hover {
  background: var(--bg-hover);
}

.chip.is-active {
  background: var(--gold-soft);
  border-color: var(--gold-primary);
  color: var(--gold-active);
}

/* ---- Avatar ---- */
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--grad-gold);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(183, 133, 46, 0.28);
}

.avatar-lg {
  width: 48px;
  height: 48px;
  font-size: var(--text-md);
}

.avatar-sm {
  width: 28px;
  height: 28px;
  font-size: var(--text-xs);
}

/* ---- Icon ---- */
.icon {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
  stroke-width: 2;
}

.btn .icon,
.badge .icon,
.chip .icon,
.alert>.icon,
.toast .icon,
.btn-icon>.icon,
.kpi-label .icon {
  vertical-align: -3px;
}

.alert>.icon {
  margin-top: 2px;
}

/* ---- Flag emoji ---- */
.flag-emoji {
  display: inline-flex;
  align-items: center;
  font-size: 1.15em;
  line-height: 1;
  vertical-align: middle;
  margin-right: 4px;
  font-family: "Twemoji Country Flags", "Apple Color Emoji", "Segoe UI Emoji",
    "Noto Color Emoji", sans-serif;
}

/* ---- Flag badge (fallback for countries without emoji) ---- */
.flag-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: white;
  background: linear-gradient(135deg, #6B7280, #4B5563);
  font-family: var(--font-mono);
  line-height: 1.4;
  border: 1px solid rgba(0, 0, 0, 0.1);
  vertical-align: middle;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.flag-th {
  background: linear-gradient(135deg, #ED2939 0%, #ED2939 33%, #FFFFFF 33% 66%, #241F70 66% 100%);
  color: #241F70;
  text-shadow: none;
}

.flag-la {
  background: linear-gradient(135deg, #002868 0%, #002868 25%, #CE1126 25% 40%, #FFFFFF 40% 60%, #CE1126 60% 75%, #002868 75% 100%);
  color: white;
}

.flag-vn {
  background: linear-gradient(135deg, #DA251D 0%, #DA251D 100%);
  color: #FFCD00;
}

.flag-my {
  background: linear-gradient(135deg, #010066 0%, #CC0001 100%);
}

.flag-sg {
  background: linear-gradient(180deg, #EF3340 50%, #FFFFFF 50%);
  color: #EF3340;
  text-shadow: none;
}

.flag-kh {
  background: linear-gradient(135deg, #032EA1 0%, #E00025 100%);
}

/* ---- Search Palette (Cmd+K) ---- */
.search-palette-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(28, 28, 30, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: var(--z-modal);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-ios);
}

.search-palette-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.search-palette {
  width: 100%;
  max-width: 560px;
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  transform: translateY(-8px);
  transition: transform var(--dur-base) var(--ease-out);
}

.search-palette-backdrop.is-open .search-palette {
  transform: translateY(0);
}

.search-palette-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-muted);
}

.search-palette-input {
  flex: 1;
  border: 0;
  outline: none;
  font-size: var(--text-lg);
  color: var(--text-main);
  background: transparent;
  font-family: var(--font-sans);
}

.search-palette-kbd {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 2px 6px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xs);
  color: var(--text-muted);
}

.search-palette-results {
  max-height: 400px;
  overflow-y: auto;
  padding: var(--space-2);
}

.search-palette-group {
  padding: 6px var(--space-3);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-subtle);
}

.search-palette-result {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--text-main);
  transition: background var(--dur-fast) var(--ease-ios);
}

.search-palette-result:hover,
.search-palette-result:focus {
  background: var(--bg-hover);
  color: var(--text-main);
}

.search-palette-hint {
  padding: var(--space-4) var(--space-3);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.search-palette-hint kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 1px 5px;
  background: var(--bg-subtle);
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-soft);
}

/* ---- Notification badge ---- */
.notif-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  background: var(--danger);
  color: white;
  border-radius: var(--radius-full);
  line-height: 1;
}

.notif-badge.hidden {
  display: none;
}

/* ---- Shortcuts Help Overlay ---- */
.shortcuts-overlay {
  position: fixed;
  inset: 0;
  background: rgba(28, 28, 30, 0.5);
  backdrop-filter: blur(4px);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-ios);
}

.shortcuts-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.shortcuts-modal {
  width: 100%;
  max-width: 520px;
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.shortcuts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-soft);
}

.shortcuts-header h3 {
  margin: 0;
}

.shortcuts-body {
  padding: var(--space-4) var(--space-5);
  overflow-y: auto;
}

.shortcuts-group {
  margin-bottom: var(--space-4);
}

.shortcuts-group:last-child {
  margin-bottom: 0;
}

.shortcuts-group-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-subtle);
  margin-bottom: var(--space-2);
}

.shortcuts-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 6px 0;
  font-size: var(--text-sm);
}

.shortcuts-row kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 6px;
  background: var(--bg-subtle);
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-soft);
  color: var(--text-body);
}

/* ---- Danger modal ---- */
.danger-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.danger-modal[hidden] {
  display: none !important;
}

.danger-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 15, 15, 0.55);
  backdrop-filter: blur(2px);
}

.danger-modal-card {
  position: relative;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  border: 2px solid var(--danger);
  animation: dangerModalIn 180ms cubic-bezier(.16, .94, .34, 1);
}

@keyframes dangerModalIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.danger-modal-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border-medium);
  background: linear-gradient(90deg, rgba(229, 72, 77, 0.06), transparent);
}

.danger-modal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: var(--danger-bg);
  color: var(--danger);
  flex-shrink: 0;
}

.danger-modal-title {
  margin: 0;
  font-size: 17px;
  color: var(--danger);
}

.danger-modal-subtitle {
  margin: 4px 0 0 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.danger-modal-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-xs);
}

.danger-modal-close:hover {
  background: var(--bg-hover);
  color: var(--text-body);
}

.danger-modal-body {
  padding: 20px;
}

.danger-modal-impact {
  padding: 12px 14px;
  background: var(--warning-bg);
  border: 1px solid var(--warning);
  border-radius: var(--radius-md);
  margin-bottom: 18px;
}

.danger-modal-impact-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: var(--weight-semibold);
  color: var(--warning);
  font-size: var(--text-sm);
  margin-bottom: 6px;
}

.danger-modal-impact-content {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-body);
}

/* object key / path ไม่มีช่องว่างให้เบราว์เซอร์ตัดบรรทัด ⇒ ดันกล่องจนเกิด
   scrollbar แนวนอนทั้ง modal · วัดได้จริงบนจอ 390px:
   <code>testenv/2026/08/auto_backup_20260822_033000.db</code> ล้นขอบการ์ด 68px
   (scrollWidth 421 บน clientWidth 336) ⛔ ห้ามแก้ด้วยการย่อ/ตัด key ให้สั้นลง —
   วันฉุกเฉินคนต้องอ่าน key เต็ม ๆ เพื่อรู้ว่ากำลังจะลบ object ตัวไหน
   ⚠️ ต้องคลุม **ทั้งกล่อง** ไม่ใช่แค่ `code` — key โผล่ทั้งในรูป <code> และใน
   ประโยคธรรมดา (รายละเอียดของแต่ละตัวเลือกลบ) · ตั้งเฉพาะ `code` แล้ววัดใหม่
   ยังเหลือล้น 76px จาก <li> ที่ถือ key เป็นข้อความเปล่า */
.danger-modal-impact-content { overflow-wrap: anywhere; }

.danger-modal-affected {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--warning);
  font-size: var(--text-sm);
  color: var(--text-body);
}

.danger-modal-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px;
  background: var(--bg-subtle);
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-size: var(--text-sm);
  line-height: 1.5;
  margin-top: 10px;
}

.danger-modal-checkbox input {
  margin-top: 2px;
  flex-shrink: 0;
}

.danger-modal-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 14px 20px;
  border-top: 1px solid var(--border-medium);
  background: var(--bg-subtle);
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

/* ---- Settings page danger zone ---- */
.danger-zone {
  border: 1.5px dashed var(--danger);
  background: linear-gradient(180deg, rgba(229, 72, 77, 0.02), rgba(229, 72, 77, 0.05));
}

.danger-zone .card-title {
  color: var(--danger);
  display: flex;
  align-items: center;
  gap: 6px;
}

.setting-card {
  padding: 18px 20px;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  margin-bottom: 14px;
}

.setting-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px 0;
  font-size: 15px;
  font-weight: var(--weight-semibold);
}

.setting-card-desc {
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin: 0 0 12px 0;
}

.setting-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.setting-status-pill.on {
  background: var(--success-bg);
  color: var(--success);
}

.setting-status-pill.off {
  background: var(--danger-bg);
  color: var(--danger);
}

.perm-matrix th,
.perm-matrix td {
  vertical-align: middle;
}

.perm-matrix td {
  padding: 10px 8px;
}

.perm-matrix thead th {
  background: var(--bg-subtle);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.perm-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  cursor: pointer;
}

.perm-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.perm-toggle-track {
  position: absolute;
  inset: 0;
  background: var(--border-medium);
  border-radius: 999px;
  transition: background 160ms ease;
}

.perm-toggle-track::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: transform 160ms ease;
}

.perm-toggle input:checked~.perm-toggle-track {
  background: var(--gold-primary);
}

.perm-toggle input:checked~.perm-toggle-track::before {
  transform: translateX(20px);
}

.perm-toggle:hover .perm-toggle-track {
  filter: brightness(0.95);
}

.perm-toggle.is-locked {
  cursor: not-allowed;
  opacity: 0.4;
}

.perm-matrix tr.is-locked-row td {
  background: var(--bg-subtle);
}

/* ---- Package (แผนการขาย) ---- */
.package-plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.package-plan-option {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}

.package-plan-option:hover {
  border-color: var(--gold-primary);
}

.package-plan-option.is-current {
  border-color: var(--gold-primary);
  background: var(--bg-subtle);
}

.package-plan-option input {
  margin-top: 3px;
  accent-color: var(--gold-primary);
}

.package-feature-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 3px;
}

.package-feature-list li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
}

.package-feature-list li.is-on {
  color: var(--success);
}

.package-feature-list li.is-off {
  color: var(--text-muted);
  text-decoration: line-through;
}

/* ---- แจ้งเตือนเลขเต็มอั้น + บรรทัดโหมดคงที่ ---- */
.limit-full-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
}

.scope-option.is-plan-locked {
  opacity: 0.5;
  cursor: not-allowed;
}

.package-plan-option.is-selected {
  border-color: var(--gold-primary);
  box-shadow: 0 0 0 2px var(--gold-primary) inset;
}

.package-plan-limit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--danger-bg);
  color: var(--danger);
  font-size: var(--text-xs);
}

.package-impact {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--gold-primary);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  display: grid;
  gap: 8px;
}

.package-impact-head {
  font-size: var(--text-sm);
}

.package-impact-foot {
  font-size: var(--text-xs);
  color: var(--text-muted);
  border-top: 1px dashed var(--border-medium);
  padding-top: 8px;
}

.package-impact-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: var(--text-xs);
  line-height: 1.6;
}

.package-impact-icon {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: var(--weight-semibold);
}

.package-impact-row.is-off .package-impact-icon {
  background: var(--danger-bg);
  color: var(--danger);
}

.package-impact-row.is-on .package-impact-icon {
  background: var(--success-bg);
  color: var(--success);
}

.package-impact-row.is-warn .package-impact-icon {
  background: var(--warning-bg);
  color: var(--warning);
}

/* ---- Edit round modal ---- */
.edit-round-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.edit-round-modal[hidden] {
  display: none !important;
}

.edit-round-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 15, 15, 0.5);
  backdrop-filter: blur(2px);
}

.edit-round-card {
  position: relative;
  background: rgba(255, 253, 247, 0.86);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border-radius: var(--radius-md);
  max-width: 480px;
  width: 100%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 20px 60px rgba(0, 0, 0, 0.30);
  border: 1px solid rgba(255, 255, 255, 0.65);
  overflow: hidden;
  animation: dangerModalIn 180ms cubic-bezier(.16, .94, .34, 1);
  /* เดิมไม่มีเพดานความสูง · ฟอร์มยาว ๆ จะดันจนหัว/ปุ่มล่างหลุดจอและเลื่อนไม่ได้
     คุมความสูงไว้แล้วให้ body เลื่อนแทน หัวกับปุ่มจึงอยู่ในจอเสมอ */
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
}

/* ฟอร์มที่มีหลายช่อง (เช่น แก้ไขอั้น) — กว้างขึ้นและวางสองคอลัมน์ เตี้ยลงเกือบครึ่ง */
.edit-round-card--wide {
  max-width: 760px;
}

.edit-round-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border-medium);
  flex: none;
}

.edit-round-body {
  padding: 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 760px) {
  .edit-round-card--wide .edit-round-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 18px;
    align-items: start;
  }

  .edit-round-card--wide .edit-round-body>* {
    grid-column: span 2;
  }

  .edit-round-card--wide .edit-round-body>.modal-col-half {
    grid-column: span 1;
  }
}

.edit-round-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 14px 20px;
  background: var(--bg-subtle);
  border-top: 1px solid var(--border-medium);
  flex: none;
}

/* มือถือ — ยกเป็น bottom sheet เต็มความกว้าง นิ้วโป้งถึงปุ่มยืนยันได้ */
@media (max-width: 640px) {
  .edit-round-modal {
    padding: 0;
    align-items: flex-end;
  }

  .edit-round-card {
    max-width: 100%;
    max-height: 92vh;
    max-height: 92dvh;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    border-bottom: 0;
  }

  .edit-round-footer {
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }
}

.edit-round-ack {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px;
  background: var(--warning-bg);
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-size: var(--text-sm);
  line-height: 1.5;
}

.edit-round-ack input {
  margin-top: 2px;
  flex-shrink: 0;
}

/* ---- Draft label ---- */
.draft-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--info-bg);
  color: var(--info);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  border: 1px dashed var(--info);
  cursor: default;
}

.draft-label .icon {
  flex-shrink: 0;
}

.draft-help {
  position: relative;
}

.draft-help summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.draft-help summary::-webkit-details-marker {
  display: none;
}

.draft-help-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: min(400px, 90vw);
  padding: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(28, 28, 30, 0.10);
  z-index: 50;
  font-size: var(--text-sm);
  line-height: 1.6;
}

.draft-help-panel ul {
  margin: 8px 0;
  padding-left: 20px;
}

.draft-help-panel li {
  margin-bottom: 4px;
}

.draft-row-warning td {
  background: var(--warning-bg) !important;
}

.draft-row-warning:hover td {
  background: var(--warning-bg) !important;
  filter: brightness(0.97);
}

/* ---- Audio toggle ---- */
.audio-toggle {
  position: relative;
}

.audio-toggle.is-muted {
  color: var(--text-muted);
}

.audio-toggle.is-muted::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 6px;
  height: 6px;
  background: var(--danger);
  border-radius: 50%;
  border: 1px solid var(--bg-card);
}

/* ---- Pagination ---- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 12px 16px;
  border-top: 1px solid var(--border-medium);
  background: var(--bg-card);
  flex-wrap: wrap;
}

.pagination-info {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.pagination-count strong {
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  padding: 0 2px;
}

.pagination-list {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: var(--radius-xs);
  color: var(--text-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: all 120ms ease;
  border: 1px solid transparent;
  font-variant-numeric: tabular-nums;
}

.pagination-btn:hover {
  background: var(--bg-hover);
  color: var(--gold-active);
  border-color: var(--gold-primary);
}

.pagination-btn.is-active {
  background: var(--gold-primary);
  color: white;
  border-color: var(--gold-active);
  cursor: default;
}

.pagination-btn.is-disabled {
  color: var(--text-muted);
  pointer-events: none;
  opacity: 0.4;
}

.pagination-ellipsis {
  padding: 0 6px;
  color: var(--text-muted);
  user-select: none;
}

@media (max-width: 640px) {
  .pagination {
    flex-direction: column;
    align-items: stretch;
  }

  .pagination-info {
    text-align: center;
  }

  .pagination-list {
    justify-content: center;
    flex-wrap: wrap;
  }

  .pagination-btn {
    min-width: 34px;
    height: 34px;
    font-size: 13px;
  }
}

/* ---- Filter chip row ---- */
.filter-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  border: 1px solid var(--border-medium);
  background: var(--bg-card);
  color: var(--text-body);
  text-decoration: none;
  transition: all 120ms ease;
  white-space: nowrap;
}

.filter-chip:hover {
  border-color: var(--gold-primary);
  color: var(--gold-active);
}

.filter-chip.is-active {
  background: var(--gold-primary);
  border-color: var(--gold-active);
  color: white;
  box-shadow: 0 2px 6px rgba(214, 168, 79, 0.25);
}

.filter-chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  background: var(--bg-subtle);
  color: var(--text-muted);
}

.filter-chip.is-active .filter-chip-count {
  background: rgba(255, 255, 255, 0.25);
  color: white;
}

.filter-chip-warning.is-active .filter-chip-count {
  background: rgba(28, 28, 30, 0.18);
  color: #1C1C1E;
}

.filter-chip-success.is-active {
  background: var(--success);
  border-color: var(--success);
}

.filter-chip-warning.is-active {
  background: var(--warning);
  border-color: var(--warning);
  color: #1C1C1E;
}

.filter-chip-danger.is-active {
  background: var(--danger);
  border-color: var(--danger);
}

.filter-chip-info.is-active {
  background: var(--info);
  border-color: var(--info);
}

.filter-chip-gold.is-active {
  background: var(--gold-active);
  border-color: var(--gold-active);
}

/* ---- Copy-to-clipboard button + state ---- */
.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 120ms ease;
  font-size: inherit;
  font-family: inherit;
}

.copy-btn:hover {
  color: var(--text-body);
  background: var(--bg-hover);
  border-color: var(--border-soft);
}

.copy-btn.is-copied {
  color: var(--success);
  background: var(--success-bg);
  border-color: var(--success-border);
}

.copy-btn .icon {
  flex-shrink: 0;
}

.copy-value {
  cursor: pointer;
  border-bottom: 1px dashed var(--border-soft);
  transition: color 120ms ease;
}

.copy-value:hover {
  color: var(--gold-active);
  border-bottom-color: var(--gold-primary);
}

.copy-value.is-copied {
  color: var(--success);
  border-bottom-color: var(--success);
}

/* ---- Limits Page (Phase 30) ---- */

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gold-primary);
  color: white;
  font-size: 12px;
  font-weight: var(--weight-bold);
  margin-right: 6px;
  font-family: var(--font-mono);
}

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

@media (max-width: 900px) {
  .scope-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .scope-picker {
    grid-template-columns: 1fr;
  }
}

.scope-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border: 2px solid var(--border-soft);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, transform 100ms ease;
  background: var(--bg-card);
}

.scope-option:hover {
  border-color: var(--gold-primary);
  background: var(--gold-light);
}

.scope-option.is-selected {
  border-color: var(--gold-primary);
  background: var(--gold-light);
  box-shadow: 0 0 0 3px rgba(206, 172, 108, 0.15);
}

.scope-option input[type="radio"] {
  margin-top: 3px;
}

.scope-option-content {
  flex: 1;
  min-width: 0;
}

.scope-option-title {
  font-weight: var(--weight-semibold);
  color: var(--text-main);
  font-size: var(--text-sm);
  margin-bottom: 3px;
}

.scope-option-hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.4;
}

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

@media (max-width: 900px) {
  .scope-explain-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .scope-explain-grid {
    grid-template-columns: 1fr;
  }
}

.scope-explain-item {
  padding: 12px;
  background: var(--bg-page);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
}

.scope-explain-item p {
  margin: 6px 0 0 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.5;
}

.scope-explain-item p em {
  color: var(--text-main);
  font-style: normal;
  font-weight: var(--weight-medium);
}

.limit-preview {
  margin-top: 16px;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--gold-light) 0%, rgba(206, 172, 108, 0.06) 100%);
  border: 1px dashed var(--gold-primary);
  border-radius: var(--radius-lg);
}

.limit-preview-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--gold-active);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.limit-preview-content {
  font-size: var(--text-sm);
  color: var(--text-main);
  line-height: 1.6;
}

.limit-preview-content .money {
  color: var(--gold-active);
  font-size: var(--text-base);
}

.filter-bar {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.filter-bar .form-group {
  min-width: 160px;
  margin-bottom: 0;
}

.filter-bar-grow {
  flex: 1;
  min-width: 220px;
}

.filter-bar-actions {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

@media (max-width: 640px) {
  .filter-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-bar .form-group,
  .filter-bar-grow,
  .filter-bar-actions {
    min-width: 0;
    width: 100%;
  }
}

.table-toolbar {
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--bg-page);
}

/* ---- Usage progress bar (Limits table) ---- */
.usage-cell {
  vertical-align: middle;
  padding: 8px 12px;
}

/* กฎงบจ่ายกดที่แถบตัวเลขได้ · ครอบเฉพาะแถบ ไม่ผูกทั้ง tr เพราะในแถวเดียวกัน
   มีปุ่มแก้ไข/ปิด/ลบอยู่แล้ว — กดทั้งแถวเมื่อไรก็ชนกันเมื่อนั้น */
.usage-cell-hit {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.usage-cell-hit:hover .usage-bar { border-color: var(--border-strong); }

.usage-cell-hit:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 3px;
  border-radius: var(--radius-md);
}

.usage-bar {
  position: relative;
  height: 28px;
  border-radius: var(--radius-md);
  background: var(--bg-page);
  border: 1px solid var(--border-soft);
  overflow: hidden;
}

.usage-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  transition: width 400ms ease;
  opacity: 0.35;
}

.usage-bar-label {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 10px;
  height: 100%;
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.usage-bar-amounts {
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.usage-bar-pct {
  font-weight: var(--weight-bold);
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
}

.usage-bar.is-normal .usage-bar-fill {
  background: var(--success, #4caf50);
}

.usage-bar.is-normal .usage-bar-pct {
  color: var(--success, #2e7d32);
  background: var(--success-bg, #e8f5e9);
}

.usage-bar.is-near .usage-bar-fill {
  background: var(--warning, #ff9800);
  opacity: 0.5;
}

.usage-bar.is-near .usage-bar-pct {
  color: var(--warning, #f57c00);
  background: var(--warning-bg, #fff8e1);
}

.usage-bar.is-full .usage-bar-fill {
  background: var(--danger, #f44336);
  opacity: 0.5;
}

.usage-bar.is-full .usage-bar-pct {
  color: var(--danger, #c62828);
  background: var(--danger-bg, #ffebee);
}

/* ปิดรับ (ตั้งอั้นไว้ 0) — ต้องอ่านออกว่า "ไม่ใช่เต็มเอง แต่ถูกสั่งปิด"
   จึงเป็นสีเทาเข้มทึบ ไม่ใช่แดงแบบเต็มอั้น และไม่ใช่เขียวแบบว่าง */
.usage-bar.is-closed .usage-bar-fill {
  background: var(--text-primary, #263238);
  opacity: 0.34;
}

.usage-bar.is-closed .usage-bar-pct {
  color: #fff;
  background: var(--text-primary, #263238);
}

/* ---- Advanced filter panel (Bills list) ---- */
.advanced-filter {
  margin-top: 12px;
  padding: 16px;
  background: var(--bg-page);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
}

.advanced-filter[hidden] {
  display: none;
}

.advanced-filter .form-group {
  margin-bottom: 0;
}

.advanced-filter .form-label {
  margin-bottom: 4px;
}

/* ---- ตัวเลือกซ่อนคอลัมน์ · อยู่ในแผงตัวกรองขั้นสูงของหน้าบิล ----
   ⛔ ห้ามใส่ `overflow: hidden` ให้ `.advanced-filter` — เมนูนี้เป็น absolute
      และต้องล้นออกนอกแผงได้ · ถ้าถูกตัด ตัวเลือกท้าย ๆ จะหายโดยไม่มีสกรอลล์ให้เลื่อน */
.col-picker-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--border-soft);
}

.col-picker-hint {
  flex: 1 1 260px;
  min-width: 0;
  margin: 0;
  line-height: 1.6;
}

.col-picker {
  position: relative;
}

.col-picker-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0;
  width: max-content;
  min-width: 100%;
  max-width: min(280px, calc(100vw - 48px));
  /* ต้องสูงพอให้ตัวเลือกทั้งชุด + ปุ่ม "แสดงทุกคอลัมน์" อยู่ครบโดยไม่ต้องเลื่อน —
     ปุ่มล่างสุดคือทางออกของคนที่ซ่อนเพลินจนอ่านตารางไม่รู้เรื่อง ⛔ ห้ามให้มัน
     ตกขอบ (เคยตั้ง 320px แล้วปุ่มถูกตัดครึ่ง · เห็นจากภาพ ไม่ใช่จากตัวเลข DOM) */
  max-height: min(60vh, 440px);
  overflow-y: auto;
  padding: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.col-picker-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  white-space: nowrap;
  cursor: pointer;
}

.col-picker-item:hover {
  background: var(--bg-hover);
}

.col-picker-item input {
  flex: 0 0 auto;
  margin: 0;
}

.col-picker-foot {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--border-soft);
}

.col-picker-foot .btn {
  width: 100%;
}

@media (max-width: 480px) {
  /* จอแคบ — ปุ่มและเมนูกินความกว้างเต็มการ์ด ⛔ ห้ามตั้งเป็นพิกเซลตายตัวจากผล
     การวัด: ข้อความไทยจะถูกลูกศร/ขอบบังโดยที่ตัวเลขจาก DOM ยังบอกว่า "พอ"
     (AGENTS.md · กับดักรอบที่ 11.1) */
  .col-picker-row > [data-col-picker] {
    flex: 1 1 100%;
  }

  .col-picker-toggle {
    width: 100%;
    justify-content: space-between;
  }

  .col-picker-menu {
    width: 100%;
    max-width: none;
  }
}

[data-toggle-advanced][aria-expanded="true"] {
  background: var(--gold-light);
  border-color: var(--gold-primary);
}

/* ---- Bill timeline ---- */
.bill-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}

.bill-timeline::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: var(--border-soft);
}

.bill-timeline-item {
  position: relative;
  padding: 10px 0 10px 44px;
  min-height: 42px;
}

.bill-timeline-icon {
  position: absolute;
  left: 4px;
  top: 12px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 2px solid var(--border-medium);
  color: var(--text-muted);
  z-index: 1;
}

.bill-timeline-success .bill-timeline-icon {
  background: var(--success-bg, #e8f5e9);
  border-color: var(--success, #4caf50);
  color: var(--success, #2e7d32);
}

.bill-timeline-danger .bill-timeline-icon {
  background: var(--danger-bg, #ffebee);
  border-color: var(--danger, #f44336);
  color: var(--danger, #c62828);
}

.bill-timeline-info .bill-timeline-icon {
  background: var(--info-bg, #e3f2fd);
  border-color: var(--info, #2196f3);
  color: var(--info, #1976d2);
}

.bill-timeline-warning .bill-timeline-icon {
  background: var(--warning-bg, #fff8e1);
  border-color: var(--warning, #ff9800);
  color: var(--warning, #f57c00);
}

.bill-timeline-gold .bill-timeline-icon {
  background: var(--gold-light);
  border-color: var(--gold-primary);
  color: var(--gold-active);
}

.bill-timeline-content {
  padding: 4px 0;
}

.bill-timeline-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}

/* ---- Financial Summary widget ---- */
.fin-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.fin-metric {
  padding: 14px 16px;
  background: var(--bg-page);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  text-decoration: none;
  color: var(--text-main);
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
  display: block;
}

a.fin-metric:hover {
  transform: translateY(-1px);
  border-color: var(--gold-primary);
  box-shadow: 0 4px 12px rgba(206, 172, 108, 0.15);
}

.fin-metric-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-weight: var(--weight-medium);
  margin-bottom: 4px;
}

.fin-metric-value {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--text-main);
}

.fin-metric-primary {
  background: var(--gold-light);
  border-color: var(--gold-primary);
}

.fin-metric-primary .fin-metric-value {
  color: var(--gold-active);
}

.fin-metric-success .fin-metric-value {
  color: var(--success, #2e7d32);
}

.fin-metric-danger .fin-metric-value {
  color: var(--danger, #c62828);
}

.fin-metric-warning .fin-metric-value {
  color: var(--warning, #f57c00);
}

/* ---- FS Pending Badge Grid (Financial Summary warning) ---- */
.fs-pending {
  margin-bottom: 16px;
  padding: 14px 16px;
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  border-radius: var(--radius-lg, 12px);
}

.fs-pending-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  color: var(--warning);
}

.fs-pending-header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background: var(--warning);
  color: #fff;
  border-radius: 50%;
}

.fs-pending-header-icon svg {
  width: 18px;
  height: 18px;
}

.fs-pending-header strong {
  color: var(--text-main);
  font-size: 15px;
  line-height: 1.3;
}

.fs-pending-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  font-weight: 400;
}

.fs-pending-badges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.fs-pending-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  min-height: 60px;
  border-radius: var(--radius-md, 10px);
  background: #fff;
  border: 1.5px solid var(--border-medium, #E5E7EB);
  text-decoration: none;
  color: var(--text-main);
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

.fs-pending-badge:hover {
  transform: translateY(-2px);
  text-decoration: none;
}

.fs-pending-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex-shrink: 0;
  background: var(--grad-slate);
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(100, 116, 139, 0.28);
}

.fs-pending-badge-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.fs-pending-badge-count {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
}

.fs-pending-badge-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.fs-pending-badge-arrow {
  color: var(--text-subtle);
  display: inline-flex;
  align-items: center;
  transition: transform 150ms ease;
}

.fs-pending-badge:hover .fs-pending-badge-arrow {
  transform: translateX(3px);
}

.fs-pending-badge--warning {
  border-color: var(--warning-border);
}

.fs-pending-badge--warning .fs-pending-badge-icon {
  background: var(--grad-amber);
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.28);
}

.fs-pending-badge--warning .fs-pending-badge-count {
  color: var(--warning);
}

.fs-pending-badge--warning:hover {
  border-color: var(--warning);
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.22);
}

.fs-pending-badge--danger {
  border-color: var(--danger-border);
}

.fs-pending-badge--danger .fs-pending-badge-icon {
  background: var(--grad-red);
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(229, 72, 77, 0.28);
}

.fs-pending-badge--danger .fs-pending-badge-count {
  color: var(--danger);
}

.fs-pending-badge--danger:hover {
  border-color: var(--danger);
  box-shadow: 0 4px 14px rgba(229, 72, 77, 0.22);
}

.fs-pending-badge--info {
  border-color: var(--info-border);
}

.fs-pending-badge--info .fs-pending-badge-icon {
  background: var(--grad-sky);
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(14, 165, 233, 0.28);
}

.fs-pending-badge--info .fs-pending-badge-count {
  color: var(--info);
}

.fs-pending-badge--info:hover {
  border-color: var(--info);
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.22);
}

@media (max-width: 640px) {
  .fs-pending-badges {
    grid-template-columns: 1fr;
  }

  .fs-pending-badge {
    min-height: 64px;
  }
}

/* ---- Round Archive Cards ---- */
.archive-page-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--gold-light);
  color: var(--gold-active);
}

.archive-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  display: flex;
  flex-direction: column;
}

.archive-card:hover {
  transform: translateY(-2px);
  border-color: var(--gold-primary);
  box-shadow: 0 8px 24px rgba(206, 172, 108, 0.15);
}

.archive-card-head {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-soft);
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--bg-card) 100%);
}

.archive-card-flag {
  font-size: 28px;
  line-height: 1;
}

.archive-card-title h3 {
  margin: 0;
  font-size: 15px;
  color: var(--text-main);
}

.archive-card-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
}

.archive-card-dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border-soft);
}

.archive-date-block {
  padding: 10px 16px;
  background: var(--bg-page);
  text-align: center;
}

.archive-date-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

.archive-date-value {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: var(--weight-semibold);
  color: var(--text-main);
}

.archive-card-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

.archive-stat {
  padding: 10px 12px;
  background: var(--bg-card);
  text-align: center;
}

.archive-stat-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

.archive-stat-value {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: var(--weight-bold);
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
}

.archive-card-financial {
  padding: 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.archive-fin-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

.archive-fin-total {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-medium);
  font-size: 15px;
  font-weight: var(--weight-bold);
}

/* บรรทัด "ยอดที่กระทบไม่ลง · ต้องตรวจ" — สีเดียวกับบันไดบนปกใบ PDF และหน้าเครดิต
   ต้องอ่านออกว่าเป็นของผิดปกติ ไม่ใช่อีกหนึ่งบรรทัดของบันได */
.archive-fin-residual,
.archive-fin-residual .money {
  color: var(--danger, #E5484D);
  font-weight: var(--weight-bold);
}

.archive-card-actions {
  display: flex;
  gap: 6px;
  padding: 12px 16px;
  background: var(--bg-page);
  border-top: 1px solid var(--border-soft);
  margin-top: auto;
}

.archive-card-actions .btn {
  flex: 1;
  justify-content: center;
}

.empty-archive {
  text-align: center;
  padding: 80px 20px;
  background: var(--bg-card);
  border: 2px dashed var(--border-soft);
  border-radius: var(--radius-lg);
}

.empty-archive-icon {
  display: inline-flex;
  color: var(--gold-primary);
  opacity: 0.4;
  margin-bottom: 12px;
}

.empty-archive h3 {
  margin: 12px 0 8px 0;
  color: var(--text-main);
}

/* ---- Bill Selection Toolbar (sticky when scrolling) ---- */
.bill-selection-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
  background: var(--gold-light);
  border-bottom: 1px solid var(--gold-primary);
  color: var(--gold-active);
  font-size: 13px;
  font-weight: var(--weight-semibold);
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: 0 2px 8px rgba(183, 133, 46, 0.12);
}

.bill-selection-toolbar[hidden] {
  display: none;
}

.bill-selection-toolbar [data-selected-count] {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--gold-active);
}

/* ---- Active Filter Bar (chips showing currently applied filters) ---- */
.active-filter-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #FFF8E7, #FAF7F0);
  border: 1px solid var(--gold-primary);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}

.active-filter-bar-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  font-weight: var(--weight-medium);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 4px;
}

.active-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 12px;
  background: white;
  border: 1px solid var(--gold-primary);
  border-radius: 999px;
  color: var(--gold-active);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: all 120ms ease;
}

.active-filter-pill:hover {
  background: var(--gold-primary);
  color: white;
}

.active-filter-pill-key {
  color: var(--text-muted);
  font-weight: var(--weight-regular);
}

.active-filter-pill:hover .active-filter-pill-key {
  color: rgba(255, 255, 255, 0.85);
}

.active-filter-pill-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(183, 133, 46, 0.15);
  color: var(--gold-active);
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
}

.active-filter-pill:hover .active-filter-pill-x {
  background: rgba(255, 255, 255, 0.3);
  color: white;
}

.active-filter-clear-all {
  margin-left: auto;
  padding: 4px 10px;
  background: transparent;
  border: 1px dashed var(--gold-primary);
  border-radius: 999px;
  color: var(--gold-active);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: all 120ms ease;
}

.active-filter-clear-all:hover {
  background: var(--danger);
  border-color: var(--danger);
  color: white;
}

/* ---- Button Loading State ---- */
.btn.is-loading {
  pointer-events: none;
  opacity: 0.75;
  cursor: wait;
  position: relative;
}

.btn.is-loading>* {
  visibility: hidden;
}

.btn.is-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  visibility: visible;
  animation: btn-spinner 640ms linear infinite;
}

@keyframes btn-spinner {
  to {
    transform: rotate(360deg);
  }
}

/* ---- Page Navigation Progress Bar ---- */
.page-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--gold-primary, #D6A84F), var(--gold-secondary, #F0C674));
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: width 0.35s ease, opacity 0.2s ease;
  box-shadow: 0 0 8px rgba(214, 168, 79, 0.55);
}

.page-progress.is-loading {
  opacity: 1;
}

.page-progress.is-done {
  transition: width 0.15s ease, opacity 0.25s 0.15s ease;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .page-progress {
    transition: none;
  }
}

/* ---- Content Skeleton wrapper (uses .skeleton animation) ---- */
.card.is-loading>*:not(.card-title):not(.card-header) {
  visibility: hidden;
  min-height: 60px;
}

.card.is-loading {
  position: relative;
}

.card.is-loading::after {
  content: '';
  position: absolute;
  inset: 48px 16px 16px 16px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg,
      var(--bg-subtle) 0%,
      var(--bg-hover) 50%,
      var(--bg-subtle) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

/* ---- Countdown Card (Sprint 1 · shared across roles) ---- */
.countdown-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--countdown-normal-bg);
  border: 1px solid var(--countdown-normal-border);
  border-radius: var(--radius-md);
  transition: background var(--dur-base) var(--ease-ios),
    border-color var(--dur-base) var(--ease-ios);
  min-height: 88px;
}

.countdown-card--warning {
  background: var(--countdown-warning-bg);
  border-color: var(--countdown-warning-border);
}

.countdown-card--danger {
  background: var(--countdown-danger-bg);
  border-color: var(--countdown-danger-border);
  animation: countdown-pulse 2s ease-in-out infinite;
}

.countdown-card--closed {
  background: var(--countdown-closed-bg);
  border-color: var(--countdown-closed-border);
}

@keyframes countdown-pulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(194, 65, 12, 0.15);
  }

  50% {
    box-shadow: 0 0 0 8px rgba(194, 65, 12, 0.03);
  }
}

.countdown-card__icon {
  flex: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.7);
  color: var(--countdown-normal-text);
}

.countdown-card--warning .countdown-card__icon {
  color: var(--countdown-warning-text);
}

.countdown-card--danger .countdown-card__icon {
  color: var(--countdown-danger-text);
}

.countdown-card--closed .countdown-card__icon {
  color: var(--countdown-closed-text);
}

.countdown-card__body {
  flex: 1;
  min-width: 0;
}

.countdown-card__title {
  font-size: var(--text-sm);
  color: var(--text-main);
  font-weight: var(--weight-medium);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}

.countdown-card__title strong {
  font-weight: var(--weight-semibold);
}

.countdown-card__title-meta {
  color: var(--text-muted);
  font-weight: var(--weight-normal);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.countdown-card__value {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
  line-height: var(--leading-tight);
}

.countdown-card--danger .countdown-card__value {
  color: var(--countdown-danger-text);
}

.countdown-card--warning .countdown-card__value {
  color: var(--countdown-warning-text);
}

.countdown-card--closed .countdown-card__value {
  color: var(--countdown-closed-text);
}

.countdown-card__meta {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 4px;
}

.countdown-list {
  display: grid;
  gap: var(--space-3);
}

.countdown-more {
  margin-top: var(--space-1);
}

.countdown-more summary {
  cursor: pointer;
  padding: var(--space-2) var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
  min-height: var(--touch-sm);
  display: flex;
  align-items: center;
}

.countdown-more summary:hover {
  background: var(--bg-hover);
}

.countdown-more__list {
  list-style: none;
  padding: var(--space-2) 0 0 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
}

.countdown-more__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}

/* ---- Latest Result Card (Sprint 1 · shared) ---- */
.latest-result-card {
  padding: var(--space-4) var(--space-5);
  background: var(--gold-tint);
  border: 1px solid var(--gold-soft);
  border-radius: var(--radius-md);
}

.latest-result-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--gold-soft);
}

.latest-result-card__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 6px;
}

.latest-result-card__meta {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 2px;
}

.latest-result-card__prizes {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.latest-result-card__prize {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  gap: var(--space-3);
}

.latest-result-card__prize-label {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.latest-result-card__prize-number {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--gold-active);
  font-variant-numeric: tabular-nums;
  letter-spacing: 2px;
}

.latest-result-card__footer {
  display: flex;
  gap: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--gold-soft);
  font-size: var(--text-sm);
  flex-wrap: wrap;
}

.latest-result-card__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.latest-result-card__stat-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.latest-result-card__stat-value {
  font-weight: var(--weight-semibold);
  color: var(--text-main);
}

.latest-result-card__empty {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* ---- Agent Overflow List (D-Batch1 A3/A4 · mobile-first task-list) ---- */
.agent-overflow-list {
  display: grid;
  gap: var(--space-3);
}

.agent-overflow-item {
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
}

.agent-overflow-item__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  font-weight: var(--weight-semibold);
}

.agent-overflow-item__number {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--gold-active);
  letter-spacing: 2px;
}

.agent-overflow-item__amount {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-lg);
  color: var(--text-main);
}

.agent-overflow-item__actions {
  display: flex;
  gap: var(--space-3);
  align-items: stretch;
}

.agent-overflow-item__accept,
.agent-overflow-item__reject-toggle {
  min-height: 48px;
  padding: 10px var(--space-4);
  font-weight: var(--weight-semibold);
}

.agent-overflow-item__reject-toggle {
  border: 1px solid var(--danger-border, rgba(229, 72, 77, 0.3));
}

.agent-overflow-item__reject-form {
  width: 100%;
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  animation: reject-expand var(--dur-base) var(--ease-ios);
}

@keyframes reject-expand {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 640px) {
  .agent-overflow-item {
    padding: var(--space-3);
    gap: var(--space-2);
  }

  .agent-overflow-item__number {
    font-size: var(--text-xl);
    letter-spacing: 1px;
  }

  .agent-overflow-item__amount {
    font-size: var(--text-md);
  }

  .agent-overflow-item__actions {
    width: 100%;
    justify-content: space-between;
  }

  .agent-overflow-item__accept,
  .agent-overflow-item__reject-toggle {
    flex: 1;
    justify-content: center;
    min-height: 52px;
  }
}

/* ---- Countdown/Latest-result mobile (Roadmap 2 A1: xs base) ---- */
@media (max-width: 767px) {
  .countdown-card {
    padding: var(--space-3) var(--space-4);
    gap: var(--space-3);
    min-height: 76px;
  }

  .countdown-card__icon {
    width: 36px;
    height: 36px;
  }

  .countdown-card__title {
    font-size: var(--text-xs);
    gap: 4px;
    line-height: 1.35;
  }

  .countdown-card__title strong {
    font-size: var(--text-sm);
  }

  .countdown-card__value {
    font-size: var(--text-lg);
  }

  .countdown-card__meta {
    font-size: 11px;
  }

  .latest-result-card {
    padding: var(--space-4);
  }

  .latest-result-card__header {
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-3);
  }

  .latest-result-card__title {
    font-size: var(--text-md);
  }

  .latest-result-card__prize {
    padding: 10px var(--space-3);
    gap: var(--space-2);
  }

  .latest-result-card__prize-label {
    font-size: var(--text-xs);
    flex: 1;
    min-width: 0;
  }

  .latest-result-card__prize-number {
    font-size: var(--text-xl);
    letter-spacing: 1px;
    white-space: nowrap;
  }

  .latest-result-card__footer {
    gap: var(--space-3);
    padding-top: var(--space-3);
  }

  .latest-result-card__stat-label {
    font-size: 11px;
  }

  .latest-result-card__stat-value {
    font-size: var(--text-sm);
  }
}

@media (max-width: 359px) {
  .latest-result-card__prize-number {
    font-size: var(--text-lg);
    letter-spacing: 0;
  }
}

/* ---- Dashboard KPI/Card mobile density (UX Sprint) ---- */
@media (max-width: 767px) {
  .kpi {
    padding: var(--space-4);
    gap: 6px;
  }

  .kpi::before {
    width: 60px;
    height: 60px;
  }

  .kpi-label {
    font-size: var(--text-xs);
  }

  .kpi-value {
    font-size: var(--text-2xl);
  }

  .kpi-diff {
    font-size: var(--text-xs);
    padding: 1px 6px;
  }

  .card {
    padding: var(--space-4);
    border-radius: var(--radius-md);
  }

  .card-header {
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-3);
  }

  .card-title {
    font-size: var(--text-md);
  }

  .card-subtitle {
    font-size: var(--text-xs);
  }
}

/* ---- Operator Dashboard ----
   หน้าอ่านอย่างเดียว: บริบทงวด → ผลงาน → วันนี้ → งานค้าง → ลูกค้า → กราฟ
   ปุ่มลงมือทำจริงอยู่ที่ Workbench ที่นี่มีแค่ทางเข้า                        */
.op-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--success);
  border-radius: var(--radius-lg);
}

.op-hero--warning { border-left-color: var(--warning); }
.op-hero--danger { border-left-color: var(--danger); }
.op-hero--closed { border-left-color: var(--text-muted); }

.op-hero__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xl);
}

.op-hero__round {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-body);
}

.op-hero__game { font-weight: 700; color: var(--text-main); }
.op-hero__round-date { font-weight: 600; }
.op-hero__sep { color: var(--text-subtle); }
.op-hero__left { font-variant-numeric: tabular-nums; }

.op-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.op-hero__hint {
  flex-basis: 100%;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.op-metrics { gap: var(--space-3); }

.op-today-empty,
.op-alldone {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.op-alldone { color: var(--success); }

/* งานค้าง — ชิปเล็ก ๆ ที่กดแล้วไป Workbench ตรงจุด ไม่ใช่การ์ดใหญ่เต็มหน้า */
.op-tasks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-2);
}

.op-task {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  padding: var(--space-2) var(--space-3);
  min-height: var(--touch-min);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--text-main);
  text-decoration: none;
}

.op-task:hover { background: var(--bg-hover); }

.op-task__count {
  grid-row: span 2;
  min-width: 2ch;
  font-size: var(--text-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.op-task__label { font-size: var(--text-sm); font-weight: 600; }

.op-task__note {
  grid-column: 2;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.op-task__go { grid-row: span 2; color: var(--text-subtle); }

.op-task--danger { border-color: var(--danger-border); background: var(--danger-bg); }
.op-task--danger .op-task__count { color: var(--danger); }
.op-task--warning { border-color: var(--warning-border); background: var(--warning-bg); }
.op-task--warning .op-task__count { color: var(--warning); }
.op-task--info { border-color: var(--info-border); background: var(--info-bg); }
.op-task--info .op-task__count { color: var(--info); }

/* count = 0 ต้องไม่แย่ง visual priority */
.op-task--idle { opacity: 0.6; }
.op-task--idle .op-task__count { color: var(--text-subtle); }

.op-portfolio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
}

.op-portfolio__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.op-portfolio__stats b {
  font-size: var(--text-md);
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
}

.op-portfolio__risk {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.op-portfolio > .btn { margin-inline-start: auto; }

/* งวดก่อน — แถวเดียว อ่านอย่างเดียว ไม่ใช่งานใน Action Queue */
.prev-round-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  font-size: var(--text-sm);
}

.prev-round-row--pending { background: var(--warning-bg); border-color: var(--warning-border); }

.prev-round-row__head,
.prev-round-row__numbers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.prev-round-row__label { font-weight: 600; }

.prev-round-row__num {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-variant-numeric: tabular-nums;
}

.prev-round-row__num-label { font-size: var(--text-xs); color: var(--text-muted); }
.prev-round-row__action { margin-inline-start: auto; text-align: end; }

@media (max-width: 767px) {
  .op-hero {
    padding: var(--space-3);
    align-items: stretch;
  }

  /* มือถือต้องเห็นปุ่มคีย์บิลใหม่ทันทีโดยไม่ต้องเลื่อน */
  .op-hero__actions { width: 100%; }
  .op-hero__actions .btn { flex: 1; justify-content: center; min-height: 48px; }

  /* มือถือ: งานที่ต้องลงมือทำมาก่อนตัวเลขสรุป เพราะพื้นที่จำกัด
     order สลับเฉพาะภาพ ลำดับ DOM (และ screen reader) ยังเป็น ผลงาน → วันนี้ →
     งานค้าง · รับได้เพราะสองการ์ดบนไม่มีอะไรให้กด ลำดับโฟกัสจริงจึงยังไปถึง
     ลิงก์งานค้างเป็นชุดแรกอยู่ดี — ถ้าวันไหนการ์ดบนมีปุ่ม ต้องย้าย DOM แทน */
  .op-stack { display: flex; flex-direction: column; }
  .op-stack__tasks { order: 1; }
  .op-stack__perf { order: 2; }
  .op-stack__today { order: 3; }

  .op-tasks { grid-template-columns: 1fr 1fr; }
  .op-portfolio > .btn { margin-inline-start: 0; width: 100%; justify-content: center; }
  .prev-round-row__action { margin-inline-start: 0; width: 100%; }
}

/* ---- Task list (งานค้าง) ---- */
.task-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
}

.task-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  transition: border-color var(--dur-fast) var(--ease-ios);
}

.task-list__item:hover {
  border-color: var(--border-medium);
}

.task-list__body {
  flex: 1;
  min-width: 0;
}

.task-list__title {
  font-weight: var(--weight-semibold);
  color: var(--text-main);
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.task-list__meta {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.task-list__actions {
  flex: none;
}

.task-list__empty {
  padding: var(--space-5);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* ---- Row actions (table cells) ---- */
.row-actions {
  display: inline-flex;
  gap: var(--space-1);
  align-items: center;
}

.row-actions .btn {
  min-height: var(--touch-sm);
  padding: 4px 10px;
}

/* ---- Customer Dashboard Balance Card (Sprint 2) ---- */
.customer-balance-card {
  padding: var(--space-6) var(--space-5);
  background: linear-gradient(135deg, var(--gold-tint) 0%, var(--gold-light) 100%);
  border: 1px solid var(--gold-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.customer-balance-card__hero {
  text-align: center;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--gold-soft);
  margin-bottom: var(--space-4);
}

.customer-balance-card__label {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.customer-balance-card__value {
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  color: var(--gold-active);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.customer-balance-card__unit {
  font-size: var(--text-xl);
  color: var(--text-body);
  font-weight: var(--weight-medium);
  margin-left: 6px;
}

.customer-balance-card__hint {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: var(--space-2);
}

/* ตัวชี้วัดมีสามตัว จึงวางสามคอลัมน์ ไม่ใช่สองแล้วปล่อยตัวที่สามห้อยเดี่ยว
   ข้างช่องว่างครึ่งการ์ด */
.customer-balance-card__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3) var(--space-5);
}

.customer-balance-card__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.customer-balance-card__stat-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.customer-balance-card__stat-value {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
}

/* ต้องอยู่ *หลัง* กฎฐานข้างบน — specificity เท่ากัน ตัวที่ประกาศทีหลังชนะ
   ถ้าวางบล็อกนี้ไว้ก่อน กฎจอแคบจะถูกกฎฐานทับจนไม่มีผลเลย */
@media (max-width: 640px) {
  .customer-balance-card {
    padding: var(--space-5) var(--space-4);
  }

  .customer-balance-card__value {
    font-size: 40px;
  }

  .customer-balance-card__unit {
    font-size: var(--text-lg);
  }

  /* จอแคบใส่สามคอลัมน์แล้วตัวเลขจะเบียดกัน — ลงมาสองคอลัมน์
     แล้วให้ตัวสุดท้ายกินเต็มแถวแทนที่จะห้อยข้างช่องว่าง */
  .customer-balance-card__stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  /* ตัวชี้วัดจำนวนคี่จะเหลือตัวสุดท้ายห้อยเดี่ยวข้างช่องว่างครึ่งแถว
     ให้กินเต็มแถวแล้วอ่านเป็นซ้าย-ขวาแทน ช่องว่างจึงกลายเป็นระยะห่างที่ตั้งใจ
     — ไม่ใช้สามคอลัมน์ที่จอแคบเพราะยอด "ใช้ไปทั้งหมด" หลักล้านจะเบียดจนตัด */
  .customer-balance-card__stat:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding-top: var(--space-2);
    border-top: 1px solid var(--gold-soft);
  }
}

/* ---- Sprint 2 mobile (xs base) ---- */
@media (max-width: 479px) {
  /* การ์ดยอดคงเหลือไม่ต้องซ้ำที่นี่ — บล็อก 640px ครอบช่วงนี้อยู่แล้ว */
  .task-list__item {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }

  .task-list__actions {
    align-self: flex-end;
  }
}

/* ---- Operator Workbench ----
   แถบบริบทงวด + ปุ่มหลัก ติดบนตลอดตอน scroll · คนคีย์ต้องสร้างบิลใหม่ได้
   ทันทีไม่ว่าจะอ่านคิวงานอยู่ตรงไหน                                          */
.wb-bar {
  position: sticky;
  /* เกาะใต้ topbar ไม่ใช่ที่ 0 ไม่งั้นเลื่อนแล้วมุดเข้าไปอยู่หลัง topbar */
  top: var(--topbar-height, 64px);
  z-index: calc(var(--z-nav) - 1);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--success);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 10px rgba(28, 28, 30, 0.06);
}

.wb-bar--warning { border-left-color: var(--warning); }
.wb-bar--danger { border-left-color: var(--danger); }
.wb-bar--closed { border-left-color: var(--text-muted); }

.wb-bar__round {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-md);
}

.wb-bar__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: 2px;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.wb-bar__today { font-variant-numeric: tabular-nums; }

.wb-bar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* deep-link จากหน้าแรกต้องพาไปถึง "รายการ" ไม่ใช่ให้แถบ sticky บังหัว section
   เผื่อ = topbar + ความสูงแถบงวด + ระยะหายใจ (วัดจริงแล้วขอบล่างแถบอยู่ ~143px) */
#urgent,
#review,
#drafts,
#customers {
  scroll-margin-top: calc(var(--topbar-height, 64px) + 96px);
}

/* section ที่ไม่มีรายการ ยุบเป็นบรรทัดเดียว ไม่กินพื้นที่การ์ดใหญ่ */
.wb-empty {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* ลูกค้าที่คีย์เพิ่มไม่ได้ ต้องเห็นตั้งแต่กวาดตา ไม่ใช่รู้ตอนกดปุ่มแล้วไม่ติด */
.wb-row-blocked { background: var(--danger-bg); }

@media (max-width: 767px) {
  .wb-bar {
    top: calc(var(--topbar-height-mobile, 56px) + env(safe-area-inset-top));
    padding: var(--space-2) var(--space-3);
    margin-inline: calc(-1 * var(--space-3));
    border-radius: 0;
  }

  .wb-bar__actions { width: 100%; }
  .wb-bar__actions .btn { flex: 1; justify-content: center; min-height: 44px; }

  /* มือถือมีทั้ง topbar และแถบงวด ต้องเผื่อทั้งคู่ */
  #urgent,
  #review,
  #drafts,
  #customers {
    scroll-margin-top: calc(var(--topbar-height-mobile, 56px) + 148px);
  }
}

/* บันทึกปักหมุดของลูกค้าในหน้าคีย์บิล — เตือนให้อ่านก่อนยืนยัน ไม่ใช่สถานะเสี่ยง */
.customer-pinned-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--info-bg);
  border: 1px solid var(--info-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--text-body);
}

/* ---- Session Warning Modal (Sprint 5b) ---- */
.session-warning-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.session-warning-modal.is-open {
  display: flex;
}

.session-warning-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28, 28, 30, 0.55);
  backdrop-filter: blur(2px);
}

.session-warning-modal__body {
  position: relative;
  z-index: 1;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  max-width: 440px;
  width: 100%;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--warning-border);
  border-top: 4px solid var(--warning);
}

.session-warning-modal__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--text-main);
  margin: 0 0 var(--space-3) 0;
}

.session-warning-modal__msg {
  color: var(--text-body);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-5) 0;
}

.session-warning-modal__msg strong {
  color: var(--warning);
  font-variant-numeric: tabular-nums;
}

.session-warning-modal__actions {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
}

@media (max-width: 479px) {
  .session-warning-modal__actions {
    flex-direction: column-reverse;
  }

  .session-warning-modal__actions .btn {
    width: 100%;
  }
}

/* ---- Mobile UX Deep Polish (Sprint 5g) ---- */
@media (max-width: 640px) {
  .btn {
    min-height: 44px;
  }

  .btn-sm {
    min-height: 40px;
    padding: 8px 14px;
  }

  .btn-icon {
    width: 44px;
    height: 44px;
  }

  .quick-amount-chip {
    min-height: 44px;
    padding: 10px 18px;
  }

  .form-input,
  .form-select,
  .form-textarea {
    min-height: 44px;
    font-size: 16px;
  }

  .bill-check {
    width: 22px;
    height: 22px;
    cursor: pointer;
  }

  .modal-footer {
    gap: var(--space-3);
  }

  .modal-footer .btn-danger+.btn-primary,
  .modal-footer .btn-primary+.btn-danger {
    margin-left: var(--space-2);
  }
}

@media (max-width: 640px) {
  .modal {
    padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  }
}

/* ---- Admin Mobile Compact List View (Batch 2 · B4) ---- */
body.admin-dashboard .admin-view-toggle {
  display: none;
  margin-bottom: var(--space-4);
  padding: var(--space-1);
  gap: var(--space-1);
  background: var(--bg-subtle);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  width: fit-content;
}

body.admin-dashboard .admin-view-toggle__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  min-height: 40px;
  background: transparent;
  border: none;
  border-radius: var(--radius-full);
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-ios), color var(--dur-base) var(--ease-ios);
}

body.admin-dashboard .admin-view-toggle__btn:hover {
  color: var(--text-main);
}

body.admin-dashboard .admin-view-toggle__btn.is-active {
  background: var(--bg-card);
  color: var(--text-main);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

body.admin-dashboard .admin-list {
  display: none;
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4) 0;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

body.admin-dashboard .admin-list-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  min-height: 56px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-main);
  text-decoration: none;
  transition: background var(--dur-base) var(--ease-ios);
  position: relative;
}

body.admin-dashboard .admin-list-item:last-child {
  border-bottom: none;
}

body.admin-dashboard .admin-list-item:hover,
body.admin-dashboard .admin-list-item:focus-visible {
  background: var(--bg-subtle);
  outline: none;
}

body.admin-dashboard .admin-list-item__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  color: var(--text-muted);
}

body.admin-dashboard .admin-list-item__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body.admin-dashboard .admin-list-item__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-main);
  line-height: 1.3;
}

body.admin-dashboard .admin-list-item__value {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.admin-dashboard .admin-list-item__chevron {
  flex-shrink: 0;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
}

body.admin-dashboard .admin-list-item--warning {
  box-shadow: inset 3px 0 0 var(--danger);
}

body.admin-dashboard .admin-list-item--warning .admin-list-item__icon {
  background: var(--danger-bg);
  color: var(--danger);
}

body.admin-dashboard .admin-list-item--pending {
  box-shadow: inset 3px 0 0 var(--warning);
}

body.admin-dashboard .admin-list-item--pending .admin-list-item__icon {
  background: var(--warning-bg);
  color: var(--warning);
}

body.admin-dashboard .admin-list-item--info {
  box-shadow: inset 3px 0 0 var(--info, var(--gold-tint));
}

body.admin-dashboard .admin-list-item--info .admin-list-item__icon {
  background: var(--gold-tint);
  color: var(--gold-active);
}

body.admin-dashboard[data-admin-view="list"] .admin-list {
  display: block;
}

body.admin-dashboard[data-admin-view="list"] .admin-cards-scope {
  display: none;
}

body.admin-dashboard[data-admin-view="card"] .admin-list {
  display: none;
}

body.admin-dashboard[data-admin-view="card"] .admin-cards-scope {
  display: block;
}

@media (max-width: 1023px) {
  body.admin-dashboard .admin-view-toggle {
    display: inline-flex;
  }
}

@media (min-width: 1024px) {
  body.admin-dashboard .admin-view-toggle {
    display: none !important;
  }

  body.admin-dashboard .admin-list {
    display: none !important;
  }

  body.admin-dashboard .admin-cards-scope {
    display: block !important;
  }
}

/* ---- Chart Mobile Polish (Batch 3) ---- */
.chart-container {
  height: 240px;
  position: relative;
}

.chart-container--tall {
  height: 300px;
}

/* Mobile-first chart hide/show */
.top-numbers-list.show-mobile-chart,
.bet-type-list.show-mobile-chart,
.finance-mobile-summary.show-mobile-chart {
  display: none;
}

@media (max-width: 767px) {
  .chart-container {
    height: 180px;
  }

  .chart-container--tall {
    height: 180px;
  }

  .hide-mobile-chart {
    display: none !important;
  }

  .top-numbers-list.show-mobile-chart {
    display: flex;
  }

  .bet-type-list.show-mobile-chart {
    display: flex;
  }

  .finance-mobile-summary.show-mobile-chart {
    display: grid;
  }
}

/* Top-N compact list (used on mobile instead of bar chart) */
.top-numbers-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.top-numbers-list__item {
  display: grid;
  grid-template-columns: 28px auto 1fr auto;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  position: relative;
  overflow: hidden;
  min-height: 44px;
}

.top-numbers-list__rank {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  text-align: center;
}

.top-numbers-list__number {
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  color: var(--gold-active);
  letter-spacing: 1px;
  z-index: 1;
}

.top-numbers-list__type {
  font-size: var(--text-xs);
  color: var(--text-muted);
  z-index: 1;
}

.top-numbers-list__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-medium);
  color: var(--text-main);
  z-index: 1;
  text-align: right;
}

.top-numbers-list__bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--pct, 0%);
  background: linear-gradient(90deg, var(--gold-tint) 0%, transparent 100%);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

/* Bet-type compact list (used on mobile instead of donut) */
.bet-type-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.bet-type-list__item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  position: relative;
  overflow: hidden;
  min-height: 44px;
}

.bet-type-list__label {
  font-weight: var(--weight-medium);
  color: var(--text-main);
  z-index: 1;
}

.bet-type-list__pct {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
  color: var(--gold-active);
  z-index: 1;
}

.bet-type-list__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  font-size: var(--text-xs);
  grid-column: 1 / -1;
  text-align: right;
  z-index: 1;
}

.bet-type-list__bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--pct, 0%);
  background: linear-gradient(90deg, var(--gold-tint) 0%, transparent 100%);
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}

/* Finance mobile summary card (used to replace daily charts on mobile) */
.finance-mobile-summary {
  display: none;
  gap: var(--space-2);
  grid-template-columns: repeat(2, 1fr);
}

.finance-mobile-summary__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3);
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}

.finance-mobile-summary__label {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.finance-mobile-summary__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-main);
}

.finance-mobile-summary__item--ok {
  border-left: 3px solid var(--success);
}

.finance-mobile-summary__item--ok .finance-mobile-summary__value {
  color: var(--success);
}

.finance-mobile-summary__item--warning {
  border-left: 3px solid var(--danger);
}

.finance-mobile-summary__item--warning .finance-mobile-summary__value {
  color: var(--danger);
}

/* ---- .data-list · Reusable Compact List Pattern (Batch 4) ---- */
.data-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.data-list__item {
  display: grid;
  grid-template-columns: auto 1fr auto 16px;
  grid-template-rows: auto auto;
  column-gap: var(--space-3);
  row-gap: 2px;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  min-height: 60px;
  border-bottom: 1px solid var(--border-soft);
  text-decoration: none;
  color: var(--text-main);
  transition: background var(--dur-base) var(--ease-ios);
  position: relative;
}

.data-list__item:last-child {
  border-bottom: none;
}

.data-list__item:hover,
.data-list__item:focus-visible {
  background: var(--bg-subtle);
  outline: none;
}

.data-list__item--ok::before,
.data-list__item--warning::before,
.data-list__item--pending::before,
.data-list__item--info::before,
.data-list__item--danger::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
}

.data-list__item--ok::before {
  background: var(--success);
}

.data-list__item--warning::before {
  background: var(--warning);
}

.data-list__item--danger::before {
  background: var(--danger);
}

.data-list__item--pending::before {
  background: var(--warning);
}

.data-list__item--info::before {
  background: var(--gold-active);
}

.data-list__label {
  grid-row: 1;
  grid-column: 1 / 2;
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  color: var(--text-main);
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.data-list__label--plain {
  font-family: var(--font-body);
  letter-spacing: 0;
}

/* label ที่บรรจุ badge (เช่น scope ในหน้าอั้น) — pill เป็น atomic box
   ellipsis ใช้ไม่ได้ และ overflow: hidden ด้านบนจะเฉือนขอบล่างของ pill ทิ้ง */
.data-list__label:has(.badge) {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  overflow: visible;
  min-width: 0;
}

.data-list__label .badge {
  flex: 0 0 auto;
}

.data-list__value {
  grid-row: 1;
  grid-column: 3 / 4;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
  color: var(--text-main);
  text-align: right;
  white-space: nowrap;
}

.data-list__value--ok {
  color: var(--success);
}

.data-list__value--warning {
  color: var(--warning);
}

.data-list__value--danger {
  color: var(--danger);
}

.data-list__value--muted {
  color: var(--text-muted);
}

.data-list__chevron {
  grid-row: 1;
  grid-column: 4 / 5;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.data-list__meta {
  grid-row: 2;
  grid-column: 1 / 4;
  font-size: var(--text-xs);
  color: var(--text-muted);
  display: flex;
  gap: var(--space-2);
  flex-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.data-list__meta>span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ตัวคั่น "·" ของแถวคำอธิบายบนการ์ดบิล — มาจาก CSS ไม่ใช่ตัวอักษรในเทมเพลต
   เพราะคอลัมน์ในแถวนี้ซ่อนได้ (ตัวเลือก "คอลัมน์ที่แสดง" ใน /bills)
   ⇒ ถ้า "·" อยู่ในข้อความ การซ่อนตัวหัวแถวจะเหลือจุดลอยนำหน้าทุกใบ

   `:not([hidden]) ~ :not([hidden])` = ให้จุดเฉพาะตัวที่ "มีของที่มองเห็นอยู่ก่อน
   หน้า" ⇒ ตัวแรกที่เหลืออยู่ไม่มีจุดเสมอ ไม่ว่าจะซ่อนอะไรไป
   ⛔ ป้ายส่วนลดไม่รับจุด — มันมีขอบของตัวเองอยู่แล้ว (ตั้งใจตั้งแต่เฟส 28ก)
      กันด้วย :not() ในตัว selector เอง ไม่ใช่กฎทับ · กฎทับต้องไล่ specificity
      ตามกันไม่จบ (ตัวนี้ = 0,3,3) */
.bill-list-meta>span:not([hidden])~span:not([hidden]):not(.data-list__meta-badge)::before {
  content: "·";
  margin-right: 4px;
}

/* ป้ายตัวเลขในแถวคำอธิบาย (ตอนนี้มีตัวเดียว: ส่วนลดของบิลใน /bills)
   ⚠️ ต้องเป็น selector สองคลาส (0,2,0) ให้ชนะ `.data-list__meta>span` (0,1,1)
   ไม่งั้น `white-space: normal` ในมีเดียคิวรีข้างล่างจะหักตัวเลขตกบรรทัด
   กลายเป็นป้ายสองชั้นสูงกว่าเพื่อนทั้งแถว
   line-height 1.6 · เหตุผลเดียวกับ `.badge` — 1.4 เฉือนสระล่างไทย */
.data-list__meta>.data-list__meta-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: var(--radius-full);
  background: var(--warning-bg);
  color: var(--warning);
  border: 1px solid var(--warning-border);
  font-weight: var(--weight-medium);
  line-height: 1.6;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

@media (max-width: 640px) {
  .data-list__meta {
    flex-wrap: wrap;
    white-space: normal;
    overflow: visible;
    row-gap: 2px;
  }

  .data-list__meta>span {
    white-space: nowrap;
  }
}

@media (max-width: 640px) {
  .data-list__meta {
    flex-wrap: wrap;
    white-space: normal;
    overflow: visible;
    row-gap: 2px;
    line-height: 1.4;
  }

  .data-list__meta>span {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }
}

/* Mobile-first: hide desktop table on mobile · show list */
.data-list-wrapper {
  display: none;
}

.data-table-wrapper {
  display: block;
}

@media (max-width: 767px) {
  .data-list-wrapper {
    display: block;
  }

  .data-table-wrapper {
    display: none;
  }
}

@media (max-width: 767px) {}

/* ═══════════════════════════════════════════════════════
 * Phase 7A · Operator Work Queue (Urgent / Review / Normal)
 * Mobile-first · list layout · no overflow-x
 * ═══════════════════════════════════════════════════════ */
.workqueue-section {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
  overflow: hidden;
}

.workqueue-section.is-empty {
  background: var(--bg-subtle);
  opacity: 0.75;
}

.workqueue-urgent {
  border-color: var(--danger-border);
  box-shadow: 0 0 0 1px var(--danger-border) inset;
}

.workqueue-review {
  border-color: var(--warning-border);
}

.workqueue-urgent.is-empty,
.workqueue-review.is-empty {
  border-color: var(--border-medium);
  box-shadow: none;
}

.workqueue-header {
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--border-soft);
}

.workqueue-section.is-empty .workqueue-header {
  border-bottom: none;
}

.workqueue-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.workqueue-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.workqueue-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.workqueue-dot-danger {
  background: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-bg);
}

.workqueue-dot-warning {
  background: var(--warning);
  box-shadow: 0 0 0 3px var(--warning-bg);
}

.workqueue-count {
  font-size: 12px;
  padding: 2px 8px;
}

.workqueue-hint {
  margin: 6px 0 0 0;
  font-size: 12px;
  color: var(--text-muted);
}

.workqueue-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.workqueue-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-soft);
  transition: background 120ms ease;
}

.workqueue-item:last-child {
  border-bottom: none;
}

.workqueue-item:hover {
  background: var(--bg-hover);
}

.workqueue-item-danger {
  background: var(--danger-bg);
}

.workqueue-item-warning {
  background: var(--warning-bg);
}

.workqueue-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--text-muted);
  flex-shrink: 0;
}

.workqueue-item-danger .workqueue-item-icon {
  color: var(--danger);
}

.workqueue-item-warning .workqueue-item-icon {
  color: var(--warning);
}

.workqueue-item-main {
  flex: 1;
  min-width: 0;
}

.workqueue-item-title {
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  line-height: 1.4;
  color: var(--text-main);
}

.workqueue-item-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  overflow-wrap: anywhere;
}

.workqueue-item-action {
  flex-shrink: 0;
  white-space: nowrap;
  min-height: 36px;
  padding-left: 10px;
  padding-right: 10px;
}

.workqueue-empty {
  padding: 20px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: 13px;
}

/* Mobile 390 · stack action below content for easy tap */
@media (max-width: 480px) {
  .workqueue-item {
    flex-wrap: wrap;
    row-gap: 8px;
    padding: 12px 14px;
  }

  .workqueue-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }

  .workqueue-item-main {
    flex: 1 1 calc(100% - 44px);
  }

  .workqueue-item-action {
    flex: 1 1 100%;
    justify-content: center;
    min-height: 40px;
  }

  .workqueue-header {
    padding: 12px 14px 8px;
  }
}

/* ═══════════════════════════════════════════════════════
 * Phase 7B · Pre-submit Check Modal
 * Desktop = centered card 520px · Mobile = bottom sheet full-width
 * ═══════════════════════════════════════════════════════ */
.presubmit-modal[hidden] {
  display: none !important;
}

.presubmit-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.presubmit-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(2px);
}

body.presubmit-modal-open {
  overflow: hidden;
}

.presubmit-card {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 40px);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: presubmit-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes presubmit-in {
  from {
    transform: translateY(20px) scale(0.98);
    opacity: 0;
  }

  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.presubmit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-card);
}

.presubmit-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
}

.presubmit-close-btn {
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.presubmit-close-btn:hover {
  background: var(--bg-subtle);
  color: var(--text-main);
}

.presubmit-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px;
}

.presubmit-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: 14px;
  padding: 20px 0;
}

.presubmit-row-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--border-soft);
  margin-bottom: 14px;
}

.presubmit-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 3px;
}

.presubmit-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-main);
}

.presubmit-balance {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-subtle);
  border-radius: 10px;
  margin-bottom: 14px;
}

.presubmit-balance-item {
  flex: 1;
}

.presubmit-arrow {
  color: var(--text-muted);
  font-size: 20px;
  font-weight: 700;
}

.presubmit-totals {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.presubmit-totals>div {
  padding: 10px 12px;
  background: var(--bg-subtle);
  border-radius: 8px;
}

.presubmit-total-net {
  grid-column: 1 / -1;
  background: var(--info-bg) !important;
  border: 1px solid var(--info-border);
}

.presubmit-total-net .presubmit-value {
  font-size: 20px;
  color: var(--info);
}

.presubmit-issues {
  padding: 12px 14px;
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  border-radius: 10px;
  margin-bottom: 14px;
}

.presubmit-issues.has-errors {
  background: var(--danger-bg);
  border-color: var(--danger-border);
}

.presubmit-issues-title {
  margin: 0 0 8px 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--warning);
}

.presubmit-issues.has-errors .presubmit-issues-title {
  color: var(--danger);
}

.presubmit-issues-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-body);
}

.presubmit-issue-error {
  color: var(--danger);
}

.presubmit-issue-warn {
  color: var(--warning);
}

.presubmit-overflow-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--info-bg);
  border-radius: 8px;
  font-size: 12px;
  color: var(--info);
  margin-bottom: 14px;
}

.presubmit-footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--border-soft);
  background: var(--bg-subtle);
}

.presubmit-footer .btn {
  min-height: 44px;
  min-width: 120px;
}

/* Mobile 480 ↓ · Bottom sheet */
@media (max-width: 480px) {
  .presubmit-modal {
    align-items: flex-end;
    padding: 0;
  }

  .presubmit-card {
    max-width: 100%;
    max-height: 92vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    animation: presubmit-sheet-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  @keyframes presubmit-sheet-in {
    from {
      transform: translateY(100%);
    }

    to {
      transform: translateY(0);
    }
  }

  .presubmit-header {
    padding: 14px 16px;
  }

  .presubmit-body {
    padding: 14px 16px;
  }

  .presubmit-footer {
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0));
    flex-direction: column-reverse;
  }

  .presubmit-footer .btn {
    width: 100%;
    min-width: 0;
  }

  .presubmit-totals {
    grid-template-columns: 1fr 1fr;
  }
}

/* ═══════════════════════════════════════════════════════
 * Phase 8 · Betting Editing Chip · fixes edit-item data loss
 * ═══════════════════════════════════════════════════════ */
.bet-editing-chip[hidden] {
  display: none !important;
}

.bet-editing-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  margin: 10px 0 4px;
  background: var(--info-bg);
  border: 1px solid var(--info-border);
  border-radius: var(--radius-md);
  color: var(--info);
  font-size: 13px;
  animation: bet-editing-slide 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes bet-editing-slide {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.bet-editing-chip-title {
  font-weight: 600;
  color: var(--info);
}

.bet-editing-chip-value {
  color: var(--text-main);
  font-weight: 700;
  flex: 1;
  overflow-wrap: anywhere;
}

.bet-editing-chip-cancel {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border: 1px solid var(--info-border);
  background: var(--bg-card);
  color: var(--info);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  min-height: 32px;
  white-space: nowrap;
  transition: background 120ms ease;
}

.bet-editing-chip-cancel:hover {
  background: var(--info-bg);
}

@media (max-width: 480px) {
  .bet-editing-chip {
    flex-wrap: wrap;
    padding: 10px 12px;
  }

  .bet-editing-chip-cancel {
    flex: 1 1 100%;
    justify-content: center;
    min-height: 40px;
  }
}

/* ═══════════════════════════════════════════════════════
 * Phase 8A · Customer Quick View Modal
 * Desktop = 560px card · Mobile = bottom sheet
 * ═══════════════════════════════════════════════════════ */
.quickview-modal[hidden] {
  display: none !important;
}

.quickview-modal {
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.quickview-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
}

body.quickview-modal-open {
  overflow: hidden;
}

.quickview-card {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 40px);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: presubmit-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.quickview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-card);
}

.quickview-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
}

.quickview-close-btn {
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.quickview-close-btn:hover {
  background: var(--bg-subtle);
  color: var(--text-main);
}

.quickview-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}

.quickview-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  padding: 24px 0;
  font-size: 14px;
}

.quickview-headline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--border-soft);
  margin-bottom: 14px;
}

.quickview-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
}

.quickview-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.quickview-risk-badge {
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.quickview-risk-badge.is-ok {
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid var(--success-border);
}

.quickview-risk-badge.is-warning {
  background: var(--warning-bg);
  color: var(--warning);
  border: 1px solid var(--warning-border);
}

.quickview-risk-badge.is-danger {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid var(--danger-border);
}

.quickview-section {
  margin-bottom: 14px;
}

.quickview-section:last-child {
  margin-bottom: 0;
}

.quickview-section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.quickview-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.quickview-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  margin-top: 2px;
}

.quickview-finance-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 12px 14px;
  background: var(--bg-subtle);
  border-radius: 10px;
  margin-bottom: 10px;
}

.quickview-utilization-bar {
  height: 8px;
  background: var(--border-soft);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: 4px;
}

.quickview-utilization-fill {
  height: 100%;
  background: var(--info);
  transition: width 300ms ease;
  border-radius: var(--radius-full);
}

.quickview-utilization-fill.is-high {
  background: var(--danger);
}

.quickview-utilization-label {
  font-size: 11px;
  color: var(--text-muted);
  text-align: right;
}

.quickview-activity {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.quickview-activity-item {
  padding: 10px 12px;
  background: var(--bg-subtle);
  border-radius: 8px;
}

.quickview-risks-list,
.quickview-recent-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.quickview-risk {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 6px;
}

.quickview-risk-warning {
  background: var(--warning-bg);
  color: var(--warning);
  border: 1px solid var(--warning-border);
}

.quickview-risk-danger {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid var(--danger-border);
}

.quickview-recent-item {
  margin-bottom: 6px;
}

.quickview-recent-link {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: var(--bg-subtle);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-main);
  transition: background 120ms ease;
}

.quickview-recent-link:hover {
  background: var(--bg-hover);
}

.quickview-recent-no {
  font-weight: 600;
  font-size: 13px;
}

.quickview-recent-date {
  font-size: 11px;
  color: var(--text-muted);
}

.quickview-recent-amount {
  font-weight: 700;
  color: var(--info);
}

.quickview-footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid var(--border-soft);
  background: var(--bg-subtle);
}

.quickview-footer .btn {
  min-height: 44px;
  min-width: 120px;
}

/* Mobile 480 ↓ · bottom sheet */
@media (max-width: 480px) {
  .quickview-modal {
    align-items: flex-end;
    padding: 0;
  }

  .quickview-card {
    max-width: 100%;
    max-height: 92vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    animation: presubmit-sheet-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .quickview-header {
    padding: 14px 16px;
  }

  .quickview-body {
    padding: 14px 16px;
  }

  .quickview-footer {
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0));
    flex-direction: column-reverse;
  }

  .quickview-footer .btn {
    width: 100%;
    min-width: 0;
  }

  .quickview-finance-grid {
    grid-template-columns: 1fr 1fr;
  }

  .quickview-finance-grid>div:nth-child(3) {
    grid-column: 1 / -1;
  }

  .quickview-activity {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════
 * Phase 8B · Daily Closing Checklist
 * ═══════════════════════════════════════════════════════ */
.closing-checklist {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.closing-checklist.is-clean {
  border-color: var(--success-border);
}

.closing-checklist.has-warnings {
  border-color: var(--warning-border);
  box-shadow: 0 0 0 1px var(--warning-border) inset;
}

.closing-checklist.has-blockers {
  border-color: var(--danger-border);
  box-shadow: 0 0 0 1px var(--danger-border) inset;
}

.closing-checklist-header {
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--border-soft);
}

.closing-checklist-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.closing-checklist-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
}

.closing-checklist-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.closing-checklist.is-clean .closing-checklist-dot {
  background: var(--success);
  box-shadow: 0 0 0 3px var(--success-bg);
}

.closing-checklist.has-warnings .closing-checklist-dot {
  background: var(--warning);
  box-shadow: 0 0 0 3px var(--warning-bg);
}

.closing-checklist.has-blockers .closing-checklist-dot {
  background: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-bg);
}

.closing-checklist-hint {
  margin: 6px 0 0 0;
  font-size: 12px;
  color: var(--text-muted);
}

.closing-checklist-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.closing-checklist-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-soft);
  transition: background 120ms ease;
}

.closing-checklist-item:last-child {
  border-bottom: none;
}

.closing-checklist-item.is-ok {
  color: var(--text-body);
}

.closing-checklist-item.is-warning {
  background: var(--warning-bg);
}

.closing-checklist-item.is-blocked {
  background: var(--danger-bg);
}

.closing-checklist-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
}

.closing-checklist-item.is-ok .closing-checklist-icon {
  background: var(--success-bg);
  color: var(--success);
}

.closing-checklist-item.is-warning .closing-checklist-icon {
  background: var(--bg-card);
  color: var(--warning);
}

.closing-checklist-item.is-blocked .closing-checklist-icon {
  background: var(--bg-card);
  color: var(--danger);
}

/* แถวเร่งด่วน (เช่น งวดที่เหลือไม่กี่นาที) — สีเดียวกับ blocked เพราะสายตาต้อง
   หยุดที่เดียวกัน แต่มันยังเป็น warning ในเชิงข้อมูล ไม่ถูกนับเป็น blocker */
.closing-checklist-item.is-warning.is-critical {
  background: var(--danger-bg);
}

.closing-checklist-item.is-warning.is-critical .closing-checklist-icon {
  background: var(--bg-card);
  color: var(--danger);
}

/* เน้นด้วยน้ำหนักตัวอักษร ไม่ใช่สีแดงบนพื้นแดง — var(--danger) บน --danger-bg
   ได้ contrast 3.37 ซึ่งตกเกณฑ์ AA ของข้อความขนาด 12px (ต้อง ≥ 4.5)
   สีแดงของแถวสื่อผ่านพื้นหลัง ไอคอน และปุ่มอยู่แล้ว */
.closing-checklist-item.is-warning.is-critical .closing-checklist-detail {
  color: var(--text-body);
  font-weight: 600;
}

.closing-checklist-main {
  flex: 1;
  min-width: 0;
}

.closing-checklist-item-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.closing-checklist-count {
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
  color: var(--text-body);
  font-size: 12px;
  font-weight: 700;
}

.closing-checklist-detail {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.closing-checklist-action {
  flex-shrink: 0;
  white-space: nowrap;
  min-height: 32px;
}

/* Mobile 480 ↓ stack action */
@media (max-width: 480px) {
  .closing-checklist-item {
    flex-wrap: wrap;
    padding: 12px 14px;
  }

  .closing-checklist-action {
    flex: 1 1 100%;
    justify-content: center;
    min-height: 40px;
    margin-top: 6px;
  }

  .closing-checklist-header {
    padding: 12px 14px 8px;
  }
}

/* ═══════════════════════════════════════════════════════
 * Phase 9 · Duplicate Warning + Uncancel Panel + Note badge/section
 * ═══════════════════════════════════════════════════════ */
.presubmit-duplicate[hidden] {
  display: none !important;
}

.presubmit-duplicate {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  border-radius: 10px;
  color: var(--warning);
  margin-bottom: 14px;
}

.presubmit-duplicate-body {
  flex: 1;
  min-width: 0;
}

.presubmit-duplicate-title {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 2px;
}

.presubmit-duplicate-detail {
  font-size: 13px;
  color: var(--text-body);
  overflow-wrap: anywhere;
}

.presubmit-duplicate-detail a {
  color: var(--info);
  font-weight: 700;
  text-decoration: underline;
}

.presubmit-duplicate-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Uncancel panel inside CANCELLED alert */
.uncancel-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px dashed var(--warning-border);
  border-radius: 8px;
}

.uncancel-hint {
  font-size: 12px;
  color: var(--warning);
  display: flex;
  align-items: center;
  gap: 6px;
}

.uncancel-hint strong {
  font-size: 14px;
  color: var(--danger);
}

[data-uncancel-form] {
  display: flex;
  gap: 8px;
  align-items: stretch;
  flex-wrap: wrap;
}

.uncancel-expired {
  padding: 6px 10px;
  background: var(--bg-subtle);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Quick View note section */
.quickview-note-body {
  padding: 8px 12px;
  background: var(--info-bg);
  border: 1px solid var(--info-border);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-main);
  overflow-wrap: anywhere;
}

@media (max-width: 480px) {
  [data-uncancel-form] {
    flex-direction: column;
  }

  [data-uncancel-form] .btn {
    width: 100%;
    min-height: 44px;
  }
}

/* ═══════════════════════════════════════════════════════
 * Phase 10 Option A · Quick Bet Templates
 * Desktop = centered card 560px · Mobile = bottom sheet
 * ═══════════════════════════════════════════════════════ */
.template-picker-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--info-bg);
  color: var(--info);
  border-color: var(--info-border);
  font-weight: 600;
}

.template-picker-chip.has-templates {
  background: var(--success-bg, #ecfdf5);
  color: var(--success, #059669);
  border-color: var(--success-border, #a7f3d0);
}

.template-picker-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--success, #059669);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.template-picker[hidden],
.template-picker-loading[hidden],
.template-picker-empty[hidden],
.template-picker-list[hidden],
.template-picker-mode[hidden],
.template-picker-count[hidden] {
  display: none !important;
}

.template-picker {
  position: fixed;
  inset: 0;
  z-index: 1002;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.template-picker-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
}

body.template-picker-open {
  overflow: hidden;
}

.template-picker-card {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 40px);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: presubmit-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.template-picker-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-card);
}

.template-picker-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
}

.template-picker-subtitle {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-muted);
}

.template-picker-close-btn {
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
}

.template-picker-close-btn:hover {
  background: var(--bg-subtle);
  color: var(--text-main);
}

.template-picker-mode {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-subtle);
  flex-wrap: wrap;
}

.template-picker-mode-label {
  font-size: 12px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.template-picker-mode-toggle {
  display: inline-flex;
  border: 1px solid var(--border-medium);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-card);
}

.template-picker-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border: none;
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  min-height: 36px;
}

.template-picker-mode-btn.is-active {
  background: var(--gold-primary);
  color: #fff;
}

.template-picker-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 20px 20px;
}

.template-picker-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 20px 0;
  color: var(--text-muted);
  justify-content: center;
}

.template-picker-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 40px 20px;
  color: var(--text-muted);
  text-align: center;
}

.template-picker-empty-hint {
  font-size: 12px;
  color: var(--text-muted);
  opacity: 0.7;
}

.template-picker-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.template-card {
  margin: 0;
}

.template-card-btn {
  display: block;
  width: 100%;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  transition: all 120ms ease;
  position: relative;
  min-height: 96px;
}

.template-card-btn:hover {
  border-color: var(--gold-primary);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.12);
  transform: translateY(-1px);
}

.template-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.template-card-billno {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  overflow-wrap: anywhere;
}

.template-card-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  padding: 2px 8px;
  background: var(--bg-subtle);
  border-radius: 999px;
  white-space: nowrap;
}

.template-card-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.template-card-nums {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.template-card-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 26px;
  padding: 0 6px;
  background: var(--info-bg);
  color: var(--info);
  border: 1px solid var(--info-border);
  border-radius: 6px;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  font-weight: 700;
}

.template-card-num-more {
  background: var(--bg-subtle);
  color: var(--text-muted);
  border-color: var(--border-medium);
}

.template-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

.template-card-total {
  font-weight: 600;
  color: var(--text-main);
}

.template-card-time {
  font-size: 11px;
  color: var(--text-muted);
}

.template-card-apply-hint {
  display: block;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--border-soft);
  font-size: 11px;
  color: var(--gold-primary);
  font-weight: 600;
  text-align: right;
}

.template-picker-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--border-soft);
  background: var(--bg-subtle);
}

.template-picker-footer .btn {
  min-height: 44px;
  min-width: 100px;
}

@media (max-width: 480px) {
  .template-picker {
    align-items: flex-end;
    padding: 0;
  }

  .template-picker-card {
    max-width: 100%;
    max-height: 92vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    animation: presubmit-sheet-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .template-picker-header {
    padding: 14px 16px;
  }

  .template-picker-mode {
    padding: 10px 16px;
  }

  .template-picker-body {
    padding: 12px 16px 16px;
  }

  .template-picker-footer {
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0));
  }

  .template-card-btn {
    padding: 12px 14px;
    min-height: 100px;
  }

  .template-card-num {
    min-width: 40px;
    height: 30px;
    font-size: 13px;
  }

  .template-card-apply-hint {
    font-size: 12px;
  }
}

/* ═══════════════════════════════════════════════════════
 * Phase 10 Option B · Manager Command Center
 * Desktop-first 4-zone grid · Mobile stacked
 * ═══════════════════════════════════════════════════════ */
.cc-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px 4px 32px;
}

@keyframes cc-pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.35);
    opacity: 0.6;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

[data-cc-zone="live"] {
  grid-area: live;
}

[data-cc-zone="today"] {
  grid-area: today;
}

[data-cc-zone="top"] {
  grid-area: top;
}

[data-cc-zone="feed"] {
  grid-area: feed;
}

/* Zone 1 · live round */
/* Zone 2 · today KPI */
.cc-kpi {
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  border: 1px solid transparent;
  transition: border-color 120ms ease;
}

/* Zone 3 · top movers */
.cc-top-num {
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  color: var(--info, #0284c7);
  padding: 2px 8px;
  background: var(--info-bg, #f0f9ff);
  border-radius: 6px;
}

/* Zone 4 · attention feed */
/* Tablet */
@media (max-width: 1180px) {
}

/* Mobile */
@media (max-width: 720px) {
}

/* ═══════════════════════════════════════════════════════
 * Phase 10.5 · Command Center extensions
 *   • Alert banner (Zone 0)
 *   • Round selector (Zone 1)
 *   • Compare delta badges (Zone 2)
 *   • Clickable Top Mover rows (Zone 3)
 * ═══════════════════════════════════════════════════════ */
.cc-alerts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cc-alerts:empty {
  display: none;
}

.cc-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  animation: cc-alert-in 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cc-alert-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cc-alert-icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 700;
}

.cc-alert-body {
  flex: 1;
  min-width: 0;
}

.cc-alert-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
}

.cc-alert-detail {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.cc-alert-cta {
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
}

.cc-alert-cta:hover {
  background: rgba(255, 255, 255, 0.85);
}

.cc-alert-close {
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  min-height: 28px;
  min-width: 28px;
  opacity: 0.6;
}

.cc-alert-close:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.4);
}

.cc-alert-info {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e40af;
}

.cc-alert-info .cc-alert-icon {
  background: #bfdbfe;
  color: #1e40af;
}

.cc-alert-warning {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #9a3412;
}

.cc-alert-warning .cc-alert-icon {
  background: #fed7aa;
  color: #9a3412;
}

.cc-alert-danger {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

.cc-alert-danger .cc-alert-icon {
  background: #fecaca;
  color: #991b1b;
  animation: cc-pulse 1.6s ease-in-out infinite;
}

/* Round selector */
.cc-round-select {
  border: 1px solid var(--border-medium);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  background: var(--bg-card);
  color: var(--text-main);
  max-width: 260px;
  min-height: 30px;
  cursor: pointer;
}

.cc-round-select:hover {
  border-color: var(--gold-primary);
}

/* Compare delta badge on KPI labels */
/* Clickable Top Mover row */
@media (max-width: 720px) {
  .cc-round-select {
    max-width: 100%;
    flex: 1 1 100%;
    min-height: 44px;
    font-size: 14px;
    padding: 8px 12px;
  }

  .cc-alert {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  .cc-alert-body {
    flex-basis: 100%;
  }

  .cc-alert-cta {
    flex: 1;
    text-align: center;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .cc-alert-close {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Phase 10.6 · Actionable links across Command Center */
/* ═══════════════════════════════════════════════════════
 * Phase Next-1 · Generic settings form (Configurable Behavior)
 * ═══════════════════════════════════════════════════════ */
.settings-section {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 16px;
  scroll-margin-top: 80px;
}

.settings-section-header {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--border-soft);
}

.settings-section-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
}

.settings-section-desc {
  margin: 4px 0 0 26px;
  font-size: 12px;
  color: var(--text-muted);
}

.settings-fields-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px 20px;
}

.settings-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.settings-field-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
}

.settings-input {
  padding: 8px 12px;
  border: 1px solid var(--border-medium);
  border-radius: 8px;
  font-size: 14px;
  background: var(--bg-card);
  color: var(--text-main);
  min-height: 40px;
}

.settings-input:focus {
  outline: none;
  border-color: var(--gold-primary);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.settings-input-number {
  font-variant-numeric: tabular-nums;
}

.settings-textarea {
  min-height: 72px;
  resize: vertical;
}

.settings-field-help {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}

.settings-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  min-height: 40px;
  position: relative;
}

.settings-toggle input[type="checkbox"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  margin: 0;
}

.settings-toggle-slider {
  position: relative;
  width: 42px;
  height: 24px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-medium);
  border-radius: 999px;
  transition: background 160ms ease, border-color 160ms ease;
}

.settings-toggle-slider::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

.settings-toggle input:checked+.settings-toggle-slider {
  background: var(--success, #059669);
  border-color: var(--success, #059669);
}

.settings-toggle input:checked+.settings-toggle-slider::after {
  transform: translateX(18px);
}

.settings-toggle-label {
  font-size: 13px;
  color: var(--text-muted);
}

.settings-toggle input:checked~.settings-toggle-label {
  color: var(--success, #059669);
  font-weight: 600;
}

.settings-form-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed var(--border-soft);
  flex-wrap: wrap;
}

.settings-form-actions .btn {
  min-height: 40px;
}

.settings-form-status {
  font-size: 12px;
  color: var(--text-muted);
  margin-left: auto;
}

@media (max-width: 720px) {
  .settings-fields-grid {
    grid-template-columns: 1fr;
  }

  .settings-section {
    padding: 16px;
  }

  .settings-form-actions .btn {
    flex: 1;
    min-height: 44px;
  }
}

/* Phase Next-1 · E2 Low balance badge + banner */
.nav-badge[hidden] {
  display: none !important;
}

.nav-badge-low-balance {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--warning, #f59e0b);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  margin-left: auto;
  line-height: 1;
}

.nav-badge-low-balance.is-danger {
  background: var(--danger, #ef4444);
  animation: cc-pulse 1.6s ease-in-out infinite;
}

.nav-badge-low-balance.is-warning {
  background: var(--warning, #f59e0b);
}

.low-balance-banner[hidden] {
  display: none !important;
}

.low-balance-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  margin-bottom: 12px;
  animation: cc-alert-in 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.low-balance-banner.is-warning {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #9a3412;
}

.low-balance-banner.is-danger {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

.low-balance-banner-body {
  flex: 1;
}

.low-balance-banner-hint {
  font-size: 12px;
  opacity: 0.8;
  margin-top: 4px;
}

/* Phase Next-1 · E5 Backup status card */
.backup-status-card {
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
}

.backup-status-card.backup-sev-ok {
  background: #ecfdf5;
  border-color: #a7f3d0;
}

.backup-status-card.backup-sev-warning {
  background: #fff7ed;
  border-color: #fed7aa;
}

.backup-status-card.backup-sev-danger {
  background: #fef2f2;
  border-color: #fecaca;
}

.backup-status-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.backup-status-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.backup-status-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.backup-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.backup-pill-ok {
  background: #065f46;
  color: #fff;
}

.backup-pill-warning {
  background: #9a3412;
  color: #fff;
}

.backup-pill-danger {
  background: #991b1b;
  color: #fff;
  animation: cc-pulse 1.6s ease-in-out infinite;
}

.backup-status-msg {
  font-size: 14px;
  font-weight: 600;
}

.backup-status-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

.backup-status-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.backup-status-actions .btn {
  min-height: 36px;
}

@media (max-width: 720px) {
  .backup-status-actions .btn {
    flex: 1;
    min-height: 44px;
  }
}

/* Phase Next-1 · F1 PWA install banner */
.pwa-banner[hidden] {
  display: none !important;
}

.pwa-banner {
  position: fixed;
  left: 12px;
  right: 12px;
  /* เดิมเป็น 9990 ซึ่งสูงกว่าทุกอย่างในระบบ — สูงกว่า modal (300), ชีตแก้บิล
     บนมือถือ (999) และกล่องยืนยันก่อนส่งโพย (1000) คำชวนติดตั้งแอปจึงลอยทับ
     กล่องที่ผู้ใช้กำลังตัดสินใจอยู่ · ที่ถูกคือสูงกว่าแถบนำทางเท่านั้น
     แล้วอยู่ใต้ลิ้นชัก/โมดัล/ทุกอย่างที่ผู้ใช้เปิดขึ้นมาเอง */
  z-index: calc(var(--z-nav) + 1);
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
  animation: pwa-slide-in 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.pwa-banner-bottom {
  bottom: calc(12px + env(safe-area-inset-bottom, 0));
}

/* จอที่มีแถบนำทางล่าง (สูง 64px) — แบนเนอร์ต้องวาง *เหนือ* แถบ ไม่ใช่ทับ
   ไม่งั้นปุ่มเมนูล่างซึ่งเป็นทางสัญจรหลักบนมือถือถูกบังทั้งแถว */
@media (max-width: 1023px) {
  .pwa-banner-bottom {
    bottom: calc(64px + 12px + env(safe-area-inset-bottom, 0));
  }

  /* หน้าของพนักงานคีย์มีปุ่มกลมกลางแถบเมนู (`.mobile-nav-fab`) ที่ตั้งใจให้
     โผล่พ้นแถบขึ้นมา ~23px — วัดจากจอจริงที่ 390px แล้วแบนเนอร์เฉือนยอดปุ่มอยู่
     ปุ่มนั้นคือทางเข้าคีย์บิลใหม่ซึ่งเป็นงานหลักของพนักงาน จึงเผื่อความสูงเพิ่ม
     เฉพาะหน้าที่มีปุ่มนี้ ไม่ดันแบนเนอร์ลอยสูงในหน้าที่ไม่มี */
  body:has(.mobile-nav-fab) .pwa-banner-bottom {
    bottom: calc(64px + 32px + 12px + env(safe-area-inset-bottom, 0));
  }
}

.pwa-banner-top {
  top: calc(12px + env(safe-area-inset-top, 0));
}

@keyframes pwa-slide-in {
  from {
    transform: translateY(20px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.pwa-banner-content {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}

.pwa-banner-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--info-bg, #f0f9ff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex: 0 0 auto;
}

.pwa-banner-body {
  flex: 1;
  min-width: 0;
}

.pwa-banner-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
}

.pwa-banner-desc {
  font-size: 12px;
  color: var(--text-muted);
}

.pwa-banner-actions {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}

.pwa-banner-actions .btn {
  min-height: 40px;
}

@media (max-width: 480px) {
  .pwa-banner-content {
    flex-wrap: wrap;
  }

  .pwa-banner-body {
    flex-basis: calc(100% - 52px);
  }

  .pwa-banner-actions {
    flex-basis: 100%;
  }

  .pwa-banner-actions .btn {
    flex: 1;
    min-height: 44px;
  }
}

/* ═══════════════════════════════════════════════════════
 * Phase Next-1.7 · Bento Grid Dashboard (iOS-inspired widget style)
 * ═══════════════════════════════════════════════════════ */
.bento-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px 4px 32px;
}

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

.bento-topbar-title {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-main);
}

.bento-topbar-subtitle {
  margin-top: 2px;
  font-size: 13px;
  color: var(--text-muted);
}

.bento-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  font-size: 12px;
  color: var(--text-muted);
  backdrop-filter: blur(8px);
}

.bento-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success, #22A06B);
  animation: bento-pulse 1.8s ease-in-out infinite;
}

@keyframes bento-pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.4);
    opacity: 0.55;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 12-col grid */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

.bento-alerts-strip {
  grid-column: span 12;
}

.bento-alerts-strip:empty {
  display: none;
}

/* .glass — opt-in true glassmorphism utility. Uses backdrop-filter, which
   costs GPU on every scroll frame — reserve it for a few elements that float
   over busy/scrolling content (sticky bars, overlays), not whole grids. */
/* Widget base — lightweight glass: translucent fill + inner top highlight.
   No backdrop-filter (the aura behind .bento-grid supplies the glass depth). */
.bento-widget {
  position: relative;
  background: rgba(255, 255, 255, 0.64);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 20px;
  padding: 20px;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 18px 44px -24px rgba(183, 133, 46, 0.35);
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0;
  animation: bento-widget-in 500ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.bento-widget::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(214, 168, 79, 0.05), transparent 40%);
  pointer-events: none;
}

.bento-widget:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 0 0 1.5px rgba(214, 168, 79, 0.42),
    0 2px 4px rgba(15, 23, 42, 0.05),
    0 16px 40px rgba(214, 168, 79, 0.18);
}

a.bento-widget:hover,
a.segment-tier:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 0 0 2px rgba(214, 168, 79, 0.55),
    0 4px 6px rgba(15, 23, 42, 0.06),
    0 20px 44px rgba(214, 168, 79, 0.22);
}

@keyframes bento-widget-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Staggered entrance (nth-child delays) */
.bento-widget:nth-child(1) {
  animation-delay: 0ms;
}

.bento-widget:nth-child(2) {
  animation-delay: 60ms;
}

.bento-widget:nth-child(3) {
  animation-delay: 120ms;
}

.bento-widget:nth-child(4) {
  animation-delay: 180ms;
}

.bento-widget:nth-child(5) {
  animation-delay: 240ms;
}

.bento-widget:nth-child(6) {
  animation-delay: 300ms;
}

.bento-widget:nth-child(7) {
  animation-delay: 360ms;
}

.bento-widget:nth-child(n+8) {
  animation-delay: 420ms;
}

.bento-widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}

.bento-widget-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.bento-widget-label svg {
  color: var(--gold-active, #B7852E);
  flex: 0 0 auto;
}

.bento-widget-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--grad-gold);
  color: #FFFFFF;
  flex: 0 0 auto;
  box-shadow: 0 2px 6px rgba(183, 133, 46, 0.28);
}

/* Zone sizes */
.bento-kpi-block {
  grid-column: span 4;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.bento-kpi-block>.bento-widget {
  grid-row: auto;
}

.bento-top-widget {
  grid-column: span 4;
}

.bento-feed {
  grid-column: span 7;
}

.bento-fullwidth {
  grid-column: span 12;
}

/* Hero live round */
/* KPI widget */
.bento-kpi-widget {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 130px;
}

.bento-kpi-widget .bento-widget-header {
  margin-bottom: 4px;
}

.bento-kpi-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.bento-kpi-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}

.bento-kpi-delta.up {
  background: #E6F7EF;
  color: #22A06B;
}

.bento-kpi-delta.down {
  background: #FCEAEA;
  color: #E5484D;
}

.bento-kpi-delta.flat {
  background: var(--bg-subtle);
  color: var(--text-muted);
}

.bento-kpi-delta:empty {
  display: none;
}

.bento-kpi-widget.warn {
  background: linear-gradient(135deg, rgba(254, 243, 214, 0.92), rgba(255, 255, 255, 0.64) 70%);
}

.bento-kpi-widget.danger {
  background: linear-gradient(135deg, rgba(252, 234, 234, 0.92), rgba(255, 255, 255, 0.64) 70%);
}

.bento-kpi-widget.danger .bento-widget-icon {
  background: var(--grad-red);
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(229, 72, 77, 0.28);
}

/* Top widget · list style */
.bento-top-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  counter-reset: bentotop;
}

.bento-top-list li {
  counter-increment: bentotop;
  position: relative;
  padding: 6px 0 6px 34px;
  font-size: 13px;
  border-bottom: 1px dashed var(--border-soft);
}

.bento-top-list li:last-child {
  border-bottom: none;
}

.bento-top-list li::before {
  content: counter(bentotop);
  position: absolute;
  left: 0;
  top: 6px;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.bento-top-list li:nth-child(1)::before {
  background: linear-gradient(135deg, #F4E4C1, #D6A84F);
  color: #FFFFFF;
}

.bento-top-list li:nth-child(2)::before {
  background: linear-gradient(135deg, #E5E7EB, #9CA3AF);
  color: #FFFFFF;
}

.bento-top-list li:nth-child(3)::before {
  background: linear-gradient(135deg, #F6C7A6, #C88F6B);
  color: #FFFFFF;
}

.bento-top-list a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  color: inherit;
  text-decoration: none;
}

.bento-top-list a:hover .bento-top-name {
  color: var(--gold-active, #B7852E);
  text-decoration: underline;
}

/* Phase Next-1.7 · Modern financial summary card (replaces old border-left bar) */
.financial-summary-card {
  position: relative;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  overflow: hidden;
  background:
    radial-gradient(circle at top right, rgba(214, 168, 79, 0.08), transparent 60%),
    linear-gradient(180deg, rgba(255, 253, 247, 0.9) 0%, rgba(255, 255, 255, 0.64) 40%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 18px 44px -24px rgba(183, 133, 46, 0.35);
}

.financial-summary-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-primary) 0%, var(--gold-hover) 40%, var(--gold-active) 100%);
  border-radius: 20px 20px 0 0;
}

.financial-summary-card>.card-body {
  padding: 0;
}

.financial-summary-card .fs-inner {
  position: relative;
  z-index: 1;
}

.financial-summary-card .fs-loading {
  position: absolute;
  inset: 0;
  background: rgba(255, 253, 247, 0.88);
  border-radius: 20px;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2;
  font-size: 13px;
  color: var(--gold-active);
  font-weight: 600;
}

.financial-summary-card.is-loading .fs-loading {
  display: flex;
}

/* Modern segment tabs (replaces old anchor segment) */
.fs-tabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: var(--bg-subtle);
  border-radius: 12px;
  border: 1px solid var(--border-soft);
}

.fs-tab {
  padding: 6px 14px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
  min-height: 32px;
  white-space: nowrap;
}

.fs-tab:hover {
  color: var(--text-main);
  background: var(--bg-hover);
}

.fs-tab.is-active {
  background: var(--bg-card);
  color: var(--gold-active);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

@media (max-width: 720px) {
  .fs-tabs {
    flex-wrap: wrap;
  }

  .fs-tab {
    flex: 1;
    min-height: 40px;
    text-align: center;
    justify-content: center;
  }
}

/* Improve legibility: ensure link contrast when placed on tinted backgrounds */
.bento-widget a:not(.btn):not(.bento-widget-link):not(.bento-top-list a):hover {
  color: var(--gold-hover);
  text-decoration: underline;
  text-decoration-color: var(--gold-hover);
  text-underline-offset: 3px;
}

.bento-top-list a:hover {
  background: rgba(214, 168, 79, 0.06);
  border-radius: 6px;
  padding-left: 4px;
  transition: background 120ms ease;
}

.bento-top-name {
  font-weight: 600;
  color: var(--text-main);
  overflow-wrap: anywhere;
}

.bento-top-detail {
  font-size: 12px;
  color: var(--text-muted);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.bento-top-num {
  font-family: var(--font-mono, monospace);
  font-weight: 800;
  padding: 2px 8px;
  background: var(--gold-tint, #FBF2D8);
  color: var(--gold-active, #B7852E);
  border-radius: 6px;
}

.bento-top-empty {
  padding: 12px !important;
  border: none !important;
  padding-left: 0 !important;
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
}

.bento-top-empty::before {
  display: none !important;
}

/* Feed widget */
.bento-feed-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 280px;
  overflow-y: auto;
}

.bento-feed-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 10px 40px;
  border-radius: 12px;
  font-size: 13px;
  background: var(--bg-subtle);
  flex-wrap: wrap;
  transition: background 120ms ease, transform 120ms ease;
  --sev-color: #94a3b8;
  --sev-bg: rgba(148, 163, 184, 0.10);
}

.bento-feed-item::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--sev-bg);
  transform: translateY(-50%);
}

.bento-feed-item::after {
  content: '';
  position: absolute;
  left: 18px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sev-color);
  transform: translateY(-50%);
  box-shadow: 0 0 0 3px var(--sev-bg);
}

.bento-feed-item:hover {
  background: var(--bg-hover);
  transform: translateX(2px);
}

.bento-feed-item a {
  color: inherit;
  text-decoration: none;
  display: contents;
}

.bento-feed-item.sev-info {
  --sev-color: #0EA5E9;
  --sev-bg: rgba(14, 165, 233, 0.12);
  background: linear-gradient(90deg, rgba(14, 165, 233, 0.06), transparent 40%);
}

.bento-feed-item.sev-warning {
  --sev-color: #F59E0B;
  --sev-bg: rgba(245, 158, 11, 0.15);
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.10), transparent 50%);
}

.bento-feed-item.sev-danger {
  --sev-color: #E5484D;
  --sev-bg: rgba(229, 72, 77, 0.15);
  background: linear-gradient(90deg, rgba(229, 72, 77, 0.10), transparent 50%);
}

.bento-feed-item.sev-danger::after {
  animation: cc-pulse 1.6s ease-in-out infinite;
}

.bento-feed-list-static {
  max-height: none !important;
  overflow: visible !important;
}

/* Phase Next-1.7 · Bill status pills with gradient backgrounds */
.bento-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  background: linear-gradient(135deg, #E5E7EB, #D1D5DB);
  color: #374151;
}

.bento-status-pill.bento-status-draft {
  background: linear-gradient(135deg, #F3F4F6, #E5E7EB);
  color: #6B7280;
}

.bento-status-pill.bento-status-submitted {
  background: linear-gradient(135deg, #E0F2FE, #7DD3FC);
  color: #075985;
}

.bento-status-pill.bento-status-accepted {
  background: linear-gradient(135deg, #DCFCE7, #86EFAC);
  color: #14532D;
}

.bento-status-pill.bento-status-over_limit {
  background: linear-gradient(135deg, #FEF3C7, #FCD34D);
  color: #78350F;
}

.bento-status-pill.bento-status-forwarded_to_agent,
.bento-status-pill.bento-status-forwarded {
  background: linear-gradient(135deg, #DBEAFE, #93C5FD);
  color: #1E3A8A;
}

.bento-status-pill.bento-status-waiting_result {
  background: linear-gradient(135deg, #FEF9C3, #FDE047);
  color: #713F12;
}

.bento-status-pill.bento-status-winning {
  background: linear-gradient(135deg, #A7F3D0, #10B981);
  color: #064E3B;
}

.bento-status-pill.bento-status-losing {
  background: linear-gradient(135deg, #FECACA, #F87171);
  color: #7F1D1D;
}

.bento-status-pill.bento-status-settled {
  background: linear-gradient(135deg, #F4E4C1, #D6A84F);
  color: #FFFFFF;
  box-shadow: 0 1px 2px rgba(214, 168, 79, 0.3);
}

.bento-status-pill.bento-status-cancelled {
  background: linear-gradient(135deg, #FCA5A5, #DC2626);
  color: #FFFFFF;
  box-shadow: 0 1px 2px rgba(220, 38, 38, 0.3);
}

.bento-status-pill.bento-status-paid {
  background: linear-gradient(135deg, #86EFAC, #16A34A);
  color: #FFFFFF;
  box-shadow: 0 1px 2px rgba(22, 163, 74, 0.3);
}

.bento-status-pill.bento-status-active {
  background: linear-gradient(135deg, #BBF7D0, #22C55E);
  color: #052E16;
}

.bento-status-pill.bento-status-open {
  background: linear-gradient(135deg, #A7F3D0, #10B981);
  color: #064E3B;
}

.bento-status-pill.bento-status-closed {
  background: linear-gradient(135deg, #FED7AA, #FB923C);
  color: #7C2D12;
}

.bento-status-pill.bento-status-archived {
  background: linear-gradient(135deg, #E5E7EB, #9CA3AF);
  color: #1F2937;
}

/* Phase Next-2 · Customer Segmentation tier cards */
.segment-tier {
  display: flex;
  flex-direction: column;
  gap: 12px;
  grid-column: span 3;
  color: inherit;
  text-decoration: none;
  padding: 24px;
  min-height: 240px;
}

.segment-tier:hover .segment-tier-cta {
  color: var(--gold-active);
}

.segment-tier-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.segment-tier-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--grad-gold);
  color: #FFFFFF;
  flex: 0 0 auto;
  box-shadow: 0 2px 6px rgba(183, 133, 46, 0.28);
}

.segment-tier-label {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-main);
}

.segment-tier-hint {
  font-size: 11px;
  color: var(--text-muted);
}

.segment-tier-count {
  font-size: 40px;
  font-weight: 800;
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.segment-tier-totals {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text-body);
}

.segment-tier-totals>div {
  display: flex;
  justify-content: space-between;
}

.segment-tier-metric-label {
  color: var(--text-muted);
}

.segment-top-list {
  list-style: none;
  margin: 0;
  padding: 8px 0 0;
  border-top: 1px dashed var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}

.segment-top-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.segment-top-name {
  font-weight: 600;
  color: var(--text-main);
  overflow-wrap: anywhere;
}

.segment-top-detail {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.segment-tier-empty {
  padding: 12px 0;
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
  font-size: 12px;
}

.segment-tier-cta {
  margin-top: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold-primary);
}

.segment-tier.segment-vip {
  background: linear-gradient(135deg, #FBF2D8 0%, #FFFFFF 60%);
  border-color: var(--gold-primary);
}

.segment-tier.segment-vip .segment-tier-icon {
  background: linear-gradient(135deg, #D6A84F, #B7852E);
  color: #FFFFFF;
}

.segment-tier.segment-regular {
  background: linear-gradient(135deg, #ECFDF5 0%, #FFFFFF 60%);
  border-color: #A7F3D0;
}

.segment-tier.segment-regular .segment-tier-icon {
  background: linear-gradient(135deg, #10B981, #059669);
  color: #FFFFFF;
}

.segment-tier.segment-casual {
  background: linear-gradient(135deg, #EFF6FF 0%, #FFFFFF 60%);
  border-color: #BFDBFE;
}

.segment-tier.segment-casual .segment-tier-icon {
  background: linear-gradient(135deg, #0EA5E9, #0369A1);
  color: #FFFFFF;
}

.segment-tier.segment-dormant {
  background: linear-gradient(135deg, #F3F4F6 0%, #FFFFFF 60%);
  border-color: #D1D5DB;
}

.segment-tier.segment-dormant .segment-tier-icon {
  background: linear-gradient(135deg, #94A3B8, #64748B);
  color: #FFFFFF;
}

/* Phase Next-2 · P&L Analytics row + pill */
.pnl-row-loss {
  background: rgba(229, 72, 77, 0.05);
}

.pnl-row-warning {
  background: rgba(245, 158, 11, 0.05);
}

.pnl-margin-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pnl-margin-profit {
  background: rgba(34, 160, 107, 0.15);
  color: #14532D;
}

.pnl-margin-warning {
  background: rgba(245, 158, 11, 0.18);
  color: #78350F;
}

.pnl-margin-loss {
  background: rgba(229, 72, 77, 0.15);
  color: #7F1D1D;
}

/* Phase Next-3 · Operator × Round Matrix */
.pnl-matrix-section {
  overflow: hidden;
}

.pnl-matrix-scope {
  margin-left: 8px;
  padding: 2px 8px;
  background: rgba(212, 175, 55, 0.15);
  color: #78350F;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

.pnl-matrix-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 8px 4px 12px;
  font-size: 12px;
  color: var(--text-muted);
}

.pnl-matrix-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pnl-matrix-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.pnl-matrix-swatch--profit { background: rgba(34, 160, 107, 0.35); }
.pnl-matrix-swatch--warning { background: rgba(245, 158, 11, 0.35); }
.pnl-matrix-swatch--loss { background: rgba(229, 72, 77, 0.35); }
.pnl-matrix-swatch--empty { background: rgba(148, 163, 184, 0.15); }

.pnl-matrix-legend-hint {
  margin-left: auto;
  font-style: italic;
  opacity: 0.8;
}

.pnl-matrix-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  margin: 0 -4px;
  padding: 0 4px 4px;
}

.pnl-matrix {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.pnl-matrix th,
.pnl-matrix td {
  padding: 8px 10px;
  vertical-align: middle;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  border-right: 1px solid rgba(0, 0, 0, 0.04);
  text-align: center;
  white-space: nowrap;
}

.pnl-matrix thead th {
  position: sticky;
  top: 0;
  background: var(--bento-widget-bg, #fff);
  z-index: 3;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  border-bottom: 2px solid rgba(212, 175, 55, 0.3);
}

.pnl-matrix__corner {
  left: 0;
  z-index: 4 !important;
  text-align: left;
  min-width: 180px;
  background: var(--bento-widget-bg, #fff) !important;
}

.pnl-matrix__col-head {
  min-width: 88px;
}

.pnl-matrix__col-head a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: inherit;
  text-decoration: none;
  padding: 4px 2px;
  border-radius: 6px;
  transition: background 0.15s;
}

.pnl-matrix__col-head a:hover {
  background: rgba(212, 175, 55, 0.1);
  color: #78350F;
}

.pnl-matrix__col-date {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-body, #111);
}

.pnl-matrix__col-year {
  font-size: 10px;
  color: var(--text-muted);
}

.pnl-matrix__col-total {
  min-width: 96px;
  background: rgba(212, 175, 55, 0.08) !important;
  color: #78350F !important;
}

.pnl-matrix__row-head {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--bento-widget-bg, #fff);
  text-align: left;
  min-width: 180px;
  max-width: 220px;
  border-right: 2px solid rgba(212, 175, 55, 0.3) !important;
}

.pnl-matrix__op-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: inherit;
  text-decoration: none;
  padding: 4px 6px;
  border-radius: 6px;
  transition: background 0.15s;
}

.pnl-matrix__op-link:hover {
  background: rgba(212, 175, 55, 0.1);
  color: #78350F;
}

.pnl-matrix__rank {
  display: inline-block;
  margin-right: 4px;
  font-size: 14px;
}

.pnl-matrix__op-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-body, #111);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}

.pnl-matrix__op-username {
  font-size: 10px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pnl-matrix__cell {
  min-width: 88px;
  cursor: default;
  transition: transform 0.1s;
}

.pnl-matrix__cell:hover {
  transform: scale(1.02);
  z-index: 1;
  position: relative;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.pnl-matrix__cell-pnl {
  display: block;
  font-weight: 700;
  font-size: 13px;
}

.pnl-matrix__cell-pnl[hidden] {
  display: none !important;
}

.pnl-matrix__cell-meta {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 1px;
}

.pnl-matrix__cell-empty {
  color: rgba(148, 163, 184, 0.7);
  font-weight: 500;
}

.pnl-matrix__cell--profit { background: rgba(34, 160, 107, 0.12); }
.pnl-matrix__cell--profit .pnl-matrix__cell-pnl { color: #14532D; }

.pnl-matrix__cell--warning { background: rgba(245, 158, 11, 0.12); }
.pnl-matrix__cell--warning .pnl-matrix__cell-pnl { color: #78350F; }

.pnl-matrix__cell--loss { background: rgba(229, 72, 77, 0.12); }
.pnl-matrix__cell--loss .pnl-matrix__cell-pnl { color: #7F1D1D; }

.pnl-matrix__cell--empty { background: rgba(148, 163, 184, 0.04); }

.pnl-matrix__cell--total {
  background: rgba(212, 175, 55, 0.12);
  font-weight: 700;
  border-left: 2px solid rgba(212, 175, 55, 0.3);
}
.pnl-matrix__cell--total.pnl-matrix__cell--profit { background: rgba(34, 160, 107, 0.18); }
.pnl-matrix__cell--total.pnl-matrix__cell--loss { background: rgba(229, 72, 77, 0.18); }
.pnl-matrix__cell--total.pnl-matrix__cell--warning { background: rgba(245, 158, 11, 0.18); }

.pnl-matrix tfoot th,
.pnl-matrix tfoot td {
  background: rgba(212, 175, 55, 0.15) !important;
  font-weight: 700;
  border-top: 2px solid rgba(212, 175, 55, 0.4);
  border-bottom: none;
}

.pnl-matrix__foot-head {
  text-align: left;
  color: #78350F;
}

.pnl-matrix__cell--grand {
  background: rgba(212, 175, 55, 0.3) !important;
  color: #78350F;
  border-left: 2px solid #D4AF37;
}
.pnl-matrix__cell--grand.pnl-matrix__cell--profit { background: rgba(34, 160, 107, 0.28) !important; }
.pnl-matrix__cell--grand.pnl-matrix__cell--loss { background: rgba(229, 72, 77, 0.28) !important; }

.pnl-matrix-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-muted);
}

.pnl-matrix-empty p {
  margin-top: 8px;
  font-size: 13px;
}

.pnl-matrix-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pnl-matrix-toggle {
  display: inline-flex;
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bento-widget-bg, #fff);
}

.pnl-matrix-toggle-btn {
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.pnl-matrix-toggle-btn:hover {
  background: rgba(212, 175, 55, 0.08);
}

.pnl-matrix-toggle-btn.is-active {
  background: rgba(212, 175, 55, 0.2);
  color: #78350F;
}

.pnl-matrix-legend-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.pnl-matrix-legend-badge--best {
  background: rgba(34, 160, 107, 0.15);
  color: #14532D;
}

.pnl-matrix-legend-badge--worst {
  background: rgba(229, 72, 77, 0.15);
  color: #7F1D1D;
}

.pnl-matrix__cell--best {
  outline: 2px solid rgba(34, 160, 107, 0.55);
  outline-offset: -2px;
  position: relative;
}

.pnl-matrix__cell--worst {
  outline: 2px solid rgba(229, 72, 77, 0.55);
  outline-offset: -2px;
  position: relative;
}

.pnl-matrix__cell-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 10px;
  line-height: 1;
}

.pnl-matrix__sort-arrow {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 3px;
  opacity: 0;
  transition: opacity 0.15s;
}

.pnl-matrix__sort-arrow::before {
  content: "▾";
  font-size: 9px;
  color: currentColor;
}

.pnl-matrix__col-head--sort-desc .pnl-matrix__sort-arrow,
.pnl-matrix__col-head--sort-asc .pnl-matrix__sort-arrow {
  opacity: 1;
}

.pnl-matrix__col-head--sort-asc .pnl-matrix__sort-arrow::before {
  content: "▴";
}

[data-pnl-sort-col] {
  cursor: pointer;
  user-select: none;
}

[data-pnl-sort-col]:hover {
  background: rgba(212, 175, 55, 0.08) !important;
}

.pnl-matrix__op-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.pnl-matrix__op-link {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pnl-matrix__sparkline {
  width: 42px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.7;
}

.pnl-matrix__sparkline--up { color: #16a34a; }
.pnl-matrix__sparkline--down { color: #dc2626; }
.pnl-matrix__sparkline--flat { color: #64748b; }

@media (max-width: 720px) {
  .pnl-matrix-legend .pnl-matrix-legend-hint {
    display: none;
  }

  .pnl-matrix {
    font-size: 12px;
  }

  .pnl-matrix th,
  .pnl-matrix td {
    padding: 6px 8px;
  }

  .pnl-matrix__corner,
  .pnl-matrix__row-head {
    min-width: 140px;
    max-width: 160px;
  }

  .pnl-matrix__op-name {
    max-width: 120px;
    font-size: 12px;
  }

  .pnl-matrix__col-head {
    min-width: 74px;
  }

  .pnl-matrix__cell {
    min-width: 74px;
  }

  .pnl-matrix__cell-pnl {
    font-size: 12px;
  }

  .pnl-matrix__cell-meta {
    font-size: 9px;
  }
}

@media (max-width: 1180px) {
  .segment-tier {
    grid-column: span 6;
  }
}

@media (max-width: 720px) {
  .segment-tier {
    grid-column: span 12;
    padding: 20px;
    min-height: 200px;
  }

  .segment-tier-count {
    font-size: 32px;
  }
}

.bento-feed-time {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: var(--text-muted);
  min-width: 60px;
}

.bento-feed-action {
  font-weight: 700;
  color: var(--text-main);
}

.bento-feed-entity {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: var(--text-muted);
}

.bento-feed-amount {
  font-weight: 700;
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}

.bento-feed-actor {
  font-size: 12px;
  color: var(--text-muted);
}

.bento-feed-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
}

/* Trend widget */
/* Widget title link */
.bento-widget-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--gold-active, #B7852E);
  text-decoration: none;
}

.bento-widget-link:hover {
  text-decoration: underline;
}

/* Mobile responsive */
@media (max-width: 1180px) {
  .bento-kpi-block {
    grid-column: span 12;
  }

  .bento-top-widget {
    grid-column: span 6;
  }

  .bento-feed {
    grid-column: span 12;
  }

}

@media (max-width: 720px) {
  .bento-grid {
    gap: 12px;
  }

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

  .bento-kpi-block {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .bento-top-widget {
    grid-column: span 12;
  }

  .bento-widget {
    padding: 16px;
    border-radius: 18px;
  }

  .bento-kpi-value {
    font-size: 20px;
  }

  .bento-feed-list {
    max-height: 260px;
  }
}

@media (max-width: 640px) {
  .bento-feed-item {
    display: grid;
    grid-template-columns: auto auto 1fr;
    grid-template-areas:
      "time   status amount"
      "action action customer";
    gap: 4px 8px;
    padding: 12px 12px 12px 34px;
    min-height: 64px;
    align-items: center;
    flex-wrap: nowrap;
    font-size: 13px;
  }

  .bento-feed-item::before {
    left: 10px;
  }

  .bento-feed-item::after {
    left: 16px;
  }

  .bento-feed-time {
    grid-area: time;
    min-width: 0;
    font-size: 11px;
  }

  .bento-status-pill {
    grid-area: status;
    justify-self: start;
  }

  .bento-feed-amount {
    grid-area: amount;
    text-align: right;
    font-size: 15px;
    margin-left: 0;
    justify-self: end;
  }

  .bento-feed-action {
    grid-area: action;
    font-family: var(--font-mono, monospace);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }

  .bento-feed-actor {
    grid-area: customer;
    text-align: right;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    justify-self: end;
    min-width: 0;
  }
}

/* ═══════════════════════════════════════════════════════
 * Phase Next-1.5 · Settings sticky nav + collapsible sections
 * ═══════════════════════════════════════════════════════ */
.settings-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  margin: 0 -4px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  scrollbar-width: thin;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.settings-nav::-webkit-scrollbar {
  height: 4px;
}

.settings-nav::-webkit-scrollbar-thumb {
  background: var(--border-medium);
  border-radius: 4px;
}

.settings-nav-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: background 120ms ease, color 120ms ease;
  min-height: 40px;
}

.settings-nav-item:hover {
  background: var(--bg-subtle);
  color: var(--text-main);
}

.settings-nav-item.is-active {
  background: var(--gold-primary);
  color: #fff;
}

.settings-nav-item.is-active .settings-nav-badge {
  background: rgba(255, 255, 255, 0.25);
}

.settings-nav-danger {
  color: var(--danger, #ef4444);
}

.settings-nav-danger.is-active {
  background: var(--danger, #ef4444);
  color: #fff;
}

.settings-nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--gold-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.settings-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--gold-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  margin-left: 8px;
  vertical-align: middle;
}

/* Collapsible section (details/summary) */
.settings-section-collapsible {
  margin-bottom: 12px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  scroll-margin-top: 76px;
}

.settings-section-collapsible[open]>.settings-section-summary .settings-section-summary-toggle {
  transform: rotate(-180deg);
}

.settings-section-summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
  background: var(--bg-subtle);
  transition: background 120ms ease;
}

.settings-section-summary::-webkit-details-marker {
  display: none;
}

.settings-section-summary:hover {
  background: var(--bg-subtle);
  filter: brightness(0.98);
}

.settings-section-summary-title {
  flex: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
}

.settings-section-summary-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 2px 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: 999px;
}

.settings-section-summary-toggle {
  color: var(--text-muted);
  font-size: 14px;
  transition: transform 180ms ease;
}

.settings-section-collapsible .settings-section {
  border: none;
  border-radius: 0;
  margin: 0;
  background: var(--bg-card);
}

/* Section content wrapper — consistent inner padding for converted sections */
.settings-section-body {
  padding: 16px;
}

/* ---- Device kick modal (single-device policy notification) ---- */
.device-kick-modal {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.device-kick-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 15, 15, 0.6);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.device-kick-card {
  position: relative;
  max-width: 400px;
  width: 100%;
  background: rgba(255, 253, 247, 0.68);
  backdrop-filter: saturate(180%) blur(7px);
  border: 2px solid var(--warning);
  border-radius: var(--radius-xl);
  padding: 28px 24px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  animation: dangerModalIn 180ms cubic-bezier(.16, .94, .34, 1);
}

.device-kick-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--warning-bg);
  color: var(--warning);
  margin-bottom: 12px;
}

.device-kick-title {
  margin: 0 0 8px;
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--text-main);
}

.device-kick-body {
  margin: 0 0 6px;
  font-size: var(--text-sm);
  color: var(--text-body);
  line-height: 1.55;
}

.device-kick-hint {
  margin: 0 0 18px;
  font-size: var(--text-xs);
  color: var(--danger);
  font-weight: 600;
}

.device-kick-btn {
  width: 100%;
  min-height: 48px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--grad-gold);
  color: #FFFFFF;
  font-size: var(--text-base);
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}

.device-kick-btn:hover {
  filter: brightness(1.07);
}

/* ---- Impersonation (Super Admin switch-login) ---- */
.impersonation-banner {
  position: sticky;
  top: 0;
  z-index: calc(var(--z-nav) + 1);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: linear-gradient(135deg, #B45309, #92400E);
  color: #FFFFFF;
  font-size: var(--text-sm);
  box-shadow: 0 2px 8px rgba(146, 64, 14, 0.35);
}

.impersonation-banner svg {
  flex-shrink: 0;
}

.impersonation-banner-text {
  flex: 1;
  min-width: 0;
}

.impersonation-banner-form {
  margin: 0;
  flex-shrink: 0;
}

.impersonation-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  min-height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
  font-size: var(--text-xs);
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 120ms ease;
}

.impersonation-back-btn:hover {
  background: rgba(255, 255, 255, 0.28);
}

.impersonate-btn {
  color: var(--info);
}

.impersonate-btn:hover {
  background: var(--info-bg);
}

@media (max-width: 640px) {
  .impersonation-banner {
    flex-wrap: wrap;
    padding: 8px 12px;
  }

  .impersonation-back-btn {
    min-height: 44px;
  }

  .impersonate-btn-label {
    display: none;
  }
}

/* Configure button on a permission-matrix row (user quotas) */
.perm-configure-btn {
  margin-left: auto;
  padding: 3px 10px;
  font-size: 11px;
  border: 1px solid var(--border-medium);
  border-radius: 999px;
  white-space: nowrap;
}

.perm-configure-btn:hover {
  border-color: var(--gold-primary);
  color: var(--gold-active);
}

/* Severity pills inside a summary (health status, backup attention, ฯลฯ) */
.settings-pill-ok {
  background: var(--success-bg) !important;
  border-color: var(--success-border) !important;
  color: var(--success) !important;
}

.settings-pill-warn {
  background: var(--warning-bg) !important;
  border-color: var(--warning-border) !important;
  color: var(--warning) !important;
}

.settings-pill-error {
  background: var(--danger-bg) !important;
  border-color: var(--danger-border) !important;
  color: var(--danger) !important;
}

/* Danger Zone — summary carries the warning tone even while collapsed */
.settings-section-danger {
  border-color: var(--danger-border);
}

.settings-section-danger>.settings-section-summary {
  background: var(--danger-bg);
}

.settings-section-danger>.settings-section-summary .settings-section-summary-title {
  color: var(--danger);
}

/* Expand/collapse-all — <button> variant of a nav chip */
.settings-nav-toggle-all {
  margin-left: auto;
  border: 1px solid var(--border-medium);
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}

@media (max-width: 640px) {
  .settings-section-summary {
    min-height: 48px;
    padding: 10px 14px;
  }

  .settings-section-body {
    padding: 12px;
  }
}

/* Scroll anchor offset for legacy h3 targets */
h3[id^="section-"] {
  scroll-margin-top: 76px;
}

@media (max-width: 720px) {
  .settings-nav {
    padding: 8px 10px;
  }

  .settings-nav-item {
    font-size: 12px;
    padding: 8px 10px;
  }

  .settings-nav-item span:first-of-type {
    display: none;
  }

  .settings-nav-item[data-nav-target="section-configurable"] span:first-of-type {
    display: inline;
  }

  .settings-nav-item[data-nav-target="section-danger"] span:first-of-type {
    display: inline;
  }
}

/* ═══════════════════════════════════════════════════════
 * Phase Next-1.5 · Round Archive · summary + toolbar + list mode + pagination
 * ═══════════════════════════════════════════════════════ */
.archive-summary-bar {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.archive-summary-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 12px;
  border-right: 1px dashed var(--border-soft);
  min-width: 130px;
}

.archive-summary-item:last-child {
  border-right: none;
}

.archive-summary-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.archive-summary-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
}

.archive-toolbar {
  position: sticky;
  top: 0;
  z-index: 15;
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  margin-bottom: 12px;
  flex-wrap: wrap;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.archive-filter-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1;
  align-items: flex-end;
}

.archive-filter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 130px;
}

.archive-filter-field label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
}

.archive-filter-actions {
  display: flex;
  gap: 6px;
  align-items: flex-end;
}

.archive-filter-input {
  padding: 8px 12px;
  font-size: 13px;
  background: var(--bg-card);
  color: var(--text-main);
  border: 1px solid var(--border-medium) !important;
  border-radius: 8px;
  min-height: 40px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.archive-filter-input:hover {
  border-color: var(--border-strong) !important;
}

.archive-filter-input:focus {
  outline: none;
  border-color: var(--gold-primary) !important;
  box-shadow: 0 0 0 2px rgba(214, 168, 79, 0.15);
}

.archive-view-toggle {
  display: inline-flex;
  border: 1px solid var(--border-medium);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-card);
  height: 40px;
  align-self: flex-end;
}

.archive-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  min-height: 40px;
}

.archive-view-btn.is-active {
  background: var(--gold-primary);
  color: #fff;
}

.archive-total-line {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

/* List view */
.archive-view-list .archive-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.archive-list-item {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 120ms ease, transform 120ms ease;
}

.archive-list-item:hover {
  border-color: var(--gold-primary);
  transform: translateX(2px);
}

.archive-list-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: inherit;
  text-decoration: none;
  min-height: 68px;
}

.archive-list-icon {
  font-size: 22px;
  flex: 0 0 auto;
}

.archive-list-main {
  flex: 1;
  min-width: 0;
}

.archive-list-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  flex-wrap: wrap;
}

.archive-list-round {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}

.archive-list-meta {
  margin-top: 4px;
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--text-muted);
  flex-wrap: wrap;
  font-variant-numeric: tabular-nums;
}

.archive-list-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg-subtle);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
}

.archive-list-arrow {
  color: var(--text-muted);
  font-size: 18px;
  padding-left: 8px;
}

/* Pagination */
.archive-pagination {
  display: flex;
  gap: 6px;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
  flex-wrap: wrap;
}

.archive-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--border-medium);
  background: var(--bg-card);
  color: var(--text-main);
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  transition: background 120ms ease, color 120ms ease;
}

.archive-page-btn:hover {
  background: var(--bg-subtle);
}

.archive-page-btn.is-active {
  background: var(--gold-primary);
  border-color: var(--gold-primary);
  color: #fff;
}

.archive-page-btn.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

.archive-page-ellipsis {
  padding: 0 8px;
  color: var(--text-muted);
}

.archive-page-info {
  margin-left: 12px;
  font-size: 13px;
  color: var(--text-muted);
}

@media (max-width: 720px) {
  .archive-summary-bar {
    flex-direction: row;
    overflow-x: auto;
  }

  .archive-summary-item {
    min-width: 110px;
    padding: 0 10px;
  }

  .archive-summary-value {
    font-size: 15px;
  }

  .archive-toolbar {
    flex-direction: column;
    padding: 10px 12px;
  }

  .archive-filter-form {
    flex-direction: column;
    align-items: stretch;
  }

  .archive-filter-field {
    min-width: 0;
  }

  .archive-filter-field .form-input {
    min-height: 44px;
  }

  .archive-filter-actions .btn {
    flex: 1;
    min-height: 44px;
  }

  .archive-view-toggle {
    align-self: stretch;
    width: 100%;
  }

  .archive-view-btn {
    flex: 1;
    min-height: 44px;
    justify-content: center;
  }

  .archive-view-btn span {
    display: inline;
  }

  .archive-page-btn {
    min-width: 44px;
    height: 44px;
    padding: 0 10px;
  }

  .archive-list-link {
    padding: 10px 12px;
  }

  .hide-mobile {
    display: none;
  }
}

.segment-override-widget {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.bento-widget-subtitle {
  margin: 4px 0 8px;
  line-height: 1.5;
}

.segment-override-form {
  padding: 12px;
  background: rgba(214, 168, 79, 0.06);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
}

.segment-override-form-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 2fr auto;
  gap: 12px;
  align-items: end;
}

.segment-override-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.segment-override-field-wide {
  grid-column: span 1;
}

.segment-override-field-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.segment-override-list-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-soft);
}

.segment-override-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.segment-override-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
}

.segment-override-item-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.segment-override-item-name {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 600;
}

.segment-override-item-name a {
  color: var(--text-main);
  text-decoration: none;
  transition: color 0.15s ease;
}

.segment-override-item-name a:hover,
.segment-override-item-name a:focus {
  color: var(--gold-primary);
  text-decoration: none;
}

.segment-override-item-username {
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.segment-override-item-meta {
  display: flex;
  gap: 6px;
  align-items: center;
}

.segment-override-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.segment-override-badge.segment-vip {
  background: rgba(214, 168, 79, 0.14);
  color: var(--gold-active);
  border: 1px solid rgba(214, 168, 79, 0.30);
}

.segment-override-badge.segment-regular {
  background: rgba(34, 160, 107, 0.12);
  color: #157A48;
  border: 1px solid rgba(34, 160, 107, 0.28);
}

.segment-override-badge.segment-casual {
  background: rgba(56, 189, 248, 0.12);
  color: #0369A1;
  border: 1px solid rgba(56, 189, 248, 0.28);
}

.segment-override-badge.segment-dormant {
  background: rgba(148, 163, 184, 0.14);
  color: #475569;
  border: 1px solid rgba(148, 163, 184, 0.28);
}

.segment-override-empty {
  padding: 12px;
  text-align: center;
  border: 1px dashed var(--border-soft);
  border-radius: 10px;
}

@media (max-width: 900px) {
  .segment-override-form-row {
    grid-template-columns: 1fr;
  }

  .segment-override-item {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ═══════════════════════════════════════════════════════
 * Action Sheet Modal · Mobile-first tap-to-action pattern
 * Universal component: shown on data-list item tap
 * ═══════════════════════════════════════════════════════ */
.action-sheet-modal .action-sheet-card {
  max-width: 480px;
  width: 100%;
  display: flex;
  flex-direction: column;
  max-height: min(85vh, 620px);
}

.action-sheet-header {
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border-soft);
  align-items: flex-start;
  gap: 12px;
}

.action-sheet-body {
  padding: 12px 12px 4px;
  overflow-y: auto;
  flex: 1;
  -webkit-overflow-scrolling: touch;
}

.action-sheet-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.action-sheet-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  min-height: 52px;
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  border: 1px solid var(--border-soft);
  color: var(--text-main);
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  transition: background 120ms ease, border-color 120ms ease, transform 80ms ease;
  width: 100%;
}

.action-sheet-btn:hover,
.action-sheet-btn:focus-visible {
  background: var(--bg-hover);
  border-color: var(--border-medium);
  outline: none;
}

.action-sheet-btn:active {
  transform: translateY(1px);
}

.action-sheet-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  flex: 0 0 auto;
  color: var(--text-body);
}

.action-sheet-btn__label {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.3;
}

.action-sheet-btn__hint {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
  white-space: normal;
}

.action-sheet-btn__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  flex: 0 0 auto;
  opacity: 0.6;
}

/* Variants ------------------------------------ */
.action-sheet-btn--primary {
  background: linear-gradient(135deg, rgba(214, 168, 79, 0.10), rgba(214, 168, 79, 0.04));
  border-color: rgba(214, 168, 79, 0.35);
  color: var(--gold-active, #B7852E);
}

.action-sheet-btn--primary .action-sheet-btn__icon {
  background: var(--gold-tint, rgba(214, 168, 79, 0.15));
  color: var(--gold-active, #B7852E);
  border-color: rgba(214, 168, 79, 0.35);
}

.action-sheet-btn--primary:hover {
  background: linear-gradient(135deg, rgba(214, 168, 79, 0.18), rgba(214, 168, 79, 0.08));
  border-color: rgba(214, 168, 79, 0.5);
}

.action-sheet-btn--warning {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.10), rgba(245, 158, 11, 0.04));
  border-color: rgba(245, 158, 11, 0.35);
  color: #78350F;
}

.action-sheet-btn--warning .action-sheet-btn__icon {
  background: rgba(245, 158, 11, 0.15);
  color: #B45309;
  border-color: rgba(245, 158, 11, 0.35);
}

.action-sheet-btn--warning:hover {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(245, 158, 11, 0.08));
}

.action-sheet-btn--danger {
  background: linear-gradient(135deg, rgba(229, 72, 77, 0.08), rgba(229, 72, 77, 0.03));
  border-color: rgba(229, 72, 77, 0.35);
  color: #B91C1C;
}

.action-sheet-btn--danger .action-sheet-btn__icon {
  background: rgba(229, 72, 77, 0.12);
  color: #B91C1C;
  border-color: rgba(229, 72, 77, 0.35);
}

.action-sheet-btn--danger:hover {
  background: linear-gradient(135deg, rgba(229, 72, 77, 0.15), rgba(229, 72, 77, 0.06));
  border-color: rgba(229, 72, 77, 0.55);
}

.action-sheet-btn--info {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.08), rgba(14, 165, 233, 0.03));
  border-color: rgba(14, 165, 233, 0.35);
  color: #0369A1;
}

.action-sheet-btn--info .action-sheet-btn__icon {
  background: rgba(14, 165, 233, 0.12);
  color: #0369A1;
  border-color: rgba(14, 165, 233, 0.35);
}

/* Footer ------------------------------------ */
.action-sheet-footer {
  padding: 12px 16px 16px;
  border-top: 1px solid var(--border-soft);
  background: var(--bg-page);
  flex: none;
  /* ปุ่มยกเลิกต้องไม่ถูกบีบ/ไม่จมใต้ home indicator */
}

.action-sheet-cancel {
  width: 100%;
  min-height: 44px;
  justify-content: center;
  gap: 6px;
}

/* Mobile bottom-sheet feel ------------------------------------ */
@media (max-width: 640px) {
  .action-sheet-modal .action-sheet-card {
    /* dvh · 90vh คิดจาก viewport ตอน URL bar ยุบ ก้นชีทเลยไปอยู่ใต้แถบเบราว์เซอร์ */
    max-height: 90vh;
    max-height: 90dvh;
    max-width: 100vw;
    width: 100%;
    margin: 0;
    border-radius: 20px 20px 0 0;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    animation: action-sheet-slide-up 240ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .action-sheet-modal .edit-round-backdrop {
    animation: action-sheet-fade-in 240ms ease;
  }

  .action-sheet-footer {
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }

  .action-sheet-body {
    overscroll-behavior: contain;
  }

  .action-sheet-header {
    position: relative;
    padding-top: 22px;
  }

  .action-sheet-header::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: var(--border-medium);
    opacity: 0.6;
  }
}

@keyframes action-sheet-slide-up {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes action-sheet-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* ---- Snapshot meta — freshness line for SSR snapshot pages ---- */
.snapshot-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.snapshot-meta svg {
  flex-shrink: 0;
}

.snapshot-meta.is-stale {
  color: var(--warning);
}

.snapshot-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-medium);
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-ios);
}

.snapshot-refresh-btn:hover {
  border-color: var(--gold-primary);
  color: var(--gold-active);
  background: var(--gold-tint, #FBF2D8);
}

.snapshot-meta.is-stale .snapshot-refresh-btn {
  border-color: var(--warning);
  color: var(--warning);
}

/* ---- Glass fallback — without backdrop-filter, translucency alone would
   let page content bleed through modals. Fall back to solid. ---- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

  .modal,
  .edit-round-card {
    background: var(--bg-card);
  }
}

/* ---- Print — glass surfaces must flatten to solid white on paper ---- */
@media print {

  .card,
  .bento-widget,
  .financial-summary-card,
  .modal,
  .edit-round-card,
  .app-main {
    background: none;
  }
}
/* ===========================================================================
   CLEANUP PREVIEW MODAL — item list + pagination inside the shared
   danger-modal shell (settings › Auto Cleanup › Preview)
   =========================================================================== */
.cleanup-preview-summary {
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
}
.cleanup-preview-summary strong {
  font-size: var(--text-lg);
  font-variant-numeric: tabular-nums;
}
.cleanup-preview-warning[hidden] {
  display: none;
}
.cleanup-preview-warning {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: var(--text-xs);
  color: var(--warning);
  margin-bottom: var(--space-2);
}
.cleanup-preview-list {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  max-height: min(320px, 45vh);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.cleanup-preview-item {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-soft);
}
.cleanup-preview-item:last-child {
  border-bottom: none;
}
.cleanup-preview-item-title {
  font-size: var(--text-sm);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.cleanup-preview-item-meta {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 1px;
}
.cleanup-preview-loading,
.cleanup-preview-empty {
  padding: var(--space-5) var(--space-3);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.cleanup-preview-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.cleanup-preview-pager[hidden] {
  display: none;
}

/* ===========================================================================
   BALANCE LIST — at-risk row highlight (same thresholds as low-balance monitor)
   =========================================================================== */
.balance-row-warning > td {
  background: rgba(214, 168, 79, 0.07);
}
.balance-row-danger > td {
  background: rgba(229, 72, 77, 0.07);
}
.balance-row-danger > td:first-child {
  box-shadow: inset 3px 0 0 var(--danger);
}
.balance-row-warning > td:first-child {
  box-shadow: inset 3px 0 0 var(--warning);
}

/* ---- Overflow · ปุ่มรับ/ปฏิเสธของเจ้ามือ ----
   ช่องเหตุผลซ่อนไว้ใน <details> เพื่อไม่ให้ตารางล้น แต่กดปฏิเสธแล้วต้องพิมพ์
   เหตุผลก่อนเสมอ (service บังคับอยู่แล้ว) — ลดการกดพลาดโดยไม่ต้องใช้ JS */
.overflow-agent-actions {
  display: flex;
  gap: var(--space-1);
  align-items: center;
  flex-wrap: wrap;
}

/* กางช่องเหตุผลแล้วให้กินเต็มบรรทัด แถวจะสูงขึ้นแทนที่จะดันปุ่มตกขอบ */
.overflow-reject[open] {
  flex: 1 1 100%;
}

.overflow-reject > summary {
  list-style: none;
  cursor: pointer;
}

.overflow-reject > summary::-webkit-details-marker {
  display: none;
}

/* จงใจไม่ใช้ position:absolute — ตารางนี้อยู่ในกล่อง overflow:auto
   popover ที่ลอยออกมาจะถูกตัดจนพิมพ์เหตุผลไม่ได้ · ให้แถวสูงขึ้นแทน */
.overflow-reject-form {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--space-2);
  padding: var(--space-2);
  background: var(--bg-subtle, #f8f8f7);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: var(--radius-md);
}

.overflow-reject-form .form-input {
  flex: 1 1 180px;
  min-width: 0;
  padding: 4px 8px;
  font-size: var(--text-sm);
}

/* dropdown "งวดเก่ากว่า" ที่อยู่ในแถบตัวกรองงวดของการ์ดสรุปการเงิน */
.fs-tabs .fs-older-rounds {
  min-height: 32px;
  height: 32px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid var(--border-soft);
  background: var(--bg-card);
  color: var(--text-muted);
  max-width: 190px;
}

@media (max-width: 720px) {
  .fs-tabs .fs-older-rounds {
    flex: 1 0 100%;
    max-width: none;
    min-height: 40px;
    height: 40px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   หน้าแรกผู้ดูแล — โครงใหม่: context → งานที่ต้องจัดการ → ตัวเลข → แนวโน้ม
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · แถบ context: งวดที่กำลังดู + สถานะระบบ ── */
.ctx-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--border-soft);
}

.ctx-bar-main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.ctx-bar-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.ctx-round-select {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--border-soft);
  background: var(--bg-card);
  color: var(--text-main);
  font-size: 14px;
  font-weight: 700;
  max-width: 320px;
}

.ctx-bar-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ctx-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-soft);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
}

.ctx-chip.is-muted { background: transparent; border-color: transparent; }
.ctx-chip.is-warn { background: rgba(245, 158, 11, 0.14); border-color: rgba(245, 158, 11, 0.35); color: #92400E; }
.ctx-chip strong { color: var(--text-main); }

.ctx-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-subtle);
}

.ctx-chip.is-ok .ctx-dot { background: #16A34A; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.16); }
.ctx-chip.is-idle .ctx-dot { background: var(--text-subtle); }

.ctx-refresh {
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0 2px;
  display: inline-flex;
  align-items: center;
}

.ctx-refresh:hover { color: var(--gold-active, #B7852E); }

/* ── 3 · ตัวเลขสำคัญของงวด ── */
.exec-snapshot {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.exec-metric {
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.exec-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.exec-label svg { color: var(--gold-active, #B7852E); flex: 0 0 auto; }

.exec-value {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-main);
  line-height: 1.15;
}

.exec-delta {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-subtle);
}

.exec-delta.is-up { color: #15803D; }
.exec-delta.is-down { color: #B91C1C; }
.exec-delta.is-flat { color: var(--text-subtle); }

.exec-metric.is-good .exec-value { color: #15803D; }
.exec-metric.is-danger .exec-value { color: #B91C1C; }
.exec-metric.is-danger { border-color: rgba(185, 28, 28, 0.28); }

/* ── 4 · แนวโน้ม ── */
.trend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
}

.bento-widget-hint {
  font-size: 11px;
  color: var(--text-subtle);
}

.chart-slot {
  position: relative;
  height: 200px;
  margin-top: 10px;
}

.chart-slot canvas { max-height: 200px; }

.chart-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-size: 13px;
  color: var(--text-subtle);
}

/* ── ส่วนเสริมของแผน ── */
.insight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

/* upsell ต้องเล็กกว่าเนื้องานเสมอ — เดิมเป็นการ์ดเต็มแถวกินพื้นที่ above the fold */
.plan-upsell-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px dashed var(--border-soft);
  background: transparent;
  font-size: 12px;
  color: var(--text-subtle);
}

.plan-upsell-strip svg { flex: 0 0 auto; }
.plan-upsell-strip span:first-of-type { flex: 1; min-width: 0; }

.bento-topbar-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

@media (max-width: 720px) {
  .ctx-bar { align-items: stretch; }
  .ctx-bar-main { width: 100%; }
  .ctx-round-select { flex: 1; max-width: none; }
  .exec-value { font-size: 22px; }
  .chart-slot, .chart-slot canvas { height: 170px; max-height: 170px; }
}

/* ── checklist: ยุบรายการที่ผ่านแล้ว ── */
.closing-checklist-allclear {
  margin: 0;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
}

.closing-checklist-passed {
  border-top: 1px solid var(--border-soft);
}

.closing-checklist-passed > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-subtle);
}

.closing-checklist-passed > summary::-webkit-details-marker { display: none; }
.closing-checklist-passed > summary::after { content: '▾'; margin-left: auto; }
.closing-checklist-passed[open] > summary::after { content: '▴'; }
.closing-checklist-passed > summary:hover { color: var(--text-main); }

/* ── pace verdict: สรุปเป็นตัวหนังสือก่อนดูกราฟ ── */
.pace-verdict {
  margin: 6px 0 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
}

.pace-verdict strong { font-size: 20px; font-weight: 800; color: var(--text-main); }
.pace-verdict .is-up { color: #15803D; font-weight: 700; }
.pace-verdict .is-down { color: #B91C1C; font-weight: 700; }
.pace-verdict-note { color: var(--text-subtle); font-size: 11px; }

.chart-footnote {
  margin: 8px 0 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-subtle);
}

.fin-metric-note { font-weight: 400; color: var(--text-subtle); }

/* ── สรุปการเงิน: แยก "แถวสูตร" ออกจาก "แถวผลลัพธ์" ──
   เดิมทุก metric อยู่ grid เดียว พอ wrap แล้ว "ยอดยกเลิก" หล่นไปอยู่แถวล่าง
   ลำพัง ดูเหมือนตกหล่นมากกว่าตั้งใจแบ่ง · แยก grid ทำให้ audit ①→⑤ ได้รวดเดียว */
.fin-summary-outcome-label {
  margin: 14px 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.fin-summary-outcome-label:first-of-type { margin-top: 4px; }

.fin-summary-grid-flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.fin-summary-grid-outcome {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

@media (max-width: 1100px) {
  .fin-summary-grid-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .fin-summary-grid-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ══ การ์ด "รายการอั้น · ใช้ไปเท่าไร" บนหน้าแรกผู้ดูแล ══
   ใช้ .usage-bar ตัวเดียวกับหน้าตั้งค่าอั้น (สี is-normal/is-near/is-full)
   แต่บีบให้เตี้ยลงเพราะที่นี่แสดงหลายแถวเรียงกันในการ์ดเดียว */
.limit-usage-card .usage-bar {
  height: 6px;
  border-radius: 999px;
  margin: 6px 0 4px;
}

.limit-usage-card .usage-bar-fill { opacity: 0.85; }

.limit-usage-summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.limit-pill {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.limit-pill.is-near { background: rgba(245, 158, 11, 0.16); color: #92400E; }
.limit-pill.is-full { background: rgba(185, 28, 28, 0.14); color: #B91C1C; }

.limit-usage-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.limit-usage-row {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.5);
}

/* งบจ่ายสูงสุดคือความเสี่ยงจริง (เงินที่ต้องจ่าย ไม่ใช่ยอดแทง) — ต้องเด่นกว่าแถวอื่น */
.limit-usage-row.is-payout {
  border-color: rgba(183, 133, 46, 0.45);
  background: rgba(233, 184, 92, 0.1);
}

.limit-usage-row.is-full { border-color: rgba(185, 28, 28, 0.35); }

/* ปิดรับ — ผู้ดูแลสั่งเอง ไม่ใช่ชนเพดานเอง · เทาเข้มเพื่อไม่ให้ปนกับ is-full */
.limit-usage-row.is-closed {
  border-color: rgba(38, 50, 56, 0.4);
  background: rgba(38, 50, 56, 0.06);
}

.limit-badge-closed {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--text-primary, #263238);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

/* แถวงบจ่ายกดได้ทั้งแถว — ปุ่มครอบเนื้อหาเดิมไว้ ไม่ใช่ li ที่ผูก onclick
   เพื่อให้คีย์บอร์ดและ screen reader ได้ปุ่มจริงโดยไม่ต้องประกาศ role เอง */
.limit-usage-hit {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.limit-usage-hit:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

.limit-usage-row.is-payout:hover { background: rgba(233, 184, 92, 0.2); }

/* คำใบ้ว่ากดได้ · จางไว้จนกว่าจะ hover ไม่ให้ไปแย่งสายตากับตัวเลข */
.limit-usage-cue {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-weight: 600;
  color: var(--text-subtle);
}

.limit-usage-row.is-payout:hover .limit-usage-cue,
.limit-usage-hit:focus-visible .limit-usage-cue { color: var(--gold-active); }

.limit-usage-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.limit-scope {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.limit-badge-payout {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--gold-active, #B7852E);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

.limit-usage-num { font-size: 13px; font-weight: 700; color: var(--text-main); }

.limit-usage-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
}

/* ดัน % ไว้ซ้ายสุด ที่เหลือไปกองขวา — พอมีคำใบ้ "ดูรายเลข" เพิ่มเข้ามาเป็น
   ตัวที่สาม space-between จะผลัก "เหลือ X" ไปกลางแถวโดยไม่มีเหตุผล */
.limit-usage-pct { font-weight: 700; color: var(--text-main); margin-right: auto; }

.limit-usage-more {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
}

@media (max-width: 640px) {
  .limit-usage-num { font-size: 12px; }
}

/* หมายเหตุ "งวดนี้มีอัตราจ่ายปนกัน" ใต้แถวงบจ่ายในการ์ดรายการอั้น */
.limit-mixed-rates {
  margin: 4px 0 0;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #92400E;
  background: rgba(245, 158, 11, 0.12);
  border-radius: 8px;
  padding: 4px 8px;
}

/* ══ ตารางเทียบผลกระทบตอนเปลี่ยนอัตราจ่าย (ใน quick-confirm) ══
   เป็นด่านตัดสินใจ ไม่ใช่หน้าอ่านความเสี่ยง · ต้องเทียบหลายเลขได้ในสายตาเดียว
   จึงเป็นตาราง ไม่ใช่การ์ดต่อเลขที่ต้องเลื่อนจอทีละใบ */
/* กล่องข้อความของ quick-confirm เป็นแถว flex (ไอคอน + เนื้อหา) · ถ้าไม่สั่งให้ยืด
   เนื้อหาจะกว้างเท่าที่ตัวเองต้องการ ซึ่งกับตารางแปลว่าหดจนคอลัมน์เบียดกัน
   ทั้งที่กรอบว่างอยู่อีกครึ่งหนึ่ง */
[data-qc-message] { flex: 1 1 auto; min-width: 0; }

.rate-impact { display: flex; flex-direction: column; gap: 10px; width: 100%; }

/* §10 ป้ายบอกขอบเขตของกล่อง · ต้องอ่านก่อนตัวเลขทุกตัว เพราะตารางข้างล่าง
   ไม่ได้ครอบคลุมลูกค้าที่มีอัตราจ่ายเฉพาะตัว */
.rate-impact-scope {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-main);
}

.rate-impact-why {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-main);
}

.rate-impact-safe {
  margin: 0;
  font-size: 11px;
  color: var(--text-subtle);
  line-height: 1.5;
}

/* สรุปหัวกล่อง · ตอบ "กี่เลขที่ได้รับผลจริง" ก่อนจะไล่อ่านตาราง */
.rate-impact-summary { display: flex; flex-wrap: wrap; gap: 6px; }

.rate-impact-summary-cell {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1 1 auto;
  min-width: 96px;
  padding: 5px 9px;
  border-radius: 7px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(0, 0, 0, 0.02);
}

.rate-impact-summary-label { font-size: 10px; color: var(--text-subtle); }
.rate-impact-summary-count { font-size: 13px; font-weight: 700; }

.rate-impact-summary-cell.is-down { border-color: #FCA5A5; background: #FEF2F2; }
.rate-impact-summary-cell.is-down .rate-impact-summary-count { color: #B91C1C; }
.rate-impact-summary-cell.is-up { border-color: #A7F3D0; background: #ECFDF5; }
.rate-impact-summary-cell.is-up .rate-impact-summary-count { color: #15803D; }

/* งบเป็นของ (งวด, เลข) หนึ่งคู่ · แยก section ให้ชัดว่าไม่ได้รวมข้ามงวด
   overflow-x เป็นตาข่ายกันพลาดบนจอแคบ — ยอมให้เลื่อนดีกว่าตัดคอลัมน์ขวาสุดทิ้ง
   ซึ่งเป็นคอลัมน์ข้อสรุปพอดี */
.rate-impact-round-section { margin-top: 4px; overflow-x: auto; }

.rate-impact-round-title {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
}

.rate-impact-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.rate-impact-table th {
  padding: 4px 6px;
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-subtle);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  white-space: nowrap;
}

.rate-impact-table td {
  padding: 6px;
  vertical-align: top;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.rate-impact-tr.is-full { background: rgba(254, 226, 226, 0.35); }
.rate-impact-tr.is-near { background: rgba(254, 243, 199, 0.35); }

.rate-impact-num {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rate-impact-num-note {
  margin-top: 1px;
  font-size: 10px;
  font-weight: 400;
  color: var(--text-subtle);
  white-space: nowrap;
}

.rate-impact-use { min-width: 108px; }

/* แท่งเดียวต่อแถว = ภาระจ่ายที่สะสมแล้ว ÷ งบของเลขนั้น
   จงใจไม่ทำแท่งก่อน/หลัง เพราะการเปลี่ยนเรตไม่ได้ขยับความเสี่ยงที่สะสมไว้เลย
   สองแท่งจะอ่านเหมือนความเสี่ยงเปลี่ยน ซึ่งไม่จริง */
.rate-impact-track {
  height: 5px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.rate-impact-fill { height: 100%; border-radius: 999px; background: #64748B; }
.rate-impact-fill.is-full { background: #DC2626; }
.rate-impact-fill.is-near { background: #D97706; }
.rate-impact-fill.is-normal { background: var(--gold-active, #B7852E); }

.rate-impact-use-text {
  margin-top: 2px;
  font-size: 10px;
  color: var(--text-subtle);
  white-space: nowrap;
}

.rate-impact-money {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rate-impact-cap { white-space: nowrap; }
.rate-impact-cap-before { color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.rate-impact-cap-arrow { margin: 0 4px; color: var(--text-subtle); }
.rate-impact-cap-after { font-weight: 700; font-variant-numeric: tabular-nums; }

.rate-impact-out { white-space: nowrap; }
.rate-impact-out-delta { font-weight: 700; font-variant-numeric: tabular-nums; }
.rate-impact-out-delta.is-down { color: #B91C1C; }
.rate-impact-out-delta.is-up { color: #15803D; }
.rate-impact-out-flat {
  font-size: 10px;
  color: var(--text-subtle);
  white-space: normal;
}

.rate-impact-toggle {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 6px 10px;
  border: 1px dashed rgba(0, 0, 0, 0.18);
  border-radius: 7px;
  background: transparent;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-subtle);
  cursor: pointer;
}

.rate-impact-toggle:hover { background: rgba(0, 0, 0, 0.03); }

.rate-impact-toggle:focus-visible {
  outline: 2px solid var(--color-primary, #B45309);
  outline-offset: 2px;
}

/* ป้ายบนหน้าอัตราจ่าย · บอกล่วงหน้าว่าแถวนี้อยู่ใต้ระบบงบจ่าย
   (ไม่ได้แปลว่าทุกครั้งที่เปลี่ยนเรตจะมีกล่องเด้ง — ขึ้นกับว่ามีผลจริงไหม) */
.rate-gate-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  color: #92400E;
  background: #FEF3C7;
  border: 1px solid #FDE68A;
}

/* ── ความเสี่ยงงบจ่ายสูงสุด · การ์ด + modal drill-down ─────────────────
   สี/สถานะใช้ชุดเดียวกับแถบอั้นเดิม (full/near/normal) ไม่สร้างคำหรือสีชุดใหม่ */

.payout-leader {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  background: var(--bg-subtle);
}
.payout-leader.is-full { border-color: var(--danger-border, #f0b4b4); background: rgba(220, 53, 69, 0.05); }
.payout-leader.is-near { border-color: var(--warning-border, #f0d9a8); background: rgba(255, 171, 0, 0.06); }

.payout-leader-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2); margin-bottom: var(--space-2);
}
.payout-leader-label {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--text-xs); font-weight: 600; color: var(--text-muted);
}
.payout-leader-more {
  background: none; border: none; cursor: pointer; padding: 2px 4px;
  font: inherit; font-size: var(--text-xs); color: var(--gold-active);
  display: inline-flex; align-items: center; gap: 2px;
}
.payout-leader-more:hover { text-decoration: underline; }
.payout-leader-main { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.payout-leader-main strong { font-size: var(--text-lg); }
.payout-leader-note {
  font-size: var(--text-2xs, 10px); color: var(--text-subtle);
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 0 4px;
}
.payout-leader-num { font-size: var(--text-base); font-weight: 600; margin-top: 2px; }
.payout-leader-pct { margin-left: 6px; font-size: var(--text-sm); color: var(--text-muted); }
.payout-leader-foot { font-size: var(--text-xs); margin: 4px 0 0; }
/* §8 "งบจ่ายเหลือ" กับ "รับเพิ่มที่ Master" ต้องอ่านเป็นคนละบรรทัด — คนละหน่วยกัน */
.payout-leader-row { display: block; }
.payout-leader-rate { opacity: .75; }

/* badge บนหัวการ์ดกดได้ → เปิด modal พร้อม filter */
button.limit-pill { border: none; cursor: pointer; font: inherit; }
button.limit-pill:hover { filter: brightness(0.96); }

/* ── Modal ─────────────────────────────────────────────────────────── */
.payout-risk-modal { max-width: min(1040px, 92vw); }
.payout-risk-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.payout-risk-crumbs { display: flex; align-items: center; gap: var(--space-3); }
.payout-risk-title { margin: 0; font-size: var(--text-lg); }
.payout-risk-subtitle { margin: 2px 0 0; font-size: var(--text-xs); color: var(--text-muted); }
.payout-risk-back {
  background: none; border: 1px solid var(--border-soft); border-radius: var(--radius-md);
  padding: 4px 8px; cursor: pointer; font: inherit; font-size: var(--text-xs);
  display: inline-flex; align-items: center; gap: 2px; white-space: nowrap;
}
.payout-risk-back:hover { background: var(--bg-hover); }

.payout-risk-filters {
  display: flex; gap: var(--space-2); padding: var(--space-3) var(--space-5) 0;
  flex-wrap: wrap;
}
.payout-risk-chip {
  border: 1px solid var(--border-soft); background: transparent; cursor: pointer;
  border-radius: 999px; padding: 3px 10px; font: inherit; font-size: var(--text-xs);
}
.payout-risk-chip.is-active { background: var(--text-main); color: var(--text-inverse); border-color: transparent; }
.payout-risk-chip.is-full.is-active { background: var(--danger, #dc3545); }
.payout-risk-chip.is-near.is-active { background: var(--warning-strong, #d98600); }

/* แถบเรียง/ค้นหาของชั้นรายเลข · อยู่ตำแหน่งเดียวกับชิปสถานะแต่ไม่เคยขึ้นพร้อมกัน
   (ชิปเป็นของชั้นรวม · แถบนี้เป็นของชั้นรายเลข) จึงใช้ระยะขอบชุดเดียวกันได้ */
.payout-risk-tools {
  display: flex; gap: var(--space-4); align-items: flex-end; flex-wrap: wrap;
  padding: var(--space-3) var(--space-5) 0;
}
.pr-tool { display: flex; flex-direction: column; gap: 2px; }
.pr-tool-label { font-size: var(--text-2xs, 10px); color: var(--text-muted); }
.pr-tool-select, .pr-tool-input {
  border: 1px solid var(--border-soft); border-radius: var(--radius-md);
  padding: 4px 8px; font: inherit; font-size: var(--text-xs);
  background: var(--surface, #fff); color: inherit;
}
/* ช่องค้นหารับแค่ 2-3 หลัก · ปล่อยให้ยืดเต็มแถวจะกลืนพื้นที่ไปทั้งหัวโมดัล
   โดยไม่ได้ประโยชน์อะไรเพิ่ม */
.pr-tool-search { flex: 0 1 200px; min-width: 120px; }
.pr-tool-input { width: 100%; }

.payout-risk-body { max-height: 62vh; overflow: auto; }
.payout-risk-loading, .pr-empty {
  text-align: center; color: var(--text-muted); padding: var(--space-6) 0;
  font-size: var(--text-sm);
}
.pr-hint {
  font-size: var(--text-xs); color: var(--text-muted);
  background: var(--bg-subtle);
  border-radius: var(--radius-md); padding: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-3);
}

.pr-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.pr-table th {
  text-align: left; font-size: var(--text-xs); color: var(--text-muted);
  font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--border-soft);
  position: sticky; top: 0; background: var(--surface, #fff); z-index: 1;
}
.pr-table td { padding: 8px; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
.pr-table .num { text-align: right; }
.pr-sub { display: block; font-size: var(--text-2xs, 10px); color: var(--text-subtle); }
.pr-row { cursor: pointer; }
.pr-row:hover, .pr-row:focus-visible { background: var(--bg-hover); outline: none; }
.pr-link { color: var(--gold-active); text-decoration: none; }
.pr-link:hover { text-decoration: underline; }

.pr-pill {
  display: inline-block; border-radius: 999px; padding: 1px 8px;
  font-size: var(--text-2xs, 10px); font-weight: 600; white-space: nowrap;
}
.pr-pill.is-full { background: rgba(220, 53, 69, 0.12); color: var(--danger, #b02a37); }
.pr-pill.is-near { background: rgba(255, 171, 0, 0.16); color: var(--warning-strong, #9a6700); }
.pr-pill.is-normal { background: rgba(25, 135, 84, 0.12); color: var(--success-strong, #146c43); }

.pr-summary {
  border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
  padding: var(--space-3); margin-bottom: var(--space-3);
}
.pr-summary-main { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.pr-summary-num { font-size: var(--text-xl); font-weight: 700; }
.pr-summary-nobudget { font-size: var(--text-xs); color: var(--text-muted); margin: var(--space-2) 0 0; }
.pr-summary-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-2); margin-top: var(--space-3);
}
.pr-summary-grid div { display: flex; flex-direction: column; gap: 1px; }
.pr-summary-grid span { font-size: var(--text-2xs, 10px); }

.pr-bar { height: 6px; border-radius: 999px; background: var(--border-soft); overflow: hidden; margin-top: var(--space-2); }
.pr-bar-fill { height: 100%; background: var(--success, #198754); }
.pr-bar.is-near .pr-bar-fill { background: var(--warning-strong, #d98600); }
.pr-bar.is-full .pr-bar-fill { background: var(--danger, #dc3545); }

@media (max-width: 720px) {
  .payout-risk-modal { max-width: 96vw; }
  /* บนมือถือตารางกว้างเกินจอ — ให้เลื่อนแนวนอนแทนการบีบจนอ่านตัวเลขไม่ออก */
  .payout-risk-body { overflow-x: auto; }
  .pr-table { min-width: 640px; }
}

/* แถบเลือกงวดบนหน้าตั้งค่าอั้น — บริบทของทุกตัวเลขในหน้า */
.limit-round-bar { padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); }
.limit-round-form { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.limit-round-form .form-select { width: auto; min-width: 220px; }

/* "ไม่ได้กำหนดเพดาน" ต้องเป็นสีกลาง ไม่ใช่เขียว — เขียวสื่อว่า engine ตรวจแล้วปลอดภัย
   ทั้งที่ความหมายจริงคือไม่มีกฎให้ตรวจ สองอย่างนี้ต่างกันมากสำหรับผู้ดูแล */
.pr-pill.is-no_rule { background: var(--border-soft); color: var(--text-muted); }
.pr-bar.is-no_rule .pr-bar-fill { background: var(--text-subtle); }
.payout-leader.is-no_rule { border-color: var(--border-soft); background: transparent; }

/* "ยังไม่มีการเดิมพัน" — จางกว่า "ไม่ได้กำหนดเพดาน" หนึ่งขั้น เพราะไม่ใช่สิ่งที่
   ต้องลงมือทำ แค่บอกว่ายังไม่มีของ · เห็นเฉพาะมุมมอง "แสดงทุกประเภท" */
.pr-pill.is-no_activity {
  background: transparent; color: var(--text-subtle);
  border: 1px dashed var(--border-soft);
}
.pr-row.is-no_activity td { opacity: 0.72; }

.payout-risk-chip.is-no_rule.is-active { background: var(--text-muted); }
.payout-risk-toggle {
  margin-left: auto; border: 1px dashed var(--border-soft); background: transparent;
  cursor: pointer; border-radius: 999px; padding: 3px 10px; font: inherit;
  font-size: var(--text-xs); color: var(--text-muted);
  display: inline-flex; align-items: center; gap: 4px;
}
.payout-risk-toggle:hover { border-style: solid; color: var(--text-main); }
.payout-risk-toggle.is-active {
  background: var(--text-main); color: var(--text-inverse);
  border-color: transparent; border-style: solid;
}

/* สัญญาณความเสี่ยงแบบที่สองบนการ์ด · ไม่มีตัวหารจึงไม่มี % และไม่มีแถบให้ดู
   ใช้เส้นประเพื่อบอกว่า "ยังไม่มีเพดาน" ไม่ใช่ "เพดานกำลังจะเต็ม" */
.payout-unbounded {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
  margin-top: var(--space-3); padding: var(--space-3);
  border: 1px dashed var(--warning-strong, #d98600); border-radius: var(--radius-md);
  background: rgba(255, 171, 0, 0.06); cursor: pointer; font: inherit;
}
.payout-unbounded:hover { background: rgba(255, 171, 0, 0.12); }
.payout-unbounded-head {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-sm); font-weight: 600; color: var(--warning-strong, #9a6700);
}
.payout-unbounded-sub { font-size: var(--text-xs); color: var(--text-muted); }

/* ตัวเลขบนชิปคือสิ่งที่ผู้ดูแลกวาดตาหาก่อนเสมอ ("มีอะไรเต็มไหม") — เดิมเป็น
   ข้อความไหลต่อจากชื่อชิปจนอ่านรวมเป็นประโยคเดียว ทำให้ต้องเพ่งทีละอัน */
.pr-chip-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 18px; padding: 0 6px; margin-left: 6px;
  border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
  background: var(--border-soft); color: var(--text-main);
}
.payout-risk-chip.is-full .pr-chip-badge { background: rgba(220, 53, 69, 0.16); color: var(--danger, #b02a37); }
.payout-risk-chip.is-near .pr-chip-badge { background: rgba(255, 171, 0, 0.22); color: var(--warning-strong, #9a6700); }
/* ชิปที่ถูกเลือกจะพื้นเข้ม — badge ต้องกลับสีเป็นพื้นอ่อนบนตัวอักษรเข้ม
   ไม่งั้นเลขจะจมหายไปกับพื้นหลัง */
.payout-risk-chip.is-active .pr-chip-badge { background: var(--text-inverse); color: var(--text-main); }

/* บรรทัดบอกผลของตัวกรอง · ตอบคำถาม "ที่เห็นอยู่ครบหรือยัง" โดยไม่ต้องไล่บวกเอง */
.pr-filter-note {
  display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: baseline;
  margin: 0 0 var(--space-3); font-size: var(--text-xs); color: var(--text-muted);
}
.pr-filter-note strong { color: var(--text-main); }
.pr-filter-note .pr-filter-more {
  background: none; border: none; padding: 0; font: inherit; cursor: pointer;
  color: var(--text-main); text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════
 * P4 · Customer Dashboard
 * มือถือมาก่อน — ลูกค้าเปิดจากโทรศัพท์เป็นหลัก จอใหญ่ค่อยขยาย
 * ═══════════════════════════════════════════════════════ */

/* ป้ายสถานะฝั่งลูกค้า · คนละชุดกับ .badge ของฝั่งร้าน */
.cbadge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.6;
  white-space: nowrap;
  border: 1px solid transparent;
}

.cbadge--ok      { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.cbadge--win     { background: var(--success-bg); color: var(--success); border-color: var(--success); }
.cbadge--info    { background: var(--info-bg);    color: var(--info);    border-color: var(--info-border); }
.cbadge--warn    { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-border); }
.cbadge--danger  { background: var(--danger-bg);  color: var(--danger);  border-color: var(--danger-border); }
.cbadge--muted   { background: var(--bg-subtle);  color: var(--text-muted); border-color: var(--border-soft); }

/* จำนวนเงินที่มีทิศทาง */
.cmoney {
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  color: var(--text-main);
  white-space: nowrap;
}
.cmoney--up   { color: var(--success); }
.cmoney--down { color: var(--danger); }

/* ── สรุปยอดของงวด ─────────────────────────────── */
.cust-round {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-xs);
}

.cust-round__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.cust-round__title {
  font-size: var(--text-sm);
  color: var(--text-muted);
  min-width: 0;
}
.cust-round__title strong { color: var(--text-main); }

.cust-round__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.cust-round__cell { min-width: 0; }

.cust-round__cell-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-bottom: 2px;
}

.cust-round__cell-value {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-main);
  overflow-wrap: anywhere;
}

.cust-round__note {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--border-soft);
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: var(--leading-relaxed);
}

@media (min-width: 768px) {
  .cust-round__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── สถานะบิลของฉัน ────────────────────────────── */
.cust-status-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.cust-status-list__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-subtle);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}

.cust-status-list__count {
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  color: var(--text-main);
}

.cust-empty-inline {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* ── บิลล่าสุด · การ์ดบนมือถือ ───────────────────── */
.cust-bill {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  margin-bottom: var(--space-2);
  overflow: hidden;
}

.cust-bill__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px var(--space-2);
  padding: var(--space-3);
  text-decoration: none;
  color: inherit;
  min-height: var(--touch-min);
}

.cust-bill__main:hover { background: var(--bg-hover); }
.cust-bill__main:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; }

.cust-bill__no {
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  color: var(--text-main);
  overflow-wrap: anywhere;
}

.cust-bill__amount {
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  color: var(--text-main);
  text-align: right;
  white-space: nowrap;
}

.cust-bill__meta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* ปุ่มใบเสร็จอยู่นอก <a> หลัก — ซ้อน <a> ในกันไม่ได้
   และบนมือถือต้องกดได้จริง ไม่ใช่มีแต่บนจอใหญ่ */
.cust-bill__pdf {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--border-soft);
  background: var(--bg-subtle);
  color: var(--gold-active);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

.cust-bill__pdf:hover { background: var(--bg-hover); }
.cust-bill__pdf:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; }

/* ── ประวัติการเงิน ────────────────────────────── */
.cust-money {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cust-money__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px var(--space-2);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-soft);
}

.cust-money__row:last-child { border-bottom: 0; }

.cust-money__label {
  font-size: var(--text-sm);
  color: var(--text-main);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cust-money__note {
  font-size: var(--text-xs);
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.cust-money__amount { text-align: right; }

.cust-money__after,
.cust-money__time {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.cust-money__after { grid-column: 1; }
.cust-money__time  { grid-column: 2; text-align: right; }

@media (min-width: 768px) {
  .cust-money__row {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: center;
  }
  .cust-money__after { grid-column: auto; text-align: right; }
  .cust-money__time  { grid-column: auto; }
}

/* ── Pro Matrix · แถบ bulk + แถบบันทึกเดียว ─────────────────────────────────
   เดิมทุกแถวมีปุ่มบันทึกของตัวเอง (9-32 ปุ่ม) · ตอนนี้เหลือปุ่มเดียวท้ายตาราง
   จึงต้องมีสองอย่างชดเชย: บอกว่าเลือกแถวไหนไว้ และบอกว่าแก้อะไรค้างไว้กี่แถว */
.terms-bulk {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
  background: var(--bg-subtle);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}

.terms-bulk-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.terms-bulk-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: 600;
}

.terms-bulk-all label { cursor: pointer; margin: 0; }

.terms-bulk-count { font-size: var(--text-xs); color: var(--text-muted); }

.terms-bulk-actions {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.terms-bulk-field {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}

.terms-bulk-field label { display: block; margin-bottom: 2px; }
.terms-bulk-field .form-input { width: 96px; padding: 4px 8px; min-height: 32px; }
.terms-bulk-note { margin: 0; }

.terms-check-col { width: 36px; text-align: center; }

/* ตัวเลือกอัตราจ่ายสองบรรทัด (Master / กำหนดเอง) เว้นให้อ่านแยกออกจากกันชัด */
.terms-rate-modes { margin-top: 4px; display: flex; flex-direction: column; gap: 2px; }
.terms-rate-modes label { display: flex; align-items: center; gap: 4px; cursor: pointer; }

/* แถวที่แก้แล้วแต่ยังไม่บันทึก — ฟอร์มเดียวคร่อมทั้งตาราง ถ้าไม่ทำเครื่องหมาย
   ผู้ดูแลจะไม่รู้ว่าอะไรค้างอยู่ก่อนกดบันทึก */
tr.is-dirty { background: var(--gold-light); }

.terms-savebar {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  /* ลอยทับตารางตอนเลื่อน — ต้องมีเงาให้อ่านออกว่าเป็นแถบลอย ไม่ใช่ข้อความที่พังกลางบรรทัด */
  box-shadow: 0 -8px 20px rgb(0 0 0 / 12%);
}

.terms-savebar.is-dirty {
  border-color: var(--gold-primary);
  background: var(--gold-light);
}

.terms-savebar-status { font-size: var(--text-sm); font-weight: 600; }
.terms-savebar-actions { display: flex; align-items: center; gap: var(--space-2); }

/* เส้นทองด้านซ้ายของแถวที่แก้ค้างไว้ — พื้นหลังอ่อนอย่างเดียวมองข้ามง่ายเวลาไล่สายตา */
tr.is-dirty td:first-child { box-shadow: inset 3px 0 0 var(--gold-primary); }

[data-terms-form] .table-scroll { margin-bottom: var(--space-2); }

/* ช่องส่วนลด/อัตราจ่ายมีเนื้อหาซ้อนสองสามชั้น แถวจึงสูง · ถ้าปล่อยให้ช่องอื่นจัด
   กึ่งกลาง ป้ายสถานะจะลอยต่ำกว่าตัวเลขที่มันอธิบายอยู่ราวหนึ่งบรรทัดครึ่ง */
[data-terms-form] .table td { vertical-align: top; }
[data-terms-form] .terms-check-col { padding-left: 10px; }

/* ช่องติ๊กในตารางนี้ต้องเป็นสีแบรนด์เหมือนปุ่มเลือกอัตราจ่ายที่อยู่แถวเดียวกัน
   ค่าเริ่มต้นของเบราว์เซอร์เป็นสีฟ้า ซึ่งกลายเป็นสีที่สามในแถวเดียว */
[data-terms-form] input[type="checkbox"],
[data-terms-form] input[type="radio"] { accent-color: var(--gold-primary); }

/* ---- คู่มือใช้งานประจำหน้า (components/_page_help.html) ----
   แผงพับได้ใต้หัวข้อหน้า · ใช้กริด/การ์ดชุดเดียวกับคำอธิบาย scope ของหน้าอั้น
   เพื่อให้ทุกหน้าอ่านแล้วรู้สึกเป็นระบบเดียวกัน */
.page-help {
  border-left: 3px solid var(--gold-primary);
}

.page-help-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-lg);
}

.page-help-steps {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
  font-size: var(--text-sm);
  line-height: 1.6;
}

.page-help-list {
  margin: 6px 0 0 20px;
  padding: 0;
  display: grid;
  gap: 4px;
}

.page-help .scope-explain-item p {
  margin: 6px 0 0;
}

/* ---- เงินทุนและความเสี่ยงของงวด (components/_capital_risk.html) ----------
   การ์ดนี้อยู่ใต้ "งานที่ต้องจัดการ" และเป็นตัวเลขชุดแรกที่ผู้ดูแลเห็น จึงกินพื้นที่
   เต็มความกว้างและมีน้ำหนักมากกว่า widget อื่นโดยตั้งใจ

   สีของการ์ดผูกกับสถานะความเสี่ยงทั้งใบ (--cap-accent) — แถบ %, จุดบน banner
   และขอบซ้ายใช้ตัวแปรเดียวกัน เพื่อให้ "เปลี่ยนสีทีเดียวเปลี่ยนทั้งใบ" ไม่ต้องไล่
   เขียนทับทีละจุดเวลาสถานะขยับ (JS สลับแค่คลาส is-*) */
.cap-card {
  --cap-accent: var(--text-subtle);
  --cap-accent-bg: var(--bg-subtle);
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-left: 4px solid var(--cap-accent);
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04),
    0 18px 44px -28px rgba(183, 133, 46, 0.35);
}

.cap-card.is-safe  { --cap-accent: var(--success); --cap-accent-bg: var(--success-bg); }
.cap-card.is-watch { --cap-accent: var(--warning); --cap-accent-bg: var(--warning-bg); }
.cap-card.is-high  { --cap-accent: #EA7317;       --cap-accent-bg: var(--warning-bg); }
.cap-card.is-limit { --cap-accent: var(--danger);  --cap-accent-bg: var(--danger-bg); }
.cap-card.is-over  { --cap-accent: var(--danger);  --cap-accent-bg: var(--danger-bg); }

.cap-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.cap-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-main);
}

.cap-sub {
  margin: 4px 0 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.cap-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cap-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-soft);
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
}

.cap-chip.is-done {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success);
}

/* ประกาศผลแล้วแต่ยังไม่เคลียร์ยอด — ยังเป็นงานที่ต้องทำ ไม่ใช่สถานะจบ */
.cap-chip.is-pending {
  background: var(--warning-bg);
  border-color: var(--warning-border);
  color: #A16207;
}

.cap-head-link {
  font-size: var(--text-xs);
  color: var(--gold-active);
  white-space: nowrap;
}

.cap-group-label {
  margin: 18px 0 8px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

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

/* สมการเงินทุน — ไล่ซ้ายไปขวาแล้วบวกลบตามได้ทีละขั้น
   บนมือถือกลายเป็นแถวเรียงลง เพราะ 5 ช่องบนจอแคบจะเหลือช่องละ 60px แล้วอ่านไม่ออก */
.cap-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  overflow: hidden;
  background: var(--border-soft);
}

.cap-step {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-card);
}

.cap-step-label {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.cap-step-value {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
}

.cap-step.is-minus .cap-step-value { color: var(--danger); }

/* ตัวเลขเด่นที่สุดของการ์ด — คำตอบของ "ร้านมีเงินรองรับความเสี่ยงเท่าไร" */
.cap-step.is-total {
  background: var(--gold-light);
  border-top: 1px solid var(--gold-soft);
}

.cap-step.is-total .cap-step-label {
  font-weight: 700;
  color: var(--text-main);
}

.cap-step.is-total .cap-step-value {
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--gold-active);
}

.cap-risk-grid,
.cap-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.cap-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: var(--bg-card);
}

.cap-metric-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.cap-metric-value {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-main);
}

.cap-metric-note {
  font-size: 11px;
  color: var(--text-subtle);
  line-height: 1.4;
}

.cap-metric.is-risk {
  border-color: var(--cap-accent);
  background: var(--cap-accent-bg);
}

.cap-metric.is-risk .cap-metric-value { color: var(--cap-accent); }
.cap-metric.is-loss .cap-metric-value { color: var(--danger); }
.cap-metric.is-profit .cap-metric-value { color: var(--success); }

.cap-usage-bar {
  height: 8px;
  margin-top: 12px;
  border-radius: 999px;
  background: var(--bg-subtle);
  overflow: hidden;
}

.cap-usage-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--cap-accent);
  transition: width 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* เต็ม 100% แล้วแถบทึบทั้งเส้นจะอ่านเหมือนเส้นคั่นสีแดง ไม่เหลือเค้าของ "มาตรวัด"
   ลายทแยงทำให้ยังอ่านออกว่าเป็นมาตรที่ล้นออกไปแล้ว ไม่ใช่ของตกแต่ง */
.cap-usage-bar.is-limit .cap-usage-fill,
.cap-usage-bar.is-over .cap-usage-fill {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.45) 0 5px,
    rgba(255, 255, 255, 0) 5px 10px
  );
}

.cap-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--cap-accent-bg);
  border: 1px solid var(--cap-accent);
  font-size: var(--text-sm);
}

.cap-banner-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cap-accent);
  flex-shrink: 0;
}

.cap-banner-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 200px;
  color: var(--text-body);
}

.cap-banner-body strong { color: var(--text-main); }

/* บนจอแคบต้องลงบรรทัดของตัวเอง — ถ้าอยู่ท้ายบรรทัดแรกของข้อความที่ตัดคำ สายตา
   จะอ่าน "...ต้องจ่ายเกินเงินที่ [ดูรายละเอียด] รับมาอยู่ 293,312 บาท" คือลิงก์ไป
   แทรกกลางประโยคที่กำลังอ่านอยู่ */
.cap-banner-cta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex: 1 0 100%;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--gold-active);
  white-space: nowrap;
}

.cap-note {
  margin: 10px 0 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.6;
}

.cap-note.is-warn { color: var(--danger); }

/* ---- Outcome ที่เสี่ยงที่สุด ---------------------------------------------
   ตอบ "ผลชุดไหนทำให้เจ็บที่สุด" ซึ่งเป็นคำถามที่มาก่อน "เลขไหนใช้เพดานไปกี่ %" */
.worst-card {
  --cap-accent: var(--text-subtle);
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 16px;
}

.worst-card.is-safe  { --cap-accent: var(--success); }
.worst-card.is-watch { --cap-accent: var(--warning); }
.worst-card.is-high  { --cap-accent: #EA7317; }
.worst-card.is-limit,
.worst-card.is-over  { --cap-accent: var(--danger); }

.worst-headline {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  margin: 12px 0;
  border-radius: 14px;
  background: var(--bg-subtle);
  border-left: 4px solid var(--cap-accent);
}

.worst-headline-label {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.worst-headline-value {
  display: block;
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--cap-accent);
  line-height: 1.2;
}

.worst-headline-note {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-subtle);
  line-height: 1.5;
}

.worst-parts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.worst-part {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
}

.worst-part-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.worst-part-nums {
  grid-column: 1;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.worst-part-nums strong {
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-main);
}

.worst-part-amount {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
}

.worst-foot {
  margin: 12px 0 0;
  font-size: var(--text-xs);
  line-height: 1.6;
}

@media (min-width: 720px) {
  .cap-flow {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1px;
  }

  .cap-step {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px 14px;
  }

  .cap-step.is-total {
    border-top: none;
    border-left: 1px solid var(--gold-soft);
  }

  .cap-risk-grid,
  .cap-result-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .cap-result-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* จอกว้างพอให้ CTA อยู่บรรทัดเดียวกับข้อความได้โดยไม่แทรกกลางประโยค */
  .cap-banner-cta { flex: 0 0 auto; }
}