:root {
  --ink: #0f1f38;
  --muted: #63758f;
  --brand: #0f4c81;
  --accent: #f4a261;
  --card: #ffffff;
  --line: #dce6f2;
  --scrollbar-track: rgba(15, 76, 129, 0.14);
  --scrollbar-thumb: linear-gradient(180deg, #2d6fa5 0%, #1c4d79 100%);
  --scrollbar-thumb-hover: linear-gradient(180deg, #367db8 0%, #1f5c93 100%);
  --scrollbar-thumb-active: linear-gradient(180deg, #255e91 0%, #1a476f 100%);
  --font-body: "Noto Sans Thai", "Prompt", "Sarabun", "IBM Plex Sans Thai", "Leelawadee UI", Tahoma, sans-serif;
  --font-heading: "Kanit", "Noto Sans Thai", "Prompt", "Sarabun", sans-serif;
  --text-base: 15px;
  --text-sm: 14px;
}
* { box-sizing: border-box; }
* {
  scrollbar-width: thin;
  scrollbar-color: #2d6fa5 var(--scrollbar-track);
}
*::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
*::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}
*::-webkit-scrollbar-thumb:active {
  background: var(--scrollbar-thumb-active);
}
*::-webkit-scrollbar-corner {
  background: transparent;
}
body {
  margin: 0;
  color: var(--ink);
  background: radial-gradient(circle at 15% -10%, #ffd8a8 0, #f4f8ff 35%, #d9f2ff 100%);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}
body:not(.is-authenticated) .shell {
  display: none;
}
body:not(.is-authenticated) {
  min-height: 100dvh;
  overflow: auto;
}
.auth-screen {
  min-height: 100dvh;
  width: 100%;
}
body:not(.is-authenticated) .auth-screen {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top, 0px)) 14px max(18px, env(safe-area-inset-bottom, 0px));
  background:
    radial-gradient(120% 70% at -5% -10%, rgba(255, 193, 129, 0.44) 0%, rgba(255, 193, 129, 0) 60%),
    radial-gradient(90% 50% at 100% 0%, rgba(148, 201, 255, 0.36) 0%, rgba(148, 201, 255, 0) 58%);
}
body.is-authenticated .auth-screen {
  display: none;
}
.auth-card {
  width: min(460px, calc(100vw - 28px));
  max-width: 460px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(246, 251, 255, 0.96));
  border: 1px solid #cfe0f2;
  border-radius: 20px;
  box-shadow: 0 18px 42px rgba(13, 36, 65, 0.2);
  padding: 18px;
  display: grid;
  gap: 14px;
}
.auth-brand {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #d8e5f3;
  border-radius: 14px;
  background: linear-gradient(135deg, #ffffff, #f2f8ff);
}
.auth-brand-logo {
  width: 56px;
  height: auto;
  flex: 0 0 auto;
}
.auth-brand-copy {
  display: grid;
  gap: 2px;
}
.auth-brand-copy strong {
  font-family: var(--font-heading);
  font-size: 19px;
  color: #143860;
  line-height: 1.1;
}
.auth-brand-copy span {
  color: #5b7592;
  font-size: 13px;
  line-height: 1.35;
}
.auth-pane {
  display: grid;
  gap: 10px;
}
.auth-card h1 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(22px, 6vw, 28px);
  line-height: 1.15;
}
.auth-card p {
  margin: 0;
  color: #4f6784;
  font-size: 14px;
  line-height: 1.45;
}
.auth-form {
  display: grid;
  gap: 12px;
  margin: 0;
}
.auth-form label {
  display: grid;
  gap: 6px;
}
.auth-form label > span {
  font-size: 12px;
  font-weight: 600;
  color: #49627f;
  letter-spacing: 0.02em;
}
.auth-form input {
  width: 100%;
  min-height: 46px;
  border: 1px solid #bfd3e9;
  border-radius: 12px;
  padding: 11px 13px;
  font-size: var(--text-base);
  font-family: var(--font-body);
  background: #fff;
  color: #163858;
}
.auth-form input:focus {
  outline: none;
  border-color: #4d88bd;
  box-shadow: 0 0 0 3px rgba(67, 131, 186, 0.17);
}
.auth-form button {
  border: 0;
  border-radius: 12px;
  min-height: 46px;
  padding: 10px 14px;
  font-size: var(--text-base);
  font-family: var(--font-heading);
  font-weight: 600;
  background: linear-gradient(135deg, #0f4c81, #1d6fb7);
  color: #fff;
  box-shadow: 0 10px 18px rgba(27, 90, 144, 0.28);
}
.auth-link-btn {
  background: transparent;
  border: 0;
  color: #1b5e97;
  padding: 0;
  font-size: 14px;
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
  width: fit-content;
}
.auth-message {
  min-height: 22px;
  margin: 0;
  color: #b42318;
  font-size: 13px;
}
.auth-message.ok {
  color: #146c43;
}
@media (max-width: 640px) {
  body:not(.is-authenticated) .auth-screen {
    padding: max(14px, env(safe-area-inset-top, 0px)) 10px max(14px, env(safe-area-inset-bottom, 0px));
  }
  .auth-card {
    width: min(460px, calc(100vw - 20px));
    border-radius: 16px;
    padding: 14px;
    gap: 12px;
  }
  .auth-brand {
    padding: 8px 10px;
    border-radius: 12px;
    gap: 10px;
  }
  .auth-brand-logo {
    width: 48px;
  }
  .auth-brand-copy strong {
    font-size: 17px;
  }
  .auth-brand-copy span {
    font-size: 12px;
  }
}
.shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 236px 1fr;
}
.sidebar {
  border-right: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(8px);
  box-shadow: 10px 0 30px rgba(18, 44, 72, 0.08);
  padding: 24px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mobile-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid #bfd0e5;
  background: #fff;
  color: #1d4b75;
  font-size: 24px;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(20, 53, 84, 0.12);
}
.mobile-nav-overlay {
  display: none;
}
.brand-logo {
  display: block;
  width: 100%;
  max-width: 210px;
  height: auto;
}
.brand p { margin: 6px 0 20px; color: var(--muted); font-size: 13px; }
.nav { display: grid; gap: 6px; }
.nav-group {
  display: grid;
  gap: 4px;
  border: 0;
  border-left: 3px solid #d3ddea;
  border-radius: 0;
  padding: 4px 0 4px 8px;
  background: transparent;
}
.nav-group-title {
  margin: 0;
  padding: 0 10px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6a7d95;
}
.nav-group--report {
  border-left-color: #9fc2df;
}
.nav-group--report .nav-group-title {
  color: #42698b;
}
.nav-group--docs {
  border-left-color: #a5d1b3;
}
.nav-group--docs .nav-group-title {
  color: #426d58;
}
.nav-group--settings {
  border-left-color: #d9c1a0;
}
.nav-group--settings .nav-group-title {
  color: #806749;
}
.nav a {
  text-decoration: none;
  color: #1d3557;
  padding: 10px 12px;
  border-radius: 10px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--text-base);
}
.nav a.active { background: linear-gradient(135deg, #0f4c81, #183f63); color: #fff; }
.nav a.parent-active:not(.active) {
  background: rgba(15, 76, 129, 0.09);
  color: #18486f;
}
.nav-sub-item {
  margin-left: 16px;
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 500;
  color: #4f6886;
  background: transparent;
  border-radius: 8px;
}
.nav-sub-item.active {
  background: linear-gradient(135deg, #245f91, #1c4f79);
  color: #fff;
}
.nav-sub-item:hover:not(.active) {
  background: rgba(15, 76, 129, 0.08);
}
.sidebar-footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(159, 181, 204, 0.45);
}
.nav-user-trigger {
  width: 100%;
  text-align: left;
  text-decoration: none;
  color: #1d3557;
  padding: 10px 12px;
  border-radius: 10px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--text-base);
  border: 0;
  background: transparent;
  display: grid;
  gap: 2px;
  cursor: pointer;
  line-height: 1.35;
}
.nav-user-trigger:hover {
  background: rgba(15, 76, 129, 0.08);
}
.sidebar-footer.is-open .nav-user-trigger {
  background: linear-gradient(135deg, #0f4c81, #183f63);
  color: #fff;
}
.nav-user-label {
  font-size: var(--text-base);
  letter-spacing: 0;
  text-transform: none;
  opacity: 1;
  font-weight: 500;
}
.nav-user-name {
  font-size: var(--text-base);
  line-height: 1.2;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-slide-panel {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-6px);
  transition: max-height .2s ease, opacity .2s ease, transform .2s ease, margin-top .2s ease;
  margin-top: 0;
}
.sidebar-footer.is-open .user-slide-panel {
  max-height: 220px;
  opacity: 1;
  transform: translateY(0);
  margin-top: 6px;
}
.user-slide-action {
  width: 100%;
  min-height: 38px;
  border-radius: 10px;
  border: 1px solid #c4d6e9;
  background: #f6f9ff;
  color: #244d75;
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 500;
  margin-bottom: 8px;
}
.user-slide-action:hover {
  background: #e9f0fb;
  border-color: #97b4d2;
}
.user-slide-logout {
  width: 100%;
  min-height: 38px;
  border-radius: 10px;
  border: 1px solid #e2b9c0;
  background: #fff1f3;
  color: #9f2435;
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 500;
}
.user-slide-logout:hover {
  background: #ffe8ec;
  border-color: #d88f9c;
}
.content {
  padding: 22px;
  display: grid;
  gap: 16px;
  min-width: 0;
  align-content: start;
  grid-auto-rows: min-content;
  width: 100%;
  margin-inline: 0;
}
.content-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 56px;
  gap: 14px;
}
.head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}
.content-head h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 24px;
}
.primary-action {
  width: auto;
  padding: 10px 14px;
  border-radius: 8px;
  border: 0;
  background: linear-gradient(135deg, #0f4c81, #1c6aae);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--text-base);
}
.is-hidden {
  display: none !important;
}
.view { display: none; }
.view.active {
  display: grid;
  gap: 16px;
  align-content: start;
}
.view > .panel:first-child {
  margin-top: 0;
}
.panel {
  background: var(--card);
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 18px 40px rgba(16,34,58,.12);
  min-width: 0;
  overflow: hidden;
}
.panel.doc-clone {
  overflow: visible;
}
.view[data-view="clients"] .panel,
.view[data-view="quotations"] .panel,
.view[data-view="invoices"] .panel,
.view[data-view="recurring-invoices"] .panel,
.view[data-view="receipts"] .panel,
.view[data-view="withholding-tax"] .panel,
.view[data-view="trash"] .panel {
  overflow: visible;
}
.panel h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0.01em;
  font-size: 24px;
}
.doc-entry {
  padding: 14px;
}
.doc-form {
  display: grid;
  gap: 10px;
}
.doc-head-grid {
  display: grid;
  grid-template-columns: 210px 1fr 300px;
  gap: 10px;
  align-items: start;
}
.doc-id-block {
  border: 1px solid #cfd9e7;
  border-radius: 10px;
  overflow: hidden;
  background: #f7fbff;
}
.doc-id-block .editable {
  border: 0;
  border-bottom: 1px solid #d9e3f2;
  border-radius: 0;
}
.doc-id-block .editable:last-child {
  border-bottom: 0;
}
.doc-meta-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  grid-column: 3;
}
.doc-head-spacer {
  min-height: 112px;
  border-bottom: 1px solid #dce6f3;
  grid-column: 2;
}
.doc-line {
  display: grid;
  grid-template-columns: 4fr 1.3fr;
  gap: 8px;
}
.doc-table-box {
  border: 1px solid #d2deed;
  border-radius: 10px;
  overflow: hidden;
}
.doc-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.doc-table th {
  background: #2b95ca;
  color: #fff;
  font-size: var(--text-base);
  font-weight: 500;
  padding: 8px 8px;
}
.doc-table td {
  border-bottom: 1px solid #e4edf8;
  padding: 6px;
  vertical-align: top;
  font-size: var(--text-base);
}
.doc-table th:nth-child(1),
.doc-table td:nth-child(1) {
  width: 52px;
}
.doc-table th:nth-child(3),
.doc-table td:nth-child(3) {
  width: 74px;
}
.doc-table th:nth-child(4),
.doc-table td:nth-child(4) {
  width: 84px;
}
.doc-table th:nth-child(5),
.doc-table td:nth-child(5) {
  width: 118px;
}
.doc-table th:nth-child(6),
.doc-table td:nth-child(6) {
  width: 118px;
}
.doc-table th:nth-child(7),
.doc-table td:nth-child(7) {
  width: 34px;
  text-align: center;
}
.item-total {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.link-btn {
  width: auto;
  margin: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #eef7ff;
  color: #17639a;
  border: 1px solid #92bfe1;
  font-size: var(--text-sm);
}
.doc-foot-grid {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 10px;
}
.doc-summary {
  border: 1px solid #d2deed;
  border-radius: 10px;
  padding: 10px 12px;
  background: #fafdff;
}
.doc-summary div {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px dashed #d8e3f1;
  padding: 6px 0;
}
.doc-summary .grand {
  border-bottom: 0;
  font-weight: 600;
  color: #124f7d;
}
.doc-form .editable {
  background: #f8fbff;
  border: 1px solid #c3d2e6;
  border-radius: 5px;
  padding: 6px 8px;
  min-height: 30px;
  font-size: var(--text-base);
  line-height: 1.25;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.doc-form label {
  display: grid;
  gap: 4px;
  font-size: var(--text-base);
  color: #334763;
}
.doc-form input.editable,
.doc-form select.editable,
.doc-form textarea.editable {
  width: 100%;
  padding: 5px 8px;
  border-radius: 5px;
}
.doc-table .item-qty,
.doc-table .item-unit,
.doc-table .item-price {
  text-align: center;
}
.doc-table .item-price {
  text-align: right;
}
.doc-table .item-qty {
  width: 56px;
}
.doc-table .item-unit {
  width: 66px;
}
.doc-table .item-price {
  width: 96px;
}
.doc-table .item-desc-wrap {
  display: grid;
  gap: 6px;
  width: 100%;
}
.doc-table .item-desc-main {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}
.doc-table .item-desc-main.is-open {
  z-index: 60;
}
.doc-table .item-preset-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 80;
  margin-top: 0;
}
.doc-table .item-preset-menu .salesperson-menu-list {
  max-height: none;
  overflow: visible;
}
.doc-table .product-menu-item {
  display: grid;
  gap: 2px;
  align-content: center;
}
.doc-table .product-menu-item small {
  color: #5f7490;
  font-size: 12px;
  font-weight: 500;
}
.doc-table .product-menu-hint {
  padding: 4px 6px 2px;
  color: #637a96;
  font-size: 12px;
}
.doc-table .item-detail {
  min-height: 68px;
  resize: none;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
}
.editable:focus {
  outline: none;
  border-color: #2b95ca;
  box-shadow: 0 0 0 3px rgba(43,149,202,.17);
  background: #fff;
}
.doc-builder {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  align-items: start;
}
.doc-builder .table-wrap {
  grid-column: 1 / -1;
}
.doc-builder label {
  display: grid;
  gap: 6px;
  color: #384a66;
  font-size: var(--text-base);
}
.doc-preview h3 {
  margin: 0 0 10px;
  font-family: var(--font-heading);
}
.doc-paper {
  background: linear-gradient(180deg, #fff, #fcfdff);
  border: 1px solid #dbe7f3;
  border-radius: 14px;
  padding: 14px;
  box-shadow: inset 0 1px 0 #fff;
}
.doc-paper .row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed #e2ebf6;
}
.doc-paper .row:last-of-type {
  border-bottom: 0;
}
.doc-paper small {
  display: block;
  margin-top: 10px;
  color: #6c7f9a;
}
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.card {
  background: linear-gradient(135deg, #cfe8ff, #dcefff);
  border-radius: 16px;
  color: #223957;
  padding: 14px;
  min-height: 120px;
  box-shadow: 0 8px 16px rgba(53, 92, 129, .12);
  border: 1px solid #d7e4f2;
}
.cards .card:nth-child(1) { background: linear-gradient(135deg, #d7ecff, #e8f4ff); }
.cards .card:nth-child(2) { background: linear-gradient(135deg, #e0e5ff, #eef0ff); }
.cards .card:nth-child(3) { background: linear-gradient(135deg, #d8f3e8, #e9faf2); }
.cards .card:nth-child(4) { background: linear-gradient(135deg, #ffe8cf, #fff3e4); }
.cards .card:nth-child(5) { background: linear-gradient(135deg, #ffdce8, #ffeaf1); }
.cards .card:nth-child(6) { background: linear-gradient(135deg, #e8ddff, #f2ecff); }
.card h3 {
  margin: 0;
  font-size: var(--text-base);
  color: #4d6480;
  font-family: var(--font-heading);
  font-weight: 500;
}
.card p {
  margin: 10px 0 0;
  font-size: 34px;
  font-family: var(--font-heading);
  font-weight: 600;
}
.grid { display: grid; gap: 10px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sig-preview {
  width: 100%;
  max-width: 280px;
  min-height: 56px;
  max-height: 120px;
  object-fit: contain;
  border: 1px dashed #b7c8dd;
  border-radius: 8px;
  background: #f8fbff;
  padding: 8px;
}
.logo-preview {
  max-width: 340px;
  max-height: 96px;
  min-height: 64px;
  background: #fff;
}
.sig-upload {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 12px;
  align-items: center;
  border: 1px dashed #b7c8dd;
  border-radius: 10px;
  background: #f8fbff;
  padding: 10px;
}
.sig-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.sig-upload-btn {
  width: auto;
  min-width: 170px;
  text-align: center;
  border: 1px solid #2f7bb6;
  border-radius: 8px;
  background: linear-gradient(135deg, #2f7bb6, #175f96);
  color: #fff;
  font-weight: 600;
  font-size: var(--text-sm);
  padding: 8px 12px;
  cursor: pointer;
}
.sig-upload-btn:hover {
  filter: brightness(1.04);
}
.sig-upload small {
  color: #48627f;
  font-size: var(--text-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.view[data-view="company"] .panel {
  padding: 22px;
}
.company-head h2 {
  margin: 0;
}
.company-head p {
  margin: 0 0 14px;
  color: #5a6f89;
  font-size: var(--text-sm);
}
.company-form {
  display: grid;
  gap: 14px;
}
.company-section {
  border: 1px solid #d8e3f1;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  border-radius: 12px;
  padding: 14px;
}
.company-section h3 {
  margin: 0 0 10px;
  color: #163a5f;
  font-size: 18px;
  font-family: var(--font-heading);
  font-weight: 600;
}
.company-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.company-grid .field {
  display: grid;
  gap: 5px;
}
.company-grid .field span {
  color: #375270;
  font-size: var(--text-sm);
}
.company-grid .field--full {
  grid-column: 1 / -1;
}
.company-grid textarea {
  min-height: 86px;
}
.smtp-template-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.smtp-template-actions .ghost-mini {
  min-width: 170px;
}
.company-actions {
  display: flex;
  justify-content: flex-end;
}
.view[data-view="company"] #company-form button {
  width: auto;
  min-width: 240px;
  max-width: 100%;
  padding-inline: 22px;
  border-radius: 10px;
}
input, select, textarea, button {
  width: 100%;
  border-radius: 10px;
  border: 1px solid #cad6e4;
  padding: 12px;
  font-size: var(--text-base);
  font-family: var(--font-body);
}
input[type="checkbox"],
input[type="radio"] {
  width: 16px;
  height: 16px;
  padding: 0;
  border-radius: 4px;
  border: 1px solid #9fb2c7;
  vertical-align: middle;
  accent-color: #1f5f95;
  margin: 0;
}
textarea { min-height: 72px; }
textarea.editable { min-height: 56px; }
button {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  cursor: pointer;
}
button:hover { background: #0d3f6a; }
.doc-form > button[type="submit"] {
  margin-top: 2px;
  height: 40px;
  font-size: var(--text-base);
  border-radius: 7px;
  width: 220px;
}
.doc-clone {
  padding: 10px 12px 16px;
  background: #f2f4f7;
  border: 1px solid #d8dfe8;
  box-shadow: none;
  border-radius: 14px;
  overflow: visible;
}
.doc-clone-form {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.clone-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #d5dce6;
  padding-bottom: 10px;
}
.clone-subtitle {
  font-size: var(--text-base);
  color: #1b3656;
}
.clone-docno {
  font-size: 40px;
  line-height: 1;
  color: #1d8fcb;
  font-family: var(--font-heading);
}
.clone-actions {
  display: flex;
  gap: 8px;
}
.clone-actions button {
  width: auto;
  min-width: 108px;
  height: 40px;
  font-size: var(--text-base);
}
.clone-actions .ghost {
  background: #fff;
  color: #223957;
  border: 1px solid #b8c4d3;
}
.clone-actions .save {
  background: #7fb92e;
  border: 1px solid #6ba120;
}
.clone-main-head {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  min-width: 0;
}
.clone-left {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.clone-left label {
  display: grid;
  gap: 4px;
  font-size: var(--text-base);
  color: #203852;
}
.client-picker {
  display: block;
}
.client-picker-main {
  position: relative;
  min-width: 0;
}
.client-trigger {
  text-align: left;
  background: #fff;
  color: #1b3552;
  border-color: #9eb7d4;
  width: 100%;
}
.client-trigger:hover {
  background: #f6fbff;
}
.client-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  width: 100%;
  min-width: min(280px, 100%);
  max-width: min(560px, calc(100vw - 32px));
  background: #fff;
  border: 1px solid #c3d2e3;
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(18, 36, 58, .15);
  z-index: 20;
  padding: 8px;
  max-height: min(72vh, 560px);
  overflow: auto;
}
.client-picker-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 6px;
  align-items: stretch;
}
.client-search {
  width: 100%;
  margin-bottom: 6px;
}
.client-options {
  max-height: 196px;
  overflow: auto;
  border: 1px solid #d8e3f1;
  border-radius: 5px;
}
.client-option {
  width: 100%;
  text-align: left;
  background: #fff;
  border: 0;
  border-bottom: 1px solid #e2eaf4;
  padding: 8px 10px;
  color: #1b3552;
}
.client-option:last-child {
  border-bottom: 0;
}
.client-option small {
  display: block;
  color: #8090a7;
}
.client-action {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f9ff;
  color: #1f7db6;
  border: 1px solid #d3e3f5;
  border-radius: 5px;
  min-height: 36px;
  padding: 7px 8px;
  margin-top: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
}
.client-action.is-active {
  background: #e8f3ff;
  color: #1a6fa4;
  border-color: #8fb8dd;
  box-shadow: inset 0 0 0 1px #8fb8dd;
}
.client-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(15, 31, 56, .45);
  display: grid;
  place-items: center;
  padding: 20px;
}
.client-modal-card {
  width: min(560px, 96vw);
  margin-top: 0;
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #c3d2e3;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 22px 40px rgba(18, 36, 58, .25);
}
.client-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
  color: #1b3552;
}
.client-modal-close {
  width: auto;
  min-width: 54px;
  height: 30px;
  padding: 4px 10px;
  border-radius: 7px;
  background: #eef4fb;
  border: 1px solid #c9d8e8;
  color: #2c4662;
  font-size: var(--text-sm);
}
.client-modal-close:hover {
  background: #e3edf9;
}
.payment-bank-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 2px 2px;
}
.payment-bank-row + .payment-bank-card {
  margin-top: 8px;
}
.payment-bank-row strong {
  color: #254564;
  font-size: var(--text-sm);
  font-weight: 600;
}
.payment-bank-card {
  border: 1px solid #d6e2f1;
  border-radius: 10px;
  background: #f8fbff;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.payment-bank-card-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.payment-bank-logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
  object-position: center;
  image-rendering: -webkit-optimize-contrast;
  border-radius: 50%;
  border: 2px solid #d3e1f2;
  background: radial-gradient(circle at 35% 30%, #ffffff 0, #f3f7fd 100%);
  padding: 6px;
  box-shadow: 0 4px 12px rgba(15, 76, 129, .14);
  flex: 0 0 56px;
}
.payment-bank-meta {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.payment-bank-meta strong,
.payment-bank-meta span,
.payment-bank-meta small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.payment-bank-meta span {
  color: #375270;
  font-size: var(--text-base);
}
.payment-bank-meta small {
  color: #647b95;
  font-size: var(--text-sm);
}
.payment-bank-qr {
  width: 82px;
  height: 82px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #d6e2f1;
  background: #fff;
}
.payment-bank-extra {
  margin-top: 8px;
  display: grid;
  gap: 8px;
}
.payment-amount-hint {
  margin-top: -4px;
  margin-bottom: 2px;
  color: #355779;
  font-size: 13px;
  font-weight: 600;
}
.payment-amount-hint.warn {
  color: #b22929;
}
.payment-bank-extra-item {
  border: 1px solid #d6e2f1;
  border-radius: 10px;
  background: #fff;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.payment-bank-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  border-radius: 999px;
  padding: 0 8px;
  background: #e6f4ff;
  color: #1a5a8e;
  font-size: 12px;
  font-weight: 700;
  margin-left: 6px;
}
.ghost-mini {
  width: auto;
  min-width: 160px;
  height: 34px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid #b8cade;
  background: #f3f8ff;
  color: #1f5f95;
  font-size: var(--text-sm);
}
.ghost-mini:hover {
  background: #e8f2ff;
}
.bank-modal-card {
  width: min(760px, 96vw);
  background: #fff;
  color-scheme: light;
  border: 1px solid #d2deed;
  border-radius: 8px;
  box-shadow: 0 20px 44px rgba(18, 36, 58, .25);
  padding: 24px 28px 16px;
}
.trash-groups {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 12px;
}
.trash-group {
  border: 1px solid #d7e4f3;
  border-radius: 12px;
  background: #f9fcff;
  padding: 10px;
}
.trash-group-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #d2e1f2;
  background: #fff;
  color: #234668;
  border-radius: 9px;
  padding: 8px 10px;
  font-size: 16px;
  font-family: var(--font-heading);
  font-weight: 600;
}
.trash-group-toggle::after {
  content: "▾";
  color: #4f6d8e;
  font-size: 14px;
}
.trash-group.is-collapsed .trash-group-toggle::after {
  transform: rotate(-90deg);
}
.trash-group .trash-list {
  margin-top: 8px;
}
.trash-group.is-collapsed .trash-list {
  display: none;
}
.trash-list {
  display: grid;
  gap: 7px;
  max-height: 250px;
  overflow: auto;
}
.trash-item {
  border: 1px solid #dae6f4;
  border-radius: 9px;
  background: #fff;
  padding: 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}
.trash-item-meta {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.trash-item-title {
  color: #1f3d5f;
  font-weight: 600;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trash-item-sub {
  color: #5f7895;
  font-size: 12px;
}
.trash-restore-btn {
  width: auto;
  min-width: 88px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid #9cc7a9;
  background: #ebf8ef;
  color: #1d6f3b;
  font-size: 13px;
  font-weight: 700;
  padding: 0 10px;
}
.trash-empty {
  color: #68809c;
  font-size: 13px;
  border: 1px dashed #cfe0f3;
  border-radius: 8px;
  padding: 8px;
  background: #fff;
}
#installment-form {
  width: min(1180px, 98vw);
}
#installment-form .installment-box {
  overflow-x: visible;
}
#installment-form .installment-table {
  min-width: 0;
}
.bank-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.bank-modal-head h3 {
  margin: 0;
  font-size: 20px;
  color: #363e4b;
  font-family: var(--font-heading);
}
.bank-close {
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef4fb;
  border: 1px solid #c9d8e8;
  border-radius: 8px;
  color: #2c4662;
  font-size: 22px;
  line-height: 1;
  font-family: "Noto Sans Thai", "Prompt", "Sarabun", sans-serif;
}
.bank-close:hover {
  background: #e3edf9;
}
.bank-form-grid {
  display: grid;
  grid-template-columns: 132px 1fr;
  align-items: center;
  gap: 10px 14px;
  padding: 8px 6px 16px;
}
.bank-form-grid > label {
  color: #2d394a;
  font-weight: 600;
}
.bank-form-grid input,
.bank-form-grid select {
  min-height: 42px;
}
.bank-account-picker-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px;
  gap: 8px;
  align-items: center;
}
.bank-delete-btn {
  min-height: 42px;
  border-radius: 10px;
  border: 1px solid #e2b4bc;
  background: #fff4f6;
  color: #a63546;
  font-weight: 700;
  font-size: var(--text-base);
}
.bank-delete-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.bank-select-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #cad6e4;
  border-radius: 10px;
  background: #fff;
  padding: 4px 8px 4px 6px;
}
.bank-logo-preview {
  width: 44px;
  height: 44px;
  object-fit: contain;
  object-position: center;
  image-rendering: -webkit-optimize-contrast;
  border-radius: 50%;
  border: 2px solid #d3e1f2;
  background: radial-gradient(circle at 35% 30%, #ffffff 0, #f3f7fd 100%);
  padding: 4px;
  box-shadow: 0 3px 10px rgba(15, 76, 129, .12);
  flex: 0 0 44px;
}
.bank-select-wrap select {
  border: 0;
  border-radius: 8px;
  min-height: 34px;
  padding: 6px 26px 6px 8px;
  background-color: transparent;
  color: #1b3552;
  color-scheme: light;
}
.bank-select-wrap select option {
  background: #fff;
  color: #1b3552;
}
.bank-select-wrap:focus-within {
  border-color: #2b95ca;
  box-shadow: 0 0 0 3px rgba(43,149,202,.16);
}
.bank-type-group {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.bank-type-group label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #2d394a;
  font-weight: 500;
}
.bank-modal-actions {
  border-top: 1px solid #e1e7f0;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 14px;
}
.bank-cancel {
  width: auto;
  min-width: 140px;
  background: #fff;
  border: 1px solid #cad6e4;
  color: #3e4b5f;
}
.bank-save {
  width: auto;
  min-width: 140px;
}
#installment-form .bank-save:disabled {
  opacity: .55;
  cursor: not-allowed;
  filter: grayscale(.2);
}
.bank-qr-upload {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 10px;
  align-items: center;
  border: 1px dashed #c5d6ea;
  border-radius: 10px;
  background: #f8fbff;
  padding: 10px;
}
.bank-qr-preview {
  grid-column: 1 / -1;
  width: 130px;
  height: 130px;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid #d6e2f1;
  background: #fff;
  padding: 6px;
}
.bank-primary-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #274466;
  font-weight: 600;
}
.client-dbd-panel {
  display: grid;
  gap: 8px;
}
.client-modal-card .editable,
.client-modal-card select,
.client-modal-card input {
  min-height: 42px;
}
.client-modal-card .save-mini {
  height: 42px;
  font-size: var(--text-base);
  border-radius: 10px;
}
.receipt-edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.receipt-edit-grid label {
  display: grid;
  gap: 6px;
  color: #2d4661;
  font-size: var(--text-sm);
}
.client-modal-card > label {
  display: grid;
  gap: 6px;
  color: #2d4661;
  font-size: var(--text-sm);
}
.receipt-signature-toggle {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  color: #2a4768;
  font-size: var(--text-sm);
  font-weight: 600;
}
.share-modal-card {
  width: min(700px, 96vw);
}
.share-option-grid {
  display: grid;
  gap: 10px;
  padding: 8px 0 4px;
}
.share-option-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  color: #2b4764;
  font-size: var(--text-sm);
}
.share-option-row > span {
  font-weight: 700;
}
.share-options-inline {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.share-option-row label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.share-link-field {
  display: grid;
  gap: 6px;
  color: #2d4661;
  font-size: var(--text-sm);
  margin-top: 2px;
  justify-items: start;
  width: 100%;
}
.share-link-field input {
  min-height: 44px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.share-link-field input#share-pin-output {
  background: #fff5f7;
  border-color: #e7b6c4;
  color: #7a1835;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.share-pin-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 8px;
  align-items: center;
  width: 100%;
}
.copy-icon-btn {
  height: 44px;
  width: 44px;
  border-radius: 10px;
  border: 1px solid #b8cce2;
  background: linear-gradient(180deg, #fafdff, #edf4fc);
  color: #234a72;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.copy-icon-btn:hover {
  border-color: #8fb0d1;
  background: linear-gradient(180deg, #f3f9ff, #e6f0fb);
}
.copy-icon-btn:active {
  transform: translateY(1px);
}
.share-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}
.share-actions .ghost,
.share-actions .save-mini {
  width: auto;
  min-width: 132px;
  height: 42px;
  padding: 0 14px;
}
.smtp-preview-card {
  width: min(760px, 96vw);
}
.smtp-preview-line {
  color: #274668;
  font-size: var(--text-base);
  border: 1px solid #d7e4f3;
  border-radius: 10px;
  background: #f8fbff;
  padding: 8px 10px;
}
.smtp-preview-label {
  margin-top: 8px;
  color: #274668;
  font-weight: 600;
}
.smtp-preview-body {
  margin: 4px 0 0;
  border: 1px solid #d7e4f3;
  border-radius: 10px;
  background: #f8fbff;
  padding: 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #183a5c;
  max-height: min(52vh, 420px);
  overflow: auto;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.45;
}
.invoice-email-card {
  width: min(460px, 95vw);
  gap: 10px;
}
.invoice-email-meta {
  font-size: var(--text-sm);
  color: #4a6480;
  background: #f4f8ff;
  border: 1px solid #d9e6f6;
  border-radius: 10px;
  padding: 8px 10px;
}
.invoice-email-field {
  display: grid;
  gap: 6px;
  color: #2d4661;
  font-size: var(--text-sm);
}
.invoice-email-field small {
  color: #5f7895;
}
.invoice-email-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.invoice-email-actions .ghost,
.invoice-email-actions .save-mini {
  width: auto;
  min-width: 124px;
  height: 40px;
}
.recurring-plan-card {
  width: min(560px, 96vw);
  gap: 10px;
}
.recurring-plan-source {
  font-size: var(--text-sm);
  color: #4a6480;
  background: #f4f8ff;
  border: 1px solid #d9e6f6;
  border-radius: 10px;
  padding: 8px 10px;
}
.recurring-plan-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.recurring-plan-field {
  display: grid;
  gap: 6px;
  color: #2d4661;
  font-size: var(--text-sm);
}
.date-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.date-input-wrap input[type="date"],
.date-input-wrap .recurring-end-date-alt {
  width: 100%;
  padding-right: 46px;
  min-height: 42px;
  background: linear-gradient(180deg, #fafdff, #f5f9ff);
  border: 1px solid #b8cce2;
  color: #173957;
  font-weight: 600;
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.date-input-wrap input[type="date"]::-webkit-calendar-picker-indicator,
.date-input-wrap .recurring-end-date-alt::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 0;
  width: 44px;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.app-date-alt {
  background: linear-gradient(180deg, #fafdff, #f5f9ff);
  border: 1px solid #b8cce2;
  color: #173957;
  font-weight: 600;
  border-radius: 10px;
  min-height: 42px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.app-date-alt:focus {
  outline: none;
  border-color: #8bb3d8;
  box-shadow: 0 0 0 3px rgba(35, 101, 155, 0.15);
}
.date-input-icon {
  position: absolute;
  right: 10px;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background-color: #e6f1fb;
  border: 1px solid #b9cee5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232a628f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  pointer-events: none;
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.date-input-wrap:focus-within .date-input-icon {
  background-color: #d7ebff;
  border-color: #8bb3d8;
  box-shadow: 0 0 0 2px rgba(35, 101, 155, 0.14);
}
.flatpickr-calendar.invoice-date-theme {
  width: 330px;
  border: 1px solid #afc7e0;
  border-radius: 18px;
  box-shadow: 0 22px 42px rgba(20, 48, 78, 0.26);
  background: linear-gradient(180deg, #ffffff, #f6fbff 72%);
  overflow: hidden;
  font-family: var(--font-body);
}
.flatpickr-calendar.invoice-date-theme .flatpickr-months {
  background: linear-gradient(90deg, #0f4f8c, #1f6ead);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  padding: 2px 0;
}
.flatpickr-calendar.invoice-date-theme .flatpickr-month {
  color: #fff;
  height: 44px;
}
.flatpickr-calendar.invoice-date-theme .flatpickr-current-month {
  color: #fff;
  font-weight: 700;
  padding-top: 8px;
}
.flatpickr-calendar.invoice-date-theme .flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-calendar.invoice-date-theme .flatpickr-current-month input.cur-year {
  color: #fff;
  font-weight: 700;
}
.flatpickr-calendar.invoice-date-theme .flatpickr-prev-month,
.flatpickr-calendar.invoice-date-theme .flatpickr-next-month {
  top: 2px;
  color: #eaf5ff;
  fill: #eaf5ff;
}
.flatpickr-calendar.invoice-date-theme .flatpickr-prev-month:hover,
.flatpickr-calendar.invoice-date-theme .flatpickr-next-month:hover {
  color: #ffffff;
}
.flatpickr-calendar.invoice-date-theme .flatpickr-weekdays {
  background: #eef6ff;
  border-bottom: 1px solid #d4e5f7;
  padding: 6px 0 4px;
}
.flatpickr-calendar.invoice-date-theme span.flatpickr-weekday {
  color: #3b5e80;
  font-weight: 700;
  font-size: 12px;
}
.flatpickr-calendar.invoice-date-theme .flatpickr-days {
  padding: 8px 10px 10px;
}
.flatpickr-calendar.invoice-date-theme .flatpickr-day {
  border-radius: 10px;
  color: #203d59;
  font-weight: 600;
}
.flatpickr-calendar.invoice-date-theme .flatpickr-day:hover {
  background: #e8f2ff;
  border-color: #c5daf1;
  color: #123a61;
}
.flatpickr-calendar.invoice-date-theme .flatpickr-day.today {
  border: 1px solid #7cb0de;
  color: #0f4f8c;
  background: #f0f8ff;
  font-weight: 700;
}
.flatpickr-calendar.invoice-date-theme .flatpickr-day.selected,
.flatpickr-calendar.invoice-date-theme .flatpickr-day.startRange,
.flatpickr-calendar.invoice-date-theme .flatpickr-day.endRange {
  background: linear-gradient(180deg, #1f78cf, #0f5fae);
  border-color: #0f5fae;
  color: #fff;
  box-shadow: 0 6px 12px rgba(15, 95, 174, 0.32);
}
.flatpickr-calendar.invoice-date-theme .flatpickr-day.flatpickr-disabled,
.flatpickr-calendar.invoice-date-theme .flatpickr-day.flatpickr-disabled:hover {
  color: #b4bfd0;
  background: transparent;
}
.flatpickr-calendar.invoice-date-theme .flatpickr-monthDropdown-months:hover,
.flatpickr-calendar.invoice-date-theme input.cur-year:hover,
.flatpickr-calendar.invoice-date-theme input.cur-year:focus {
  background: rgba(255, 255, 255, 0.14);
}
.recurring-plan-checks {
  display: grid;
  gap: 8px;
  margin: 2px 0;
}
.recurring-plan-checks label {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  color: #24415f;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.35;
}
.recurring-email-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}
.recurring-email-pill.waiting {
  background: #eef7ff;
  border: 1px solid #bfd9f3;
  color: #0f4c81;
}
.recurring-email-countdown {
  font-variant-numeric: tabular-nums;
}
.recurring-plan-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.recurring-plan-actions .ghost,
.recurring-plan-actions .save-mini {
  width: auto;
  min-width: 124px;
  height: 40px;
}
.client-create-wrap {
  width: 100%;
}
.client-create-card {
  width: 100%;
  border: 1px solid #d6e3f2;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff, #f9fcff);
  box-shadow: 0 10px 24px rgba(20, 43, 71, 0.08);
}
.client-create-mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.client-create-mode-btn {
  height: 38px;
  border-radius: 10px;
  border: 1px solid #c9daec;
  background: #f5f9ff;
  color: #2c4b6a;
  font-weight: 700;
  font-size: var(--text-base);
}
.client-create-mode-btn.is-active {
  background: #e8f2ff;
  border-color: #8fb6df;
  color: #174c83;
  box-shadow: inset 0 0 0 1px #8fb6df;
}
.client-create-mode-btn:hover {
  filter: brightness(0.98);
}
.client-create-card > #client-manual-pane,
.client-create-card > #client-dbd-pane {
  display: grid;
  gap: 8px;
}
.client-dbd-list {
  display: grid;
  gap: 8px;
  max-height: 280px;
  overflow: auto;
  border: 1px dashed #ccdced;
  border-radius: 10px;
  padding: 8px;
  background: #fbfdff;
}
.client-dbd-item {
  border: 1px solid #d6e4f3;
  border-radius: 10px;
  background: #fff;
  color: #234a73;
  text-align: left;
  padding: 10px;
  display: grid;
  gap: 2px;
}
.client-dbd-item strong {
  font-size: var(--text-base);
}
.client-dbd-item span {
  font-size: var(--text-sm);
  color: #3f6588;
}
.client-dbd-item small {
  font-size: var(--text-sm);
  color: #6b82a0;
}
.client-dbd-item.is-active {
  border-color: #7eaddd;
  box-shadow: inset 0 0 0 1px #7eaddd;
  background: #eef6ff;
}
.client-dbd-empty {
  color: #6b82a0;
  font-size: var(--text-sm);
  padding: 6px 4px;
}
.client-create-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.client-create-card textarea.editable {
  min-height: 78px;
}
.app-confirm {
  position: fixed;
  inset: 0;
  z-index: 2300;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15, 31, 56, .34);
  backdrop-filter: blur(3px);
}
.app-confirm-card {
  width: min(440px, 96vw);
  padding: 16px;
  border-radius: 16px;
  border: 1px solid #cfddee;
  background: linear-gradient(180deg, #fff, #f8fbff);
  box-shadow: 0 20px 44px rgba(12, 30, 50, .28);
}
.app-confirm-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 8px;
  font-weight: 700;
  color: #155389;
  background: #e7f2ff;
  border: 1px solid #c7def7;
}
.app-confirm-card h3 {
  margin: 0 0 6px;
  font-size: 22px;
  font-family: var(--font-heading);
  color: #16324e;
}
.app-confirm-card p {
  margin: 0;
  color: #3b5574;
}
.app-confirm-actions {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.app-confirm-actions .ghost {
  width: auto;
  min-width: 112px;
  height: 40px;
  padding: 0 16px;
  background: #fff;
  border: 1px solid #c3d2e3;
  color: #223957;
  font-weight: 600;
}
.app-confirm-actions .save-mini {
  width: auto;
  min-width: 112px;
  height: 40px;
  padding: 0 16px;
  font-weight: 600;
}
body.mobile-sheet-open {
  overflow: hidden;
}
.mobile-action-sheet {
  position: fixed;
  inset: 0;
  z-index: 1250;
  pointer-events: none;
}
.mobile-action-sheet:not(.is-hidden) {
  pointer-events: auto;
}
.mobile-action-sheet-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  background: rgba(8, 22, 38, 0.5);
  opacity: 0;
  transition: opacity .18s ease;
}
.mobile-action-sheet-card {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 16px 16px 0 0;
  border: 1px solid #d0dfef;
  border-bottom: 0;
  background: linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
  box-shadow: 0 -14px 36px rgba(12, 34, 56, 0.24);
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
  transform: translateY(110%);
  transition: transform .2s ease;
  max-height: min(68dvh, 520px);
  overflow: auto;
}
.mobile-action-sheet-card::before {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  border-radius: 999px;
  background: #ccd9e8;
  margin: 2px auto 10px;
}
.mobile-action-sheet:not(.is-hidden) .mobile-action-sheet-backdrop {
  opacity: 1;
}
.mobile-action-sheet:not(.is-hidden) .mobile-action-sheet-card {
  transform: translateY(0);
}
.mobile-action-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.mobile-action-sheet-head strong {
  font-family: var(--font-heading);
  font-size: 17px;
  color: #17395d;
}
.mobile-action-sheet-close {
  border: 1px solid #c7d7e8;
  background: #fff;
  color: #23466b;
  border-radius: 999px;
  min-height: 34px;
  padding: 0 12px;
  font-weight: 600;
}
.mobile-action-sheet-body {
  display: grid;
  gap: 6px;
}
.mobile-sheet-item {
  border: 1px solid #d4e1f0;
  background: #fff;
  color: #173d63;
  border-radius: 12px;
  min-height: 42px;
  width: 100%;
  text-align: left;
  padding: 0 12px;
  font-size: var(--text-base);
}
.mobile-sheet-item.status-option.is-active {
  border-color: #aac9e8;
  background: #eef6ff;
  color: #1f5d8e;
  font-weight: 700;
}
.mobile-sheet-item.warn {
  border-color: #f0d294;
  background: #fff8e7;
  color: #7a5a00;
  font-weight: 700;
}
.mobile-sheet-item.next-step {
  border-color: #a5d8b7;
  background: #edf9f1;
  color: #1c6f3d;
  font-weight: 700;
}
.mobile-sheet-item.danger {
  border-color: #e9b0b8;
  background: #fff1f3;
  color: #a12d3a;
  font-weight: 700;
}
.app-toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 140;
  max-width: min(520px, 94vw);
  padding: 12px 14px 12px 12px;
  border-radius: 12px;
  border: 1px solid #b9d9bf;
  background: #ecfbef;
  color: #14502a;
  box-shadow: 0 14px 34px rgba(15, 35, 24, 0.24);
  font-weight: 500;
  font-size: var(--text-base);
  line-height: 1.45;
  display: grid;
  grid-template-columns: 24px 1fr 24px;
  align-items: start;
  gap: 8px;
  backdrop-filter: blur(2px);
}
.app-toast-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
}
.app-toast-text {
  white-space: normal;
  overflow-wrap: anywhere;
}
.app-toast-close {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 20px;
  line-height: 1;
  width: 24px;
  height: 24px;
  padding: 0;
  cursor: pointer;
  opacity: .72;
}
.app-toast-close:hover {
  opacity: 1;
}
.app-toast.toast-success {
  border-color: #b8dec2;
  background: #ebf9f0;
  color: #14502a;
}
.app-toast.toast-success .app-toast-icon {
  background: #d7f2e0;
  color: #19713b;
}
.app-toast.toast-warn {
  border-color: #efd8a3;
  background: #fff7e5;
  color: #7a5a00;
}
.app-toast.toast-warn .app-toast-icon {
  background: #ffebbf;
  color: #9a6f00;
}
.app-toast.toast-error {
  border-color: #efc0c4;
  background: #fff1f2;
  color: #8a1f29;
}
.app-toast.toast-error .app-toast-icon {
  background: #ffdfe3;
  color: #b22d3b;
}
.save-mini {
  width: 100%;
  height: 30px;
  font-size: var(--text-sm);
}
.clone-left textarea.editable {
  min-height: 80px;
}
.id-lines {
  display: grid;
  gap: 0;
  border: 1px solid #c7d2e1;
  border-radius: 4px;
  overflow: hidden;
}
.id-lines .editable {
  border: 0;
  border-bottom: 1px solid #d8e0ec;
  border-radius: 0;
}
.id-lines .editable:last-child {
  border-bottom: 0;
}
.clone-right {
  justify-self: end;
  width: 330px;
  max-width: 100%;
}
.clone-total-title {
  font-size: var(--text-base);
  color: #2d415c;
}
.clone-total-val {
  font-size: 46px;
  line-height: 1.05;
  color: #1d8fcb;
  margin: 2px 0 8px;
  font-family: var(--font-heading);
}
.mini-fields {
  display: grid;
  gap: 4px;
}
.mini-fields label {
  display: grid;
  grid-template-columns: 95px 1fr;
  align-items: center;
  gap: 6px;
  font-size: var(--text-base);
  color: #223957;
}
.mini-fields .editable {
  min-height: 28px;
}
.salesperson-inline {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: center;
  gap: 6px;
}
.salesperson-menu-btn {
  min-height: 28px;
  border-radius: 8px;
  border: 1px solid #c9d8ea;
  background: #f6fbff;
  color: #2a4a6b;
  font-size: 16px;
  font-weight: 700;
  padding: 0;
}
.salesperson-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 35;
  background: #fff;
  border: 1px solid #c4d4e6;
  border-radius: 8px;
  box-shadow: 0 12px 24px rgba(21, 43, 70, 0.18);
  padding: 6px;
  display: grid;
  gap: 4px;
}
.salesperson-menu-list {
  max-height: 160px;
  overflow: auto;
  padding-bottom: 2px;
}
.salesperson-menu-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 6px;
  margin-bottom: 4px;
}
.salesperson-menu-item {
  width: 100%;
  min-height: 32px;
  border-radius: 7px;
  border: 1px solid #d4e0ee;
  background: #f8fbff;
  color: #214263;
  text-align: left;
  font-size: var(--text-base);
  font-weight: 600;
  padding: 0 10px;
}
.salesperson-menu-item:hover {
  background: #edf5ff;
}
.salesperson-menu-empty {
  color: #6c7f98;
  font-size: var(--text-sm);
  padding: 4px 2px 6px;
}
.salesperson-menu-delete {
  min-height: 32px;
  border-radius: 7px;
  border: 1px solid #efc5cc;
  background: #fff5f6;
  color: #9f2435;
  font-size: var(--text-sm);
  font-weight: 700;
  padding: 0;
}
.salesperson-menu-delete:hover {
  background: #ffeef1;
}
.clone-line {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 10px;
  border-top: 1px solid #d5dce6;
  padding-top: 8px;
  min-width: 0;
}
.clone-line label {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  font-size: var(--text-base);
  color: #223957;
}
.clone-line-label {
  white-space: nowrap;
}
.item-index-no {
  line-height: 1;
  color: #1f3350;
  font-weight: 600;
}
.item-action-cell {
  text-align: center;
  vertical-align: middle !important;
}
.item-trash-btn {
  width: 20px;
  min-width: 20px;
  height: 20px;
  border: 0;
  background: transparent;
  color: #8aa0bb;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color .15s ease, background .15s ease;
}
.item-trash-btn:hover {
  color: #cf4b4b;
  background: #fff1f1;
}
.clone-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
  gap: 14px;
  align-items: start;
  min-width: 0;
}
.clone-note-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  min-width: 0;
  align-items: start;
  grid-auto-rows: min-content;
}
.clone-note-wrap label {
  display: grid;
  gap: 4px;
  font-size: var(--text-base);
  align-self: start;
}
.clone-note-wrap .doc-signature-toggle {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  color: #2a4768;
  font-weight: 600;
}
.clone-note-wrap .doc-signature-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
}
.clone-note-wrap textarea {
  min-height: 128px;
  height: 128px;
  resize: vertical;
}
.invoice-side-stack {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.installment-box {
  border: 1px solid #d5e0ee;
  background: #f8fbff;
  border-radius: 8px;
  padding: 10px;
  overflow-x: auto;
}
.installment-meta {
  display: grid;
  gap: 2px;
  margin-bottom: 8px;
  color: #284a6e;
}
.installment-meta strong {
  font-family: var(--font-heading);
}
.installment-meta span {
  font-size: var(--text-sm);
}
.installment-guide {
  margin-bottom: 10px;
  border: 1px solid #d9e6f5;
  background: #f6fbff;
  border-radius: 8px;
  padding: 8px 10px;
  display: grid;
  gap: 4px;
}
.installment-guide-title {
  color: #24486d;
  font-size: 13px;
  font-weight: 700;
}
.installment-guide-step {
  color: #32597f;
  font-size: 13px;
  line-height: 1.4;
}
.installment-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.installment-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
}
.installment-table th,
.installment-table td {
  border-bottom: 1px dashed #cfdbeb;
  padding: 6px 4px;
  font-size: var(--text-sm);
  text-align: left;
  vertical-align: middle;
}
.installment-table .editable {
  min-height: 30px;
  padding: 4px 6px;
  width: 100%;
}
.installment-table .installment-index {
  color: #28496d;
  font-weight: 600;
}
.installment-table .installment-amount {
  font-weight: 600;
  color: #173f66;
  text-align: right;
  white-space: nowrap;
}
.installment-table .installment-vat,
.installment-table .installment-wht {
  text-align: right;
  white-space: nowrap;
  color: #365779;
}
.installment-remove {
  min-height: 30px;
  min-width: 40px;
  padding: 0 8px;
}
.installment-foot {
  margin-top: 8px;
  font-size: var(--text-sm);
  color: #37587d;
  font-weight: 600;
}
.installment-foot.is-danger {
  color: #c6232f;
}
.installment-warning {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #c6232f;
}
.doc-clone .doc-table-box {
  border-color: #c6d4e4;
  border-radius: 6px;
  background: #fff;
  overflow: visible;
}
.doc-clone .doc-summary {
  background: transparent;
  border: 0;
  padding: 0 2px;
  min-width: 0;
}
.doc-clone .doc-summary div {
  border-bottom: 1px dashed #ccd9ea;
  display: grid;
  grid-template-columns: minmax(80px, 1fr) auto auto;
  align-items: center;
  column-gap: 8px;
}
.doc-clone .doc-summary .grand {
  color: #1a7cb2;
  grid-template-columns: minmax(80px, 1fr) auto;
}
.doc-clone .doc-summary .summary-two-col {
  grid-template-columns: minmax(80px, 1fr) auto;
}
.summary-edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}
.doc-summary .summary-edit .editable {
  min-height: 26px;
  padding: 3px 6px;
  width: 72px;
}
.doc-summary .summary-edit select.editable {
  width: 96px;
}
.table-wrap {
  width: 100%;
  overflow: visible;
}
table { width: 100%; border-collapse: collapse; min-width: 640px; }
.list-table th,
.list-table td { text-align: left; padding: 12px; border-bottom: 1px solid #e4ecf4; font-size: var(--text-base); }
.table-wrap table thead th { white-space: nowrap; }
.list-table thead th {
  background: #f8fbff;
  color: #1c3552;
  font-weight: 600;
}
.list-table tbody tr:nth-child(even) {
  background: #fcfdff;
}
.list-table tbody tr:hover {
  background: #f3f8ff;
}
.list-table {
  width: 100%;
  table-layout: fixed;
}
.list-table--clients th:nth-child(1), .list-table--clients td:nth-child(1) { width: 90px; }
.list-table--clients th:nth-child(2), .list-table--clients td:nth-child(2) { width: 38%; }
.list-table--clients th:nth-child(3), .list-table--clients td:nth-child(3) { width: auto; }
.list-table--clients th:nth-child(4), .list-table--clients td:nth-child(4) { width: 140px; }
.client-pending-delete {
  background: #fff6e3 !important;
}
.client-pending-delete td {
  color: #7a5a00;
}

.list-table--quotes th:nth-child(1), .list-table--quotes td:nth-child(1),
.list-table--invoices th:nth-child(1), .list-table--invoices td:nth-child(1),
.list-table--receipts th:nth-child(1), .list-table--receipts td:nth-child(1) { width: 110px; }

.list-table--quotes th:nth-child(2), .list-table--quotes td:nth-child(2),
.list-table--invoices th:nth-child(2), .list-table--invoices td:nth-child(2),
.list-table--receipts th:nth-child(2), .list-table--receipts td:nth-child(2) { width: 140px; }

.list-table--quotes th:nth-child(3), .list-table--quotes td:nth-child(3),
.list-table--invoices th:nth-child(3), .list-table--invoices td:nth-child(3),
.list-table--receipts th:nth-child(3), .list-table--receipts td:nth-child(3) { width: auto; }

.list-table--quotes th:nth-child(4), .list-table--quotes td:nth-child(4),
.list-table--invoices th:nth-child(4), .list-table--invoices td:nth-child(4),
.list-table--receipts th:nth-child(4), .list-table--receipts td:nth-child(4) { width: 120px; }

.list-table--quotes th:nth-child(5), .list-table--quotes td:nth-child(5),
.list-table--invoices th:nth-child(5), .list-table--invoices td:nth-child(5),
.list-table--receipts th:nth-child(5), .list-table--receipts td:nth-child(5) { width: 140px; text-align: right; }

.list-table--quotes th:nth-child(6), .list-table--quotes td:nth-child(6),
.list-table--invoices th:nth-child(6), .list-table--invoices td:nth-child(6),
.list-table--receipts th:nth-child(6), .list-table--receipts td:nth-child(6) { width: 150px; }

.list-table--quotes th:nth-child(7), .list-table--quotes td:nth-child(7),
.list-table--invoices th:nth-child(7), .list-table--invoices td:nth-child(7),
.list-table--receipts th:nth-child(7), .list-table--receipts td:nth-child(7) { width: 150px; }
.list-table--invoices th:nth-child(1), .list-table--invoices td:nth-child(1) { width: 110px; }
.list-table--invoices th:nth-child(2), .list-table--invoices td:nth-child(2) { width: 140px; }
.list-table--invoices th:nth-child(3), .list-table--invoices td:nth-child(3) { width: auto; }
.list-table--invoices th:nth-child(4), .list-table--invoices td:nth-child(4) { width: 110px; text-align: center; }
.list-table--invoices th:nth-child(5), .list-table--invoices td:nth-child(5) { width: 120px; }
.list-table--invoices th:nth-child(6), .list-table--invoices td:nth-child(6) { width: 140px; text-align: right; }
.list-table--invoices th:nth-child(7), .list-table--invoices td:nth-child(7) { width: 150px; }
.list-table--invoices th:nth-child(8), .list-table--invoices td:nth-child(8) { width: 150px; }

/* Receipt list: widen customer column and tighten invoice number column */
.list-table--receipts th:nth-child(3), .list-table--receipts td:nth-child(3) { width: 150px; }
.list-table--receipts th:nth-child(4), .list-table--receipts td:nth-child(4) { width: auto; }
.list-table--wht-client th:nth-child(1), .list-table--wht-client td:nth-child(1) { width: auto; }
.list-table--wht-client th:nth-child(2), .list-table--wht-client td:nth-child(2) { width: 160px; text-align: right; }
.list-table--wht-client th:nth-child(3), .list-table--wht-client td:nth-child(3) { width: 160px; text-align: right; }
.list-table--wht-client th:nth-child(4), .list-table--wht-client td:nth-child(4) { width: 160px; text-align: right; }
.list-table--wht-client th:nth-child(5), .list-table--wht-client td:nth-child(5) { width: 160px; text-align: right; }
.list-table--wht th:nth-child(1), .list-table--wht td:nth-child(1) { width: 110px; }
.list-table--wht th:nth-child(2), .list-table--wht td:nth-child(2) { width: 140px; }
.list-table--wht th:nth-child(3), .list-table--wht td:nth-child(3) { width: auto; }
.list-table--wht th:nth-child(4), .list-table--wht td:nth-child(4) { width: 120px; text-align: right; }
.list-table--wht th:nth-child(5), .list-table--wht td:nth-child(5) { width: 150px; text-align: right; }
.list-table--wht th:nth-child(6), .list-table--wht td:nth-child(6) { width: 150px; text-align: right; }
.list-table--wht th:nth-child(7), .list-table--wht td:nth-child(7) { width: 150px; text-align: right; }
.wht-head {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 14px;
}
.wht-head h3 {
  margin: 0;
  font-family: var(--font-heading);
}
.wht-scope-wrap {
  display: grid;
  gap: 4px;
  font-size: 13px;
  color: #57708d;
}
.wht-scope-wrap .editable {
  min-width: 170px;
}
.wht-kpis {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.wht-kpi {
  border: 1px solid #d7e4f3;
  border-radius: 12px;
  padding: 12px;
  background: linear-gradient(160deg, #f8fbff 0%, #eef5ff 100%);
}
.wht-kpi h4 {
  margin: 0;
  color: #4f6480;
  font-weight: 500;
  font-size: 13px;
}
.wht-kpi p {
  margin: 6px 0 0;
  color: #153b61;
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 600;
}
.actions a, .actions button {
  display: inline-block;
  width: auto;
  padding: 6px 9px;
  margin-right: 4px;
  margin-bottom: 4px;
  font-size: var(--text-sm);
  border-radius: 8px;
}
.actions a { text-decoration: none; background: #edf5ff; color: #19497a; }
.actions .warn { background: #f7b267; border-color: #f7b267; color: #fff; }
.actions .danger { background: #d85757; border-color: #d85757; color: #fff; }
.actions {
  white-space: nowrap;
  position: relative;
  text-align: right;
}
.actions a, .actions button { vertical-align: middle; }
.row-subline {
  display: block;
  margin-top: 2px;
  color: #6c7f98;
  font-size: var(--text-sm);
  white-space: normal;
  line-height: 1.35;
}
.doc-pin-meta {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid #f2c77c;
  background: #fff6e2;
  color: #7b5a14;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}
.invoice-sublist-row td {
  padding-top: 0 !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid #e4ecf4;
}
.invoice-sublist-wrap {
  margin-left: 8px;
  border-left: 2px solid #cfe0f3;
  padding-left: 10px;
  display: grid;
  gap: 6px;
}
.invoice-subitem {
  background: #f8fbff;
  border: 1px solid #dde9f7;
  border-radius: 8px;
  padding: 6px 8px;
  display: grid;
  grid-template-columns: 78px 72px 150px 140px 170px;
  gap: 8px;
  align-items: center;
  font-size: var(--text-sm);
  color: #37506e;
}
.invoice-subitem.is-done {
  border-color: #c6e4d2;
  background: #f2fbf5;
}
.invoice-subitem.is-paid {
  border-color: #c7dff4;
  background: #f2f8ff;
}
.invoice-subitem.is-partial {
  border-color: #f1d7a6;
  background: #fff8eb;
}
.invoice-subitem-title {
  font-weight: 700;
  color: #234668;
}
.invoice-subitem-status {
  font-weight: 700;
  color: #2a6f4c;
  white-space: nowrap;
}
.invoice-subitem.is-paid .invoice-subitem-status {
  color: #285f93;
}
.invoice-subitem.is-partial .invoice-subitem-status {
  color: #995f12;
}
.invoice-subitem:not(.is-done) .invoice-subitem-status {
  color: #8a5a12;
}
.invoice-subitem-note {
  grid-column: 1 / -1;
  color: #5c7594;
}
.doc-number-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.doc-origin-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 86px;
  min-height: 24px;
  padding: 0 8px;
  box-sizing: border-box;
  border-radius: 999px;
  border: 1px solid #a9c7e4;
  background: #eaf4ff;
  color: #1e5789;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  font-family: var(--font-heading);
}
.doc-origin-once {
  border-color: #c8d2dd;
  background: #f3f6fa;
  color: #5a6f86;
}
.doc-origin-badge--link {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.doc-origin-badge--link:hover {
  background: #dceeff;
  box-shadow: 0 0 0 2px rgba(30, 87, 137, 0.12);
}
.doc-origin-badge--link:active {
  transform: translateY(1px);
}
.doc-origin-badge--link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(34, 107, 171, 0.24);
}
[data-recurring-row].is-focus {
  animation: recurringRowFocus 2.4s ease;
}
[data-recurring-row].is-focus td {
  background: #dff0ff !important;
  box-shadow: inset 0 2px 0 #8fc2ee, inset 0 -2px 0 #8fc2ee;
}
[data-recurring-row].is-focus td:first-child {
  border-left: 4px solid #2f84c9;
}
@keyframes recurringRowFocus {
  0% { background: #cfe8ff; }
  70% { background: #e7f3ff; }
  100% { background: transparent; }
}
.pending-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  background: #f0b429;
  box-shadow: 0 0 0 2px rgba(240, 180, 41, 0.25);
}
.status-cell {
  position: relative;
  display: inline-block;
}
.status-trigger {
  width: auto;
  min-width: 132px;
  height: 38px;
  border-radius: 10px;
  padding: 6px 32px 6px 12px;
  border: 1px solid #e9c874;
  color: #a96d00;
  background: #fff6de;
  font-weight: 600;
  font-size: var(--text-base);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
  position: relative;
  text-align: left;
}
.status-trigger::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -5px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.status-trigger:hover { filter: brightness(0.98); }
.status-trigger:focus {
  outline: none;
  border-color: #2b95ca;
  box-shadow: 0 0 0 3px rgba(43, 149, 202, .18);
}
.status-trigger:disabled {
  cursor: not-allowed;
  opacity: 0.82;
  filter: none;
}
.status-trigger:disabled::after {
  display: none;
}
.status-draft { background: #eef4ff; border-color: #c9daf7; color: #315f95; }
.status-sent { background: #e8f7ff; border-color: #bce6fb; color: #1f7fb0; }
.status-partial { background: #fff4e6; border-color: #f3d2a2; color: #9a5d0b; }
.status-approved, .status-paid, .status-issued { background: #ebf8ef; border-color: #bce2c7; color: #257947; }
.status-orphaned { background: #f7f2eb; border-color: #dfd1bd; color: #7a5c35; }
.status-rejected, .status-cancelled { background: #ffecec; border-color: #f2bfc2; color: #ae3038; }
.status-expired, .status-overdue { background: #fff5e8; border-color: #f0c895; color: #b26a00; }
.status-pill {
  display: inline-block;
  min-width: 96px;
  text-align: center;
  padding: 6px 10px;
  border-radius: 8px;
  background: #edf5ff;
  border: 1px solid #cae0f8;
  color: #21517f;
  font-weight: 600;
}
.kebab-btn {
  width: 38px !important;
  min-width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid #c9d8ea;
  background: #f7fbff;
  color: #42607d;
  font-size: 22px;
  line-height: 1;
  padding: 0;
  position: relative;
}
.kebab-btn:hover { background: #eef5fd; }
.kebab-pending-dot {
  display: inline-block;
  position: absolute;
  top: 4px;
  right: 4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #f4b400;
  border: 1px solid #fff;
  box-shadow: 0 0 0 2px rgba(244, 180, 0, 0.3);
  pointer-events: none;
}
.kebab-btn:focus {
  outline: none;
  border-color: #2b95ca;
  box-shadow: 0 0 0 3px rgba(43, 149, 202, .18);
}
.row-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  width: 210px;
  border: 1px solid #cdd9e8;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 24px rgba(21, 43, 70, .2);
  overflow-x: hidden;
  overflow-y: auto;
  max-height: min(70vh, 420px);
}
td.actions .row-menu {
  right: 0;
  left: auto;
}
.status-cell .row-menu {
  left: 0;
  right: auto;
  min-width: 160px;
}
.row-menu .row-menu-item {
  display: block;
  width: 100%;
  margin: 0;
  border: 0;
  border-bottom: 1px solid #e4edf7;
  border-radius: 0;
  text-align: left;
  background: #fff;
  color: #163a5f;
  padding: 9px 12px;
  font-size: var(--text-base);
  white-space: normal;
}
.row-menu .row-menu-item:last-child { border-bottom: 0; }
.row-menu .row-menu-item:hover { background: #f5f9ff; }
.row-menu .row-menu-item.danger { color: #ba2f2f; }
.row-menu .row-menu-item.warn {
  color: #7a5a00 !important;
  background: #fff6d8 !important;
  border-left: 3px solid #f0b429;
  padding-left: 9px;
  font-weight: 700;
}
.row-menu .row-menu-item.warn::before {
  content: "●";
  color: #f0b429;
  margin-right: 7px;
  font-size: 10px;
  vertical-align: 1px;
}
.row-menu .row-menu-item.warn:hover {
  background: #ffedb8 !important;
}
.row-menu .row-menu-item.next-step {
  color: #1d6b35 !important;
  background: #ecf9f0 !important;
  border-left: 3px solid #43b86f;
  padding-left: 9px;
  font-weight: 700;
}
.row-menu .row-menu-item.next-step::before {
  content: "●";
  color: #2ea95f;
  margin-right: 7px;
  font-size: 10px;
  vertical-align: 1px;
}
.row-menu .row-menu-item.next-step:hover {
  background: #def4e6 !important;
}
.row-menu .row-menu-item.status-option.is-active {
  background: #eaf4ff;
  color: #155389;
  font-weight: 600;
}
.bars {
  border: 1px solid #d7e4f3;
  border-radius: 14px;
  padding: 12px;
  background: linear-gradient(180deg, #ffffff, #f7fbff);
}
.chart-shell {
  display: grid;
  gap: 12px;
}
.chart-top {
  border: 1px solid #d4e2f1;
  border-radius: 12px;
  background: linear-gradient(135deg, #e6efff, #f2f6ff);
  color: #223957;
  padding: 10px 12px;
}
.chart-top-label {
  font-size: var(--text-sm);
  color: #5a708b;
}
.chart-top-value {
  font-size: 26px;
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
  color: #274a6a;
}
.chart-top-sub {
  font-size: var(--text-sm);
  color: #627b98;
}
.chart-pie-wrap {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}
.chart-pie-box {
  position: relative;
  width: 220px;
  height: 220px;
  margin: 0 auto;
}
.chart-pie-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.chart-pie-svg circle {
  stroke-linecap: butt;
}
.chart-pie-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  color: #254564;
}
.chart-pie-center strong {
  font-family: var(--font-heading);
  font-size: 28px;
  line-height: 1;
}
.chart-pie-center span {
  font-size: var(--text-sm);
  color: #5a708b;
}
.chart-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
}
.chart-legend-item {
  display: grid;
  grid-template-columns: 10px auto auto auto;
  align-items: center;
  gap: 8px;
  border: 1px solid #deebf7;
  border-radius: 9px;
  padding: 6px 8px;
  background: #f9fcff;
}
.chart-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.chart-legend-item strong {
  color: #1d3653;
  font-size: var(--text-sm);
}
.chart-legend-item span {
  color: #375270;
  font-size: var(--text-sm);
}
.chart-legend-item small {
  color: #58718e;
  font-size: 12px;
}
.chart-empty {
  color: #5b7290;
  padding: 14px;
  border: 1px dashed #c8d8ea;
  border-radius: 10px;
  background: #f8fbff;
}
.dashboard-extra-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.extra-box {
  border: 1px solid #d7e4f3;
  border-radius: 14px;
  background: linear-gradient(180deg, #fcfeff, #f5f9ff);
  padding: 12px;
  min-height: 210px;
}
.extra-box h3 {
  margin: 0 0 8px;
  font-size: var(--text-base);
  color: #284564;
}
.trend-chart svg {
  width: 100%;
  height: auto;
  display: block;
}
.trend-month {
  font-size: 12px;
  fill: #637d99;
}
.insight-stats {
  display: grid;
  gap: 8px;
}
.insight-item {
  border: 1px solid #dce8f5;
  border-radius: 10px;
  background: #fff;
  padding: 8px 10px;
  display: grid;
  gap: 4px;
}
.insight-item strong {
  color: #355473;
  font-size: var(--text-sm);
}
.insight-item span {
  color: #1f3f60;
  font-weight: 600;
}
.insight-bar {
  height: 8px;
  border-radius: 999px;
  background: #ebf2fa;
  overflow: hidden;
}
.insight-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #9ec5f8, #7fb0eb);
}
.doc-mix-chart {
  display: grid;
  gap: 8px;
}
.mix-chart {
  min-height: 156px;
  border: 1px solid #d8e6f4;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff, #f7fbff);
  padding: 8px 6px 4px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 4px;
  align-items: end;
}
.mix-col {
  display: grid;
  gap: 4px;
  justify-items: center;
  min-width: 0;
}
.mix-bars {
  width: 100%;
  min-height: 120px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
}
.mix-bar {
  display: block;
  width: 28%;
  border-radius: 6px 6px 4px 4px;
  box-shadow: 0 4px 10px rgba(96, 126, 168, .18);
}
.mix-bar.mix-quotes {
  background: linear-gradient(180deg, #b9d6ff, #9dc5f3);
}
.mix-bar.mix-invoices {
  background: linear-gradient(180deg, #c7e9cf, #a4d7b0);
}
.mix-bar.mix-receipts {
  background: linear-gradient(180deg, #ffd9b8, #f8bd91);
}
.mix-col small {
  font-size: 11px;
  color: #607897;
}
.mix-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  color: #3b5877;
  font-size: 13px;
}
.mix-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mix-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.top-clients {
  display: grid;
  gap: 8px;
}
.top-client-item {
  border: 1px solid #dbe7f5;
  border-radius: 10px;
  padding: 8px 10px;
  background: #fff;
  display: grid;
  gap: 5px;
}
.top-client-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}
.top-client-head strong {
  color: #244363;
  font-size: var(--text-sm);
}
.top-client-head span {
  color: #305479;
  font-size: 13px;
  white-space: nowrap;
  font-weight: 600;
}
.top-client-item small {
  color: #5e7693;
  font-size: 12px;
}
.top-client-bar {
  height: 8px;
  border-radius: 999px;
  background: #edf3fb;
  overflow: hidden;
}
.top-client-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #9fd3ff, #a7a8ff);
}
.tip-target {
  cursor: pointer;
}
.chart-tooltip {
  position: fixed;
  z-index: 1200;
  max-width: 240px;
  background: rgba(17, 48, 79, .95);
  color: #f5f9ff;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.4;
  box-shadow: 0 12px 24px rgba(11, 32, 53, .32);
  pointer-events: none;
  white-space: pre-line;
}
@media (max-width: 980px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 10px 18px rgba(18, 44, 72, 0.08);
  }
  .sidebar-footer {
    margin-top: 8px;
    padding-top: 0;
    border-top: 0;
  }
  .nav {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .cards, .g2, .g3 { grid-template-columns: 1fr; }
  .company-grid {
    grid-template-columns: 1fr;
  }
  .company-actions {
    justify-content: stretch;
  }
  .view[data-view="company"] #company-form button {
    width: 100%;
    min-width: 0;
  }
  .doc-head-grid, .doc-meta-grid, .doc-line, .doc-foot-grid {
    grid-template-columns: 1fr;
  }
  .doc-meta-grid {
    grid-column: auto;
  }
  .doc-head-spacer {
    display: none;
  }
  .doc-builder { grid-template-columns: 1fr; }
  .content-head {
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }
  .head-actions {
    width: auto;
  }
  .clone-main-head,
  .clone-foot,
  .clone-note-wrap {
    grid-template-columns: 1fr;
  }
  .clone-right {
    width: 100%;
    justify-self: stretch;
  }
  .clone-line {
    grid-template-columns: 1fr;
  }
  .clone-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .clone-actions button {
    min-width: 0;
  }
  .content {
    padding: 12px;
    gap: 12px;
    width: 100%;
  }
  .panel {
    padding: 12px;
    border-radius: 12px;
  }
  .sidebar {
    padding: 12px 10px;
  }
  .nav-group {
    min-width: 0;
  }
  table {
    min-width: 560px;
  }
  .table-wrap {
    overflow-x: auto;
    overflow-y: visible;
  }
  .list-table {
    table-layout: auto;
  }
  .status-trigger {
    min-width: 116px;
    height: 34px;
    padding: 4px 28px 4px 10px;
  }
  .kebab-btn {
    width: 34px !important;
    min-width: 34px;
    height: 34px;
  }
  .row-menu {
    width: 190px;
    right: auto;
    left: 0;
  }
  .status-cell .row-menu {
    min-width: 150px;
  }
  .content-head {
    min-height: unset;
  }
  .client-menu {
    left: 0;
    right: 0;
    width: 100%;
    min-width: 0;
    max-width: none;
  }
  .client-picker {
    display: block;
  }
  .client-picker-actions {
    width: 100%;
    grid-template-columns: 1fr;
  }
  .client-create-row {
    grid-template-columns: 1fr;
  }
  .invoice-subitem {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .invoice-subitem-status {
    grid-column: 1 / -1;
    white-space: normal;
  }
  .chart-pie-wrap {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .chart-pie-box {
    width: 200px;
    height: 200px;
  }
  .chart-legend {
    grid-template-columns: 1fr;
  }
  .dashboard-extra-grid {
    grid-template-columns: 1fr;
  }
  .wht-head {
    align-items: stretch;
    flex-direction: column;
  }
  .wht-scope-wrap .editable {
    min-width: 0;
    width: 100%;
  }
  .wht-kpis {
    grid-template-columns: 1fr;
  }
  .mix-chart {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    row-gap: 8px;
  }
  .mix-bars {
    min-height: 90px;
  }
  .payment-bank-row {
    flex-direction: column;
    align-items: stretch;
  }
  .payment-bank-card {
    flex-direction: column;
    align-items: stretch;
  }
  .payment-bank-card-left {
    width: 100%;
  }
  .payment-bank-qr {
    width: 120px;
    height: 120px;
    align-self: flex-end;
  }
  .ghost-mini {
    width: 100%;
    min-width: 0;
  }
  .bank-modal-card {
    width: min(96vw, 620px);
    padding: 16px 14px 12px;
  }
  .trash-groups {
    grid-template-columns: 1fr;
  }
  #installment-form {
    width: min(96vw, 860px);
  }
  #installment-form .installment-box {
    overflow-x: auto;
  }
  #installment-form .installment-table {
    min-width: 860px;
  }
  .bank-form-grid {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 4px 0 12px;
  }
  .bank-select-wrap {
    padding-right: 6px;
  }
  .bank-form-grid > label {
    margin-top: 6px;
  }
  .bank-qr-upload {
    grid-template-columns: 1fr;
  }
  .bank-qr-preview {
    width: 120px;
    height: 120px;
  }
  .bank-modal-actions {
    justify-content: stretch;
  }
  .bank-cancel,
  .bank-save {
    width: 100%;
    min-width: 0;
  }
  .app-confirm-card {
    padding: 14px;
    border-radius: 14px;
  }
  .app-confirm-card h3 {
    font-size: 20px;
  }
  .app-confirm-actions {
    flex-direction: column-reverse;
  }
  .app-confirm-actions .ghost,
  .app-confirm-actions .save-mini {
    width: 100%;
    min-width: 0;
  }
  .receipt-edit-grid {
    grid-template-columns: 1fr;
  }
  .recurring-plan-grid {
    grid-template-columns: 1fr;
  }
  .recurring-plan-actions {
    flex-direction: column-reverse;
  }
  .recurring-plan-actions .ghost,
  .recurring-plan-actions .save-mini {
    width: 100%;
    min-width: 0;
  }
  .invoice-email-actions {
    flex-direction: column-reverse;
  }
  .invoice-email-actions .ghost,
  .invoice-email-actions .save-mini {
    width: 100%;
    min-width: 0;
  }
  .smtp-template-actions {
    flex-direction: column;
  }
  .smtp-template-actions .ghost-mini {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 1280px) {
  .shell {
    grid-template-columns: 220px 1fr;
  }
  .content {
    padding: 16px;
    width: 100%;
  }
  .clone-main-head {
    grid-template-columns: minmax(260px, 1fr);
    gap: 10px;
  }
  .clone-right {
    justify-self: stretch;
    width: 100%;
  }
  .clone-line {
    grid-template-columns: 1fr;
  }
  .clone-foot {
    grid-template-columns: 1fr;
  }
  .doc-clone .doc-summary {
    margin-top: 4px;
  }
  .clone-note-wrap {
    grid-template-columns: 1fr;
  }
  .cards {
    grid-template-columns: 1fr;
  }
  .actions {
    white-space: normal;
  }
  .list-table--quotes th:nth-child(7), .list-table--quotes td:nth-child(7),
  .list-table--invoices th:nth-child(7), .list-table--invoices td:nth-child(7),
  .list-table--receipts th:nth-child(7), .list-table--receipts td:nth-child(7) {
    width: 26%;
  }
}

@media (max-width: 1500px) {
  .clone-docno {
    font-size: 32px;
  }
  .shell {
    grid-template-columns: 220px 1fr;
  }
}

@media (max-width: 980px) {
  .shell {
    grid-template-columns: 1fr;
  }
  body.mobile-nav-open {
    overflow: hidden;
  }
  .mobile-nav-toggle {
    display: inline-flex;
  }
  .mobile-nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 950;
    border: 0;
    border-radius: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    background: rgba(8, 22, 38, 0.42);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  body.mobile-nav-open .mobile-nav-overlay {
    opacity: 1;
    pointer-events: auto;
  }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    width: min(82vw, 320px);
    max-width: 320px;
    height: 100dvh;
    border-right: 1px solid var(--line);
    border-bottom: 0;
    padding: calc(18px + env(safe-area-inset-top, 0px)) 14px calc(16px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    transform: translateX(-105%);
    transition: transform .2s ease;
    box-shadow: 16px 0 34px rgba(16, 38, 60, 0.24);
    overscroll-behavior: contain;
  }
  body.mobile-nav-open .sidebar {
    transform: translateX(0);
  }
  .content {
    padding: calc(24px + env(safe-area-inset-top, 0px)) 12px calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .content-head {
    position: sticky;
    top: calc(8px + env(safe-area-inset-top, 0px));
    z-index: 80;
    background: rgba(244, 249, 255, 0.92);
    backdrop-filter: blur(6px);
    border: 1px solid #d7e4f2;
    border-radius: 12px;
    padding: 8px 10px;
    margin-bottom: 2px;
  }
  .content-head h2 {
    font-size: 20px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .head-actions {
    width: 100%;
  }
  .head-actions .primary-action {
    width: 100%;
    min-height: 42px;
  }
  .panel h2 {
    font-size: 20px;
  }
  .card p {
    font-size: 28px;
  }
  .doc-form > button[type="submit"] {
    width: 100%;
    max-width: none;
  }
  .clone-topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .clone-docno {
    font-size: 28px;
  }
  .clone-actions {
    width: 100%;
  }
  .clone-actions button {
    flex: 1 1 auto;
    min-height: 40px;
  }
  .app-toast {
    right: 10px;
    left: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    max-width: none;
  }
  .client-modal {
    padding: 8px;
  }
  .client-modal-card,
  .share-modal-card,
  .smtp-preview-card,
  .recurring-plan-card,
  .invoice-email-card,
  .bank-modal-card {
    width: 100%;
    max-height: min(92dvh, 760px);
    overflow: auto;
  }
  input,
  select,
  textarea,
  button {
    font-size: 16px;
  }
  .table-wrap {
    -webkit-overflow-scrolling: touch;
  }
}

@media (min-width: 981px) {
  .mobile-action-sheet {
    display: none !important;
  }
}

@media (max-width: 760px) {
  .table-wrap {
    overflow: visible;
  }
  .list-table.is-mobile-cards {
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0 10px;
    table-layout: fixed;
  }
  .list-table.is-mobile-cards thead {
    display: none;
  }
  .list-table.is-mobile-cards tbody,
  .list-table.is-mobile-cards tbody tr {
    display: block;
  }
  .list-table.is-mobile-cards tbody tr {
    margin: 0 0 10px;
    background: linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
    border: 1px solid #d4e2f1;
    border-radius: 14px;
    box-shadow: 0 8px 18px rgba(17, 45, 76, 0.08);
    overflow: visible;
  }
  .list-table.is-mobile-cards tbody tr:nth-child(even),
  .list-table.is-mobile-cards tbody tr:hover {
    background: linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
  }
  .list-table.is-mobile-cards td {
    display: grid;
    grid-template-columns: minmax(96px, 40%) minmax(0, 1fr);
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    border-bottom: 1px dashed #dce7f3;
    position: relative;
    align-items: start;
    text-align: left !important;
  }
  .list-table.is-mobile-cards td:last-child {
    border-bottom: 0;
  }
  .list-table.is-mobile-cards td::before {
    content: attr(data-label);
    font-size: 12px;
    line-height: 1.35;
    font-weight: 600;
    color: #67809a;
  }
  .list-table.is-mobile-cards td[data-label=""]::before {
    content: "";
  }
  .list-table.is-mobile-cards td.is-mobile-amount {
    font-variant-numeric: tabular-nums;
  }
  .list-table.is-mobile-cards td.is-mobile-status .status-cell {
    width: 100%;
  }
  .list-table.is-mobile-cards td.is-mobile-status .status-trigger {
    width: 100%;
    min-width: 0;
    height: 40px;
  }
  .list-table.is-mobile-cards td.actions {
    white-space: normal;
  }
  .list-table.is-mobile-cards td.actions button,
  .list-table.is-mobile-cards td.actions a {
    margin-right: 6px;
    margin-bottom: 6px;
  }
  .list-table.is-mobile-cards td.is-mobile-kebab .kebab-btn {
    width: auto !important;
    min-width: 90px;
    height: 38px;
    padding: 0 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 20px;
    line-height: 1;
  }
  .list-table.is-mobile-cards td.is-mobile-kebab .kebab-btn::after {
    content: "เมนู";
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
  }
  .list-table.is-mobile-cards td.is-mobile-kebab .kebab-pending-dot {
    top: 3px;
    right: 3px;
  }
  .list-table.is-mobile-cards td.is-mobile-kebab .row-menu {
    left: auto;
    right: 0;
    width: min(88vw, 300px);
  }
  .list-table.is-mobile-cards td.is-mobile-actions .row-menu,
  .list-table.is-mobile-cards td.is-mobile-status .row-menu {
    left: auto;
    right: 0;
    width: min(86vw, 296px);
    max-height: min(56vh, 360px);
    z-index: 140;
  }
  .list-table.is-mobile-cards .doc-number-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .list-table.is-mobile-cards .row-subline {
    margin-top: 4px;
  }
}

@media (max-width: 640px) {
  .brand-logo {
    max-width: 168px;
  }
  .content {
    padding: calc(22px + env(safe-area-inset-top, 0px)) 10px calc(10px + env(safe-area-inset-bottom, 0px));
    gap: 10px;
  }
  .panel {
    padding: 10px;
    border-radius: 10px;
  }
  .content-head {
    top: calc(6px + env(safe-area-inset-top, 0px));
    padding: 8px;
  }
  .content-head h2 {
    font-size: 18px;
  }
  .card p {
    font-size: 24px;
  }
  table {
    min-width: 520px;
  }
  .payment-bank-qr {
    width: 100px;
    height: 100px;
  }
}