/* mobile-nav.css — phone hamburger drawer for ProvidTime
   Active under max-width: 900px on both .ps-header (in-app) and .appbar (marketing).
   Hamburger button + drawer + backdrop are injected by /js/shared/mobile-nav.js. */

/* ──────────────────────────────────────────────────────────
   Hamburger trigger — hidden above 900px, visible below.
   ────────────────────────────────────────────────────────── */
.pt-hamburger{
  display:none;
  position:relative;
  width:40px;height:40px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22);
  border-radius:10px;
  color:#fff;cursor:pointer;
  align-items:center;justify-content:center;
  flex-shrink:0;padding:0;
  transition:background .15s;
}
.pt-hamburger:hover{background:rgba(255,255,255,.22);}
.pt-hamburger:focus-visible{outline:2px solid #fff;outline-offset:2px;}
.pt-hamburger svg{width:22px;height:22px;}

/* Marketing variant — header is light/white, hamburger needs visible bg */
.appbar .pt-hamburger{
  background:linear-gradient(135deg,#1b55db 0%,#1748b8 100%);
  border-color:rgba(255,255,255,.20);
  color:#fff;
}
.appbar .pt-hamburger:hover{
  background:linear-gradient(135deg,#2d65e8 0%,#1f55c8 100%);
}

/* Notification dot on hamburger when unread > 0 (in-app only) */
.pt-hamburger.has-alert::after{
  content:"";position:absolute;top:5px;right:5px;
  width:9px;height:9px;border-radius:50%;
  background:#ef4444;
  border:2px solid #083e7d;
}

/* ──────────────────────────────────────────────────────────
   Backdrop
   ────────────────────────────────────────────────────────── */
.pt-mobile-backdrop{
  position:fixed;inset:0;
  background:rgba(2,8,23,.45);
  z-index:9996;
  opacity:0;pointer-events:none;
  transition:opacity .22s ease-out;
}
.pt-mobile-backdrop.open{opacity:1;pointer-events:auto;}

/* ──────────────────────────────────────────────────────────
   Drawer
   ────────────────────────────────────────────────────────── */
.pt-mobile-drawer{
  position:fixed;
  top:var(--pt-banner-h,0);right:0;
  width:min(320px,88vw);
  height:100vh;
  height:calc(100dvh - var(--pt-banner-h,0px));
  max-height:calc(100vh - var(--pt-banner-h,0px));
  background:linear-gradient(180deg,#083e7d 0%,#0a58b0 100%);
  color:#fff;
  z-index:9997;
  transform:translateX(100%);
  transition:transform .22s ease-out;
  display:flex;flex-direction:column;
  box-shadow:-10px 0 30px rgba(0,0,0,.35);
  overscroll-behavior:contain;
  touch-action:pan-y;
}
.pt-mobile-drawer.open{transform:translateX(0);}

/* Marketing drawer — slightly darker tone for visual continuity with marketing pages */
.pt-mobile-drawer[data-source="marketing"]{
  background:linear-gradient(180deg,#061a35 0%,#0b3c7a 100%);
}

/* Drawer head — title + close button */
.pt-mobile-drawer__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,.12);
  flex-shrink:0;
}
.pt-mobile-drawer__title{
  font-weight:800;font-size:13px;
  text-transform:uppercase;letter-spacing:.8px;
  color:rgba(255,255,255,.85);
}
.pt-mobile-drawer__close{
  width:36px;height:36px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22);
  border-radius:8px;color:#fff;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;
  transition:background .15s;
}
.pt-mobile-drawer__close:hover{background:rgba(255,255,255,.22);}
.pt-mobile-drawer__close:focus-visible{outline:2px solid #fff;outline-offset:2px;}

/* Drawer body — scrolling list */
.pt-mobile-drawer__body{
  flex:1;overflow-y:auto;
  padding:6px 0;
  -webkit-overflow-scrolling:touch;
}

/* Divider */
.pt-mobile-drawer__divider{
  height:1px;background:rgba(255,255,255,.12);
  margin:6px 16px;
}

/* List items — uniform style for cloned anchors and buttons */
.pt-mobile-drawer__body a,
.pt-mobile-drawer__body button{
  display:flex;align-items:center;gap:14px;
  padding:14px 18px;
  color:#fff;text-decoration:none;
  font-size:15px;font-weight:700;line-height:1.2;
  background:transparent;border:0;border-left:3px solid transparent;
  width:100%;text-align:left;cursor:pointer;
  transition:background .15s,border-color .15s;
}
.pt-mobile-drawer__body a:hover,
.pt-mobile-drawer__body button:hover{background:rgba(255,255,255,.08);}
.pt-mobile-drawer__body a:focus-visible,
.pt-mobile-drawer__body button:focus-visible{
  outline:none;background:rgba(255,255,255,.14);
  border-left-color:rgba(255,255,255,.6);
}
.pt-mobile-drawer__body a.active,
.pt-mobile-drawer__body a[aria-current="page"]{
  background:rgba(255,255,255,.18);
  border-left-color:#fff;
}
.pt-mobile-drawer__body a svg,
.pt-mobile-drawer__body button svg{
  width:20px;height:20px;flex-shrink:0;
}
/* Reset cloned anchor styles inherited from .ps-nav (rounded pill etc.) */
.pt-mobile-drawer__body a{
  border-radius:0 !important;
  border:0 !important;border-left:3px solid transparent !important;
}
.pt-mobile-drawer__body a.active{
  border-left-color:#fff !important;
}
/* Force label visibility — .ps-nav hides .nav-label under 1280px */
.pt-mobile-drawer__body .nav-label{
  display:inline !important;
  font-size:15px !important;
}

/* Cloned right-side icon buttons (.ps-icon-btn, .ps-pill, .ps-logout-btn) shipped
   as 34×34 round centered buttons. Inside the drawer they need to act as full-width
   left-aligned list rows like the primary nav clones — strip the round-button shape. */
.pt-mobile-drawer__body .ps-icon-btn,
.pt-mobile-drawer__body .ps-pill,
.pt-mobile-drawer__body .ps-logout-btn{
  width:100% !important;
  height:auto !important;
  background:transparent !important;
  justify-content:flex-start !important;
  border-radius:0 !important;
}
.pt-mobile-drawer__body .ps-icon-btn:hover,
.pt-mobile-drawer__body .ps-pill:hover,
.pt-mobile-drawer__body .ps-logout-btn:hover{
  background:rgba(255,255,255,.08) !important;
}

/* Notification count chip on drawer notifications row */
.pt-mobile-drawer__count{
  margin-left:auto;
  min-width:22px;height:22px;
  background:#ef4444;color:#fff;border-radius:11px;
  padding:0 7px;
  font-size:11px;font-weight:800;
  align-items:center;justify-content:center;
  line-height:1;
  display:none;
}
.pt-mobile-drawer__count.has-count{display:inline-flex;}
/* Hide the original .count node when cloned into a drawer row (we render our own chip) */
.pt-mobile-drawer__body .count{display:none !important;}

/* Drawer footer — sticky at bottom; sign-out (in-app) or CTA (marketing) */
.pt-mobile-drawer__foot{
  padding:14px 16px;
  border-top:1px solid rgba(255,255,255,.12);
  flex-shrink:0;
  display:flex;flex-direction:column;gap:10px;
}
.pt-mobile-drawer__foot a,
.pt-mobile-drawer__foot button{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 16px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22);
  border-radius:12px;
  color:#fff;text-decoration:none;
  font-weight:800;font-size:14px;line-height:1;
  cursor:pointer;
  transition:background .15s,box-shadow .15s;
}
.pt-mobile-drawer__foot a:hover,
.pt-mobile-drawer__foot button:hover{background:rgba(255,255,255,.22);}

/* Marketing CTA — gradient like the original .btn-cta */
.pt-mobile-drawer__foot a.pt-cta-button{
  background:linear-gradient(135deg,#1b55db 0%,#1748b8 100%);
  border-color:rgba(255,255,255,.30);
  box-shadow:0 8px 22px rgba(11,60,122,.35);
}
.pt-mobile-drawer__foot a.pt-cta-button:hover{
  background:linear-gradient(135deg,#2d65e8 0%,#1f55c8 100%);
}

/* Body-scroll lock (iOS-correct: position:fixed plus negative top set via JS) */
body.pt-mobile-locked{
  position:fixed;left:0;right:0;width:100%;
  overflow:hidden;
}

/* ──────────────────────────────────────────────────────────
   Mobile breakpoint — show hamburger, collapse existing nav
   ────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .pt-hamburger{display:inline-flex;}

  /* In-app: hide nav and right-side icons; brand + hamburger only */
  .ps-header .ps-nav,
  .ps-header .ps-right{display:none !important;}
  header.ps-header{padding:12px 16px;flex-wrap:nowrap;}
  .ps-header .ps-brand{flex:1;min-width:0;}

  /* Marketing: hide nav; brand + hamburger only */
  .appbar > nav{display:none !important;}
  header.appbar{flex-wrap:nowrap;align-items:center;}
  .appbar .brand{flex:1;min-width:0;}
}

/* Override core.css's @480px column-stack — hamburger handles small phones */
@media (max-width:480px){
  header.appbar{flex-direction:row !important;}
  header.appbar > nav{width:auto !important;}
}

/* ──────────────────────────────────────────────────────────
   Print — hamburger and drawer are screen-only
   ────────────────────────────────────────────────────────── */
@media print{
  .pt-hamburger,
  .pt-mobile-drawer,
  .pt-mobile-backdrop{display:none !important;}
}