/*
 * ميزانيتي — طبقة التوافق مع الهاتف 2.1.54
 * مبنية على قواعد الهاتف المعتمدة في سجل الزوار:
 * - درج جانبي حقيقي بدل ضغط المحتوى.
 * - منع أي تمدد أفقي على مستوى الصفحة.
 * - min-width:0 / overflow-wrap:anywhere للعناصر الشبكية.
 * - تحويل الشبكات إلى عمودين ثم عمود واحد.
 * - أزرار لمس لا تقل عن 44px، ومدخلات 16px لمنع تكبير iOS.
 * - الجداول المالية تتحول إلى بطاقات على الهاتف بدل إجبار الصفحة على عرض مكتبي.
 * هذه الطبقة لا تغير تصميم سطح المكتب.
 */

#mobileNavClose,#mobileNavOverlay{display:none}

@media(max-width:1120px){
  html,body{max-width:100%;overflow-x:hidden}
  body{min-width:320px}
  body.mobile-nav-open{overflow:hidden}

  header{padding-inline:max(14px,env(safe-area-inset-left)) max(14px,env(safe-area-inset-right))}
  .mobile{display:grid!important;place-items:center}
  #menu{width:44px;min-width:44px;height:44px;min-height:44px;padding:0;font-size:21px}

  #side{
    position:fixed!important;
    inset-block:0!important;
    inset-inline-start:auto!important;
    inset-inline-end:0!important;
    right:0!important;
    left:auto!important;
    z-index:1200!important;
    width:min(320px,86vw)!important;
    height:100dvh!important;
    padding:max(14px,env(safe-area-inset-top)) 12px max(18px,env(safe-area-inset-bottom))!important;
    border:0!important;
    border-inline-start:1px solid var(--border)!important;
    background:var(--card)!important;
    box-shadow:-14px 0 40px rgba(28,42,52,.24)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain;
    transform:translateX(105%)!important;
    visibility:hidden;
    pointer-events:none;
    transition:transform .22s ease,visibility 0s linear .22s!important;
  }
  #side.open{transform:translateX(0)!important;visibility:visible;pointer-events:auto;transition:transform .22s ease!important}
  #mobileNavClose{
    display:grid;
    width:44px;height:44px;min-height:44px;
    margin:0 0 10px auto;
    place-items:center;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--bluebg);
    color:var(--navy);
    font-size:24px;
    line-height:1;
    position:sticky;
    top:0;
    z-index:2;
  }
  #side nav{display:grid!important;grid-template-columns:1fr!important;gap:6px!important;width:100%!important}
  #side nav button{display:block!important;width:100%!important;min-height:48px!important;padding:9px 11px!important;border-radius:10px!important;text-align:right!important;white-space:normal!important}
  #side nav button strong,#side nav button small{overflow-wrap:anywhere}
  #mobileNavOverlay{
    display:block;
    position:fixed;
    inset:0;
    z-index:1190;
    background:rgba(28,42,52,.46);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .2s ease,visibility 0s linear .2s;
  }
  #side.open + #mobileNavOverlay{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .2s ease}

  main{
    width:100%;
    max-width:none;
    margin-right:0!important;
    padding:20px max(14px,env(safe-area-inset-right)) 32px max(14px,env(safe-area-inset-left));
  }
  .page,.page.active,.panel,.card,.group,.groupbody,.head,.two,.stats,.cards,.line,.actions,
  .settings-pane,.plan-row,.plan-row-body,.month-section,.month-expense-category,
  #reportBox,#savingsLedger,#bankAccountView,#planRows{min-width:0;max-width:100%}
  .page{width:100%;overflow-x:clip}
  .head>*,.actions>*,.line>*,.card>*,.panel>*,.groupbody>*{min-width:0}
  h1,h2,h3,p,strong,small,span,label{overflow-wrap:anywhere}
  .stats,.stats.four,.plan-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .two{grid-template-columns:minmax(0,1fr)!important}
  .tabs{
    max-width:100%;
    overflow-x:auto!important;
    overflow-y:hidden;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }
  .tabs button{flex:0 0 auto;min-height:44px;white-space:nowrap}
  .table-scroll{
    width:100%;
    max-width:100%;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-inline:contain;
  }
  .table-scroll table{max-width:none}
  .actions{max-width:100%}
  .actions button,.head button,.tabs button{min-height:44px}
  .formgrid>*{min-width:0}
  dialog,.modalcard,#summaryDetails,#savingsMoveDialog{max-width:calc(100vw - 24px)!important}
}

@media(max-width:900px){
  .cards{grid-template-columns:minmax(0,1fr)!important}
  .month-work-head{grid-template-columns:minmax(0,1fr)!important;gap:10px}
  .month-title-block{grid-column:auto!important}
  .month-switcher{width:100%;justify-content:space-between}
  .month-current{min-width:0!important;flex:1 1 auto}
  .month-options{justify-self:stretch!important}
  .month-options>summary{width:100%;text-align:center}
  .month-options[open]>.actions{position:static!important;inset:auto!important;min-width:0!important;margin-top:6px}
  #controlTabs{flex-wrap:nowrap!important;overflow-x:auto!important}
}

@media(max-width:760px){
  header{
    min-height:60px!important;
    height:auto!important;
    display:grid!important;
    grid-template-columns:44px minmax(0,1fr);
    align-items:center;
    gap:7px 10px;
    padding:max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) 8px max(10px,env(safe-area-inset-left))!important;
  }
  header .brand{min-width:0}
  header .brand small{white-space:normal}
  .auth-tools{grid-column:1/-1;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:7px}
  .auth-tools #state{display:none!important}
  .auth-tools button{width:100%;min-height:44px!important}

  main{padding-top:14px;padding-bottom:max(28px,env(safe-area-inset-bottom))}
  .head{align-items:stretch!important;flex-direction:column!important;gap:10px}
  .head>.actions{width:100%}
  .head>.actions button{flex:1 1 140px}
  .stats,.stats.four,.plan-stats,#householdBalance,#loanTotals,
  #savings #savingsLedgerStats,#bankAccounts .bank-stats,#reports .bank-statement .bank-stats{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .stat{min-width:0;padding:11px!important}
  .stat b,.amount,.plan-card b{font-size:22px!important;overflow-wrap:anywhere}
  .two,.cards,.formgrid,.report-metrics{grid-template-columns:minmax(0,1fr)!important}
  .full{grid-column:auto!important}

  input,select,textarea{font-size:16px!important;max-width:100%}
  button,a{touch-action:manipulation}
  button{min-height:44px}
  .icon-btn,.month-arrow{
    width:42px!important;min-width:42px!important;height:42px!important;min-height:42px!important;
    padding:0!important;place-items:center
  }

  .panel,.card{padding:13px}
  .group summary{padding:12px 13px;min-height:44px}
  .groupbody{padding-inline:12px!important}
  .actions{gap:7px}
  .actions button{white-space:normal}
  .record-actions{flex-wrap:wrap!important}
  .record-actions button:not(.icon-btn){flex:1 1 130px}

  /* Month work — override late desktop fixed grids. */
  #month .month-column-heading{display:none!important}
  #month .month-value-row,
  #month #remainingTransfer .remaining-saving.month-value-row,
  #month .month-category-value-row,
  #month .month-simple-row,
  #month .month-legacy-income,
  #month .month-expense-category-head,
  #month .month-expense-item{
    display:grid!important;
    grid-template-columns:42px minmax(0,1fr)!important;
    gap:6px 8px!important;
    align-items:start!important;
    width:100%!important;
    min-width:0!important;
  }
  #month .month-value-row>.drag-spacer,
  #month .month-value-row>.drag-handle,
  #month .month-category-value-row>.drag-handle,
  #month .month-simple-row>.drag-handle,
  #month .month-expense-item>.drag-handle{grid-column:1;grid-row:1/-1;align-self:start}
  #month .month-value-row>strong,
  #month .month-category-value-row>strong,
  #month .month-simple-row>strong,
  #month .month-expense-item>strong{grid-column:2!important}
  #month .month-value-row>.month-planned-value,
  #month .month-value-row>.month-actual-value,
  #month .month-value-row>span:not(.drag-spacer):not(.drag-handle),
  #month .month-category-value-row>.month-planned-value,
  #month .month-category-value-row>.month-actual-value,
  #month .month-simple-row>span:not(.drag-handle),
  #month .month-expense-item>span:not(.drag-handle),
  #month .expense-category-totals{
    grid-column:2!important;
    width:100%;
    white-space:normal!important;
  }
  #month .month-value-row>.actions,
  #month .month-category-actions,
  #month .month-simple-row>.actions,
  #month .month-expense-item>.actions{
    grid-column:2!important;
    width:100%!important;
    max-width:none!important;
    justify-content:flex-start!important;
    justify-self:stretch!important;
    flex-wrap:wrap!important;
  }
  #month .saving-actual-inline{width:100%;grid-template-columns:auto minmax(0,1fr)}
  #month .saving-actual-inline input{min-width:0;width:100%}
  #month .month-section-head{align-items:flex-start!important;flex-wrap:wrap!important;padding:10px 12px}
  #month .month-section-head-actions{width:100%;justify-content:space-between;flex-wrap:wrap}
  #month .month-section-head-actions b{white-space:normal}
  #month #remainingTransfer .remaining-saving.month-value-row{align-items:start!important}
  #month #remainingTransfer .actions button{flex:1 1 160px}
  .expense-category-totals{display:grid!important;gap:2px!important}

  /* Monthly plan — same visual language, mobile only. */
  #plan .plan-column-heading{display:none!important}
  #plan .plan-value-row,.plan-simple-item,.plan-expense-item,.draggable-line{
    grid-template-columns:42px minmax(0,1fr)!important;
    width:100%!important;
    min-width:0!important;
    gap:6px 8px!important;
  }
  #plan .plan-value-row>*:not(.drag-handle):not(.drag-spacer),
  .plan-simple-item>*:not(.drag-handle),
  .plan-expense-item>*:not(.drag-handle),
  .draggable-line>*:not(.drag-handle){grid-column:2!important;min-width:0}
  #plan .plan-value-row>.actions,.plan-simple-item>.record-actions,.plan-expense-item>.record-actions,.draggable-line>.record-actions{
    grid-column:2!important;width:100%!important;max-width:none!important;justify-content:flex-start!important;flex-wrap:wrap!important
  }
  #plan .plan-row>summary{grid-template-columns:minmax(0,1fr) auto!important}
  #plan .month-section-head-actions{width:100%}
  .plan-balance-row{align-items:flex-start;flex-direction:column}
  .plan-balance-row b{white-space:normal!important}

  /* Savings and bank account selectors. */
  #savings .savings-account-buttons,#bankAccounts .bank-account-buttons{display:flex!important;flex-wrap:wrap!important;gap:7px!important}
  #savings .savings-account-button,#bankAccounts .bank-account-button{flex:1 1 145px!important;min-width:0!important;min-height:44px!important;white-space:normal!important}
  #savings .savings-account-details,#bankAccounts .bank-account-details{align-items:flex-start!important;gap:10px!important}
  #savings .savings-account-details>div,#bankAccounts .bank-account-details>div{width:100%!important;min-width:0}
  #savings .savings-operations{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  #savings .savings-operations button{width:100%;min-width:0!important}
  #bankAccounts .bank-linked-account,#reports .bank-statement .bank-linked-account{min-width:0!important;flex-basis:100%!important}

  /* Ledger tables become readable cards, as in Visitor Data mobile lists. */
  #savings .table-scroll,
  #bankAccounts .table-scroll,
  #reports .bank-statement .table-scroll,
  #reports .table-scroll{overflow:visible!important;border:0;background:transparent}
  #savings .ledger,
  #bankAccounts .bank-ledger,
  #reports .bank-ledger,
  #reports .ledger{display:block;width:100%!important;min-width:0!important;border:0}
  #savings .ledger thead,#bankAccounts .bank-ledger thead,#reports .ledger thead{display:none}
  #savings .ledger tbody,#bankAccounts .bank-ledger tbody,#reports .ledger tbody{display:grid;gap:10px}
  #savings .ledger tr,#bankAccounts .bank-ledger tr,#reports .ledger tr{
    display:block;
    width:100%;
    min-width:0;
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--card);
    overflow:hidden;
  }
  #savings .ledger td,#bankAccounts .bank-ledger td,#reports .ledger td{
    display:grid!important;
    grid-template-columns:minmax(92px,34%) minmax(0,1fr);
    gap:8px;
    width:100%;
    min-width:0;
    padding:8px 10px!important;
    border-bottom:1px solid var(--border);
    white-space:normal!important;
    text-align:right!important;
    overflow-wrap:anywhere;
  }
  #savings .ledger td:last-child,#bankAccounts .bank-ledger td:last-child,#reports .ledger td:last-child{border-bottom:0}
  #savings .ledger td::before,#bankAccounts .bank-ledger td::before,#reports .ledger td::before{
    color:var(--muted);font-size:11px;font-weight:800;line-height:1.4
  }
  #savings .ledger td:nth-child(1)::before{content:"التاريخ"}
  #savings .ledger td:nth-child(2)::before{content:"البيان"}
  #savings .ledger td:nth-child(3)::before{content:"الإيداع"}
  #savings .ledger td:nth-child(4)::before{content:"السحب"}
  #savings .ledger td:nth-child(5)::before{content:"الرصيد"}
  #savings .ledger td:nth-child(6)::before{content:"المصدر"}
  #savings .ledger td:nth-child(7)::before{content:"الإجراءات"}
  #bankAccounts .bank-ledger td:nth-child(1)::before,#reports .bank-ledger td:nth-child(1)::before{content:"التاريخ"}
  #bankAccounts .bank-ledger td:nth-child(2)::before,#reports .bank-ledger td:nth-child(2)::before{content:"البيان"}
  #bankAccounts .bank-ledger td:nth-child(3)::before,#reports .bank-ledger td:nth-child(3)::before{content:"الحساب المرتبط"}
  #bankAccounts .bank-ledger td:nth-child(4)::before,#reports .bank-ledger td:nth-child(4)::before{content:"الإيداع"}
  #bankAccounts .bank-ledger td:nth-child(5)::before,#reports .bank-ledger td:nth-child(5)::before{content:"السحب"}
  #bankAccounts .bank-ledger td:nth-child(6)::before,#reports .bank-ledger td:nth-child(6)::before{content:"الرصيد"}
  #bankAccounts .bank-ledger td:nth-child(7)::before,#reports .bank-ledger td:nth-child(7)::before{content:"المصدر"}
  #reports .ledger:not(.bank-ledger) td:nth-child(1)::before{content:"التاريخ"}
  #reports .ledger:not(.bank-ledger) td:nth-child(2)::before{content:"البيان"}
  #reports .ledger:not(.bank-ledger) td:nth-child(3)::before{content:"نوع الحساب"}
  #reports .ledger:not(.bank-ledger) td:nth-child(4)::before{content:"اسم الحساب"}
  #reports .ledger:not(.bank-ledger) td:nth-child(5)::before{content:"الملاحظة"}
  #reports .ledger:not(.bank-ledger) td:nth-child(6)::before{content:"له"}
  #reports .ledger:not(.bank-ledger) td:nth-child(7)::before{content:"عليه"}
  #reports .ledger:not(.bank-ledger) td:nth-child(8)::before{content:"الرصيد"}
  #savings .ledger .record-actions{grid-column:2;display:flex!important;flex-wrap:wrap!important}
  #savings .ledger .record-actions button{min-height:40px!important;height:auto!important}

  /* Reports/settings remain inside viewport. */
  #reportTabs,#controlTabs{width:100%;max-width:100%;overflow-x:auto!important;flex-wrap:nowrap!important}
  #reportTabs button,#controlTabs button{flex:0 0 auto!important}
  .report-row{grid-template-columns:minmax(0,1fr)!important}
  .report-remaining{align-items:flex-start;flex-direction:column}
  .settings-pane .head>button{width:100%}

  /* Modals and dialogs fit the visual viewport. */
  .modal{padding:8px!important;align-items:center}
  .modalcard,#summaryDetails,#savingsMoveDialog,.plan-summary-details{
    width:calc(100vw - 16px)!important;
    max-width:calc(100vw - 16px)!important;
    max-height:92dvh!important;
    padding:14px!important;
    border-radius:15px!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
  }
  .modalhead{position:sticky;top:-14px;z-index:5;background:var(--card);padding:4px 0 10px}
  .modalhead button{min-width:44px}
  .modalcard .actions,#summaryDetails>.actions,#savingsMoveDialog .actions{width:100%}
  .modalcard .actions button,#summaryDetails>.actions button,#summaryDetails>.actions form,#savingsMoveDialog .actions button{flex:1 1 140px}
  #summaryDetails>.actions form button{width:100%}
}

@media(max-width:480px){
  main{padding-inline:max(9px,env(safe-area-inset-left)) max(9px,env(safe-area-inset-right))}
  .stats,.stats.four,.plan-stats,#householdBalance,#loanTotals,
  #savings #savingsLedgerStats,#bankAccounts .bank-stats,#reports .bank-statement .bank-stats{
    grid-template-columns:repeat(2,minmax(0,1fr))!important
  }
  .stat b,.amount,.plan-card b{font-size:20px!important}
  .head h1,.month-title-block h1{font-size:21px!important}
  .auth-tools{grid-template-columns:1fr 1fr}
  #savings .savings-operations{grid-template-columns:1fr!important}
  .actions button:not(.icon-btn){flex:1 1 100%}
  #month #remainingTransfer .actions{display:grid!important;grid-template-columns:1fr;width:100%}
  #month #remainingTransfer .actions button{width:100%}
  #savings .ledger td,#bankAccounts .bank-ledger td,#reports .ledger td{grid-template-columns:92px minmax(0,1fr)}
  .month-current strong{white-space:normal!important;text-align:center}
}

@media(max-width:360px){
  #side{width:min(300px,90vw)!important;padding-inline:10px!important}
  .stats,.stats.four,.plan-stats,#householdBalance,#loanTotals,
  #savings #savingsLedgerStats,#bankAccounts .bank-stats,#reports .bank-statement .bank-stats{
    grid-template-columns:minmax(0,1fr)!important
  }
  .auth-tools{grid-template-columns:1fr}
  #savings .ledger td,#bankAccounts .bank-ledger td,#reports .ledger td{
    grid-template-columns:minmax(0,1fr);
    gap:3px;
  }
  #savings .ledger td::before,#bankAccounts .bank-ledger td::before,#reports .ledger td::before{margin-bottom:2px}
}