/* Compact, clearly separated editing forms without changing KamaVLama's classic palette. */
.variable-transaction-header.is-minimal {
  display:flex!important;
  align-items:center;
  justify-content:flex-start;
  min-height:45px;
  gap:12px;
  padding:4px 12px 10px;
  border:0;
  background:transparent;
  box-shadow:none;
}
.variable-transaction-header.is-minimal .variable-transactions-edit-toggle {
  margin:0;
  align-self:center;
  justify-self:auto;
}
.variable-transactions-breakdown.is-editing .variable-detail-search,
.variable-transactions-breakdown.is-editing .variable-detail-sort {
  display:none!important;
}
.variable-transactions-breakdown.is-editing .variable-transaction-list > .variable-transaction-row[data-transaction-row="true"] {
  position:relative;
  box-sizing:border-box;
  min-width:0;
  padding:16px;
  margin:12px 0;
  gap:12px;
  border:1px solid rgba(113,201,255,.3);
  border-radius:17px;
  background:rgba(19,35,56,.7);
  box-shadow:0 8px 20px rgba(0,0,0,.11);
}
.variable-transactions-breakdown.is-editing .variable-transaction-list > .variable-transaction-row[data-transaction-row="true"]:focus-within {
  border-color:rgba(113,201,255,.55);
}
.variable-transaction-row.is-editing > .variable-transaction-actions.is-expense-action {
  grid-column:1/-1;
  width:100%;
  display:flex;
  justify-content:stretch;
  margin-block-start:4px;
}
.variable-transaction-actions.is-expense-action .variable-transaction-delete {
  display:block;
  box-sizing:border-box;
  width:100%!important;
  max-width:100%;
  min-height:44px;
  height:auto!important;
  padding:10px 14px;
  border-radius:12px;
  font-size:.91rem;
}
.variable-transaction-row.is-editing:has(.is-savings-action) {
  padding-inline-start:48px!important;
}
.variable-transaction-actions.is-savings-action {
  position:absolute;
  top:12px;
  left:12px;
  display:flex;
  width:32px;
  height:32px;
}
.variable-transaction-actions.is-savings-action .variable-transaction-delete {
  display:grid;
  width:32px!important;
  height:32px!important;
  padding:0;
  font-size:20px;
  line-height:1;
}
.variable-transaction-row.is-editing .variable-transaction-input,
.variable-transaction-row.is-editing .numeric-date-shell {
  box-sizing:border-box;
  width:100%;
  min-width:0;
  max-width:100%;
}
.numeric-date-shell {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  min-height:40px;
  padding:7px 5px;
  box-sizing:border-box;
  overflow:hidden;
  border:1px solid rgba(113,201,255,.25);
  border-radius:10px;
  color:#e8f2ff;
  background:rgba(2,9,17,.46);
  direction:ltr;
  font-variant-numeric:tabular-nums;
  cursor:pointer;
}
.numeric-date-shell:focus-within {
  border-color:#71c9ff;
  box-shadow:0 0 0 2px rgba(113,201,255,.14);
}
.numeric-date-shell .numeric-date-text {
  font-size:clamp(12px,1.1vw,15px);
  text-align:center;
  white-space:nowrap;
  pointer-events:none;
}
.numeric-date-shell input[type="date"] {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  min-width:0;
  margin:0;
  padding:0;
  border:0;
  opacity:0;
  cursor:pointer;
}
.variable-expense-modal-header .is-savings-details {
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:flex-start;
  column-gap:16px;
  row-gap:8px;
}
.variable-expense-modal-header .is-savings-details .variable-expense-modal-kicker {
  flex-basis:100%;
}
.variable-expense-modal-header .is-savings-details h3 {
  flex:0 1 auto;
  margin:0;
}
.variable-expense-modal-header .is-savings-details p {
  flex:0 0 auto;
  margin:0;
  color:#6be7ab!important;
  font-weight:800;
  font-variant-numeric:tabular-nums;
}
/* Actual separate dialog for creating a detail, rather than nested blank fields. */
.new-transaction-overlay {
  position:fixed;
  z-index:31000;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px max(12px,env(safe-area-inset-right)) 16px max(12px,env(safe-area-inset-left));
  box-sizing:border-box;
  background:rgba(2,9,18,.78);
  backdrop-filter:blur(6px);
}
.new-transaction-dialog {
  box-sizing:border-box;
  width:min(100%,480px);
  max-height:min(90dvh,720px);
  overflow-y:auto;
  display:grid;
  gap:16px;
  padding:clamp(20px,4vw,30px);
  border:1px solid rgba(113,201,255,.4);
  border-radius:22px;
  color:#e9f2ff;
  background:linear-gradient(150deg,#192b44,#0d1a2c);
  box-shadow:0 22px 70px rgba(0,0,0,.55);
  direction:rtl;
}
.new-transaction-dialog h3 {margin:0;font-size:1.45rem;}
.new-transaction-dialog p {margin:0;color:#aabbd1;font-size:.9rem;line-height:1.55;}
.new-transaction-dialog label {display:grid;gap:9px;font-weight:650;color:#bacbe0;}
.new-transaction-dialog input,
.new-transaction-dialog select {
  box-sizing:border-box;
  min-width:0;
  width:100%;
  min-height:48px;
  padding:10px 12px;
  border:1px solid rgba(113,201,255,.28);
  border-radius:12px;
  color:#f8fbff;
  background:#0a1728;
  font:inherit;
  font-size:16px;
}
.new-transaction-dialog input:focus-visible,
.new-transaction-dialog select:focus-visible {
  outline:2px solid #71c9ff;
  outline-offset:2px;
}
.new-transaction-actions {display:grid;grid-template-columns:1.4fr 1fr;gap:12px;margin-top:4px;}
.new-transaction-actions button {
  min-height:46px;
  padding:10px 12px;
  border:1px solid #587196;
  border-radius:12px;
  cursor:pointer;
  color:#f8fafc;
  background:#22334c;
  font:inherit;
  font-weight:700;
}
.new-transaction-actions button[type="submit"] {
  background:#45f1a2;
  border-color:#45f1a2;
  color:#062119;
}
/* Match the more generous collapsed input-table sizes; keep three amounts legible. */
.budget-center-card {min-width:0;}
.budget-center-card .budget-center-launch {min-height:116px;padding:26px 24px!important;}
.budget-center-card .budget-center-figures {gap:18px;width:min(70%,545px);}
.budget-center-card .budget-center-figures>span:not(.budget-center-divider) {gap:9px;}
.budget-center-card .budget-center-figures strong {font-size:clamp(20px,1.85vw,25px);line-height:1.35;}
.budget-center-card .budget-center-figures small {font-size:13px;}
/* Analysis grouping is a hierarchy, not a highlighted floating block. */
#kf-view .kf-details {
  background:transparent;
  box-shadow:none;
  padding:10px 4px 12px;
  border-radius:0;
  margin:0 0 12px;
}
#kf-view .kf-rank-group[open] > summary {background:transparent;}
/* Align principal, repayment and balance on the same horizontal axes. */
.loan-original-input {
  display:none;
  width:min(140px,52%);
  min-width:0;
  min-height:39px;
  border:1px solid rgba(167,139,250,.6);
  border-radius:9px;
  padding:6px;
  color:#fff;
  background:#0c192d;
  direction:ltr;
  text-align:center;
  font:inherit;
  box-sizing:border-box;
}
.is-loan-editing .loan-original-input {display:block;}
.is-loan-editing .loan-amount .loan-stat-value {display:none;}
.loan-repaid-value {direction:ltr;justify-content:center;gap:5px;white-space:nowrap;}
.loan-repaid-input {font-variant-numeric:tabular-nums;}
@media (max-width:760px) {
  .loan-original-input {width: min(140px,54%);}
  .is-loan-editing .loan-amount {justify-content:space-between!important;}
  .loan-repaid-cell .loan-repaid-value {
    margin-inline-start:auto;
    flex:0 0 auto;
    gap:5px;
  }
  .loan-repaid-cell .loan-repaid-input {
    width:90px;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
    text-align:center;
    padding-inline:3px;
  }
}
@media (max-width:640px) {
  /* Identical compact card height to the other mobile table cards. */
  .budget-center-card {
    height:166.36px!important;
    min-height:166.36px!important;
  }
  .budget-center-card .budget-center-launch {
    height:100%;
    min-height:100%;
    padding:19px 18px!important;
    gap:12px;
  }
  .budget-center-card .budget-center-launch h2 {font-size:clamp(20px,5.4vw,25px);}
  .budget-center-card .budget-center-figures {width:min(72%,310px);gap:9px;}
  .budget-center-card .budget-center-figures>span:not(.budget-center-divider) {padding:5px 2px;}
  .budget-center-card .budget-center-figures strong {font-size:clamp(17px,4.7vw,22px);}
  .budget-center-card .budget-center-figures small {font-size:12px;}
  .variable-transactions-breakdown.is-editing .variable-transaction-row.is-editing {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:11px;
    padding:15px!important;
  }
  .variable-transaction-row.is-editing > [data-transaction-subcategory] {grid-column:1/-1;}
  .variable-transaction-row.is-editing > [data-transaction-amount] {grid-column:2;grid-row:2;}
  .variable-transaction-row.is-editing > .numeric-date-shell {grid-column:1;grid-row:2;}
  .variable-transaction-row.is-editing > .payment-method-select,
  .variable-transaction-row.is-editing > .payment-select-shell {grid-column:1/-1;grid-row:3;}
  .variable-transaction-row.is-editing > .variable-transaction-actions.is-expense-action {
    grid-column:1/-1;
    grid-row:auto;
  }
  .numeric-date-shell {min-height:42px;}
  .numeric-date-shell .numeric-date-text {font-size:13px;}
  .variable-transactions-breakdown.is-editing .variable-transaction-row.is-editing:has(.is-savings-action) {
    padding-inline-start:46px!important;
  }
}
@media(prefers-reduced-motion:reduce) {
 .new-transaction-overlay,.new-transaction-dialog {transition:none!important;animation:none!important;}
}


/* Keep iOS native date controls inside the exact same field width as text. */
.new-transaction-dialog {
  grid-template-columns: minmax(0, 1fr);
}
.new-transaction-dialog > label {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.new-transaction-dialog > label > input,
.new-transaction-dialog > label > select,
.new-transaction-dialog > label > .kama-detail-suggest-field {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.new-transaction-dialog input[type="date"] {
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
  direction: ltr;
  text-align: center;
}

/* Identical recurring-detail suggestions in fixed and variable expenses. */
.kama-detail-suggest-field {
  position: relative;
  min-width: 0;
  width: 100%;
}
.kama-detail-suggest-field:focus-within { z-index: 20; }
.kama-detail-suggest-field > input { width: 100%; min-width: 0; box-sizing: border-box; }
.kama-detail-suggest-list {
  /* In-flow matches cannot be clipped by the breakdown or mobile scrollpane. */
  position: static;
  z-index: 40;
  margin-top: 5px;
  display: grid;
  gap: 3px;
  padding: 5px;
  max-height: 190px;
  overflow-y: auto;
  border: 1px solid rgba(113,201,255,.4);
  border-radius: 11px;
  background: #0b1c31;
  box-shadow: 0 14px 30px rgba(0,0,0,.44);
}
.kama-detail-suggest-list.hidden { display: none !important; }
.kama-detail-suggest-option {
  min-width: 0;
  width: 100%;
  padding: 10px 11px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #eaf5ff;
  font: inherit;
  font-weight: 650;
  text-align: right;
  cursor: pointer;
}
.kama-detail-suggest-option:hover,
.kama-detail-suggest-option.is-active,
.kama-detail-suggest-option:focus-visible {
  background: rgba(113,201,255,.17);
  outline: none;
}


/* 2026-10-19: iOS native date inputs must never size their parent label.
   The visible control uses the same full-width styling as the other fields. */
.new-transaction-dialog > label:has(.kama-new-detail-date) {
  display: grid;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
.new-transaction-dialog .kama-new-detail-date {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 10px 12px;
  border-radius: 12px;
  border-color: rgba(113,201,255,.28);
  background: #0a1728;
  color: #f8fbff;
  font-size: 16px;
  direction: ltr;
}
.new-transaction-dialog .kama-new-detail-date .numeric-date-text {
  font-size: 16px;
  font-weight: 600;
}
.new-transaction-dialog .kama-new-detail-date input[type="date"] {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 0;
  opacity: 0;
  border: 0;
  cursor: pointer;
}

/* Only additions/search offer historical suggestions; existing names edit
   as ordinary text, without a secondary dropdown or unexpected keyboard focus. */
.variable-transaction-row.is-editing > [data-transaction-subcategory] {
  min-width: 0;
}

/* Show each newly SAVED sub-expense once, including multi-add save batches.
   Soft purple glow is aligned with the V brand and lasts 1.5 seconds. */
.variable-transaction-list > .variable-transaction-row.is-newly-committed-detail {
  animation: kama-detail-committed-glow 1.5s ease-out both;
}
@keyframes kama-detail-committed-glow {
  0% {
    background: rgba(167,93,255,.31);
    box-shadow: inset 0 0 0 1px rgba(206,165,255,.82),
                0 0 21px rgba(145,65,236,.4);
  }
  38% {
    background: rgba(141,77,220,.17);
    box-shadow: inset 0 0 0 1px rgba(183,133,241,.43),
                0 0 11px rgba(145,65,236,.16);
  }
  100% {
    background: transparent;
    box-shadow: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .variable-transaction-list > .variable-transaction-row.is-newly-committed-detail {
    animation: none;
    border-color: rgba(183,133,241,.6);
  }
}
@media (max-width:640px) {
  /* Two neat rows: name|amount, payment|date. Delete remains full-width. */
  .variable-transactions-breakdown.is-editing
  .variable-transaction-list > .variable-transaction-row.is-editing {
    display: grid;
    grid-template-columns: minmax(0,1.65fr) minmax(0,1fr);
    gap: 11px;
    padding: 14px !important;
  }
  .variable-transactions-breakdown:is([data-detail-type="fixed"],[data-detail-type="variable"])
  .variable-transaction-row.is-editing > :is(
    [data-transaction-subcategory], .kama-detail-suggest-field) {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    min-width: 0;
  }
  .variable-transactions-breakdown:is([data-detail-type="fixed"],[data-detail-type="variable"])
  .variable-transaction-row.is-editing > [data-transaction-amount] {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }
  .variable-transactions-breakdown:is([data-detail-type="fixed"],[data-detail-type="variable"])
  .variable-transaction-row.is-editing > :is(.payment-method-select,.payment-select-shell) {
    grid-column: 1;
    grid-row: 2;
  }
  .variable-transactions-breakdown:is([data-detail-type="fixed"],[data-detail-type="variable"])
  .variable-transaction-row.is-editing > .numeric-date-shell {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
  }
  .variable-transactions-breakdown:is([data-detail-type="fixed"],[data-detail-type="variable"])
  .variable-transaction-row.is-editing > .variable-transaction-actions.is-expense-action {
    grid-column: 1 / -1;
    grid-row: 3;
  }
  .variable-transactions-breakdown .numeric-date-shell .numeric-date-text {
    font-size: clamp(11px,3.2vw,14px);
  }
}