/* ============================================================
   mobile.css — LRES-UK Mobile Capture Shell (S13.1)
   Touch-first, v3 brand tokens, no desktop chrome.
   ============================================================ */

/* ── CSS custom properties (v3 brand tokens) ─────────────────────────────── */
:root {
  --v3-green:       #009A42;
  --v3-green-deep:  #064a23;
  --v3-green-light: #4ade80;
  --v3-anthracite:  #1F2937;
  --v3-anthracite2: #111827;
  --v3-text:        #F9FAFB;
  --v3-muted:       #9CA3AF;
  --v3-border:      rgba(255,255,255,.12);
  --v3-danger:      #EF4444;
  --v3-amber:       #F59E0B;

  /* Touch targets — WCAG 2.5.5 recommends 44×44px minimum */
  --tap-min: 48px;
}

/* ── Reset / base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overscroll-behavior: none;         /* prevent pull-to-refresh on capture screens */
  -webkit-tap-highlight-color: transparent;
}

body.mobile-shell {
  background: var(--v3-anthracite2);
  color: var(--v3-text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;                /* dynamic viewport height — accounts for mobile browser chrome */
}

/* ── Top bar ──────────────────────────────────────────────────────────────── */
.m-topbar {
  background:   var(--v3-green-deep);
  border-bottom: 1px solid rgba(0,154,66,.3);
  padding:      env(safe-area-inset-top, 0) 16px 0;
  min-height:   calc(52px + env(safe-area-inset-top, 0px));
  display:      flex;
  align-items:  center;
  gap:          12px;
  flex-shrink:  0;
  position:     sticky;
  top:          0;
  z-index:      100;
}

.m-topbar__logo  { height: 22px; display: block; }

.m-topbar__context {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
}

.m-topbar__job-number {
  font-size:   11px;
  font-weight: 700;
  color:       var(--v3-green-light);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.m-topbar__operative {
  font-size:  13px;
  color:      var(--v3-muted);
  white-space: nowrap;
  overflow:   hidden;
  text-overflow: ellipsis;
}

.m-topbar__status {
  font-size: 11px;
  font-weight: 600;
  color: var(--v3-muted);
  white-space: nowrap;
}

.m-topbar__status.online  { color: var(--v3-green-light); }
.m-topbar__status.offline { color: var(--v3-amber); }

/* ── Main outlet ──────────────────────────────────────────────────────────── */
.m-outlet {
  flex: 1;
  overflow-y: auto;
  padding: 0 0 env(safe-area-inset-bottom, 0px);
  -webkit-overflow-scrolling: touch;
}

/* ── Sections / cards ─────────────────────────────────────────────────────── */
.m-section {
  padding: 20px 16px 0;
}

.m-card {
  background:   var(--v3-anthracite);
  border:       1px solid var(--v3-border);
  border-radius: 12px;
  padding:      20px;
  margin-bottom: 12px;
}

.m-card__title {
  font-size:   14px;
  font-weight: 700;
  color:       var(--v3-muted);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.m-heading {
  font-size:   22px;
  font-weight: 800;
  color:       var(--v3-text);
  letter-spacing: -.01em;
  margin-bottom: 4px;
}

.m-subtext {
  font-size:  14px;
  color:      var(--v3-muted);
  margin-bottom: 16px;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.m-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  min-height:      var(--tap-min);
  border:          none;
  border-radius:   10px;
  font-size:       16px;
  font-weight:     700;
  cursor:          pointer;
  width:           100%;
  padding:         0 20px;
  transition:      opacity .15s, transform .1s;
  -webkit-user-select: none;
  user-select:     none;
}

.m-btn:active { opacity: .8; transform: scale(.98); }

.m-btn--primary {
  background: var(--v3-green);
  color:      #fff;
}

.m-btn--ghost {
  background: rgba(255,255,255,.07);
  color:      var(--v3-text);
  border:     1px solid var(--v3-border);
}

.m-btn--danger {
  background: var(--v3-danger);
  color:      #fff;
}

.m-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

/* ── Photo capture ────────────────────────────────────────────────────────── */
.m-capture-zone {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             12px;
  min-height:      240px;
  border:          2px dashed rgba(0,154,66,.4);
  border-radius:   12px;
  background:      rgba(0,154,66,.04);
  padding:         24px;
  cursor:          pointer;
  transition:      border-color .2s, background .2s;
  position:        relative;
}

.m-capture-zone:active,
.m-capture-zone.dragover {
  border-color: var(--v3-green);
  background:   rgba(0,154,66,.10);
}

.m-capture-zone__icon {
  width:  56px;
  height: 56px;
  color:  var(--v3-green);
  opacity: .7;
}

.m-capture-zone__label {
  font-size:  15px;
  font-weight: 600;
  color:      var(--v3-text);
  text-align: center;
}

.m-capture-zone__hint {
  font-size: 12px;
  color:     var(--v3-muted);
  text-align: center;
}

/* hidden file input used for camera / library */
.m-file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* ── Preview grid ────────────────────────────────────────────────────────── */
.m-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 16px;
}

.m-preview-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  background: var(--v3-anthracite);
  border: 1px solid var(--v3-border);
}

.m-preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.m-preview-item__status {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.m-preview-item--uploading { background: rgba(245,158,11,.15); }
.m-preview-item--done      { /* clean */                        }
.m-preview-item--error     { border-color: var(--v3-danger);   }

.m-preview-item__remove {
  position:  absolute;
  top:       4px;
  right:     4px;
  background: rgba(0,0,0,.6);
  border:    none;
  border-radius: 50%;
  width:     24px;
  height:    24px;
  color:     #fff;
  font-size: 14px;
  cursor:    pointer;
  display:   flex;
  align-items: center;
  justify-content: center;
}

/* ── Text inputs ────────────────────────────────────────────────────────── */
.m-input, .m-textarea {
  width:          100%;
  background:     rgba(255,255,255,.06);
  border:         1px solid var(--v3-border);
  border-radius:  10px;
  color:          var(--v3-text);
  font-size:      16px;       /* prevents iOS auto-zoom on focus */
  padding:        12px 14px;
  outline:        none;
  transition:     border-color .15s;
  font-family:    inherit;
  resize:         vertical;
}

.m-input::placeholder, .m-textarea::placeholder { color: var(--v3-muted); }
.m-input:focus, .m-textarea:focus { border-color: var(--v3-green); }

/* ── Queue badge ────────────────────────────────────────────────────────── */
.m-queue-badge {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  background:      rgba(245,158,11,.15);
  border:          1px solid rgba(245,158,11,.3);
  border-radius:   20px;
  padding:         4px 10px;
  font-size:       12px;
  font-weight:     600;
  color:           var(--v3-amber);
  margin-bottom:   12px;
}

/* ── Toasts ─────────────────────────────────────────────────────────────── */
.m-toast {
  position: fixed;
  bottom:   calc(env(safe-area-inset-bottom, 0px) + 16px);
  left:     16px;
  right:    16px;
  background: var(--v3-anthracite);
  border:   1px solid var(--v3-border);
  border-radius: 10px;
  padding:  12px 16px;
  font-size: 14px;
  font-weight: 600;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
}

.m-toast--offline { border-color: rgba(245,158,11,.4); color: var(--v3-amber); }
.m-toast--uploading { color: var(--v3-green-light); }
.m-toast--success { border-color: rgba(0,154,66,.4); color: var(--v3-green-light); }
.m-toast--error { border-color: rgba(239,68,68,.4); color: #FCA5A5; }

/* ── Loading / error screens ────────────────────────────────────────────── */
.m-loading, .m-error {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  min-height:      60vh;
  gap:             16px;
  padding:         32px 24px;
  text-align:      center;
}

.m-error__icon  { font-size: 48px; }
.m-error__title { font-size: 20px; font-weight: 700; color: var(--v3-text); }
.m-error__body  { font-size: 14px; color: var(--v3-muted); max-width: 300px; }

.m-spinner {
  /* Unified with the brand motion system — LRES droplet (handoff PNG mask) in green. */
  width:  44px;
  height: 56px;
  background: var(--v3-green, #00B050);
  -webkit-mask: url('/motion/assets/droplet.png') center / contain no-repeat;
          mask: url('/motion/assets/droplet.png') center / contain no-repeat;
  animation: lres-mdrop 1.4s ease-in-out infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes lres-mdrop { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.86); } }

/* ── Success screen ─────────────────────────────────────────────────────── */
.m-success {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             16px;
  padding:         40px 24px;
  text-align:      center;
}

.m-success__tick {
  width:  72px;
  height: 72px;
  background: rgba(0,154,66,.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
}

.m-success__title { font-size: 22px; font-weight: 800; }
.m-success__body  { font-size: 14px; color: var(--v3-muted); max-width: 280px; }

/* ── Utility ────────────────────────────────────────────────────────────── */
.m-divider { height: 1px; background: var(--v3-border); margin: 20px 0; }
.m-spacer  { height: 16px; }
.m-pb-safe { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); }

[hidden] { display: none !important; }

/* ============================================================
   PWA Mobile Components (S13 — PWA build)
   ============================================================ */

/* ── .mobile-card ─────────────────────────────────────────── */
.mobile-card {
  background:    rgba(255,255,255,.06);
  border:        1px solid var(--v3-border);
  border-radius: 14px;
  padding:       16px;
  min-height:    48px;
  display:       flex;
  flex-direction: column;
  gap:           10px;
}

/* ── .mobile-form ─────────────────────────────────────────── */
.mobile-form {
  display:        flex;
  flex-direction: column;
  gap:            12px;
  width:          100%;
}

.mobile-form input,
.mobile-form select,
.mobile-form textarea {
  width:         100%;
  font-size:     16px;   /* prevents iOS auto-zoom on focus */
  padding:       12px 14px;
  border:        1px solid var(--v3-border);
  border-radius: 10px;
  background:    rgba(255,255,255,.06);
  color:         var(--v3-text);
  font-family:   inherit;
  outline:       none;
  transition:    border-color .15s;
}

.mobile-form input:focus,
.mobile-form select:focus,
.mobile-form textarea:focus { border-color: var(--v3-green); }

.mobile-form label {
  font-size:   13px;
  font-weight: 600;
  color:       var(--v3-muted);
  margin-bottom: 2px;
}

.mobile-form select option { background: #1F2937; }

/* ── .mobile-submit-btn ───────────────────────────────────── */
.mobile-submit-btn {
  display:       block;
  width:         100%;
  height:        56px;
  background:    #00B050;
  color:         #fff;
  font-size:     16px;
  font-weight:   700;
  border:        none;
  border-radius: 14px;
  cursor:        pointer;
  letter-spacing: .3px;
  transition:    background .15s, transform .1s;
}

.mobile-submit-btn:active { background: #009A42; transform: scale(.98); }
.mobile-submit-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── .mobile-header ───────────────────────────────────────── */
.mobile-header {
  position:    fixed;
  top:         0;
  left:        0;
  right:       0;
  height:      56px;
  background:  #00B050;
  color:       #fff;
  display:     flex;
  align-items: center;
  gap:         12px;
  padding:     0 16px;
  z-index:     100;
  box-shadow:  0 2px 8px rgba(0,0,0,.25);
  padding-top: env(safe-area-inset-top, 0px);
}

.mobile-header__back {
  background:    none;
  border:        none;
  color:         #fff;
  font-size:     22px;
  cursor:        pointer;
  padding:       4px 6px;
  border-radius: 6px;
  line-height:   1;
}

.mobile-header__title {
  font-size:   17px;
  font-weight: 700;
  flex:        1;
}

/* ── .rag-badge-large ─────────────────────────────────────── */
.rag-badge-large {
  width:           40px;
  height:          40px;
  border-radius:   50%;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  font-size:       16px;
  font-weight:     800;
  flex-shrink:     0;
}

.rag-badge-large--red    { background: rgba(239,68,68,.2);   color: #EF4444; border: 2px solid #EF4444; }
.rag-badge-large--amber  { background: rgba(245,158,11,.2);  color: #F59E0B; border: 2px solid #F59E0B; }
.rag-badge-large--green  { background: rgba(0,154,66,.2);    color: #00B050; border: 2px solid #00B050; }

/* ── Bottom nav (shown on ≤768px) ─────────────────────────── */
.bottom-nav {
  display:        none;   /* hidden by default; shown in media query below */
  position:       fixed;
  bottom:         0;
  left:           0;
  right:          0;
  height:         calc(56px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background:     #fff;
  border-top:     1px solid #E5E7EB;
  z-index:        200;
  flex-direction: row;
  align-items:    stretch;
}

.bottom-nav__item {
  flex:            1;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             2px;
  text-decoration: none;
  color:           #6B7280;
  font-size:       10px;
  font-weight:     600;
  padding:         6px 4px 0;
  border:          none;
  background:      none;
  cursor:          pointer;
  transition:      color .15s;
}

.bottom-nav__item svg {
  width:  22px;
  height: 22px;
  stroke: currentColor;
  fill:   none;
  stroke-width: 2;
}

.bottom-nav__item.active,
.bottom-nav__item:hover { color: #00B050; }

/* ── Responsive: ≤768px ────────────────────────────────────── */
@media (max-width: 768px) {
  /* Hide the desktop sidebar nav */
  .nav-rail { display: none !important; }

  /* Shrink the top bar so the bottom-nav doesn't obscure content */
  .main-content,
  #routeOutlet,
  .shell { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important; }

  /* Reveal bottom nav */
  .bottom-nav { display: flex; }

  /* Stack cards full-width */
  .mobile-card { border-radius: 10px; }

  /* Ensure tap targets meet WCAG 2.5.5 on all interactive elements */
  button, a, [role="button"] { min-height: 44px; }
}