/* ==========================================================================
   FIRE Debt Manager — responsive layer
   Desktop: sidebar · Tablet: compact sidebar · Mobile: bottom navigation
   ========================================================================== */

/* ---------- ≤1280px : тығыздау grid ---------- */
@media (max-width:1280px){
  :root{ --page-pad:24px; --gap:16px; }
  .kpi-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ---------- ≤1100px : compact sidebar (tablet) ---------- */
@media (min-width:901px) and (max-width:1100px){
  :root{ --sidebar-w:74px; }
  .brand{ justify-content:center; padding:20px 8px 18px; }
  .brand .sidebar__close{ display:none; }
  .brand__text{ display:none; }
  .nav{ padding:6px 10px; }
  .nav__item{ justify-content:center; padding:12px 0; }
  .nav__item span{ display:none; }
  .nav__badge{ display:none; }
  .sidebar__foot{ display:none; }
  .grid--sidebar{ grid-template-columns:1fr; }
}

/* ---------- ≤900px : mobile ---------- */
@media (max-width:900px){
  :root{ --page-pad:16px; --gap:14px; }

  /* Sidebar → off-canvas drawer */
  .sidebar{
    position:fixed; left:0; top:0; bottom:0; height:100%;
    transform:translateX(-102%); transition:transform .26s cubic-bezier(.4,0,.2,1);
    box-shadow:var(--shadow-lg); width:280px; flex-basis:280px;
  }
  .sidebar.is-open{ transform:translateX(0); }
  .brand .sidebar__close{ display:grid; }

  .topbar{ padding:12px 16px; gap:10px; }
  .topbar .topbar__menu{ display:grid; }
  .topbar__title{ font-size:17px; }
  .topbar__sub{ display:none; }
  .badge--demo{ font-size:10px; padding:4px 7px; }

  .views{ padding:16px 16px calc(88px + env(safe-area-inset-bottom)); }

  /* Bottom navigation */
  .bottom-nav{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:50;
    background:color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter:saturate(180%) blur(16px);
    -webkit-backdrop-filter:saturate(180%) blur(16px);
    border-top:1px solid var(--border);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .bnav{
    flex:1; border:0; background:transparent; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; gap:3px;
    padding:6px 2px; border-radius:12px; color:var(--muted); min-width:0;
  }
  .bnav svg{ width:21px; height:21px; }
  .bnav span{ font-size:10px; font-weight:600; letter-spacing:-.01em; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .bnav.is-active{ color:var(--accent); }

  /* Grid → 1 колонка */
  .kpi-grid,.grid--2,.grid--4,.grid--sidebar,.field-row,.field-row--3,.res-grid,.next__stats{
    grid-template-columns:1fr;
  }
  .kpi-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid--mini{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .income-form{ flex-direction:column; align-items:stretch; }
  .income-form__actions{ justify-content:space-between; }
  .income-form__actions .btn{ flex:1 1 auto; }
  .kpi__value{ font-size:21px; }
  .kpi{ padding:14px 16px; }
  .card{ padding:16px; border-radius:var(--r); }

  /* Health */
  .health{ flex-direction:column; align-items:center; gap:16px; }
  .health__body{ width:100%; }
  .health__text{ text-align:center; }
  .factor__name{ min-width:104px; font-size:12px; }

  .bank__grid{ grid-template-columns:1fr; }
  .credit__rows{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .toolbar{ gap:10px; }
  .toolbar .btn--primary{ margin-left:0; width:100%; }
  .toolbar__left{ width:100%; }
  .seg{ flex:1; }
  .seg__btn{ flex:1; }
  .seg-hint{ display:none; }

  .big-value{ font-size:27px; }
  .chart-box{ height:230px; }
  .chart-box--wide{ height:250px; }

  /* Кестелерді карточка форматына айналдыру */
  .table--cards thead{ display:none; }
  .table--cards tbody tr{
    display:grid; grid-template-columns:1fr auto; gap:2px 10px;
    padding:12px; margin-bottom:10px; border:1px solid var(--border);
    border-radius:var(--r); background:var(--surface-2);
  }
  .table--cards tbody tr:hover{ background:var(--surface-2); }
  .table--cards tbody td{ border:0; padding:3px 0; display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .table--cards tbody td::before{
    content:attr(data-label); font-size:11.5px; color:var(--muted); font-weight:500;
  }
  .table--cards tbody td[data-label=""]::before{ content:none; }
  .table--cards tbody td:first-child{ grid-column:1 / -1; font-weight:650; padding-bottom:6px; }
  .table--cards tbody td:first-child::before{ content:none; }
  .table--cards tfoot td{ font-size:12.5px; padding:8px 6px; }
  .table--cards .cell-input{ width:130px; }

  .modal{ border-radius:var(--r-lg); max-height:calc(100vh - 24px); }
  .modal-backdrop{ padding:12px; align-items:flex-end; }
  .modal__head{ border-radius:var(--r-lg) var(--r-lg) 0 0; padding:18px 18px 12px; }
  .modal__body{ padding:0 18px 16px; }
  .modal__foot{ padding:14px 18px calc(16px + env(safe-area-inset-bottom)); }
  .modal__foot .btn{ flex:1; }

  .toasts{ left:12px; right:12px; bottom:calc(80px + env(safe-area-inset-bottom)); }
  .toast{ max-width:none; }

  .rstep{ gap:12px; }
  .rstep__rail{ flex-basis:34px; }
  .rstep__dot{ width:34px; height:34px; border-radius:11px; font-size:12px; }
  .goals{ grid-template-columns:1fr; }
  .data-actions .btn{ width:100%; }
}

/* ---------- ≤430px ---------- */
@media (max-width:430px){
  .kpi-grid,.grid--mini{ grid-template-columns:1fr; }
  .credit__rows{ grid-template-columns:1fr 1fr; gap:8px 10px; }
  .crow__value{ font-size:13.5px; }
  .bnav span{ font-size:9.5px; }
  .gauge,.gauge__svg{ width:118px; height:118px; }
  .gauge{ flex-basis:118px; }
}

/* ---------- Print ---------- */
@media print{
  .sidebar,.bottom-nav,.topbar__actions,.toolbar,.btn,.icon-btn{ display:none !important; }
  .app{ display:block; }
  .card{ break-inside:avoid; border:1px solid #ccc; box-shadow:none; }
  body{ background:#fff; }
}

/* ==========================================================================
   AI модулінің мобильді бейімделуі
   ========================================================================== */
@media (max-width:900px){
  .topbar__add span{ display:none; }
  .topbar__add{ padding:9px 11px; }
  .fab{ display:grid; place-items:center; }

  .quick-form__row{ flex-wrap:wrap; }
  .quick-form__row .input{ flex:1 1 100%; }
  .quick-form__row .btn{ flex:1; }
  .quick-form__icon-text{ display:inline; }
  .quick-form__hints{ overflow-x:auto; flex-wrap:nowrap; padding-bottom:2px; }
  .quick-form__hints span{ white-space:nowrap; }

  .advisor__headline{ font-size:15.5px; }
  .advisor__actions .btn{ flex:1 1 auto; }

  .rec{ padding:13px 14px; gap:11px; }
  .rec__title{ font-size:13.5px; }

  .exp-row__actions{ opacity:1; }
  .exp-row{ padding:10px 6px; gap:10px; }
  .exp-row__amount{ font-size:14px; }
  .day-head{ padding:12px 2px 6px; }

  .fund__form{ grid-template-columns:1fr; }
  .fund__stats{ flex-direction:column; align-items:flex-start; gap:12px; }
  .fund__side{ gap:26px; }
  .event__rows{ grid-template-columns:1fr 1fr; }
  .events-grid{ grid-template-columns:1fr; }

  .card--chat{ min-height:calc(100vh - 210px); }
  .chat-msg{ max-width:94%; }
  .chat-messages{ min-height:180px; }

  .budget-usage{ min-width:90px; align-items:flex-end; }
  .table--cards .budget-progress-cell{ align-items:center; }

  #expenses-filters{ display:grid; grid-template-columns:1fr 1fr; gap:8px; width:100%; }
  #expenses-filters .seg{ grid-column:1 / -1; }
  #expenses-filters .input{ width:100%; }

  .auth__card{ padding:22px 20px; border-radius:var(--r-lg); }
  .detected__amount{ font-size:28px; }
  .quick-option{ padding:13px 14px; }
}

@media (max-width:430px){
  .event__rows{ grid-template-columns:1fr; }
  .fund__value{ font-size:26px; }
  .goal-next__values{ font-size:17px; }
  .chat-suggestions .chip{ font-size:12px; padding:6px 11px; }
}