/* Jurisbooks on a phone. Everything here applies only on a narrow screen; on a wide browser window the
   program looks exactly as it does on the computer. Print and PDF pages are never touched. */
#jbmBar,#jbmBackdrop,#jbmMenuBtn,#jbmSheet{display:none;}

@media screen and (max-width:820px){
  html,body{overscroll-behavior-y:none;}
  body{font-size:15px;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;}
  #app{flex-direction:column;height:100vh;height:100dvh;}

  /* the menu becomes a drawer that slides in from the left */
  #sidebar{position:fixed;top:0;bottom:0;left:0;width:min(84vw,310px);z-index:1200;transform:translateX(-104%);
    transition:transform .2s ease;box-shadow:6px 0 30px rgba(0,0,0,.35);padding-top:env(safe-area-inset-top);}
  body.jbm-drawer #sidebar{transform:none;}
  #sidebar .brand{padding:16px;font-size:19px;}
  #sidebar nav a{padding:13px 18px;font-size:15px;}
  #sidebar nav a.nav-subaction{display:none;}
  #sidebar .foot{font-size:13px;line-height:1.8;}
  #sidebar .foot a{display:inline-block;padding:6px 2px;border:none;color:#dbe6f0 !important;font-size:14px;text-decoration:underline;}
  #sidebar #appVersionFoot{padding-bottom:calc(12px + env(safe-area-inset-bottom));}
  #app{overflow:hidden;}
  #main{min-height:0;}
  #jbmBackdrop{position:fixed;inset:0;background:rgba(10,20,35,.5);z-index:1150;}
  body.jbm-drawer #jbmBackdrop,body.jbm-sheet #jbmBackdrop{display:block;}

  /* top bar: menu button + the business name */
  #topbar{padding:10px 12px;padding-top:calc(10px + env(safe-area-inset-top));flex-wrap:nowrap;justify-content:flex-start;gap:10px;}
  #topbar .cmdk-pill,#topbar .jb-support{display:none;}
  #topbar .co{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1;}
  #topbar .co small{overflow:hidden;text-overflow:ellipsis;}
  #jbmMenuBtn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex:0 0 40px;border:none;border-radius:10px;
    background:var(--navy);color:#fff;font-size:20px;line-height:1;padding:0;}
  #actionbar{display:none;}

  /* the page */
  #content{padding:12px 12px calc(86px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch;}
  h1.page-title{font-size:18px;}
  .card{padding:12px;margin-bottom:12px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .grid{gap:10px;}
  .grid-4,.grid-3{grid-template-columns:repeat(2,1fr);}
  .grid-2{grid-template-columns:1fr;}
  input,select,textarea{font-size:16px !important;}      /* smaller text makes a phone zoom the page on every tap */
  button,.btn,.btn-accent,.btn-outline{min-height:40px;}
  .btn-sm{min-height:34px;}

  /* bottom bar */
  #jbmBar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:1100;background:#fff;border-top:1px solid var(--border);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -4px 18px rgba(18,40,63,.08);}
  #jbmBar button{flex:1;background:none;border:none;color:var(--muted);font-size:11px;font-weight:600;display:flex;flex-direction:column;
    align-items:center;gap:2px;padding:4px 0;min-height:48px;border-radius:10px;}
  #jbmBar button .ic{font-size:20px;line-height:1.1;}
  #jbmBar button.on{color:var(--accent);}
  #jbmBar button.new .ic{background:var(--accent);color:#fff;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;
    justify-content:center;font-size:28px;margin-top:-22px;box-shadow:0 6px 16px rgba(14,124,102,.4);}

  /* "+ New" sheet */
  body.jbm-sheet #jbmSheet{display:block;position:fixed;left:0;right:0;bottom:0;z-index:1200;background:#fff;border-radius:18px 18px 0 0;
    padding:14px 14px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -10px 40px rgba(0,0,0,.3);}
  #jbmSheet h3{margin:2px 4px 12px;font-size:15px;color:var(--navy);}
  #jbmSheet .opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  #jbmSheet .opts button{border:none;color:#fff;font-weight:700;font-size:14.5px;padding:16px 10px;border-radius:12px;text-align:left;}

  body.jbm-busy #jbmBar{display:none;}      /* a form or the sign-in is open: the whole screen is its own */

  /* wide lists: one small card per row, each value with its heading (mobile.js puts the heading in data-label) */
  table.jbm-cards,table.jbm-cards tbody{display:block;width:100%;min-width:0 !important;}
  table.jbm-cards thead{display:none;}
  table.jbm-cards tr{display:block;border:1px solid var(--border);border-radius:10px;padding:8px 10px;margin:0 0 10px;background:#fff;}
  table.jbm-cards td{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:3px 0 !important;border:none !important;
    text-align:right !important;white-space:normal !important;width:auto !important;min-width:0 !important;}
  table.jbm-cards td::before{content:attr(data-label);flex:0 0 auto;max-width:45%;text-align:left;color:var(--muted);font-size:11.5px;font-weight:700;
    text-transform:uppercase;letter-spacing:.02em;}
  table.jbm-cards td[data-label=""]{justify-content:flex-end;flex-wrap:wrap;}
  table.jbm-cards td[data-label=""]::before{display:none;}
  table.jbm-cards td:empty{display:none;}
  table.jbm-cards tfoot,table.jbm-cards tfoot tr{display:block;}
  .table-wrap{overflow-x:auto;}

  /* the lines of a bill: one card per line - item on top, then note, then qty / rate / tax, amount at the bottom */
  table.jbm-lines,table.jbm-lines tbody{display:block;width:100%;min-width:0 !important;}
  table.jbm-lines thead{display:none;}
  table.jbm-lines tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 40px;gap:8px;align-items:end;border:1px solid var(--border);
    border-radius:12px;padding:10px;margin:0 0 10px;background:#f8fafc;}
  table.jbm-lines td{display:block;padding:0 !important;border:none !important;min-width:0 !important;width:auto !important;}
  table.jbm-lines td input,table.jbm-lines td select{width:100%;min-width:0;}
  table.jbm-lines td::before{content:attr(data-label);display:block;color:var(--muted);font-size:11px;font-weight:700;margin-bottom:2px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  table.jbm-lines td:first-child{grid-column:1 / 4;}
  table.jbm-lines td:first-child::before,table.jbm-lines td:has(.ln-desc)::before,table.jbm-lines td:has(.remove-line)::before{display:none;}
  table.jbm-lines td:has(.remove-line){grid-column:4;grid-row:1;align-self:center;text-align:right;}
  table.jbm-lines td:has(.ln-desc){grid-column:1 / -1;}
  table.jbm-lines td.ln-amt{grid-column:1 / -1;text-align:right;font-weight:700;font-size:15px;display:flex;justify-content:space-between;align-items:baseline;}
  table.jbm-lines td.ln-amt::before{margin:0;}
  .remove-line{min-width:36px;min-height:36px;}

  /* forms and pop-ups use the whole screen */
  .modal-overlay{padding:0 !important;align-items:stretch !important;}
  .modal-overlay .modal{max-width:100% !important;width:100% !important;border-radius:0;margin:0;min-height:100%;padding:16px 14px calc(24px + env(safe-area-inset-bottom));}
  .modal-overlay.panel .modal{min-height:0;padding:14px 12px;border-radius:var(--radius);}
  .pbody{padding:10px 10px calc(24px + env(safe-area-inset-bottom));}
  .form-grid,.form-grid.c2,.form-grid.c4{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .btn-row{flex-wrap:wrap;}
}