/* =========================================================
   EasyLeasey — 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; }
}

/* =========================================================
   EasyLeasey mobile nav hotfix — More + FAB visibility
   ========================================================= */
@media (max-width: 820px){
  :root{ --easy-mobile-nav-h: 66px; }

  .app-main{
    padding-bottom: calc(var(--easy-mobile-nav-h) + 96px + var(--safe-b, 0px)) !important;
  }

  .mobile-bottom-nav{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    height:calc(var(--easy-mobile-nav-h) + var(--safe-b, 0px)) !important;
    padding:6px 8px calc(6px + var(--safe-b, 0px)) !important;
    display:grid !important;
    grid-template-columns:repeat(5, minmax(0, 1fr)) !important;
    align-items:center !important;
    gap:4px !important;
    background:rgba(255,255,255,.94) !important;
    border-top:1px solid rgba(15,23,42,.10) !important;
    box-shadow:0 -14px 36px rgba(15,23,42,.14) !important;
    backdrop-filter:blur(16px) !important;
    z-index:2147483000 !important;
    overflow:visible !important;
  }

  html[data-theme="dark"] .mobile-bottom-nav{
    background:rgba(15,23,42,.96) !important;
    border-top-color:rgba(255,255,255,.12) !important;
    box-shadow:0 -14px 36px rgba(0,0,0,.36) !important;
  }

  .mobile-bottom-link,
  button.mobile-bottom-link{
    appearance:none !important;
    -webkit-appearance:none !important;
    min-width:0 !important;
    width:100% !important;
    height:54px !important;
    min-height:54px !important;
    padding:5px 2px !important;
    margin:0 !important;
    border:0 !important;
    border-radius:16px !important;
    background:transparent !important;
    color:#64748b !important;
    text-decoration:none !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:3px !important;
    font-size:10.5px !important;
    font-weight:800 !important;
    line-height:1 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    cursor:pointer !important;
    box-shadow:none !important;
  }

  html[data-theme="dark"] .mobile-bottom-link,
  html[data-theme="dark"] button.mobile-bottom-link{
    color:#cbd5e1 !important;
  }

  .mobile-bottom-link span:last-child{
    display:block !important;
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    line-height:1.05 !important;
  }

  .mobile-bottom-icon{
    display:block !important;
    font-size:18px !important;
    line-height:1 !important;
    height:18px !important;
    color:inherit !important;
  }

  .mobile-bottom-link.active,
  button.mobile-bottom-link.active,
  .mobile-bottom-more[aria-expanded="true"]{
    background:rgba(37,99,235,.12) !important;
    color:#2563eb !important;
  }

  html[data-theme="dark"] .mobile-bottom-link.active,
  html[data-theme="dark"] button.mobile-bottom-link.active,
  html[data-theme="dark"] .mobile-bottom-more[aria-expanded="true"]{
    background:rgba(96,165,250,.18) !important;
    color:#93c5fd !important;
  }

  .easy-mobile-more-menu[hidden],
  .l2m-fab-menu[hidden]{ display:none !important; }

  .easy-mobile-more-menu{
    position:fixed !important;
    inset:0 !important;
    z-index:2147483001 !important;
    background:rgba(15,23,42,.34) !important;
    display:flex !important;
    align-items:flex-end !important;
    justify-content:center !important;
    padding:18px 14px calc(var(--easy-mobile-nav-h) + 12px + var(--safe-b, 0px)) !important;
  }

  .easy-mobile-more-sheet{
    width:min(520px, 100%) !important;
    border-radius:24px !important;
    background:#ffffff !important;
    color:#0f172a !important;
    border:1px solid rgba(15,23,42,.10) !important;
    box-shadow:0 24px 60px rgba(15,23,42,.28) !important;
    padding:14px !important;
  }

  html[data-theme="dark"] .easy-mobile-more-sheet{
    background:#111827 !important;
    color:#f8fafc !important;
    border-color:rgba(255,255,255,.12) !important;
  }

  .easy-mobile-more-head{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
    padding:2px 2px 12px !important;
  }

  .easy-mobile-more-close{
    width:42px !important;
    height:42px !important;
    min-height:42px !important;
    border-radius:999px !important;
    border:1px solid rgba(15,23,42,.12) !important;
    background:rgba(15,23,42,.04) !important;
    color:inherit !important;
    font-size:24px !important;
    line-height:1 !important;
  }

  html[data-theme="dark"] .easy-mobile-more-close{
    border-color:rgba(255,255,255,.12) !important;
    background:rgba(255,255,255,.08) !important;
  }

  .easy-mobile-more-grid{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }

  .easy-mobile-more-grid a{
    min-height:48px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:16px !important;
    text-decoration:none !important;
    font-weight:850 !important;
    color:inherit !important;
    background:rgba(15,23,42,.045) !important;
    border:1px solid rgba(15,23,42,.08) !important;
  }

  html[data-theme="dark"] .easy-mobile-more-grid a{
    background:rgba(255,255,255,.07) !important;
    border-color:rgba(255,255,255,.10) !important;
  }

  .l2m-fab-mobile{
    display:block !important;
    position:fixed !important;
    right:18px !important;
    bottom:calc(var(--easy-mobile-nav-h) + 18px + var(--safe-b, 0px)) !important;
    z-index:2147482999 !important;
  }

  .l2m-fab-btn{
    width:58px !important;
    height:58px !important;
    min-height:58px !important;
    border-radius:999px !important;
    border:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:34px !important;
    line-height:1 !important;
    font-weight:700 !important;
    color:#fff !important;
    background:#2563eb !important;
    box-shadow:0 18px 44px rgba(37,99,235,.38) !important;
  }

  .l2m-fab-menu{
    position:absolute !important;
    right:0 !important;
    bottom:72px !important;
    width:min(288px, calc(100vw - 34px)) !important;
    margin:0 !important;
    border-radius:22px !important;
    z-index:2147483002 !important;
    box-shadow:0 24px 60px rgba(15,23,42,.28) !important;
  }

  .l2m-fab-menu-body{
    display:grid !important;
    gap:8px !important;
    padding:12px !important;
  }

  .l2m-fab-menu-body .btn{
    width:100% !important;
    justify-content:flex-start !important;
    text-align:left !important;
  }
}

@media (min-width: 821px){
  .mobile-bottom-nav,
  .easy-mobile-more-menu,
  .l2m-fab-mobile{ display:none !important; }
}


/* =========================================================
   MOBILE NAV REVISION — bottom nav without More + top burger menu
   ========================================================= */
@media (max-width: 820px){
  .mobile-bottom-nav{
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
    height:calc(var(--easy-mobile-nav-h) + var(--safe-b, 0px)) !important;
    min-height:0 !important;
  }

  .mobile-bottom-more,
  .easy-mobile-more-menu{
    display:none !important;
  }

  /* Give the top bar room by switching to icon-only branding on mobile. */
  .app-topbar{
    overflow:visible !important;
  }
  .app-brand{
    flex:0 0 46px !important;
    min-width:46px !important;
    width:46px !important;
    max-width:46px !important;
  }
  .app-brand-logo{
    content:url('/assets/img/brand/easyleasey-symbol.svg?v=20260502b') !important;
    width:40px !important;
    height:40px !important;
    max-width:40px !important;
    max-height:40px !important;
    object-fit:contain !important;
  }

  /* Burger is now the mobile "More" menu. Keep only essential actions in header. */
  .topbar-profile-btn,
  .topbar-help-icon-btn,
  .topbar-actions form{
    display:none !important;
  }
  .topbar-actions{
    gap:8px !important;
  }
  .burger-btn{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
    flex:0 0 44px !important;
    border-radius:14px !important;
    background:rgba(255,255,255,.72) !important;
    border:1px solid rgba(15,23,42,.12) !important;
    color:#0f172a !important;
    z-index:2147483004 !important;
  }
  html[data-theme="dark"] .burger-btn{
    background:rgba(255,255,255,.09) !important;
    border-color:rgba(255,255,255,.14) !important;
    color:#f8fafc !important;
  }

  .theme-toggle{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
    flex:0 0 44px !important;
  }

  .mobile-drawer{
    z-index:2147483005 !important;
  }
  .mobile-drawer-backdrop{
    z-index:2147483004 !important;
  }

  .l2m-fab-mobile{
    bottom:calc(var(--easy-mobile-nav-h) + 20px + var(--safe-b, 0px)) !important;
    z-index:2147483003 !important;
  }
}

/* =========================================================
   TOP BURGER REBUILD HOTFIX — targets actual app header
   ========================================================= */
@media (max-width: 980px){
  .app-topbar{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    overflow:visible !important;
    padding:12px 14px !important;
  }

  /* Mobile-only: show compact EasyLeasey icon instead of full logo. */
  .app-brand{
    flex:0 0 46px !important;
    min-width:46px !important;
    width:46px !important;
    max-width:46px !important;
    overflow:visible !important;
  }
  .app-brand-logo{
    content:url('/assets/img/brand/easyleasey-symbol.svg?v=20260502b') !important;
    display:block !important;
    width:40px !important;
    height:40px !important;
    max-width:40px !important;
    max-height:40px !important;
    object-fit:contain !important;
  }

  .topnav,
  .topnav-desktop,
  .userbox,
  .topbar-profile-btn,
  .topbar-help-icon-btn,
  .topbar-actions form{
    display:none !important;
  }

  .topbar-actions{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:8px !important;
    margin-left:auto !important;
    flex:0 0 auto !important;
    min-width:0 !important;
    max-width:none !important;
  }

  .theme-toggle,
  .burger-btn{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
    flex:0 0 44px !important;
    border-radius:14px !important;
  }

  .burger-btn{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:rgba(255,255,255,.78) !important;
    border:1px solid rgba(15,23,42,.14) !important;
    color:#0f172a !important;
    font-size:22px !important;
    line-height:1 !important;
    z-index:2147483004 !important;
    opacity:1 !important;
    visibility:visible !important;
  }
  html[data-theme="dark"] .burger-btn{
    background:rgba(255,255,255,.10) !important;
    border-color:rgba(255,255,255,.16) !important;
    color:#f8fafc !important;
  }

  .mobile-drawer{
    display:flex !important;
    z-index:2147483006 !important;
  }
  .mobile-drawer-backdrop{
    display:block !important;
    z-index:2147483005 !important;
  }
  body.mobile-menu-open .mobile-drawer{
    transform:translateX(0) !important;
  }
  body.mobile-menu-open .mobile-drawer-backdrop{
    opacity:1 !important;
    pointer-events:auto !important;
  }

  .mobile-bottom-nav{
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  }
  .mobile-bottom-more,
  .easy-mobile-more-menu{
    display:none !important;
  }

  .l2m-fab-mobile{
    bottom:calc(var(--easy-mobile-nav-h, 76px) + 20px + var(--safe-b, 0px)) !important;
    z-index:2147483003 !important;
  }
}

@media (min-width: 981px){
  .burger-btn{ display:none !important; }
}

/* =========================================================
   MOBILE HEADER RESTORE HOTFIX
   - Use existing app icon asset so the mobile logo image is never missing
   - Restore Profile + Help icons in top nav
   - Keep burger menu visible
   - Desktop untouched
   ========================================================= */
@media (max-width: 980px){
  .app-topbar{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    overflow:visible !important;
  }

  .app-brand{
    flex:0 0 42px !important;
    min-width:42px !important;
    width:42px !important;
    max-width:42px !important;
    height:42px !important;
    overflow:visible !important;
  }

  .app-brand-logo{
    content:url('/assets/img/brand/easyleasey-icon.jpg?v=20260502c') !important;
    display:block !important;
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    max-width:38px !important;
    max-height:38px !important;
    object-fit:contain !important;
    border-radius:10px !important;
  }

  .topbar-actions{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:6px !important;
    margin-left:auto !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    max-width:none !important;
  }

  .topbar-profile-btn,
  .topbar-help-icon-btn{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
    flex:0 0 38px !important;
    padding:0 !important;
    border-radius:13px !important;
    background:rgba(255,255,255,.72) !important;
    border:1px solid rgba(15,23,42,.12) !important;
    color:#0f172a !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  html[data-theme="dark"] .topbar-profile-btn,
  html[data-theme="dark"] .topbar-help-icon-btn{
    background:rgba(255,255,255,.09) !important;
    border-color:rgba(255,255,255,.14) !important;
    color:#f8fafc !important;
  }

  .topbar-profile-btn .topbar-btn-text,
  .topbar-help-icon-btn .topbar-btn-text{
    display:none !important;
  }

  .topbar-icon{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:16px !important;
    line-height:1 !important;
  }

  .theme-toggle,
  .burger-btn{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
    flex:0 0 38px !important;
    border-radius:13px !important;
  }

  .burger-btn{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  .topbar-actions form,
  .userbox{
    display:none !important;
  }
}

@media (max-width: 390px){
  .app-topbar{ padding-left:8px !important; padding-right:8px !important; gap:6px !important; }
  .topbar-actions{ gap:5px !important; }
  .app-brand{ flex-basis:38px !important; min-width:38px !important; width:38px !important; max-width:38px !important; }
  .app-brand-logo{ width:34px !important; height:34px !important; min-width:34px !important; max-width:34px !important; }
  .topbar-profile-btn,
  .topbar-help-icon-btn,
  .theme-toggle,
  .burger-btn{
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    min-height:36px !important;
    flex-basis:36px !important;
  }
}

/* =========================================================
   MOBILE HEADER + OVERFLOW MERGE HOTFIX
   Keeps the restored top nav/header behavior and fixes overflowing
   Help, Documents, Money/Reports, Transactions, and legacy card grids.
   Desktop remains untouched.
   ========================================================= */
@media (max-width: 820px){
  html,
  body{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  .app-main,
  .container,
  .page-head,
  .card,
  .card-body,
  .card-b,
  .card-h,
  .card-header,
  .card-title,
  .panel,
  .kpi,
  .grid,
  .row,
  form,
  fieldset{
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  .app-main{
    overflow-x:hidden !important;
  }

  .container{
    width:100% !important;
    padding-left:14px !important;
    padding-right:14px !important;
  }

  /* Inline 12-column grids are great on desktop but overflow on phones. */
  .app-main .grid[style*="repeat(12"],
  .app-main .grid[style*="repeat(6"],
  .app-main .grid[style*="grid-template-columns:repeat"],
  .app-main .help-grid,
  .app-main .reports-grid{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) !important;
    gap:14px !important;
    width:100% !important;
  }

  .app-main .grid[style*="repeat(12"] > *,
  .app-main .grid[style*="repeat(6"] > *,
  .app-main .grid[style*="grid-template-columns:repeat"] > *,
  .app-main .help-grid > *,
  .app-main .reports-grid > *{
    grid-column:1 / -1 !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .card,
  .panel,
  .kpi{
    overflow:hidden !important;
    border-radius:22px !important;
  }

  .card-body,
  .card-b{
    padding:16px !important;
  }

  .card-header,
  .card-h,
  .page-head,
  .reports-page-head{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:12px !important;
  }

  .card-header > *,
  .card-h > *,
  .page-head > *,
  .reports-page-head > *{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .h1,
  .h2,
  .h3,
  .p,
  .small,
  .mini,
  .kicker,
  .label,
  .badge,
  .btn,
  .link-btn,
  td,
  th{
    overflow-wrap:anywhere !important;
    word-break:normal !important;
    white-space:normal !important;
  }

  .h1{
    font-size:clamp(1.45rem, 7vw, 2rem) !important;
    line-height:1.08 !important;
    letter-spacing:-.035em !important;
  }

  .h2{
    font-size:clamp(1.22rem, 6vw, 1.62rem) !important;
    line-height:1.1 !important;
    letter-spacing:-.025em !important;
  }

  .p,
  .small{
    line-height:1.42 !important;
  }

  .btn,
  a.btn,
  button.btn{
    max-width:100% !important;
    min-width:0 !important;
    white-space:normal !important;
    text-align:center !important;
  }

  .form-actions,
  .tx-head-actions{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:10px !important;
    width:100% !important;
  }

  .form-actions .btn,
  .tx-head-actions .btn,
  .tx-head-actions .badge{
    width:100% !important;
  }

  /* Documents + Transactions filter/upload forms */
  .demo-filters,
  .tx-filters,
  .reports-filter-form,
  .card form .row,
  form .row{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) !important;
    gap:12px !important;
    width:100% !important;
  }

  .demo-filters > *,
  .tx-filters > *,
  .reports-filter-form > *,
  .card form .row > *,
  form .row > *{
    min-width:0 !important;
    width:100% !important;
    max-width:100% !important;
  }

  .input,
  select.input,
  textarea.input,
  input.input{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  /* Tables should scroll inside their wrapper, not push the page wider. */
  .tablewrap{
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
    border-radius:18px !important;
  }

  .tablewrap table,
  table.t{
    width:max-content !important;
    min-width:760px !important;
    max-width:none !important;
  }

  .tablewrap td,
  .tablewrap th{
    white-space:nowrap !important;
  }

  .tablewrap td .small,
  .tablewrap td .mini,
  .tablewrap td a,
  .tablewrap td button{
    white-space:normal !important;
  }

  /* Help page: compact, stacked cards that do not spill text. */
  .help-grid .card{
    min-height:auto !important;
  }

  .help-grid .card-body{
    padding:17px !important;
  }

  .help-grid .kicker{
    font-size:12px !important;
    line-height:1.15 !important;
    margin-bottom:6px !important;
  }

  .help-grid .h2{
    font-size:clamp(1.28rem, 6.2vw, 1.58rem) !important;
    line-height:1.1 !important;
    margin:0 !important;
  }

  .help-grid .small{
    font-size:14px !important;
    line-height:1.38 !important;
    margin:10px 0 14px !important;
  }

  .help-grid .btn{
    width:100% !important;
    justify-content:center !important;
  }
}

@media (max-width: 430px){
  .container{
    padding-left:12px !important;
    padding-right:12px !important;
  }

  .card-body,
  .card-b,
  .help-grid .card-body{
    padding:15px !important;
  }

  .h2,
  .help-grid .h2{
    font-size:1.3rem !important;
  }
}

/* =========================================================
   MOBILE FAB MENU FINAL HOTFIX
   - Keep quick-add button above bottom nav
   - Keep its menu above the button and inside the viewport
   - Prevent generic mobile card/grid overflow rules from crushing it
   - Mobile only; desktop untouched
   ========================================================= */
@media (max-width: 980px){
  .l2m-fab-wrap.l2m-fab-mobile,
  .l2m-fab-mobile{
    display:block !important;
    position:fixed !important;
    right:18px !important;
    left:auto !important;
    bottom:calc(var(--easy-mobile-nav-h, 66px) + 22px + var(--safe-b, env(safe-area-inset-bottom, 0px))) !important;
    width:62px !important;
    height:62px !important;
    min-width:62px !important;
    max-width:62px !important;
    overflow:visible !important;
    z-index:2147483300 !important;
    pointer-events:auto !important;
  }

  .l2m-fab-btn{
    appearance:none !important;
    -webkit-appearance:none !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:62px !important;
    height:62px !important;
    min-width:62px !important;
    min-height:62px !important;
    max-width:62px !important;
    max-height:62px !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    border-radius:999px !important;
    background:linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    color:#fff !important;
    font-size:38px !important;
    font-weight:800 !important;
    line-height:1 !important;
    box-shadow:0 18px 44px rgba(37,99,235,.42) !important;
    cursor:pointer !important;
    position:relative !important;
    z-index:2147483302 !important;
  }

  html[data-theme="dark"] .l2m-fab-btn{
    background:linear-gradient(135deg, #3b82f6, #2563eb) !important;
    box-shadow:0 18px 44px rgba(37,99,235,.50) !important;
  }

  #l2mFabMenu.l2m-fab-menu,
  .l2m-fab-menu.card{
    position:fixed !important;
    right:14px !important;
    left:auto !important;
    bottom:calc(var(--easy-mobile-nav-h, 66px) + 94px + var(--safe-b, env(safe-area-inset-bottom, 0px))) !important;
    width:min(280px, calc(100vw - 28px)) !important;
    min-width:0 !important;
    max-width:calc(100vw - 28px) !important;
    height:auto !important;
    max-height:calc(100dvh - 190px) !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
    border-radius:22px !important;
    background:#ffffff !important;
    color:#0f172a !important;
    border:1px solid rgba(15,23,42,.12) !important;
    box-shadow:0 24px 70px rgba(15,23,42,.30) !important;
    transform:none !important;
    z-index:2147483301 !important;
  }

  html[data-theme="dark"] #l2mFabMenu.l2m-fab-menu,
  html[data-theme="dark"] .l2m-fab-menu.card{
    background:#111827 !important;
    color:#f8fafc !important;
    border-color:rgba(255,255,255,.14) !important;
    box-shadow:0 24px 70px rgba(0,0,0,.50) !important;
  }

  .l2m-fab-menu .l2m-fab-menu-body,
  .l2m-fab-menu-body.card-body{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    padding:12px !important;
    margin:0 !important;
    overflow:visible !important;
    box-sizing:border-box !important;
  }

  .l2m-fab-menu-body .btn,
  .l2m-fab-menu-body a.btn{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    min-height:46px !important;
    padding:12px 14px !important;
    margin:0 !important;
    border-radius:16px !important;
    white-space:normal !important;
    overflow-wrap:break-word !important;
    text-align:left !important;
    box-sizing:border-box !important;
    line-height:1.15 !important;
  }

  /* Undo broad mobile overflow rules specifically inside the floating action menu. */
  .l2m-fab-menu *,
  .l2m-fab-menu-body *{
    max-width:100% !important;
    overflow:visible !important;
  }
}

@media (min-width: 981px){
  .l2m-fab-mobile{ display:none !important; }
}

/* =========================================================
   MOBILE GUTTER TIGHTEN HOTFIX
   Fixes the double-padding / "card inside card" feeling caused by
   both .app-main and .container adding side gutters on mobile.
   Desktop untouched.
   ========================================================= */
@media (max-width: 820px){
  :root{
    --easy-mobile-gutter: 10px;
  }

  /* Use one page gutter only. */
  .app-main{
    padding-left: var(--easy-mobile-gutter) !important;
    padding-right: var(--easy-mobile-gutter) !important;
    box-sizing: border-box !important;
  }

  /* Containers inside app-main should not add a second gutter. */
  .app-main .container,
  .app-main .container.app-container,
  .app-main .page-container,
  .app-main .content-container{
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Keep cards using the full available content width. */
  .app-main .card,
  .app-main .panel,
  .app-main .kpi,
  .app-main .hero,
  .app-main .tablewrap,
  .app-main .grid,
  .app-main .reports-grid,
  .app-main .help-grid{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Avoid the nested-table visual: table wrappers fill the card, not shrink inside it. */
  .app-main .card .tablewrap,
  .app-main .panel .tablewrap{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 430px){
  :root{
    --easy-mobile-gutter: 8px;
  }
}

/* =========================================================
   MOBILE THEME-AWARE LOGO MARK HOTFIX
   Replaces the mobile-only raster icon with a true SVG mask that
   inherits color from the current theme. Desktop untouched.
   ========================================================= */
@media (max-width: 980px){
  .app-brand{
    position:relative !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    color:#2563eb !important;
  }

  html[data-theme="dark"] .app-brand,
  body.dark-mode .app-brand{
    color:#f8fafc !important;
  }

  html[data-theme="light"] .app-brand,
  body.light-mode .app-brand{
    color:#2563eb !important;
  }

  /* Hide the old jpg/png/svg image only on mobile. The ::before mark below replaces it. */
  .app-brand .app-brand-logo{
    opacity:0 !important;
    visibility:hidden !important;
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    max-width:38px !important;
    border-radius:0 !important;
  }

  .app-brand::before{
    content:"" !important;
    position:absolute !important;
    inset:50% auto auto 50% !important;
    transform:translate(-50%, -50%) !important;
    width:38px !important;
    height:38px !important;
    display:block !important;
    background:currentColor !important;
    -webkit-mask:url('/assets/img/brand/easyleasey-mobile-mark.svg?v=20260502e') center / contain no-repeat !important;
    mask:url('/assets/img/brand/easyleasey-mobile-mark.svg?v=20260502e') center / contain no-repeat !important;
    pointer-events:none !important;
  }
}

@media (max-width: 390px){
  .app-brand::before{
    width:34px !important;
    height:34px !important;
  }
  .app-brand .app-brand-logo{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    max-width:34px !important;
  }
}


/* =========================================================
   EXACT EASYLEASEY MOBILE LOGO MARK
   Uses the icon cropped from the supplied official logo asset.
   Mobile only. Desktop untouched.
   ========================================================= */
@media (max-width: 980px){
  .app-brand::before{
    background: url('/assets/img/brand/easyleasey-mobile-mark.svg?v=20260502exact') center / contain no-repeat !important;
    -webkit-mask: none !important;
    mask: none !important;
  }
}

/* =========================================================
   EXACT EASYLEASEY MARK — THEME COLOR MODE
   Uses the exact uploaded logo mark as an alpha mask, so the
   icon keeps the correct shape but inherits the active theme color.
   Mobile only. Desktop untouched.
   ========================================================= */
@media (max-width: 980px){
  .app-brand{
    color:var(--accent, #2563eb) !important;
  }

  html[data-theme="dark"] .app-brand,
  body.dark-mode .app-brand{
    color:var(--accent, #93c5fd) !important;
  }

  html[data-theme="light"] .app-brand,
  body.light-mode .app-brand{
    color:var(--accent, #2563eb) !important;
  }

  .app-brand::before{
    background:currentColor !important;
    -webkit-mask:url('/assets/img/brand/easyleasey-mobile-mark.svg?v=20260502theme') center / contain no-repeat !important;
    mask:url('/assets/img/brand/easyleasey-mobile-mark.svg?v=20260502theme') center / contain no-repeat !important;
  }
}