/* ═══════════════════════════════════════════════════════════
   RahoFree ERP — Global Responsive CSS v4.0
   iPhone 13 Pro (390px) tested — all class names verified
   ═══════════════════════════════════════════════════════════ */

*{-webkit-tap-highlight-color:transparent;}

/* ════════════════════════════════════════════════════
   DASHBOARD — sidebar overlay + topbar fix
   ════════════════════════════════════════════════════ */
@media(max-width:768px){
  body{overflow:hidden!important;}
  
  /* Sidebar = full overlay */
  #sidebar{
    position:fixed!important;left:-280px!important;top:0;bottom:0;
    width:260px!important;z-index:1000;
    transition:left .28s cubic-bezier(.4,0,.2,1)!important;
    box-shadow:4px 0 40px rgba(0,0,0,.6)!important;
  }
  #sidebar.open{left:0!important;}
  #sb-backdrop{
    display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);
    z-index:999;backdrop-filter:blur(2px);
  }
  #sb-backdrop.show{display:block;}

  /* Topbar: hamburger + scrollable middle + AY button only */
  .topbar{
    overflow:visible!important;
    padding:0 8px!important;gap:6px!important;
    height:50px!important;
  }
  /* Hamburger */
  #menuBtn{
    display:flex!important;align-items:center;justify-content:center;
    width:36px;height:36px;min-width:36px;
    background:rgba(255,255,255,.12);border:none;border-radius:8px;
    color:#fff;font-size:20px;cursor:pointer;flex-shrink:0;font-family:inherit;
  }
  /* Middle nav items hide on mobile - use sidebar instead */
  .topbar .tn:not(.active){display:none!important;}
  .topbar .tn.active{
    font-size:13px!important;font-weight:700!important;
    flex:1!important;justify-content:center!important;
  }
  /* tn-right: keep AY + company visible */
  .tn-right{
    margin-left:0!important;flex-shrink:0!important;gap:6px!important;
  }
  .company-chip span{display:none!important;}/* hide company name, keep icon */
  .company-chip{padding:4px 8px!important;}
  
  /* AY dropdown opens downward properly */
  #ayDrop,#coDrop{
    right:0!important;left:auto!important;
    max-width:220px!important;
    z-index:9999!important;
  }

  /* Content */
  .content{padding:10px!important;}

  /* Stats — 2 col */
  .stats-row{grid-template-columns:1fr 1fr!important;gap:8px!important;margin-bottom:14px!important;}
  .stat-card{padding:10px 8px!important;border-radius:10px!important;}
  .stat-val{font-size:17px!important;}
  .stat-label{font-size:9px!important;}
  .stat-sub{font-size:10px!important;}

  /* Module grid — 2 col */
  .module-grid,.module-grid.cols4,.module-grid.cols3,.module-grid.cols5{
    grid-template-columns:1fr 1fr!important;gap:8px!important;
  }
  .mod-card{padding:12px 6px 10px!important;border-radius:10px!important;}
  .mod-icon{width:38px!important;height:38px!important;font-size:17px!important;}
  .mod-title,.mod-label{font-size:11px!important;}
  .mod-sub{font-size:9.5px!important;}
  .section-title{font-size:11.5px!important;padding:10px 0 5px!important;}
}
@media(min-width:769px){
  #menuBtn{display:none!important;}
  #sb-backdrop{display:none!important;}
}

/* ════════════════════════════════════════════════════
   TOPNAV — invoice + report pages
   ════════════════════════════════════════════════════ */
@media(max-width:768px){
  .topnav{
    overflow-x:auto!important;overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;flex-wrap:nowrap!important;
    height:auto!important;min-height:44px!important;
    padding:0 4px!important;gap:0!important;
  }
  .topnav::-webkit-scrollbar{display:none!important;}
  .topnav .tn,.topnav a.tn{
    font-size:11px!important;padding:0 8px!important;
    white-space:nowrap!important;flex-shrink:0!important;
    min-height:44px!important;
  }
  /* Topnav action buttons */
  .topnav-actions{gap:4px!important;padding:0 4px!important;flex-shrink:0!important;}
  .tna{padding:5px 8px!important;font-size:11px!important;white-space:nowrap!important;}
  /* Hide keyboard hints */
  .tna>span:last-child{display:none!important;}
  .tna i+span:not(.kbd){display:none!important;}
}

/* ════════════════════════════════════════════════════
   TOP-MENU — item-master style pages
   ════════════════════════════════════════════════════ */
@media(max-width:768px){
  .top-menu{
    overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;flex-wrap:nowrap!important;
    height:auto!important;min-height:40px!important;padding:0 2px!important;
  }
  .top-menu::-webkit-scrollbar{display:none!important;}
  .tm{font-size:11px!important;padding:0 8px!important;white-space:nowrap!important;flex-shrink:0!important;}
}

/* ════════════════════════════════════════════════════
   SALES / PURCHASE INVOICE
   body(flex col) > topnav > vheader > party-row > 
   items-section > bottom-section > statusbar
   ════════════════════════════════════════════════════ */
@media(max-width:768px){

  /* Voucher header */
  .vheader{flex-wrap:wrap!important;gap:4px!important;padding:5px 8px!important;}
  .vtype-switch{flex-wrap:wrap!important;gap:2px!important;}
  .vts{font-size:10px!important;padding:3px 7px!important;}
  .vtype-pill{font-size:10px!important;padding:2px 7px!important;}
  .date-wrap input[type="date"]{width:120px!important;font-size:11px!important;}
  .vno-badge{font-size:11px!important;padding:3px 8px!important;}
  .vheader-right{width:100%!important;justify-content:flex-end!important;gap:4px!important;flex-wrap:wrap!important;}
  .ref-input{width:90px!important;}

  /* Party row */
  .party-row{flex-wrap:wrap!important;gap:5px!important;padding:5px 8px!important;align-items:flex-start!important;}
  .pr-field{width:100%!important;flex:none!important;min-width:0!important;}
  .party-select-wrap{width:100%!important;}
  .party-sel,.pr-field select{width:100%!important;}
  .pr-sep{display:none!important;}
  .ledger-sel,.supply-sel{width:calc(50% - 3px)!important;min-width:0!important;}
  /* Quick add row */
  .pr-field[style*="flex-shrink:0"]{overflow-x:auto!important;width:100%!important;-webkit-overflow-scrolling:touch!important;}

  /* Items table — CRITICAL: must scroll horizontally */
  .items-section{overflow:visible!important;flex:none!important;height:200px!important;}
  .items-table-wrap{
    overflow-x:auto!important;overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    height:200px!important;
  }
  table.inv-table{min-width:600px!important;}
  table.inv-table th,table.inv-table td{font-size:10px!important;padding:0 3px!important;}
  .ci{font-size:10.5px!important;padding:4px 3px!important;}

  /* Item dropdown — full width on mobile */
  .item-dropdown{
    min-width:90vw!important;max-width:95vw!important;
    left:5vw!important;right:5vw!important;
    font-size:12px!important;
  }
  .idd-name{font-size:12px!important;}
  .idd-sub{font-size:10px!important;}

  /* Bottom section */
  .bottom-section,.bottomSection{flex-wrap:wrap!important;}
  .narration-wrap{
    flex:1 1 100%!important;border-right:none!important;
    border-bottom:1px solid #e2e8f0!important;padding:5px 8px!important;
  }
  .narration-input{height:34px!important;font-size:12px!important;}
  .totals-wrap{width:100%!important;padding:5px 10px!important;}
  .total-row{font-size:11.5px!important;padding:2px 0!important;}
  .grand-total-row{margin-top:3px!important;padding:6px 10px!important;}
  .grand-total-row .gtv{font-size:14px!important;}
  .payment-wrap{
    width:100%!important;border-left:none!important;
    border-top:1px solid #e2e8f0!important;padding:6px 8px!important;
  }
  .pay-btns{grid-template-columns:repeat(4,1fr)!important;gap:3px!important;}
  .pay-btn{font-size:11px!important;padding:4px 2px!important;}

  /* Status bar */
  .statusbar{font-size:9px!important;padding:2px 6px!important;}
}

/* ════════════════════════════════════════════════════
   SALES / PURCHASE REPORT
   ════════════════════════════════════════════════════ */
@media(max-width:768px){
  /* Title bar */
  .titlebar{flex-wrap:wrap!important;padding:6px 10px!important;gap:5px!important;}
  .titlebar h1{font-size:12px!important;}
  .actions{flex-wrap:wrap!important;gap:3px!important;}
  .tbtn{font-size:11px!important;padding:4px 8px!important;}

  /* Filter bar */
  .filterbar{
    flex-wrap:wrap!important;padding:5px 8px!important;gap:5px!important;
    overflow:visible!important;
  }
  /* Quick date buttons — scroll */
  .filterbar>div:first-child{
    width:100%!important;display:flex!important;
    overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;flex-wrap:nowrap!important;
    gap:4px!important;
  }
  .filterbar>div:first-child::-webkit-scrollbar{display:none!important;}
  .qpbtn{white-space:nowrap!important;flex-shrink:0!important;font-size:11px!important;padding:3px 7px!important;}
  /* Filter inputs — 2 per row */
  .fb-input{flex:1 1 calc(50% - 5px)!important;min-width:0!important;font-size:11.5px!important;}
  .fb-label{font-size:10.5px!important;white-space:nowrap!important;}
  .fb-sep{display:none!important;}
  /* Search full width */
  input#searchInput{flex:1 1 100%!important;width:100%!important;}

  /* Table */
  #tableWrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;}
  #mainTable,.report-table{min-width:640px!important;}
  #mainTable th,#mainTable td,.report-table th,.report-table td{
    font-size:11px!important;padding:5px 7px!important;white-space:nowrap!important;
  }

  /* Detail panel fullscreen */
  .detail-panel,.detailPanel{
    position:fixed!important;inset:0!important;z-index:500!important;
    width:100%!important;max-width:100%!important;border-left:none!important;
  }
  .dp-topbar{padding:10px 12px!important;}
}

/* ════════════════════════════════════════════════════
   CASH & BANK (accounts.html)
   ════════════════════════════════════════════════════ */
@media(max-width:768px){
  /* vtabs scroll */
  .vtabs{
    overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;flex-wrap:nowrap!important;
  }
  .vtabs::-webkit-scrollbar{display:none!important;}
  .vtab{white-space:nowrap!important;flex-shrink:0!important;font-size:11.5px!important;padding:8px 10px!important;}
  .fk{display:none!important;}

  /* Stack form + report vertically */
  .main-wrap{flex-direction:column!important;overflow:auto!important;height:auto!important;}
  .form-panel{
    width:100%!important;max-height:none!important;
    border-right:none!important;border-bottom:2px solid #e2e8f0!important;
    overflow:visible!important;height:auto!important;
  }
  .form-panel.collapsed{max-height:0!important;overflow:hidden!important;border-bottom:none!important;}
  .report-panel{flex:1!important;overflow:auto!important;min-height:300px!important;}
  
  /* Toggle button */
  .panel-toggle-btn{
    position:fixed!important;right:14px!important;bottom:20px!important;
    left:auto!important;top:auto!important;transform:none!important;
    width:42px!important;height:42px!important;border-radius:50%!important;z-index:100!important;
  }

  /* Form fields */
  .fp-body{padding:10px!important;overflow:visible!important;}
  .frow{flex-wrap:wrap!important;gap:6px!important;}
  .frow>*{width:100%!important;flex:none!important;}

  /* Report area */
  .rp-filters{flex-wrap:wrap!important;gap:5px!important;padding:6px 8px!important;}
  .rfi{flex:1 1 calc(50% - 5px)!important;min-width:0!important;font-size:12px!important;}
  input#rSearch{flex:1 1 100%!important;}
  .sum-strip{overflow-x:auto!important;flex-wrap:nowrap!important;scrollbar-width:none!important;}
  .sum-strip::-webkit-scrollbar{display:none!important;}
  .sc{flex-shrink:0!important;min-width:90px!important;}
  .table-wrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;}
  .table-wrap table{min-width:550px!important;font-size:11.5px!important;}
}

/* ════════════════════════════════════════════════════
   ITEM MASTER (item-master.html)
   ════════════════════════════════════════════════════ */
@media(max-width:768px){
  .screen-wrap{flex-direction:column!important;overflow:auto!important;height:auto!important;}
  .main-panel{overflow:visible!important;height:auto!important;}
  .title-bar{padding:8px 12px!important;}
  .title-bar h2{font-size:13px!important;}
  .toolbar{flex-wrap:wrap!important;gap:4px!important;padding:5px 8px!important;overflow:visible!important;}
  .tbtn{font-size:11px!important;padding:4px 8px!important;}
  .filter-wrap{overflow-x:auto!important;flex-wrap:nowrap!important;scrollbar-width:none!important;}
  .filter-wrap::-webkit-scrollbar{display:none!important;}
  .fbtn{white-space:nowrap!important;flex-shrink:0!important;font-size:11px!important;padding:3px 8px!important;}
  .hint-bar{padding:4px 8px!important;}
  /* Stack list + form */
  .content-area{flex-direction:column!important;overflow:visible!important;}
  .list-panel{
    width:100%!important;max-height:220px!important;min-height:150px!important;
    border-right:none!important;border-bottom:2px solid #e2e8f0!important;
    overflow-y:auto!important;flex-shrink:0!important;
  }
  #itemList{max-height:170px!important;overflow-y:auto!important;}
  .form-wrap,#formWrap{overflow:auto!important;}
}

/* ════════════════════════════════════════════════════
   STOCK REPORT (stock-report.html)
   ════════════════════════════════════════════════════ */
@media(max-width:768px){
  /* Filter bar */
  .fbar{
    flex-wrap:wrap!important;padding:5px 8px!important;gap:5px!important;
    overflow:visible!important;
  }
  .fbar .fi{flex:1 1 calc(50% - 5px)!important;min-width:0!important;font-size:11.5px!important;}
  .fbar input.fi{flex:1 1 100%!important;}
  .fbar .fl{font-size:10px!important;white-space:nowrap!important;}
  .fbtn{font-size:11px!important;padding:4px 8px!important;}

  /* Summary cards — scroll horizontally */
  .scards{
    overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;flex-wrap:nowrap!important;
    padding:6px 8px!important;gap:6px!important;
  }
  .scards::-webkit-scrollbar{display:none!important;}
  .sc0,.sc1,.sc2,.sc3,.sc4,.sc5,.sc6,.sc7,.sc8{
    flex-shrink:0!important;min-width:80px!important;
    border-radius:8px!important;padding:8px 6px!important;
  }
  .sc-v{font-size:14px!important;}
  .sc-l{font-size:9px!important;}

  /* Main table area — MUST be scrollable */
  .main-area{overflow:visible!important;flex:none!important;}
  .tw{
    overflow-x:auto!important;overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    max-height:calc(100vh - 280px)!important;
  }
  .tw table{min-width:580px!important;}
  .tw th,.tw td{font-size:11px!important;padding:6px 7px!important;white-space:nowrap!important;}

  /* Detail panel */
  .detail-panel,.detailPanel{
    position:fixed!important;inset:0!important;z-index:500!important;
    width:100%!important;border-left:none!important;
  }
  .dp-header{padding:10px 12px!important;}
}

/* ════════════════════════════════════════════════════
   MODALS
   ════════════════════════════════════════════════════ */
@media(max-width:768px){
  #ewayModal{padding:6px!important;}
  .eway-modal{
    width:100%!important;max-width:100%!important;
    max-height:92vh!important;border-radius:14px!important;
  }
  .eway-modal-hd{padding:10px 12px!important;flex-wrap:wrap!important;gap:5px!important;}
  .eway-tabs{flex-wrap:wrap!important;gap:3px!important;width:100%!important;margin-left:0!important;}
  .eway-tab-btn{font-size:11px!important;padding:4px 8px!important;}
  .eway-modal-body{padding:10px 12px!important;}
  .eway-grid.col2,.eway-grid.col3{grid-template-columns:1fr!important;}
  .eway-modal-ft{flex-wrap:wrap!important;gap:4px!important;padding:8px 12px!important;}
  .eway-btn{font-size:11px!important;padding:6px 10px!important;}
}

/* ════════════════════════════════════════════════════
   GLOBAL
   ════════════════════════════════════════════════════ */
@media(max-width:768px){
  .toast{bottom:70px!important;max-width:90vw!important;font-size:12px!important;}
  .del-btn{min-width:34px!important;min-height:34px!important;}
  .recent-section{max-height:100px!important;}
  .recent-section .recent-table{overflow-x:auto!important;}
  table.rt{min-width:460px!important;font-size:11px!important;}
  .statusbar{font-size:9px!important;padding:2px 6px!important;}
}

/* Safe area (iPhone notch) */
@supports(padding:env(safe-area-inset-bottom)){
  .statusbar,.bottom-bar{padding-bottom:max(2px,env(safe-area-inset-bottom))!important;}
}
@media(hover:none){
  .idd-item:hover{background:transparent!important;}
}