/* Search, allocation wizard and navigation polish · 2026-10-16 */

/* One prominent logo line followed by period and page heading/navigation. */
#dashboard .page-header {grid-template-rows:auto auto auto auto;gap:14px 18px;}
#dashboard .page-header .dashboard-account {grid-column:1/-1;grid-row:1;}
#dashboard .account-actions {display:flex;align-items:center;gap:10px;flex:none;}
#dashboard .account-actions .settings-btn {
  min-height:36px;padding:6px 14px;border:1px solid rgba(154,190,222,.3);
  border-radius:12px;background:rgba(255,255,255,.035);color:#b6cce2;
  font:inherit;font-size:13px;cursor:default;opacity:.74;
}
#dashboard .page-header .dashboard-topbar {
  display:flex;justify-content:center;align-items:center;grid-column:1/-1;grid-row:2;
  min-height:48px;padding:2px 0;
}
#dashboard .page-header .header-controls {grid-column:1/-1;grid-row:3;justify-self:stretch;}
#dashboard .page-header .period-controls {width:min(100%,580px);max-width:580px;margin-right:0;margin-left:auto;}
#dashboard .page-header .reset-day-hint {text-align:right;}
#dashboard .page-header .dashboard-title-row {
  grid-column:1/-1;grid-row:4;display:flex;align-items:center;justify-content:space-between;
  gap:16px;direction:rtl;min-width:0;
}
#dashboard .page-header .dashboard-title-row .dashboard-title {
  grid-column:auto;grid-row:auto;text-align:right;margin:0;min-width:0;
}
#dashboard .page-header .dashboard-title-row .view-switch-btn {
  flex:none;min-height:44px;
}
@media(max-width:640px){
  #dashboard .page-header {grid-template-columns:minmax(0,1fr);gap:12px;}
  #dashboard .page-header .dashboard-topbar {grid-row:2;min-height:44px;}
  #dashboard .page-header .header-controls {grid-row:3;}
  #dashboard .page-header .period-controls {width:100%;max-width:none;}
  #dashboard .page-header .dashboard-title-row {grid-row:4;gap:10px;flex-wrap:nowrap;}
  #dashboard .page-header .dashboard-title-row .dashboard-title {
    font-size:clamp(16px,4vw,23px);line-height:1.25;
  }
  #dashboard .page-header .dashboard-title-row .view-switch-btn {
    width:auto;max-width:45%;font-size:clamp(10px,2.7vw,12px);
    padding:8px;white-space:normal;line-height:1.25;
  }
  #dashboard .account-actions {gap:6px;}
  #dashboard .account-actions .settings-btn {padding:7px 9px;font-size:12px;}
}

/* Collapsed budget card: amounts on the upper left, full-height CTA below. */
.tracker-grid .budget-center-card .budget-center-figures {align-self:start!important;justify-self:start!important;margin:2px 0 0!important;}
.tracker-grid .budget-center-card .budget-center-launch {grid-template-rows:minmax(60px,1fr) auto!important;}
.tracker-grid .budget-center-card .budget-center-open-hint {
  min-height:51px!important;padding:12px 11px!important;border-radius:13px;
}
@media(max-width:640px){
  .tracker-grid .budget-center-card .budget-center-launch {grid-template-rows:minmax(48px,1fr) auto!important;}
  .tracker-grid .budget-center-card .budget-center-open-hint {min-height:45px!important;padding:9px 8px!important;}
}

/* Keep Safari from magnifying the viewport whenever an input is focused. */
@media(max-width:900px){
  input,select,textarea,
  .budget-center-modal .budget-activity-control,
  .budget-allocation-modal .budget-activity-control {
    font-size:16px!important;
  }
}

/* All searchable inputs have an accessible, physical left-edge reset control. */
.kama-search-shell {
  display:block;position:relative;box-sizing:border-box;min-width:0;width:100%;
}
.kama-search-shell>input {
  display:block;box-sizing:border-box;width:100%!important;min-width:0!important;
  padding-left:39px!important;
}
.kama-search-shell>input[type="search"]::-webkit-search-cancel-button {
  display:none;
}
.kama-search-clear {
  position:absolute;left:6px;top:50%;transform:translateY(-50%);
  display:grid;place-items:center;width:31px;height:31px;padding:0;
  z-index:2;border:0;border-radius:9px;background:rgba(102,143,188,.15);
  color:#a6d9f6;font:inherit;font-size:23px;line-height:1;cursor:pointer;
}
.kama-search-clear[hidden] {display:none!important;}
.kama-search-clear:hover {color:white;background:rgba(107,173,229,.24);}
.kama-search-clear:focus-visible {outline:2px solid #79c9ff;}
.kama-search-suggestions {
  position:fixed;z-index:2300;direction:rtl;
  max-height:min(32dvh,260px);overflow-y:auto;
  box-sizing:border-box;border:1px solid rgba(104,187,246,.55);
  border-radius:12px;padding:5px;
  background:#0c2137;box-shadow:0 14px 40px rgba(1,6,17,.58);
}
.kama-search-suggestions[hidden]{display:none!important;}
.kama-search-suggestion {
  display:block;width:100%;min-height:41px;padding:9px 12px;
  border:0;border-radius:8px;text-align:right;
  background:transparent;color:#e3f1ff;font:inherit;font-size:14px;
}
.kama-search-suggestion:hover,.kama-search-suggestion:focus-visible {
  background:rgba(95,176,238,.20);outline:none;
}


/* Keep the quick interior marker only for savings. Income and expense search
   highlights must NEVER paint the individual text/amount/info cells. */
.finance-card:not(.income-card):not(.fixed-card):not(.variable-card) tr.kama-search-target,
.finance-card:not(.income-card):not(.fixed-card):not(.variable-card) tr.kama-search-target > td {
  background:rgba(71,155,232,.13)!important;
}
.finance-card:not(.income-card):not(.fixed-card):not(.variable-card) tr.kama-search-target .description-cell {
  box-shadow:inset 0 0 0 2px rgba(106,200,255,.7);
  border-radius:10px;
}
@media(prefers-reduced-motion:reduce) {
  .finance-card:not(.income-card):not(.fixed-card):not(.variable-card) tr.kama-search-target,
  .finance-card:not(.income-card):not(.fixed-card):not(.variable-card) tr.kama-search-target > td {
    transition:none!important;
  }
}

/* Selected income/fixed/variable rows keep their regular, uncluttered
   background and cell styles. Only its outer frame glows, fading gracefully
   within two seconds, then JS removes the temporary class. */
:is(.income-card, .fixed-card, .variable-card) tbody tr.kama-search-selected:not(.is-mobile-row-open) {
  border-color: rgba(118, 205, 255, .95);
  outline: 2px solid rgba(120, 211, 255, .92);
  outline-offset: 3px;
  border-radius: 15px;
  box-shadow: 0 0 0 3px rgba(70, 149, 223, .14),
    0 0 14px rgba(64, 164, 240, .18);
  scroll-margin-block: 20px;
  animation: kama-search-frame-fade 2s ease-out forwards;
}
@keyframes kama-search-frame-fade {
  0%, 65% {
    border-color: rgba(118, 205, 255, .95);
    outline-color: rgba(120, 211, 255, .92);
    box-shadow: 0 0 0 3px rgba(70, 149, 223, .14),
      0 0 14px rgba(64, 164, 240, .18);
  }
  100% {
    border-color: var(--border-soft);
    outline-color: transparent;
    box-shadow: 0 0 0 0 rgba(70, 149, 223, 0),
      0 0 0 rgba(64, 164, 240, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  :is(.income-card, .fixed-card, .variable-card) tbody tr.kama-search-selected {
    animation: none !important;
    transition: none !important;
  }
}

/* Blue edit pencil at the far left of the budget amount, below the modal X. */
.budget-center-modal .budget-center-total {position:relative;padding-left:58px;min-height:44px;}
.budget-center-modal .budget-center-total > .budget-center-edit-action {
  position:absolute;left:0;top:0;margin:0;
}
.budget-center-modal .budget-center-edit-form .budget-center-field input {
  text-align:right;direction:ltr;font-size:16px;
}

/* Dedicated two-stage budget allocation dialog, never mixed with allocations. */
.budget-allocation-overlay {
  z-index:1950;padding:16px;place-items:center;
}
.budget-allocation-overlay[hidden],
.budget-allocation-modal [hidden] {display:none!important;}
.budget-allocation-modal {
  width:min(540px,100%);max-width:calc(100vw - 20px);
  max-height:min(90dvh,760px);overflow:hidden;
  border-radius:22px;box-sizing:border-box;
}
.budget-allocation-modal .budget-activity-header {align-items:center;padding:18px 22px;}
.budget-allocation-modal .budget-activity-header h3 {font-size:clamp(20px,4.5vw,25px);}
.budget-allocation-step {font-size:12px;color:#7dcaff;margin:0 0 5px;}
.budget-allocation-body {
  display:grid;gap:17px;min-width:0;padding:22px;
  overflow-y:auto;overscroll-behavior:contain;
}
.budget-allocation-search-pane {display:grid;gap:12px;min-width:0;}
.budget-allocation-modal .budget-center-choices {
  max-height:min(38dvh,265px);overflow:auto;
  display:grid;gap:8px;
}
.budget-allocation-modal .budget-center-choice {
  width:100%;min-height:51px;box-sizing:border-box;
  padding:12px 15px;border-radius:12px;font-size:14px;
}
.budget-allocation-modal .budget-center-allocation {
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:17px;padding:0;border:0;background:transparent;
}
.budget-allocation-modal .budget-center-selected {
  display:block;margin:0;padding:14px 15px;
  border:1px solid rgba(121,182,243,.24);border-radius:12px;
  color:#c4b5fd;background:rgba(80,115,161,.12);
  font-weight:700;
}
.budget-allocation-modal .budget-center-field {gap:9px;}
.budget-allocation-modal #budgetAllocationInput {
  display:block;width:100%;box-sizing:border-box;
  text-align:right;direction:ltr;font-size:17px;
  min-height:52px;border-radius:12px;
}
.budget-allocation-balance {
  margin:0;padding:13px 14px;border-radius:11px;
  background:rgba(56,128,160,.13);border:1px solid rgba(111,193,241,.2);
  color:#9de3cb;line-height:1.6;font-size:13px;
}
.budget-allocation-balance.is-negative {
  color:#ff9ca9;background:rgba(205,74,85,.12);border-color:rgba(255,138,160,.33);
}
.budget-allocation-modal .budget-center-allocation [type=submit] {
  width:100%;min-height:47px;font-weight:750;
}
.budget-allocation-modal .budget-center-allocation .budget-center-secondary {
  width:100%;min-height:43px;
}
.budget-allocation-error {margin:0;line-height:1.5;}
@media(max-width:640px){
  .budget-allocation-overlay {padding:10px;}
  .budget-allocation-modal {width:100%;border-radius:19px;}
  .budget-allocation-body {padding:17px;gap:14px;}
  .budget-allocation-modal .budget-activity-header {padding:16px 18px;}
}