/* I LOVE MY JOB v10.2 — responsive monthly Summary Work Done grids. */
.sw102-shell {
  display: grid;
  gap: 16px;
  margin-top: 16px;
  padding: clamp(16px, 3vw, 24px);
  border: 1px solid var(--line, rgba(128,128,128,.2));
  border-radius: 24px;
  background: var(--white, var(--card, #fff));
  color: var(--ink, var(--text, #171717));
  box-shadow: var(--shadow, 0 12px 36px rgba(0,0,0,.08));
}
.sw102-intro,
.sw102-editor-head,
.sw102-editor-actions,
.sw102-footer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.sw102-intro b { font-size: calc(17px * var(--font-scale)); }
.sw102-intro p,
.sw102-editor-head p,
.sw102-note {
  margin: 4px 0 0;
  color: var(--t2, #686868);
  font-size: calc(12.5px * var(--font-scale));
  line-height: 1.55;
}
.sw102-menu-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.sw102-menu-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 82px;
  padding: 16px;
  border: 1px solid var(--line, rgba(128,128,128,.22));
  border-radius: 18px;
  background: color-mix(in srgb, var(--white, #fff) 94%, var(--gold-bg, #fff8d6));
  color: var(--ink, #171717);
  text-align: left;
  cursor: pointer;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.sw102-menu-card:hover,
.sw102-menu-card:focus-visible {
  border-color: var(--gold, #e5b900);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  outline: none;
}
.sw102-menu-card b,
.sw102-menu-card small { display: block; }
.sw102-menu-card b { font-size: calc(15px * var(--font-scale)); }
.sw102-menu-card small { margin-top: 3px; color: var(--t2, #686868); font-size: calc(12px * var(--font-scale)); }
.sw102-menu-mark {
  width: 12px;
  height: 34px;
  border-radius: 99px;
  background: linear-gradient(180deg, var(--gold-light, #ffd966), var(--gold-dark, #9a7200));
}
.sw102-menu-card.is-history .sw102-menu-mark { background: linear-gradient(180deg, #7ba7ff, #315da8); }
.sw102-arrow { color: var(--gold-dark, #9a7200); font-size: 22px; font-weight: 800; }
.sw102-summary-status {
  color: var(--t2, #686868);
  font-size: calc(12px * var(--font-scale));
  font-weight: 700;
}
.sw102-editor-head { align-items: flex-start; justify-content: flex-start; }
.sw102-editor-head h3 { margin: 0; font-size: calc(18px * var(--font-scale)); }
.sw102-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line, rgba(128,128,128,.22));
  border-radius: 16px;
  background: var(--white, #fff);
}
.sw102-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  table-layout: fixed;
}
.sw102-table th {
  padding: 11px 10px;
  background: color-mix(in srgb, var(--gold-bg, #fff8d6) 74%, var(--white, #fff));
  color: var(--ink, #171717);
  font-size: calc(12px * var(--font-scale));
  text-align: left;
  white-space: nowrap;
}
.sw102-table th:first-child,
.sw102-table th:last-child { width: 64px; text-align: center; }
.sw102-table td {
  padding: 8px;
  border-top: 1px solid var(--line, rgba(128,128,128,.16));
  vertical-align: top;
}
.sw102-table input,
.sw102-table select,
.sw102-table textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 10px;
  border: 1px solid var(--border, rgba(128,128,128,.3));
  border-radius: 10px;
  background: var(--white, var(--card, #fff));
  color: var(--ink, var(--text, #171717));
  font: inherit;
  font-size: calc(13px * var(--font-scale));
  outline: none;
}
.sw102-table textarea { min-height: 76px; resize: vertical; }
.sw102-table input:focus,
.sw102-table select:focus,
.sw102-table textarea:focus { border-color: var(--gold, #e5b900); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold, #e5b900) 20%, transparent); }
.sw102-number { text-align: center; font-weight: 800; color: var(--t2, #686868); }
.sw102-remove-cell { text-align: center; }
.sw102-remove {
  width: 34px;
  height: 34px;
  border: 1px solid color-mix(in srgb, var(--red, #d84b59) 35%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--red, #d84b59) 9%, var(--white, #fff));
  color: var(--red, #d84b59);
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
}
.sw102-detail-stack { display: grid; gap: 7px; }
.sw102-check {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  color: var(--ink, #171717);
  font-size: calc(12.5px * var(--font-scale));
  font-weight: 700;
}
.sw102-check input { width: 19px; min-height: 19px; accent-color: var(--gold-dark, #9a7200); }
.sw102-money input { text-align: right; font-variant-numeric: tabular-nums; }
.sw102-editor-actions { padding-top: 4px; }
.sw102-footer-actions { justify-content: flex-end; }
.sw102-note { text-align: right; }
.sw102-loading { min-height: 110px; display: grid; place-content: center; gap: 8px; text-align: center; }
.sw102-submit-list { display: grid; gap: 8px; margin: 14px 0; padding: 0; list-style: none; }
.sw102-submit-list li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line, rgba(128,128,128,.16)); }
.sw102-manager-export {
  display: inline-flex;
  align-items: end;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 10px;
  border: 1px solid var(--line, rgba(128,128,128,.2));
  border-radius: 14px;
}
.sw102-manager-export label {
  display: grid;
  gap: 3px;
  color: var(--t2, #686868);
  font-size: calc(11px * var(--font-scale));
  font-weight: 700;
}
.sw102-manager-export input {
  min-height: 38px;
  padding: 6px 8px;
  border: 1px solid var(--border, rgba(128,128,128,.3));
  border-radius: 9px;
  background: var(--white, var(--card, #fff));
  color: var(--ink, var(--text, #171717));
  font: inherit;
}

@media (max-width: 720px) {
  .sw102-shell { padding: 14px; border-radius: 19px; }
  .sw102-menu-grid { grid-template-columns: minmax(0, 1fr); }
  .sw102-menu-card { min-height: 72px; padding: 13px; }
  .sw102-intro,
  .sw102-editor-actions,
  .sw102-footer-actions { align-items: stretch; flex-direction: column; }
  .sw102-editor-actions .btn,
  .sw102-footer-actions .btn { width: 100%; min-height: 44px; }
  .sw102-summary-status { text-align: center; }
  .sw102-table-wrap { overflow: visible; border: 0; background: transparent; }
  .sw102-table { min-width: 0; display: block; }
  .sw102-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sw102-table tbody { display: grid; gap: 12px; }
  .sw102-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 12px;
    padding: 14px;
    border: 1px solid var(--line, rgba(128,128,128,.22));
    border-radius: 16px;
    background: var(--white, var(--card, #fff));
    box-shadow: 0 7px 18px rgba(0,0,0,.05);
  }
  .sw102-table td {
    display: grid;
    grid-column: 1 / -1;
    gap: 5px;
    padding: 0;
    border: 0;
    text-align: left;
  }
  .sw102-table td::before {
    content: attr(data-label);
    color: var(--t2, #686868);
    font-size: calc(11px * var(--font-scale));
    font-weight: 800;
  }
  .sw102-table td.sw102-number { grid-column: 1; font-size: calc(15px * var(--font-scale)); }
  .sw102-table td.sw102-number::before { content: 'รายการ'; }
  .sw102-table td.sw102-remove-cell { grid-column: 2; grid-row: 1; align-content: start; }
  .sw102-table td.sw102-remove-cell::before { display: none; }
  .sw102-check { justify-content: flex-start; }
  .sw102-note { text-align: left; }
  .sw102-manager-export { display: grid; width: 100%; }
  .sw102-manager-export .btn { width: 100%; }
}

@media (prefers-color-scheme: dark) {
  .sw102-shell,
  .sw102-table-wrap,
  .sw102-table tr,
  .sw102-menu-card,
  .sw102-table input,
  .sw102-table select,
  .sw102-table textarea {
    color-scheme: dark;
  }
}

@media print {
  .sw102-menu-grid,
  .sw102-editor-actions,
  .sw102-footer-actions,
  .sw102-remove-cell { display: none !important; }
}

[data-v103-forecast-card] .stat .v,
[data-v103-dashboard-forecast] .stat .v {
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  [data-v103-forecast-card] .grid2,
  [data-v103-forecast-card] .grid3,
  [data-v103-dashboard-forecast] .grid3 {
    grid-template-columns: minmax(0, 1fr);
  }
}