/* NakitRota — Visual Polish Phase 2
   Visual-only refinements for mobile calendar fit, Future, Payments and Debt. */

/* Mobile viewport/calendar fit: prevent the seven-column calendar from establishing
   a min-content width wider than the phone viewport. */
html,body{max-width:100%;overflow-x:hidden}
.app,.screen,#home,.desktop-calendar-panel,.month-head,.month-nav,.weekdays,.cal,#cal{min-width:0;max-width:100%}
.weekdays,.cal,#cal{grid-template-columns:repeat(7,minmax(0,1fr))}
.day{min-width:0}.day em,.day em.cal-pay{max-width:100%;overflow:hidden;text-overflow:ellipsis}

/* Shared section rhythm for phase 2 screens. */
#future.screen.on,#fixed.screen.on,#debt.screen.on{min-width:0}
#future>.head,#fixed>.head,#debt>.head{margin-top:20px;margin-bottom:11px}
#future>.head h2,#fixed>.head h2,#debt>.head h2{letter-spacing:-.028em}
#future>.head .btn,#fixed>.head .btn,#debt>.head .btn{box-shadow:0 7px 18px rgba(109,93,252,.12)}

/* Future Plan — clearer hierarchy without changing data or interactions. */
#future .future{gap:10px}
#future .frow{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff 0%,#fcfcff 100%);border-color:rgba(31,36,58,.08)}
#future .frow:before{content:"";position:absolute;inset:0 auto 0 0;width:2px;background:linear-gradient(180deg,rgba(109,93,252,.72),rgba(109,93,252,.08));opacity:.55}
#future .frow>.row:first-child{align-items:flex-start}
#future .frow .nm{letter-spacing:-.012em}
#future .fgrid{gap:7px;margin-top:9px}
#future .mini{background:#f7f8fc;border:1px solid rgba(31,36,58,.055);border-radius:12px;padding:8px 9px;min-width:0}
#future .mini span{font-weight:800;color:#7b8394}
#future .mini b{letter-spacing:-.015em;font-variant-numeric:tabular-nums}
#future .future-total-line{margin-top:10px;padding-top:10px;border-top:1px solid rgba(31,36,58,.075)}
#future .future-total-line b{letter-spacing:-.025em;font-variant-numeric:tabular-nums}
#future .future-detail-summary>div,#future .future-detail-row{border-color:rgba(31,36,58,.075);box-shadow:0 5px 16px rgba(31,36,58,.028)}
#future .future-detail-status{border-radius:999px;padding:5px 8px}
#future .salary-plan-card{box-shadow:0 8px 24px rgba(31,36,58,.04)}

/* Payments — turn recurring payment rows into one consistent card language. */
#fixed .fixed-pay-card,#fixed .cash-advance-card{background:linear-gradient(180deg,#fff 0%,#fdfdff 100%);border-color:rgba(31,36,58,.08);box-shadow:0 8px 24px rgba(31,36,58,.045)}
#fixed .fixed-pay-card{padding:14px}
#fixed .fixed-pay-meta{line-height:1.42}
#fixed .pay-status{padding:5px 8px;border:1px solid transparent;letter-spacing:.005em}
#fixed .pay-status.wait{border-color:#f1dfb7}#fixed .pay-status.partial{border-color:#dcdcff}#fixed .pay-status.paid{border-color:#d0eadf}
#fixed .fixed-actions{gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(31,36,58,.07)}
#fixed .fixed-actions button{border-radius:10px;min-height:36px;padding:7px 9px}
#fixed .fixed-actions .primary{box-shadow:0 6px 14px rgba(109,93,252,.13)}
#fixed .cash-advance-top{align-items:center}
#fixed .cash-advance-progress{height:7px;margin:13px 0 10px}
#fixed .cash-advance-meta{line-height:1.35}
#fixed .cash-advance-actions{gap:7px;margin-top:11px;padding-top:10px;border-top:1px solid rgba(31,36,58,.07)}
#fixed .cash-advance-actions button{border-radius:10px;min-height:38px}

/* Debt / Credit — stronger financial hierarchy, quieter controls. */
#debt .debt-summary-card{overflow:hidden}
#debt .debt-breakdown-grid{gap:9px}
#debt .debt-breakdown{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.105);box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
#debt .debt-card{background:linear-gradient(180deg,#fff 0%,#fdfdff 100%);border-color:rgba(31,36,58,.08);box-shadow:0 8px 24px rgba(31,36,58,.045)}
#debt .debt-type-pill{padding:5px 8px}
#debt .debt-month-status{border-radius:10px;padding:7px 9px}
#debt .debt-action-panel{margin-top:11px;padding-top:11px;border-top-color:rgba(31,36,58,.075)}
#debt .debt-pay-actions{gap:7px}
#debt .debt-action-pay,#debt .debt-action-reset,#debt .debt-manage-btn{border-radius:11px;transition:transform .14s ease,border-color .16s ease,background .16s ease}
#debt .debt-action-pay:active,#debt .debt-action-reset:active,#debt .debt-manage-btn:active{transform:scale(.975)}
#debt .nr-debt-assistant{border-color:rgba(31,36,58,.08)}
#debt .nr-debt-toggle{min-height:60px}

/* Dark mode tuning. */
html[data-theme="dark"] #future .frow,html[data-theme="dark"] #fixed .fixed-pay-card,html[data-theme="dark"] #fixed .cash-advance-card,html[data-theme="dark"] #debt .debt-card{background:linear-gradient(180deg,#171d29 0%,#151b26 100%);border-color:rgba(164,177,202,.12)}
html[data-theme="dark"] #future .frow:before{background:linear-gradient(180deg,rgba(141,129,255,.82),rgba(141,129,255,.10))}
html[data-theme="dark"] #future .mini{background:#121824;border-color:rgba(164,177,202,.09)}
html[data-theme="dark"] #future .future-total-line,html[data-theme="dark"] #fixed .fixed-actions,html[data-theme="dark"] #fixed .cash-advance-actions,html[data-theme="dark"] #debt .debt-action-panel{border-color:rgba(164,177,202,.10)}
html[data-theme="dark"] #future .future-detail-summary>div,html[data-theme="dark"] #future .future-detail-row{border-color:rgba(164,177,202,.10)}
html[data-theme="dark"] #fixed .pay-status.wait{border-color:#514727}html[data-theme="dark"] #fixed .pay-status.partial{border-color:#4a4778}html[data-theme="dark"] #fixed .pay-status.paid{border-color:#315846}
html[data-theme="dark"] #debt .debt-breakdown{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.085)}
html[data-theme="dark"] #debt .nr-debt-assistant{border-color:rgba(164,177,202,.12)}

/* Phone density: calendar must fit without horizontal page movement. */
@media(max-width:979px){
  .app{width:100%;max-width:680px}
  .desktop-calendar-panel{width:100%;min-width:0}
  .weekdays,.cal,#cal{width:100%;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
  .day{width:auto;max-width:100%;min-width:0;overflow:hidden;padding-left:5px;padding-right:5px}
  .day b,.day em{max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .month-head{width:100%;min-width:0;gap:8px}
  .month-nav{min-width:0;max-width:100%}
  .month-nav h2{min-width:0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #future .frow,#fixed .fixed-pay-card,#fixed .cash-advance-card,#debt .debt-card{margin-left:0;margin-right:0}
  #fixed .fixed-actions{justify-content:flex-start}
}
@media(max-width:390px){
  .weekdays,.cal,#cal{gap:3px}
  .day{padding-left:4px;padding-right:4px}
  #future .fgrid{gap:5px}
  #future .mini{padding:7px}
  #fixed .fixed-actions button{flex:1 1 auto}
  #debt .debt-breakdown-grid{gap:6px}
}
@supports(overflow:clip){html,body{overflow-x:clip}}
@media(prefers-reduced-motion:reduce){#debt .debt-action-pay,#debt .debt-action-reset,#debt .debt-manage-btn{transition:none!important}}