/* =========================================================================
   PHONE DESIGN  (<= 640px)
   Loaded after styles.css and platform.css. Every rule is inside the phone
   media query, so the desktop layout, the print styles and the PDFs (which
   are drawn at desktop width) are untouched. It only re-dresses the same
   markup: no element is added, removed or renamed.
   ========================================================================= */
@media (max-width:640px){

  :root{ --ph-r:18px; --ph-r-sm:12px; --ph-gap:12px;
    --ph-card-shadow:0 1px 2px rgba(15,27,61,.05),0 8px 24px -18px rgba(15,27,61,.55); }

  /* ---- ground ---- */
  body{background:var(--bg);background-attachment:scroll}
  .wrap{padding:0 12px calc(92px + env(safe-area-inset-bottom,0px))}

  /* ---- masthead: one tidy bar, then a slim tool row ---- */
  .mast{background:linear-gradient(135deg,var(--brand-deep) 0%,#1B3A9C 55%,#2E56D3 100%);
    border-bottom:0;border-radius:0 0 20px 20px;box-shadow:0 12px 28px -22px rgba(4,10,32,.95)}
  .mast-in{padding:8px 12px 10px!important;gap:8px!important;row-gap:8px!important}
  .brandmark{margin-right:0;flex:none}
  .brandmark img{height:24px}
  .brandmark h1{display:none}
  .mast-in > .datefield{background:none;border:0;padding:0;justify-content:flex-end;gap:6px}
  .datefield .dstep{flex:1 1 auto;min-width:0;border-radius:12px;background:rgba(255,255,255,.13);
    border-color:rgba(255,255,255,.22);overflow:hidden}
  .datefield .dstep .dnav{display:inline-flex;align-items:center;justify-content:center;width:34px;flex:none;font-size:18px}
  .datefield .dstep .dpbtn{flex:1 1 auto;min-width:0!important;min-height:38px;padding:0 6px;font-size:13.5px;justify-content:center}
  .datefield .dptoday{min-height:38px;padding:0 12px;border-radius:12px;font-size:12.5px;font-weight:700;flex:none}
  .gx-av,.mast .signout{width:38px;height:38px;border-radius:12px}
  .statepill{flex:none}
  .statepill i{width:8px;height:8px}

  .undobox{border-radius:11px;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}
  .undobtn{height:34px!important;min-width:40px;padding:0 10px!important}
  .dlpill{height:34px!important;border-radius:11px;font-size:12px!important;
    background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}
  .mastpdf{height:34px!important;min-width:44px;border-radius:11px}

  /* ---- month header ---- */
  .hero{padding:14px 2px 4px;border-bottom:0}
  .hero-top{gap:8px;margin-bottom:10px}
  .hero-top h2{font-size:24px}
  .herotgt{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--ph-r-sm);
    padding:4px 4px 4px 12px;box-shadow:var(--ph-card-shadow)}
  .herotgt label{flex:none;font-size:10.5px}
  .herotgt select{border:0;background-color:transparent;min-height:36px;text-align:right;font-weight:600}
  .pace{border-radius:var(--ph-r-sm);font-size:12px;padding:9px 12px}

  /* the two big figures sit side by side, like a phone dashboard */
  .meters{grid-template-columns:1fr 1fr!important;gap:10px}
  .meter{border-radius:var(--ph-r);padding:12px 12px 11px 15px;box-shadow:var(--ph-card-shadow);border-color:var(--line-soft)}
  .meter::before{width:4px}
  .meter h3{font-size:10px}
  .meter .big{display:block;font-size:22px;margin-top:4px}
  .meter .big span{display:block;font-size:11px;margin-top:3px;font-weight:500}
  .meter .track{height:6px;margin:10px 0 7px}
  .meter .sub{flex-direction:column;gap:2px;font-size:10.5px}
  .meter .sub > span:last-child{text-align:left;font-weight:700}

  /* ---- cards: one family of rounded, lightly lifted surfaces ---- */
  .card,.perfcard,.mgrcard,.ckcard,.strip-shell{border-radius:var(--ph-r)!important;border-color:var(--line-soft);
    box-shadow:var(--ph-card-shadow)}
  .card + .card{margin-top:var(--ph-gap)}
  .card-hd{padding:14px 14px 12px;background:none;border-bottom-color:var(--line-soft)}
  .card-hd h3{font-size:16.5px}
  .card-hd p{font-size:12px;color:var(--muted)}
  .card-bd{padding:12px 14px}
  .perfcard{padding:14px}

  /* filters and buttons: 44px to tap, calmer colours */
  .toolbar select,.toolbar input,.card-hd .toolbar > select,.card-hd .toolbar > .btn{min-height:44px;border-radius:var(--ph-r-sm)}
  .btn{border-radius:var(--ph-r-sm)}
  /* a PDF download is a side action on a phone: outlined, not a big blue slab */
  .btn.primary.pdfbtn{background:var(--surface);color:var(--brand);border:1px solid var(--line);
    box-shadow:none;min-height:42px;font-weight:600}
  .card-hd .toolbar > .btn{grid-column:1/-1}
  .dchip{min-height:36px;padding:6px 14px;font-size:13px}
  .btn.primary.pdfbtn:hover{border-color:var(--brand);background:var(--brand-soft)}

  /* stat tiles */
  .kpis{gap:8px;padding:12px 14px 4px}
  .kpi{border-radius:14px;border-color:var(--line-soft);padding:11px 12px}
  .kpi b{font-size:18px}

  /* ---- folded tables (salary, reports, leads…): compact label / value lists ---- */
  .tablescroll tr{margin:10px 12px!important;border-radius:16px!important;border-color:var(--line-soft)!important;
    box-shadow:0 1px 2px rgba(15,27,61,.04)}
  .tablescroll td{padding:7px 14px!important;min-height:34px!important;font-size:13.5px;border-bottom-color:var(--line-soft)}
  .tablescroll td::before{font-size:10px!important;font-weight:600;color:var(--muted)}
  .tablescroll td input,.tablescroll td select{min-height:38px;border-radius:10px}
  /* the serial number is a small tag, not a dark block */
  .tablescroll:not(.keepwide) td.sl{background:var(--brand-soft)!important;color:var(--brand)!important;
    border-radius:0 0 12px 0;padding:5px 12px!important;font-size:11px!important;min-height:0!important}
  .tablescroll:not(.keepwide) td.sl::before{color:var(--brand)!important;opacity:.7}
  .tablescroll tfoot tr{border-color:var(--brand-2)!important}

  /* Day by day: long column names wrap instead of being cut off */
  #daywrap.keepwide #tbl-days th{white-space:normal;line-height:1.2;vertical-align:bottom}

  /* group headings */
  .secbar{padding:0 12px 10px}
  .secchip{min-height:36px;border-radius:99px;padding:7px 14px;font-size:13px}

  /* ---- daily entry cards ---- */
  #rows-entry{padding:10px 10px 12px;gap:10px}
  .rows .row{border-radius:16px;border-color:var(--line-soft);padding:12px}
  .rows .inp input.v{border-radius:12px}
  .lockbar{margin:0 12px 10px;border-radius:var(--ph-r-sm)}
  .daysum{border-radius:14px}

  /* ---- bottom navigation: docked to the edge, icon on a soft pill ---- */
  .tabs{left:0!important;right:0!important;bottom:0!important;inset-inline:0!important;
    border-radius:18px 18px 0 0!important;border:0!important;border-top:1px solid var(--line)!important;
    padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px))!important;
    box-shadow:0 -10px 30px -22px rgba(4,10,32,.7)!important}
  .tabs button{padding:3px 0 2px!important;gap:3px;border-radius:0;font-size:9.5px;font-weight:600;color:var(--muted);
    background:none!important;box-shadow:none!important}
  .tabs button .tic{display:inline-flex;align-items:center;justify-content:center;width:40px!important;height:28px!important;
    border-radius:99px;transition:background .15s}
  .tabs button .tic svg{width:20px!important;height:20px!important}
  .tabs button[aria-selected="true"]{color:var(--ink)!important;font-weight:700;background:none!important;box-shadow:none!important}
  .tabs button[aria-selected="true"] .tic{background:color-mix(in srgb,var(--tc) 18%,transparent)}

  .toast{bottom:calc(80px + env(safe-area-inset-bottom,0px))}
  .panel:not([hidden]){min-height:calc(100vh - 140px)}
}

@media (max-width:370px){
  .datefield .dstep .dnav{width:28px}
  .datefield .dptoday{padding:0 9px}
  .meter .big{font-size:19px}
  .tabs button{font-size:8.5px}
  .tabs button .tic{width:34px!important}
}