/* Heritage Walk-ins CRM - Responsive Styles */

/* Keep the desktop header exactly as before; this wrapper becomes navigation on phones. */
.mobile-nav{display:contents}

@media(max-width:760px){
  html{scroll-padding-bottom:78px}
  body{padding-bottom:0}
  .page{padding:9px 8px 84px!important}

  .header{
    position:sticky!important;
    top:0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:7px!important;
    padding:7px 9px!important;
  }
  .brand{min-width:0!important}
  .brand img{width:42px!important;height:38px!important}
  .brand h2{font-size:15px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .brand small{display:block!important;font-size:10px!important}
  .header-actions{
    display:grid!important;
    grid-template-columns:minmax(90px,.65fr) minmax(0,1.35fr)!important;
    gap:6px!important;
    width:100%!important;
  }
  .header-actions>#fixedOutletHeader,
  .header-actions>#crmSyncBadge{
    width:100%!important;
    min-width:0!important;
    min-height:30px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:5px 7px!important;
    font-size:10px!important;
    line-height:1.2!important;
    white-space:normal!important;
  }

  .mobile-nav{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    z-index:2000!important;
    display:grid!important;
    grid-auto-flow:column!important;
    grid-auto-columns:minmax(0,1fr)!important;
    gap:0!important;
    padding:0 max(5px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(5px,env(safe-area-inset-left))!important;
    background:#071f31!important;
    border-top:3px solid var(--portal-orange,#f5a623)!important;
    box-shadow:0 -8px 22px rgba(7,31,49,.2)!important;
  }
  .mobile-nav>.btn,
  .mobile-nav>.master-menu-wrap>.btn{
    width:100%!important;
    min-width:0!important;
    min-height:53px!important;
    padding:7px 4px!important;
    border:0!important;
    border-right:1px solid rgba(255,255,255,.15)!important;
    border-radius:0!important;
    background:transparent!important;
    color:#fff!important;
    font-size:11px!important;
    line-height:1.15!important;
    text-align:center!important;
  }
  .mobile-nav>.btn.gold,
  .mobile-nav>.master-menu-wrap>.btn[aria-expanded="true"]{
    background:#0b75ad!important;
    color:#fff!important;
  }
  .mobile-nav>.master-menu-wrap{position:relative!important;width:100%!important;min-width:0!important}
  .mobile-nav .master-menu-button{justify-content:center!important;gap:5px!important}
  .mobile-nav .master-menu-button span:first-child{font-size:18px!important}
  .mobile-nav .master-menu{
    position:absolute!important;
    left:0!important;
    right:auto!important;
    bottom:calc(100% + 8px)!important;
    top:auto!important;
    width:min(285px,calc(100vw - 16px))!important;
    min-width:0!important;
    max-height:min(70vh,520px)!important;
    overflow:auto!important;
  }
  .mobile-nav .master-menu button{min-height:44px!important}

  .stats,.master-live-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  .stat{min-width:0!important;padding:11px 10px!important}
  .stat span{font-size:10px!important;line-height:1.25!important}
  .stat b{font-size:20px!important;overflow-wrap:anywhere}

  .panel{border-radius:7px!important}
  .panel-head{padding:12px!important;gap:8px!important}
  .panel-head h3{font-size:17px!important}
  .panel-head small{font-size:11px!important}
  .panel-head>.badge{flex:0 0 auto!important}

  input,select,textarea,.btn,.icon{min-height:44px}
  #entryPanel .form{padding:11px!important;gap:9px!important}
  #entryPanel .two{display:grid!important;grid-template-columns:1fr!important;gap:9px!important}
  #entryPanel .field{min-width:0!important}
  #entryPanel input,#entryPanel select,#entryPanel textarea,
  #entryPanel .status-multi-button,#entryPanel .multi-select-button{font-size:16px!important}
  #entryPanel .compact-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
  #entryPanel .compact-actions>.btn:last-child:nth-child(odd){grid-column:1/-1}
  .status-multi-menu,.multi-select-menu{
    position:fixed!important;
    left:8px!important;
    right:8px!important;
    top:auto!important;
    bottom:66px!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    max-height:55vh!important;
    overscroll-behavior:contain!important;
  }
  .status-multi-option,.multi-select-option{min-height:44px!important}

  .toolbar,.filters,.report-filters{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
    padding:10px!important;
  }
  .toolbar>*,.filters>*,.report-filters>*{width:100%!important;min-width:0!important;font-size:16px!important}

  #entryView .table-wrap,.master-live-table-wrap{padding:7px!important}
  #entryView .entries-table,#entryView .entries-table tbody,
  #entryView .entries-table tr,#entryView .entries-table td{
    display:block!important;
    width:100%!important;
    min-width:0!important;
  }
  #entryView .entries-table thead{display:none!important}
  #entryView .entries-table tr{
    margin-bottom:10px!important;
    padding:8px 10px!important;
    border:1px solid #d7e0e5!important;
    border-top:4px solid var(--portal-blue,#0b75ad)!important;
    border-radius:5px!important;
    background:#fff!important;
  }
  #entryView .entries-table td{
    display:grid!important;
    grid-template-columns:92px minmax(0,1fr)!important;
    gap:8px!important;
    padding:7px 0!important;
    border-bottom:1px dashed #e1e8ec!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
  #entryView .entries-table td:last-child{border-bottom:0!important}
  #entryView .entries-table td:before{
    content:attr(data-label);
    font-size:10px;
    text-transform:uppercase;
    font-weight:800;
    color:var(--portal-blue-dark,#075a88);
  }
  #entryView .entries-table .row-actions{display:flex!important;gap:7px!important}
  #entryView .entries-table .row-actions button{flex:1!important;min-height:40px!important}

  .report-grid,.comparison-grid,.day-end-grid{grid-template-columns:1fr!important}
  .chart-box{height:260px!important;min-height:260px!important}
  .chart-box canvas{max-width:100%!important}
  .table-wrap,.compact-table-wrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
  .table-wrap table:not(.entries-table):not(.master-live-table),
  .compact-table{min-width:720px!important}
  .table-wrap:has(table:not(.entries-table):not(.master-live-table)),
  .compact-table-wrap{background:linear-gradient(90deg,#fff 94%,#e7f1f6)!important}

  .master-live-controls{display:grid!important;grid-template-columns:1fr!important;gap:7px!important}
  .master-live-controls>*{font-size:16px!important}
  .master-branch-daily-reports{padding:7px!important;gap:12px!important}
  .master-branch-report-header{align-items:flex-start!important;padding:10px!important;gap:8px!important}
  .master-branch-report-header h4{font-size:14px!important}
  .master-branch-badge{padding:7px 9px!important;font-size:11px!important}
  .master-branch-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .master-month-comparison{margin:6px 7px 14px!important}
  .master-month-controls{grid-template-columns:1fr!important;width:100%!important}

  .modal{padding:0!important;align-items:stretch!important}
  .modal-card{width:100%!important;height:100%!important;max-height:none!important;border-radius:0!important}
  .modal-head{padding:10px 12px!important;gap:8px!important}
  .admin-grid{grid-template-columns:1fr!important;padding:10px!important;gap:10px!important}
  .admin-card{padding:11px!important}
  .add-line{display:grid!important;grid-template-columns:1fr!important}
  .list-item{align-items:flex-start!important;flex-direction:column!important}
  .list-item>span:last-child{display:flex!important;width:100%!important;gap:7px!important}
  .list-item>span:last-child .icon{flex:1!important}
  .empty{padding:28px 12px!important}
}

@media(max-width:380px){
  .brand h2{font-size:14px!important}
  .header-actions{grid-template-columns:80px minmax(0,1fr)!important}
  .mobile-nav>.btn,.mobile-nav>.master-menu-wrap>.btn{font-size:10px!important}
  .stats,.master-live-stats{grid-template-columns:1fr 1fr!important}
}