/* v30.4 — Global raised two-tone button system. Visual-only; dimensions stay inside existing layouts. */
:root{
  --btn-blue-1:#2488ff;--btn-blue-2:#075de9;
  --btn-purple-1:#8b63ff;--btn-purple-2:#5b35df;
  --btn-green-1:#20c980;--btn-green-2:#07975b;
  --btn-red-1:#ff6c78;--btn-red-2:#d93f50;
  --btn-gold-1:#f0bd4a;--btn-gold-2:#bd7d12;
  --btn-slate-1:#22334a;--btn-slate-2:#172538;
  --btn-edge:rgba(255,255,255,.20);
  --btn-inner:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.14);
}

/* Shared geometry. Exclude bottom-nav text buttons so the phone/navigation footprint never changes. */
button:not(.bottom-nav button),
.file-label{
  box-sizing:border-box;
  max-width:100%;
  min-width:0;
  -webkit-tap-highlight-color:transparent;
}

.primary,
.settings-list button:not(.danger),
#addAccountBtn,#addAssetBtn,#addCommitmentBtn,
.modal-actions button:not(.danger),
.investment-action-picker button,
.tn-tabs button,
.section-title button,
.secondary,
.file-label{
  position:relative;
  overflow:hidden;
  border:1px solid var(--btn-edge)!important;
  color:#fff!important;
  font-family:inherit;
  font-weight:750!important;
  border-radius:14px!important;
  background:linear-gradient(180deg,var(--btn-blue-1),var(--btn-blue-2))!important;
  box-shadow:var(--btn-inner),0 5px 0 rgba(3,54,135,.68),0 9px 18px rgba(7,93,233,.22)!important;
  text-shadow:0 1px 1px rgba(0,0,0,.18);
  transition:transform .08s ease,box-shadow .08s ease,filter .12s ease;
}

.primary:active,
.settings-list button:not(.danger):active,
#addAccountBtn:active,#addAssetBtn:active,#addCommitmentBtn:active,
.modal-actions button:not(.danger):active,
.investment-action-picker button:active,
.tn-tabs button:active,
.section-title button:active,
.secondary:active,
.file-label:active{
  transform:translateY(3px);
  box-shadow:var(--btn-inner),0 2px 0 rgba(3,54,135,.70),0 5px 10px rgba(7,93,233,.18)!important;
  filter:brightness(.98);
}

/* Two visibly different action colors, as in the approved mockup. */
#homeTasksNotes .tn-tabs button:first-child,
.tn-tabs button:first-child{
  background:linear-gradient(180deg,#26a4ff,#0968ee)!important;
  box-shadow:var(--btn-inner),0 5px 0 #064aa8,0 9px 18px rgba(9,104,238,.26)!important;
}
#homeTasksNotes .tn-tabs button:nth-child(2),
.tn-tabs button:nth-child(2){
  background:linear-gradient(180deg,var(--btn-purple-1),var(--btn-purple-2))!important;
  box-shadow:var(--btn-inner),0 5px 0 #4323aa,0 9px 18px rgba(91,53,223,.25)!important;
}

/* Neutral secondary buttons remain 3D but quieter. */
.secondary,
.section-title button,
.file-label{
  background:linear-gradient(180deg,#2a3b52,#1b293c)!important;
  border-color:#3b506a!important;
  box-shadow:var(--btn-inner),0 4px 0 #101b29,0 8px 15px rgba(0,0,0,.18)!important;
  color:#eef5ff!important;
}
.section-title button{padding:8px 12px!important;min-height:34px}

/* Completed-task action: compact green raised pill on the left of the card. */
#homeTasksNotes .tn-list .tn-row .tn-check,
#modalBody .tn-list .tn-row .tn-check{
  appearance:none!important;-webkit-appearance:none!important;
  width:auto!important;min-width:86px!important;max-width:112px!important;
  height:40px!important;min-height:40px!important;
  flex:0 0 auto!important;
  padding:0 14px!important;
  border:1px solid rgba(119,255,192,.65)!important;
  border-radius:13px!important;
  background:linear-gradient(180deg,var(--btn-green-1),var(--btn-green-2))!important;
  color:#fff!important;
  box-shadow:var(--btn-inner),0 4px 0 #056c42,0 8px 15px rgba(7,151,91,.24)!important;
  text-shadow:0 1px 1px rgba(0,0,0,.16)!important;
  font-size:0!important;
  line-height:1!important;
}
#homeTasksNotes .tn-list .tn-row .tn-check::after,
#modalBody .tn-list .tn-row .tn-check::after{
  content:'انجام شد'!important;
  font-family:inherit!important;font-size:13px!important;font-weight:800!important;white-space:nowrap!important;
}
#homeTasksNotes .tn-list .tn-row .tn-check:active,
#modalBody .tn-list .tn-row .tn-check:active{
  transform:translateY(3px)!important;
  background:linear-gradient(180deg,#1fbc78,#078750)!important;
  box-shadow:var(--btn-inner),0 1px 0 #056c42,0 4px 8px rgba(7,151,91,.18)!important;
}

/* Quick registration tiles keep their semantic colors, now as raised two-tone controls. */
.quick{border:1px solid rgba(255,255,255,.16)!important;color:#fff!important;text-shadow:0 1px 1px rgba(0,0,0,.16);box-shadow:var(--btn-inner),0 5px 0 rgba(0,0,0,.28),0 9px 18px rgba(0,0,0,.15)!important;transition:transform .08s ease,box-shadow .08s ease}
.quick:active{transform:translateY(3px);box-shadow:var(--btn-inner),0 2px 0 rgba(0,0,0,.30),0 5px 10px rgba(0,0,0,.13)!important}
.quick.income{background:linear-gradient(180deg,#22c982,#0a9860)!important}.quick.expense{background:linear-gradient(180deg,#ff6f7e,#d84555)!important}.quick.shop{background:linear-gradient(180deg,#3695ff,#1263d9)!important}.quick.transfer{background:linear-gradient(180deg,#f1b849,#bd7912)!important}.quick.debt{background:linear-gradient(180deg,#956eff,#6240d8)!important}.quick.invest{background:linear-gradient(180deg,#e6b83f,#ac7b0e)!important}.quick.side{background:linear-gradient(180deg,#d66de3,#a442b0)!important}.quick.invoice{background:linear-gradient(180deg,#48a7eb,#2871b1)!important}

/* Destructive controls get their own red physical layer. */
button.danger,.settings-list button.danger,.danger-link{
  color:#fff!important;
  border:1px solid rgba(255,178,185,.55)!important;
  background:linear-gradient(180deg,var(--btn-red-1),var(--btn-red-2))!important;
  border-radius:14px!important;
  box-shadow:var(--btn-inner),0 4px 0 #a62d3b,0 8px 15px rgba(217,63,80,.20)!important;
}
button.danger:active,.settings-list button.danger:active,.danger-link:active{transform:translateY(3px);box-shadow:var(--btn-inner),0 1px 0 #a62d3b,0 4px 8px rgba(217,63,80,.16)!important}

/* Segmented controls: raised selected state, but no size/layout change. */
.segmented{overflow:hidden}
.segmented button{box-shadow:none!important;transform:none!important;border:0!important}
.segmented button.active{
  background:linear-gradient(180deg,#2a80ff,#115fd5)!important;
  color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 3px 0 #0a469f,0 5px 10px rgba(17,95,213,.20)!important;
}

/* Top icon controls receive depth without changing their 42×42 footprint. */
.icon-btn{
  border:1px solid rgba(255,255,255,.10)!important;
  background:linear-gradient(180deg,#223149,#172438)!important;
  color:var(--text)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 4px 0 #0d1725,0 8px 16px rgba(0,0,0,.20)!important;
  transition:transform .08s ease,box-shadow .08s ease;
}
.icon-btn:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 2px 0 #0d1725,0 4px 8px rgba(0,0,0,.18)!important}

/* Preserve the existing bottom bar geometry exactly; only the central FAB gets extra depth. */
.bottom-nav button{transform:none!important;box-shadow:none!important}
.bottom-nav .fab{
  background:linear-gradient(180deg,#2788ff,#075eea)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 6px 0 #0647ae,0 12px 24px rgba(7,94,234,.30)!important;
}
.bottom-nav .fab:active{transform:translateY(3px)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 3px 0 #0647ae,0 7px 13px rgba(7,94,234,.24)!important}

/* iPhone safety: no raised control may enlarge the document width. */
.page,.panel,.card,.form-grid,.settings-list,.quick-grid,.tn-tabs,.tn-row,.modal-actions{min-width:0;max-width:100%}
button,input,select,textarea,.file-label{box-sizing:border-box;max-width:100%}