/* Readable amounts and compact details for the existing ERP surfaces. */
.kpi-amount-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  align-items: start;
  gap: 8px;
  width: 100%;
}
.kpi-amount-pair > span { display: grid; gap: 3px; min-width: 0; }
.kpi-amount-pair > span:last-child { text-align: right; color: var(--accent-dark); }
.kpi-amount-pair small { font-size: 12px; color: var(--muted); }
.kpi-amount-pair :is(strong,b) {
  font-size: clamp(13px, 1.35vw, 25px);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.45px;
  overflow-wrap: anywhere;
}
.kpi-amount-pair b { font-size: clamp(12px, 1.1vw, 20px); }
.kpi-expenses .insight-kpi-line:last-child { color: var(--accent-dark); }

.amount-breakdown { width: 100%; border-collapse: collapse; table-layout: fixed; flex: none; font-variant-numeric: tabular-nums; }
.amount-breakdown :is(th,td) { padding: 7px 9px; border-bottom: 1px solid var(--line); text-align: right; overflow-wrap: anywhere; }
.amount-breakdown tr > :first-child { text-align: left; width: 22%; }
.amount-breakdown thead { background: var(--ground); color: var(--muted); font-size: 13px; }
.amount-breakdown td:last-child { font-weight: 750; }
.breakdown-list { min-width: 0; }
.breakdown-entry {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.5fr) minmax(75px, .45fr);
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 9px 0;
  min-width: 0;
}
.breakdown-entry .insight-table-entry { min-width: 0; }
.transaction-amounts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; font-variant-numeric: tabular-nums; }
.transaction-amounts span,.breakdown-status { display: grid; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.transaction-amounts small,.breakdown-status small { color: var(--muted); font-size: 12px; }
.transaction-amounts span:last-child b { color: var(--accent-dark); }

.expense-calendar-modal .insight-modal-header { padding: 10px 16px; }
.expense-calendar-modal .insight-modal-toolbar { padding: 6px 16px; }
.expense-calendar-modal .insight-modal-period { width: auto; }
.expense-calendar-modal .insight-modal-toolbar .insight-search { width: min(48%, 300px); }
.expense-calendar-modal .insight-modal-footer { padding: 6px 16px; }
.expense-calendar-body { overflow: hidden; padding: 8px 16px; gap: 7px; }
.expense-calendar-body .insight-calendar { padding: 7px; }
.expense-calendar-body .insight-calendar-title { margin-bottom: 5px; }
.expense-calendar-body .insight-calendar-week { margin-bottom: 3px; font-size: 12px; }
.expense-calendar-body .insight-calendar-grid { gap: 3px; }
.expense-calendar-body .insight-calendar-grid > button { height: clamp(28px, 6dvh, 48px); padding: 2px 5px; gap: 0; }
.expense-calendar-body .insight-calendar-grid > button > b { font-size: 13px; }
.expense-calendar-body .insight-calendar-grid > button > span { font-size: 12px; }
.expense-calendar-body .insight-calendar-grid > button > small { display: none; }
.expense-calendar-body .insight-modal-table { overflow: visible; min-height: 0; }
.expense-calendar-body .insight-table-entry :is(b,small) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
.expense-calendar-body .insight-empty { padding: 2px 0; }
.calendar-pagination { display: flex; align-items: center; gap: 6px; font-size: 12px; white-space: nowrap; }
.calendar-pagination .btn { min-height: 30px; }
.expense-calendar-modal .insight-modal-header p { display: none; }
.expense-calendar-modal :is(.insight-modal-period,.insight-modal-header) .icon-btn { min-height: 32px; height: 32px; }
.expense-calendar-modal .insight-modal-footer > button { min-height: 34px; padding-block: 4px; }
.expense-calendar-modal .insight-modal-footer > [data-insight=close] { display: none; }
.expense-calendar-body .amount-breakdown :is(th,td) { padding-block: 4px; font-size: 13px; line-height: 1.35; }
.expense-calendar-body .insight-calendar-title { margin-bottom: 2px; }
.expense-calendar-body .insight-calendar-title button { padding-block: 2px; font-size: 12px; }
.expense-calendar-body .insight-calendar-grid > button { height: clamp(26px,4.6dvh,42px); line-height: 1.1; }
.expense-calendar-body .breakdown-entry { padding-block: 4px; gap: 4px 9px; }
.expense-calendar-body .insight-table-entry { min-height: 0; line-height: 1.2; gap: 2px; }
.expense-calendar-body .insight-table-entry :is(b,small) { line-height: 1.25; }
.expense-calendar-body .transaction-amounts span { gap: 1px; line-height: 1.2; }
.expense-calendar-body .breakdown-status .badge { padding: 2px 6px; }
.expense-calendar-body .calendar-all-compact { display: none; }

.receivable-aging,.annual-months,.annual-tax { border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: var(--paper); }
.receivable-aging header,.annual-months header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; }
.aging-row,.annual-month { color: var(--ink); background: var(--paper); width: 100%; min-width: 0; text-align: left; border-radius: 8px; padding: 5px 8px; }
.aging-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 8px; }
.aging-row[aria-pressed=true],.annual-month[aria-pressed=true] { background: var(--accent-soft); }
.aging-row small { color: var(--muted); font-size: 12px; }
.aging-bar,.annual-month > i { display: block; background: var(--ground); border-radius: 9px; height: 7px; overflow: hidden; }
.aging-bar { grid-column: 1 / -1; }
.aging-bar > i,.annual-month > i > i { display: block; width: var(--share); height: 100%; border-radius: inherit; background: var(--accent); }
.aging-early > i,.aging-middle > i { background: #bb7541; }
.aging-late > i,.aging-old > i,.annual-month > i.negative > i { background: #c64d61; }
.aging-unknown > i { background: #788294; }
.annual-overview,.annual-months { display: grid; gap: 9px; min-width: 0; }
.annual-tax summary { cursor: pointer; font-weight: 650; }
.annual-tax[open] > * + * { margin-top: 10px; }
.annual-months header p { margin: 3px 0; font-size: 13px; }
.annual-month { display: grid; grid-template-columns: 42px minmax(18px, 1fr) minmax(0, 112px); align-items: center; gap: 9px; }
.annual-month strong { text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.annual-months .view-tabs { margin: 0; }
.performance-scroll { gap: 12px; }

/* 21st.dev ports: loading-ui/Analyzing Image, halaska-studio/Switch, ddoemonn/Floating Label. */
.photo-heading,.photo-toggle,.photo-progress { display: flex; align-items: center; gap: 8px; }
.photo-heading { justify-content: space-between; flex-wrap: wrap; }
.photo-toggle label { font-size: 13px; cursor: pointer; }
.photo-switch { position: relative; width: 44px; height: 24px; padding: 0; border-radius: 12px; background: var(--muted); flex: none; }
.photo-switch[aria-checked=true] { background: var(--accent); }
.photo-switch i {
  position: absolute; inset: 2px auto auto 2px; width: 20px; height: 20px;
  border-radius: 50%; background: white; box-shadow: 0 1px 3px #0003;
  transition: transform 260ms cubic-bezier(.2,.8,.25,1.25);
}
.photo-switch[aria-checked=true] i { transform: translateX(20px); }
.photo-progress:has(.erp-photo-status:empty) { display: none; }
.photo-scan { display: block; width: 28px; height: 28px; color: var(--accent); position: relative; flex: none; }
.photo-scan svg { width: 100%; height: 100%; }
.photo-scan i {
  position: absolute; inset: 2px auto 2px 1px; width: 2px; border-radius: 6px; background: currentColor;
  animation: photo-sweep 2.5s cubic-bezier(.175,.885,.32,1) infinite alternate;
}
@keyframes photo-sweep { 0% { transform: translateX(25px); } 60%,100% { transform: translateX(0); } }
.photo-working :is(.erp-file,[data-photo-action=retry]) { opacity: .58; pointer-events: none; }
.company-floating-field { position: relative; padding-top: 9px; display: grid; gap: 4px; min-width: 0; }
.company-floating-field > input {
  width: 100%; min-width: 0; height: 46px; border-radius: 10px;
  background: var(--ground); border: 1px solid var(--line);
}
.company-floating-field > label {
  position: absolute; left: 11px; top: 22px; pointer-events: none;
  color: var(--muted); font-size: 15px; padding-inline: 4px;
  transition: transform 160ms ease, color 160ms ease, background-color 160ms ease;
}
.company-floating-field > input:is(:focus,:not(:placeholder-shown)) + label {
  transform: translateY(-22px) scale(.9); transform-origin: left; background: var(--paper); color: var(--accent-dark);
}
.company-floating-field > input:focus,.company-memo textarea:focus { border-color: var(--accent); }
.company-memo { display: grid; gap: 6px; }
.company-memo textarea { width: 100%; padding: 10px; resize: vertical; font: inherit; background: var(--ground); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; }

/* Use complete Korean words and a wider identity column in the ledger. */
#main[data-view=ledger] .sheet-table { word-break: keep-all; }
#main[data-view=ledger] .sheet-table :is(th,td,.cell-button strong,.cell-button small) { overflow-wrap: break-word; word-break: keep-all; }
#main[data-view=ledger] .sheet-table .cell-button { width: 100%; text-align: left; }
#main[data-view=ledger] .sheet-table :is(.right,.badge) { white-space: nowrap; }
#main[data-view=ledger] .trading-table th:nth-child(2) { width: 34%; }
#main[data-view=ledger] .trade-actions button { font-family: inherit; white-space: nowrap; }

@media (max-width: 700px) {
  .kpi-amount-pair { grid-template-columns: minmax(0,1fr); gap: 3px; }
  .kpi-amount-pair > span:last-child { display: flex; text-align: left; gap: 3px 6px; flex-wrap: wrap; align-items: baseline; }
  .kpi-amount-pair strong { font-size: clamp(15px,4.2vw,24px); }
  .insight-modal .amount-breakdown { font-size: 13px; }
  .amount-breakdown :is(th,td) { padding: 5px 3px; }
  .breakdown-entry { grid-template-columns: minmax(0,1fr) auto; gap: 6px; padding: 7px 0; }
  .breakdown-entry .transaction-amounts { grid-column: 1/-1; grid-row: 2; }
  .breakdown-entry .breakdown-status { grid-column: 2; grid-row: 1; }
  .transaction-amounts b { font-size: 13px; }
  .expense-calendar-modal .insight-modal-header p { display: none; }
  .expense-calendar-modal .insight-modal-toolbar { flex-wrap: nowrap; gap: 7px; }
  .expense-calendar-modal .insight-modal-period { flex: 1; min-width: 0; }
  .expense-calendar-modal .insight-modal-period input { font-size: 14px; padding: 4px; width: 100%; }
  .expense-calendar-modal .insight-modal-period .icon-btn { min-width: 24px; width: 26px; }
  .expense-calendar-modal .insight-modal-toolbar .insight-search { width: 37%; }
  .expense-calendar-body { padding: 6px 9px; gap: 5px; }
  .expense-calendar-body .insight-calendar-grid > button { height: clamp(25px,4.3dvh,36px); padding: 2px 3px; }
  .expense-calendar-body .insight-calendar-grid > button > span { font-size: 10px; }
  .expense-calendar-body h3 { font-size: 15px; }
  .expense-calendar-body .insight-detail-heading { align-items: center; }
  .annual-months .view-tabs button { min-height: 31px; }
  #main[data-view=ledger] .data-panel .sheet-table :is(.cell-button,td) { min-width: 0!important; max-width: none!important; }
  #main[data-view=ledger] .data-panel .trading-table td:nth-child(2) { min-width: 0; }
  #main[data-view=ledger] .data-panel .sheet-table tbody tr { gap: 7px 10px; }
  #main[data-view=ledger] .data-panel .sheet-table .cell-button :is(strong,small) { display: block; line-height: 1.45; }
  #main[data-view=ledger] .data-panel .sheet-table td:has(.trade-actions) { max-width: none; }
}
@media (max-height: 660px) {
  .expense-calendar-modal .insight-modal-header { padding-block: 5px; }
  .expense-calendar-modal .insight-modal-header p { display: none; }
  .expense-calendar-body .insight-calendar-grid > button { height: clamp(23px,4dvh,29px); }
  .expense-calendar-body .insight-calendar-grid > button > span { line-height: 1; font-size: 10px; }
  .expense-calendar-body .insight-calendar-grid > button > b { font-size: 11px; }
  .expense-calendar-body .insight-calendar-title h3 { font-size: 14px; }
}
@media (max-width: 700px) and (max-height: 620px) {
  .expense-calendar-body { padding-block: 4px; gap: 4px; }
  .expense-calendar-body .insight-calendar { padding: 4px; }
  .expense-calendar-body .insight-calendar-title,.expense-calendar-body .expense-detail-label { display: none; }
  .expense-calendar-body .calendar-all-compact { display: inline-flex; font-size: 12px; }
  .expense-calendar-body .amount-breakdown :is(th,td) { padding-block: 3px; }
  .expense-calendar-body .insight-calendar-grid { gap: 2px; }
  .expense-calendar-body .insight-detail-heading h3 { font-size: 13px; }
  .expense-calendar-body .calendar-pagination { gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .photo-scan i { animation: none; inset-inline-start: 50%; }
  .photo-switch i,.company-floating-field > label { transition: none; }
}