/* Smart Cashflow — minimal visual layer. Business logic stays in existing JS. */
:root{--canvas:#f6f7f9;--paper:#fff;--ink:#23272f;--sub:#717987;--line:#e8ebf0;--brand:#433b3b;--radius:14px;--shadow:0 3px 18px rgba(16,24,40,.035)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:'IBM Plex Sans Thai',system-ui,-apple-system,sans-serif!important;background:var(--canvas)!important;color:var(--ink)!important;letter-spacing:-.012em;line-height:1.58}button,input,select,textarea{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(95,105,128,.22)!important;outline-offset:2px}
nav{background:rgba(255,255,255,.96)!important;box-shadow:none!important;border-bottom:1px solid var(--line);margin-bottom:24px!important;backdrop-filter:blur(12px)}nav>div{max-width:1480px!important}nav .h-16{height:72px!important;gap:18px}nav .flex-shrink-0{gap:10px}nav .text-xl{font-size:17px!important;letter-spacing:-.025em;color:var(--ink)!important}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--brand);font-weight:700;font-size:18px;color:white}nav .sm\:space-x-8{gap:5px!important;margin-left:35px!important}nav button[id^="tab-"]{border:0!important;border-radius:9px;padding:9px 15px!important;align-self:center!important;color:var(--sub);transition:background .2s;color:var(--sub)!important}nav button.tab-active{background:#f1f1f3!important;color:var(--ink)!important;font-weight:700!important}nav button[id^="tab-"]:hover{background:#f5f5f6}nav .ts-control{border-color:var(--line)!important;background:#fafafb!important}
main,body>div.max-w-\[1536px\]{max-width:1480px!important}main{padding-bottom:70px!important}main>div[id^="view-"]>div{margin-bottom:22px!important}main .bg-white{background:var(--paper)!important}main .shadow,main .shadow-md,main .shadow-lg{box-shadow:var(--shadow)!important}main .rounded-lg,main .rounded,main .border.rounded-lg, .modal-enter{border-radius:var(--radius)!important}main .border-accent,main .border-gray-200,main .border-gray-100,main .border{border-color:var(--line)!important}main .border-l-4{border-left-width:1px!important}main .bg-red-50,main .bg-blue-50{background:var(--paper)!important}main .text-primary{color:var(--ink)!important}main .text-secondary{color:var(--sub)!important}
main h2{font-weight:700!important;font-size:18px!important;letter-spacing:-.025em}main h3{letter-spacing:-.015em}main p.text-2xl, main div.text-2xl{font-size:clamp(22px,1.8vw,29px)!important;letter-spacing:-.04em;font-variant-numeric:tabular-nums}main .text-xs{font-size:12px}main label{font-weight:500!important;color:#596170}main .p-4{padding:21px!important}main .p-6{padding:24px!important}main .h-\[450px\]{height:360px!important}main .grid{row-gap:18px}
main input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),main select,main textarea{border-radius:10px!important;border:1px solid #e1e5eb!important;background:#fff!important;min-height:42px;padding:9px 12px!important;box-shadow:none!important}main textarea{min-height:112px}main .ts-control{min-height:42px;border-radius:10px!important;border-color:#e1e5eb!important}main .ts-dropdown{border-color:var(--line)!important;border-radius:10px!important;box-shadow:0 12px 30px #10182815!important}main button.bg-primary{background:var(--brand)!important;border-radius:10px!important;box-shadow:none!important}main button:not(.bg-primary){border-radius:9px}main button:hover{filter:brightness(.98)}main .tracking-wide{letter-spacing:-.04em!important}
/* Surface and figure hierarchy: clean cards, no accounting ledger appearance */
#view-dashboard>div:first-child>div, #view-dashboard>div:nth-child(2)>div, #view-dashboard>div:nth-child(4)>div{border:1px solid var(--line)!important;border-radius:14px!important}#view-dashboard .border-b{border-color:var(--line)!important}#view-dashboard canvas{max-width:100%}
#view-transactions>div{gap:20px!important}#view-transactions .xl\:w-2\/3{width:100%!important}#view-transactions .bg-white.rounded-lg{border:1px solid var(--line)!important}#view-transactions table,#view-calendar table{border-collapse:separate;border-spacing:0}#view-transactions thead{background:#f8f9fb!important}#view-transactions th{font-size:12px!important;color:#747e8c!important;font-weight:600!important;border-color:var(--line)!important}#view-transactions td{border-color:var(--line)!important}#view-transactions tbody tr:hover{background:#f7f9fc!important}
#view-transactions .bg-accent{background:#fafafb!important}#view-transactions h2{border-bottom:1px solid var(--line)!important}#view-transactions .text-4xl{font-size:28px!important}#view-calendar #calendar-grid>div{min-height:132px}#view-calendar .min-w-\[700px\]{min-width:680px!important}
.finance-definition{background:transparent!important;border:0!important;color:var(--sub)!important;padding:0!important;font-size:12px!important}.finance-definition summary{width:max-content;cursor:pointer;list-style-position:inside}.finance-definition>div{max-width:900px;padding:10px 14px;background:#fff;border:1px solid var(--line);border-radius:10px}body>div.max-w-\[1536px\]{gap:10px}#reset-demo{background:#fff;border:1px solid var(--line)!important;border-radius:9px!important}
/* Dialog overlay stays modal; only skin changes */
[role="dialog"] .modal-enter,.modal-enter{box-shadow:0 20px 70px rgba(20,24,30,.17)!important;border:1px solid var(--line);border-radius:18px!important}[role="dialog"] input,[role="dialog"] select{border-radius:9px!important}
@media(max-width:1023px){nav .h-16{height:auto!important;min-height:70px;padding:12px 0;flex-wrap:wrap}nav .hidden.sm\:ml-6{margin-left:10px!important}main .h-\[450px\]{height:320px!important}}
@media(max-width:639px){nav>div{padding:0 14px!important}nav .h-16>div:first-child{flex-wrap:wrap}nav .hidden.sm\:ml-6{display:flex!important;width:100%;order:2;overflow-x:auto;margin:8px 0 0!important;gap:2px!important}nav button[id^="tab-"]{font-size:12px!important;padding:8px 9px!important}nav .h-16>div:last-child{width:100%;justify-content:flex-end}main{padding-left:13px!important;padding-right:13px!important}main .p-6{padding:16px!important}main .p-4{padding:17px!important}main .h-\[450px\]{height:290px!important}#view-transactions .grid{gap:12px!important}#view-transactions table{min-width:730px}#view-transactions .overflow-y-auto{overflow-x:auto}.brand-mark{width:30px;height:30px}}

/* Single, instant substring search for monthly cashflow history */
/* Compact navigation: neutralize Tailwind space-x margins in addition to flex gap. */
nav .sm\:space-x-8{column-gap:4px!important;margin-left:18px!important}
nav .sm\:space-x-8>button[id^="tab-"]{margin-left:0!important;margin-right:0!important;padding:9px 11px!important}
@media(max-width:639px){nav .sm\:space-x-8{margin-left:0!important}nav .sm\:space-x-8>button[id^="tab-"]{padding:8px 9px!important}}
#view-transactions .history-search-area{background:#fff}
#view-transactions .history-search-input{width:100%;height:44px;border:1px solid #e1e5eb!important;border-radius:12px!important;background:#fafbfc!important;padding:10px 16px!important;font-size:14px;outline:none}
#view-transactions .history-search-input:focus{border-color:#817a78!important;background:#fff!important;box-shadow:0 0 0 3px rgba(74,62,61,.06)!important}
.history-search-meta{display:flex;gap:14px;justify-content:space-between;flex-wrap:wrap;margin-top:9px;font-size:12px;color:#78818d}

/* v9: lightweight, accessible multi-select and clone actions */
#history-tbody input[type=checkbox],#history-select-all{width:16px;height:16px;accent-color:#655653;cursor:pointer}
#history-bulk-confirm:disabled{opacity:.4;cursor:not-allowed}
.row-actions{display:flex;align-items:center;justify-content:center;gap:12px;white-space:nowrap}
.history-clone{font-size:12px;color:#514b48;border:1px solid #e3e1df;border-radius:7px;padding:5px 8px;background:#fff}
.history-clone:hover{background:#f7f5f4}

/* Reconciliation – Modern Minimal */
.recon-page {color:#342f30}.recon-heading{margin:14px 0 22px}.recon-heading h2{font-size:23px;font-weight:700;letter-spacing:-.025em}.recon-heading p{font-size:13px;color:#817b7c;margin-top:5px}.recon-panel{border:1px solid #e8e6e5;background:white;border-radius:14px;padding:22px;margin-bottom:18px}.recon-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:10px}.recon-grid label{font-size:12px;font-weight:600;color:#645d5c}.recon-input{display:block;width:100%;height:40px;border:1px solid #e4e1df;border-radius:9px;background:#fff;padding:6px 10px;margin-top:7px;font-size:13px;color:#433b3a}.recon-input[type=file]{height:auto;min-height:40px}.recon-help{font-size:12px;color:#817b7c;margin:12px 0;line-height:1.7}.recon-map-grid{grid-template-columns:repeat(3,1fr);margin-top:10px}.recon-button{background:#514544;color:white;border-radius:9px;padding:10px 16px;font-size:12px;font-weight:600}.recon-button.light{background:#f5f3f2;color:#5e5251}.recon-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}.recon-toolbar h3{font-weight:700}.recon-toolbar>div{display:flex;align-items:center;gap:8px}.recon-toolbar .recon-input{margin:0}.recon-scroll{overflow:auto;max-height:650px}.recon-table{width:100%;font-size:12px;white-space:nowrap}.recon-table th{font-weight:600;color:#817b7c;background:#f8f7f6;text-align:left;position:sticky;top:0;padding:12px;border-bottom:1px solid #eee}.recon-table td{padding:12px;border-bottom:1px solid #f1f0ef}.recon-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px}.recon-stat{border:1px solid #e8e6e5;background:#fff;border-radius:12px;padding:16px}.recon-stat strong{font-size:25px;display:block}.recon-stat span{font-size:11px;color:#817b7c}.recon-tag{border-radius:30px;font-size:11px;padding:4px 9px;white-space:nowrap;background:#f4f1ef}.recon-tag.exact{color:#087a4c;background:#e7f6ee}.recon-tag.date_mismatch,.recon-tag.amount_mismatch{color:#9a621c;background:#fff2dd}.recon-tag.unmatched{color:#b1313c;background:#fcebed}@media(max-width:800px){.recon-grid,.recon-map-grid{grid-template-columns:1fr}.recon-stats{grid-template-columns:repeat(2,1fr)}.recon-toolbar{align-items:flex-start;flex-direction:column}}

/* v34: increase daily cashflow figures two type steps, retain date numbers */
#view-calendar #calendar-grid .sc-calendar-flows{font-size:15px!important;line-height:1.55;}
#view-calendar #calendar-grid .sc-calendar-balance{font-size:15px!important;line-height:1.4;}


.help-info-btn{width:36px;height:36px;border-radius:9999px;border:1px solid var(--line);background:#fff;color:var(--brown);font-weight:800;font-size:18px;display:grid;place-items:center;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.help-info-btn:hover{background:#f8f5f3}
.help-modal{position:fixed;inset:0;z-index:120}
.help-modal__backdrop{position:absolute;inset:0;background:rgba(46,34,31,.22)}
.help-modal__panel{position:relative;max-width:820px;width:min(92vw,820px);max-height:84vh;overflow:auto;margin:6vh auto 0;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 24px 80px rgba(0,0,0,.18)}
.help-modal__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--line)}
.help-modal__header h2{font-size:24px;font-weight:800;color:var(--brown);margin:0}
.help-modal__close{font-size:30px;line-height:1;padding:0 6px;color:#6b6160;background:transparent;border:0}
.help-modal__body{padding:20px 24px 24px}
.help-block+.help-block{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.help-block h3{font-size:16px;font-weight:800;color:var(--brown);margin:0 0 8px}
.help-block p{font-size:14px;line-height:1.6;color:var(--secondary);margin:6px 0}

/* v38: info control beside the brand in the top navigation */
nav .help-info-btn{width:24px;height:24px;min-width:24px;border-radius:50%;font-size:13px;box-shadow:none;margin-left:9px;flex-shrink:0;line-height:1;}

/* v41 — each weekly grid row follows its tallest day's full content. */
#view-calendar #calendar-grid {
  grid-auto-rows: minmax(132px, auto);
  align-items: stretch;
}
#view-calendar #calendar-grid > .sc-calendar-day {
  min-width: 0;
  min-height: 132px;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: visible;
  padding: 10px;
}
#view-calendar #calendar-grid .sc-calendar-flows {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 0 0 auto;
  overflow-wrap: anywhere;
}
#view-calendar #calendar-grid .sc-calendar-balance {
  margin-top: auto;
  padding-top: 10px;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* v42: aligned bank and system fields */
.recon-type-match{color:#15803d;font-weight:600;white-space:nowrap}.recon-type-mismatch{color:#b91c1c;font-weight:600;white-space:nowrap}.recon-table th:nth-child(4),.recon-table th:nth-child(8),.recon-table td:nth-child(4),.recon-table td:nth-child(8){text-align:right}.recon-table th:nth-child(5),.recon-table td:nth-child(5){border-left:2px solid #e8e6e5}

/* v43: summary totals in one row under reconciliation headers */
.recon-total-row td{background:#f5f1ee;font-weight:700;color:#493f3d;border-bottom:2px solid #d7ccc6!important;vertical-align:middle}
.recon-total-pair{display:flex;flex-direction:column;gap:3px;white-space:nowrap;font-variant-numeric:tabular-nums}
.recon-total-row td:nth-child(4),.recon-total-row td:nth-child(8){text-align:right}

/* v44 smart reconciliation */
.recon-filter-hidden{display:none}
.recon-setup-summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px}
.recon-setup-summary-actions{display:flex;align-items:center;gap:8px}
.recon-setup-summary-actions .recon-button{white-space:nowrap}
.recon-setup-summary-text{font-size:13px;color:#5e5251;line-height:1.6}
.recon-page.recon-compact #recon-setup-body{display:none}
.recon-page.recon-compact #recon-setup{padding:14px 18px}
.recon-toolbar{align-items:flex-start;flex-direction:column}
.recon-toolbar-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;width:100%}
.recon-toolbar-head h3{font-weight:700}
.recon-summary-line{font-size:12px;color:#6c6464;display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-end;text-align:right}
.recon-summary-chip{background:#f7f4f2;border:1px solid #ece6e1;border-radius:999px;padding:5px 10px;font-variant-numeric:tabular-nums}
.recon-toolbar-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;flex-wrap:wrap}
.recon-tabs{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.recon-tab{border:1px solid #e7e1dc;background:#fff;border-radius:12px;padding:10px 14px;min-width:120px;text-align:left;cursor:pointer;transition:.15s ease}
.recon-tab strong{display:block;font-size:24px;line-height:1.05;color:#2d2525}
.recon-tab span{display:block;margin-top:4px;font-size:11px;color:#817b7c}
.recon-tab.active{background:#f5f1ee;border-color:#b89f8f;box-shadow:0 0 0 1px rgba(81,69,68,.08) inset}
.recon-tab.active strong,.recon-tab.active span{color:#4f4342}
.recon-scroll{max-height:76vh}
.recon-page.recon-compact .recon-scroll{max-height:82vh}
@media(max-width:900px){
 .recon-setup-summary,.recon-toolbar-head,.recon-toolbar-actions{flex-direction:column;align-items:flex-start}
 .recon-summary-line{text-align:left;justify-content:flex-start}
 .recon-tab{min-width:110px}
}

/* v54: reusable data transfer UI, separate backup/restore from transaction import/export */
.sc-transfer-head{display:flex;justify-content:space-between;align-items:start;gap:16px;padding-bottom:17px;border-bottom:1px solid var(--color-border);margin-bottom:20px}
.sc-transfer-context{font-size:12px;color:var(--color-muted);background:var(--color-background);padding:5px 10px;border-radius:999px;white-space:nowrap}
.sc-transfer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.sc-transfer-panel{border:1px solid var(--color-border);border-radius:14px;padding:18px;min-width:0;background:var(--color-surface)}
.sc-transfer-panel-heading{display:flex;justify-content:space-between;align-items:start;gap:10px}
.sc-transfer-panel-heading h3{font-weight:700;color:var(--color-text);font-size:16px;line-height:1.4}
.sc-transfer-panel-heading p{font-size:12px;line-height:1.6;color:var(--color-muted);margin-top:4px}
.sc-transfer-state{display:inline-block;white-space:nowrap;font-size:11px;padding:4px 9px;border-radius:999px}
.sc-transfer-ready{color:var(--color-primary);background:var(--color-income-soft)}
.sc-transfer-soon{color:var(--color-text);background:var(--color-expense-soft)}
.sc-transfer-formats{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 16px}
.sc-transfer-format{font-size:12px;font-weight:600;border:1px solid var(--color-border);color:var(--color-muted);padding:6px 10px;border-radius:8px;background:var(--color-background)}
.sc-transfer-format-active{background:var(--color-income-soft);color:var(--color-text);border-color:var(--color-primary)}
.sc-transfer-buttons{display:flex;flex-wrap:wrap;align-items:center;gap:9px}
.sc-transfer-primary,.sc-transfer-secondary,.sc-transfer-file-label{border-radius:9px;font-size:13px;font-weight:600;padding:11px 15px;line-height:1.25;cursor:pointer}
.sc-transfer-primary{background:var(--color-primary);color:var(--color-surface);border:1px solid var(--color-primary)}
.sc-transfer-secondary,.sc-transfer-file-label{background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text)}
.sc-transfer-buttons input[type=file]{max-width:100%;font-size:12px;color:var(--color-muted)}
.sc-transfer-file-label{cursor:default}
.sc-transfer-note{font-size:12px;line-height:1.65;color:var(--color-muted);margin-top:14px}
.sc-transfer-footer-note{font-size:12px;color:var(--color-muted);margin-top:16px}
.sc-transfer-label{display:block;font-size:12px;color:var(--color-muted);margin-bottom:7px}
.sc-transfer-panel select{display:block;width:100%;padding:10px;border:1px solid var(--color-border);border-radius:9px;background:var(--color-background);color:var(--color-muted);font-size:12px;margin-bottom:16px}
.sc-transfer-panel button:disabled{background:var(--color-background);color:var(--color-muted);border-color:var(--color-border);cursor:not-allowed;opacity:1}
@media(max-width:860px){.sc-transfer-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:520px){.sc-transfer-head{flex-direction:column}.sc-transfer-panel{padding:14px}.sc-transfer-buttons{flex-direction:column;align-items:stretch}.sc-transfer-buttons button{width:100%}}