/* =========================================================
   Link2Manage — Mobile Patch
   (Desktop untouched; mobile-only enhancements)
   ========================================================= */

/* iOS safe area */
:root{
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* ---------
   Global mobile rhythm
   --------- */
@media (max-width: 820px){
  /* App-style spacing */
  .container.app-container{ padding-left: 10px; padding-right: 10px; }
  .page-head{ margin: 10px 0 12px; }

  /* Sticky section titles (feels like a real app) */
  .page-head{
    position: sticky;
    top: 72px; /* matches topbar height */
    z-index: 30;
    backdrop-filter: blur(10px);
    background: color-mix(in srgb, var(--bg) 85%, transparent);
    border-bottom: 1px solid var(--stroke);
    padding: 10px 0 8px;
  }
  html[data-theme="dark"] .page-head{
    background: color-mix(in srgb, var(--bg) 78%, transparent);
  }

  /* Cards wider */
  .card, .kpi, .panel, .hero{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Bigger tap targets */
  .btn, button, .icon-btn, .topnav-link, .link-btn, a.btn{
    min-height: 44px;
    font-size: 16px;
  }
  .input, input, select, textarea{
    min-height: 44px;
    font-size: 16px;
  }
  .chk{ gap: 10px; }
  .chk input{ width: 18px; height: 18px; }

  /* Prevent any horizontal scroll */
  html, body{ overflow-x: hidden; }
}

/* ---------
   Header overflow guard (username / logout)
   --------- */
@media (max-width: 820px){
  .app-topbar{ padding-left: 10px; padding-right: 10px; }
  .app-brand .brand-text span{ display:none; } /* keep header tight */
  .topbar-actions{
    max-width: 52%;
    min-width: 0;
    gap: 8px;
  }
  .userbox{
    max-width: 70%;
    min-width: 0;
  }
  .user-name{
    display:block;
    max-width: 100%;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .link-btn{
    padding: 10px 10px;
    border-radius: 999px;
    border: 1px solid var(--stroke);
    background: color-mix(in srgb, var(--panel) 60%, transparent);
  }
}

/* ---------
   Mobile bottom nav (tab bar)
   --------- */
@media (max-width: 820px){
  /* Make room for the tab bar */
  .app-main{ padding-bottom: calc(74px + var(--safe-b)); }

  .mnav{
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: 64px;
    padding-bottom: var(--safe-b);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: center;
    gap: 0;
    background: color-mix(in srgb, var(--panel) 88%, transparent);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--stroke);
    z-index: 999;
  }
  .mnav-item{
    text-decoration: none;
    color: var(--muted2);
    display: grid;
    place-items: center;
    gap: 4px;
    padding: 8px 2px;
    transition: transform .15s ease, color .15s ease;
    min-width: 0;
  }
  .mnav-ico{
    font-size: 18px;
    line-height: 1;
    transform: translateY(0);
    transition: transform .15s ease;
  }
  .mnav-txt{
    font-size: 11px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .mnav-item.active{
    color: var(--accent);
    font-weight: 800;
  }
  .mnav-item.active .mnav-ico{
    transform: translateY(-1px) scale(1.05);
  }
  .mnav-item:active{ transform: scale(.98); }
}
@media (min-width: 821px){
  .mnav{ display:none; }
}

/* ---------
   Tables -> stacked cards on mobile
   --------- */
@media (max-width: 820px){
  .tablewrap{ overflow: visible; border-radius: var(--r2); }
  .t thead{ display:none; }
  .t, .t tbody, .t tr, .t td{ display:block; width:100%; }
  .t tr{
    border-bottom: 1px solid var(--stroke);
    padding: 10px 12px;
  }
  .t td{
    display:flex;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 0;
  }
  .t td:before{
    content: attr(data-label);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .16px;
    color: var(--muted2);
    flex: 0 0 44%;
  }
  .t td > *{ max-width: 56%; }
}

/* ---------
   Login page mobile cleanup
   --------- */
@media (max-width: 820px){
  .auth-single{ padding-top: 10px; }
  .auth-single-inner{ padding-top: 0; }
  .auth-single-header{ margin-top: 0; padding-top: 6px; }
  /* If any auth mark remains in other layouts, hide on mobile */
  .auth-single-header .auth-mark{ display:none; }
}
/* --------------------------------
   Login page spacing tweak
-------------------------------- */

.auth-single{
  padding-top:20px;
}

.auth-single-inner{
  padding-top:0;
}

.auth-single-header{
  margin-top:0;
  padding-top:4px;
}

/* tighter mobile spacing */
@media (max-width: 768px){

  .auth-single{
    padding-top:10px;
  }

  .auth-single-header{
    margin-top:0;
    padding-top:2px;
  }

}
/* =================================
   Tighten login page spacing
================================= */

.auth-single{
  padding-top:6px !important;
  margin-top:0 !important;
}

.auth-single-inner{
  padding-top:0 !important;
  margin-top:0 !important;
}

.auth-single-header{
  margin-top:0 !important;
  padding-top:0 !important;
}

.auth-single-header h1{
  margin-top:4px !important;
}

.auth-single-header p{
  margin-top:4px !important;
}

/* even tighter on phones */

@media (max-width:768px){

  .auth-single{
    padding-top:2px !important;
  }

  .auth-single-header h1{
    margin-top:2px !important;
  }

}
/* ================================
   Login "Forgot password" link
================================ */

.auth-single-card .small a{
  color: var(--accent);
  text-decoration:none;
  font-weight:500;
}

.auth-single-card .small a:hover{
  text-decoration:underline;
}

/* dark mode readability */

html[data-theme="dark"] .auth-single-card .small a{
  color:#ff9a3d;
}
/* =========================================================
   FINAL MOBILE TWEAKS — receipts / transactions / reports / header
   ========================================================= */
@media (max-width: 820px){
  /* Single gutter system like Tasks */
  .app-main{ padding-left: 14px !important; padding-right: 14px !important; }
  .container, .container.app-container{ padding-left: 0 !important; padding-right: 0 !important; }

  /* Header refinements */
  .app-topbar{
    display:grid !important;
    grid-template-columns:auto auto 1fr auto auto !important;
    align-items:center !important;
    gap:8px !important;
    padding-left:14px !important;
    padding-right:14px !important;
    overflow:visible !important;
  }
  .app-brand{ max-width:none !important; }
  .theme-toggle{ order:2; }
  .burger-btn{ order:3; display:grid !important; }
  .topbar-actions{
    order:4;
    margin-left:0 !important;
    justify-self:end;
    display:flex;
    align-items:center;
    gap:8px;
    max-width:none !important;
  }
  .userbox{
    background:transparent !important;
    border:none !important;
    padding:0 !important;
    max-width:88px !important;
  }
  .user-dot{ display:none !important; }
  .user-name{ max-width:88px !important; font-weight:800; }
  .logout-btn{
    appearance:none;
    border:none !important;
    background:transparent !important;
    padding:0 !important;
    margin:0 !important;
    min-height:auto !important;
    font-size:15px !important;
    font-weight:800;
    color:var(--accent) !important;
    box-shadow:none !important;
  }
  .logout-btn:hover,.logout-btn:active{ background:transparent !important; filter:none !important; }

  .topnav{ display:none !important; }
  body.mobile-menu-open .topnav{
    display:flex !important;
    position:fixed;
    left:14px;
    right:14px;
    top:74px;
    z-index:70;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    padding:12px;
    background:var(--panel);
    border:1px solid var(--stroke);
    border-radius:22px;
    box-shadow: var(--shadow);
  }
  body.mobile-menu-open .topnav-link{
    width:100%;
    text-align:left;
    padding:12px 14px;
    border-radius:16px;
  }

  /* Reports + page-head should merge with first card */
  .page-head{
    position:relative !important;
    top:auto !important;
    margin:0 !important;
    padding:20px 20px 12px !important;
    border:1px solid var(--stroke) !important;
    border-bottom:none !important;
    border-radius:30px 30px 0 0 !important;
    background:var(--panel) !important;
    box-shadow: var(--shadow) !important;
    backdrop-filter:none !important;
  }
  .page-head + .grid,
  .page-head + .card{
    margin-top:0 !important;
  }
  .reports-grid > .card:first-child,
  .page-head + .card{
    border-top-left-radius:0 !important;
    border-top-right-radius:0 !important;
  }
  .reports-grid{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
  .reports-grid > .card{ grid-column:auto !important; }
  .reports-filter-form{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
  .reports-filter-form > div,
  .reports-filter-form button{ min-width:0 !important; width:100% !important; }

  /* Transactions filter layout */
  .tx-filters{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:12px !important;
    align-items:end !important;
  }
  .tx-filters > div{ min-width:0 !important; }
  .tx-filters > div:last-child{ grid-column:1 / -1; }
  .tx-filters > div:last-child .btn{ width:100% !important; }
  .tx-date-input,
  .tx-filters input[type="date"],
  .tx-edit-form input[type="date"]{
    min-height:44px !important;
    height:44px !important;
    line-height:1.2 !important;
    padding-top:10px !important;
    padding-bottom:10px !important;
    font-size:16px !important;
    -webkit-appearance:none;
    appearance:none;
  }
  #txnDate{ max-width:100% !important; }

  /* Receipts segmented control + spacing support */
  .seg-toggle,
  .receipt-type-toggle,
  .type-toggle{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:12px !important;
    margin-top:4px !important;
  }
  .seg-toggle label,
  .receipt-type-toggle label,
  .type-toggle label{
    min-width:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:12px !important;
    padding:12px 14px !important;
    overflow:hidden !important;
  }
  .seg-toggle label span,
  .seg-toggle label strong,
  .seg-toggle .seg-text,
  .receipt-type-toggle label span,
  .type-toggle label span{
    min-width:0 !important;
    display:block !important;
    white-space:normal !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    line-height:1.12 !important;
  }
  .seg-toggle input[type="radio"],
  .receipt-type-toggle input[type="radio"],
  .type-toggle input[type="radio"]{
    flex:0 0 18px !important;
    width:18px !important;
    height:18px !important;
    min-height:0 !important;
  }
  .seg-toggle + .form-actions,
  .receipt-upload-actions,
  .receipt-form .form-actions{
    margin-top:14px !important;
  }
}

.burger-btn{display:none;}


/* =========================================================
   FINAL MOBILE HOTFIXES — header logout + transaction spacing
   ========================================================= */
@media (max-width: 980px){
  /* Keep desktop untouched; force compact mobile header layout */
  .app-topbar{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    padding:12px 14px !important;
    max-width:100vw !important;
    overflow:hidden !important;
  }
  .app-brand{
    min-width:0 !important;
    max-width:calc(100vw - 172px) !important;
    flex:1 1 auto !important;
  }
  .app-brand .brand-text{ display:none !important; }
  .topbar-actions{
    margin-left:0 !important;
    flex:0 0 auto !important;
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    max-width:none !important;
    min-width:auto !important;
  }
  .topbar-actions form{
    display:block !important;
    margin:0 !important;
    flex:0 0 auto !important;
  }
  .userbox{ display:none !important; }
  .theme-toggle, .burger-btn{
    width:44px !important;
    height:44px !important;
    min-height:44px !important;
    flex:0 0 44px !important;
  }
  .logout-btn{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:44px !important;
    padding:0 14px !important;
    border-radius:999px !important;
    border:1px solid var(--stroke) !important;
    background:rgba(255,255,255,.35) !important;
    color:var(--text) !important;
    font-size:14px !important;
    font-weight:800 !important;
    white-space:nowrap !important;
    box-shadow:none !important;
  }
  html[data-theme="dark"] .logout-btn{
    background:rgba(255,255,255,.06) !important;
    border-color:rgba(247,242,239,.12) !important;
  }

  /* Transactions page: readable single-column filter flow */
  .tx-head-actions{
    width:100% !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }
  .tx-head-actions > .btn,
  .tx-head-actions > .badge{
    width:100% !important;
    justify-content:center !important;
    text-align:center !important;
  }
  .tx-filters{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
  .tx-filters > div,
  .tx-filter-search,
  .tx-filter-actions{
    grid-column:auto !important;
    min-width:0 !important;
    width:100% !important;
  }
  .tx-filters .label{
    display:block !important;
    margin:0 0 6px !important;
    line-height:1.2 !important;
  }
  .tx-filters .input,
  .tx-filters select,
  .tx-filters input{
    width:100% !important;
    min-width:0 !important;
  }
  .tx-filter-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr 1fr !important;
    gap:8px !important;
    align-items:stretch !important;
  }
  .tx-filter-actions .btn{
    width:100% !important;
    justify-content:center !important;
    padding-left:10px !important;
    padding-right:10px !important;
  }
  .tx-edit-form .row{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
  .tx-edit-form .input,
  .tx-edit-form input,
  .tx-edit-form select{
    width:100% !important;
    min-width:0 !important;
  }

  /* Tables and cards must stay inside screen width */
  .card, .tablewrap, .t, .t tr, .t td{
    max-width:100% !important;
  }
  .tablewrap{ overflow:hidden !important; }
  .t td > *, .t td > a, .t td > button, .t td > span, .t td > div{
    max-width:58% !important;
    overflow-wrap:anywhere;
  }
}

@media (max-width: 420px){
  .app-brand{ max-width:calc(100vw - 164px) !important; }
  .logout-btn{ padding:0 12px !important; font-size:13px !important; }
  .tx-filter-actions{ grid-template-columns:1fr !important; }
}