/* ============================================================
   N'Zassa Field - PWA mobile-first
   ============================================================ */

:root{
  --marine:#1a2a5e;
  --dark:#0f1a3d;
  --violet:#7c3aed;
  --orange:#ff6b35;
  --vert:#0c8a4c;
  --bg:#f5f7fc;
  --card:#ffffff;
  --muted:#6b7280;
  --border:#e5e7eb;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--bg);
  color:#1f2937;
  overscroll-behavior:none;
}

/* ===== App shell ===== */
.app{display:flex;flex-direction:column;min-height:100vh;}

.topbar{
  background:linear-gradient(135deg,var(--dark),var(--marine));
  color:#fff;padding:.85rem 1rem;
  display:flex;align-items:center;justify-content:space-between;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
  position:sticky;top:0;z-index:10;
}
.topbar .logo{display:flex;align-items:center;gap:.55rem;font-weight:700;}
.topbar .logo i{font-size:1.4rem;color:var(--orange);}
.topbar .badge-zone{
  font-size:.7rem;background:rgba(255,255,255,.15);
  padding:.2rem .55rem;border-radius:99px;
  display:flex;align-items:center;gap:.35rem;
}

.content{flex:1;padding:1rem;padding-bottom:5rem;}
.content h2{margin:0 0 1rem;color:var(--marine);font-size:1.15rem;}

/* ===== Cards ===== */
.card{
  background:var(--card);border-radius:14px;
  padding:1rem;margin-bottom:1rem;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.card.flat{box-shadow:none;border:1px solid var(--border);}

/* ===== KPI row ===== */
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin-bottom:1rem;}
.kpi{
  background:var(--card);border-radius:12px;padding:.85rem;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.kpi .v{font-size:1.6rem;font-weight:800;line-height:1;}
.kpi .l{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-top:.25rem;}
.kpi.attente .v{color:#f59e0b;}
.kpi.appr .v{color:var(--vert);}
.kpi.rej .v{color:#dc2626;}
.kpi.today .v{color:var(--violet);}

/* ===== Forms ===== */
.field{margin-bottom:1rem;}
.field label{display:block;font-size:.78rem;color:var(--muted);margin-bottom:.3rem;font-weight:500;}
.field input,.field select,.field textarea{
  width:100%;padding:.7rem .8rem;border-radius:10px;
  border:1px solid var(--border);background:#fff;font-size:.95rem;
  font-family:inherit;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(124,58,237,.15);
}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.85rem 1.2rem;border-radius:12px;border:none;
  font-weight:600;font-size:.95rem;cursor:pointer;
  transition:transform .15s,box-shadow .15s;text-decoration:none;
}
.btn:active{transform:scale(.97);}
.btn-primary{background:linear-gradient(135deg,var(--marine),var(--violet));color:#fff;}
.btn-primary:hover{box-shadow:0 4px 14px rgba(124,58,237,.3);}
.btn-secondary{background:#fff;color:var(--marine);border:1px solid var(--border);}
.btn-success{background:var(--vert);color:#fff;}
.btn-danger{background:#dc2626;color:#fff;}
.btn-ghost{background:transparent;color:var(--marine);}
.btn-block{width:100%;}
.btn-lg{padding:1rem 1.4rem;font-size:1.05rem;}
.btn:disabled{opacity:.55;cursor:not-allowed;}

.fab{
  position:fixed;bottom:5.5rem;right:1rem;
  width:60px;height:60px;border-radius:50%;
  background:linear-gradient(135deg,var(--orange),var(--violet));
  color:#fff;border:none;font-size:1.7rem;
  box-shadow:0 6px 18px rgba(255,107,53,.4);
  cursor:pointer;z-index:5;
  display:flex;align-items:center;justify-content:center;
}

/* ===== Bottom nav ===== */
.bottom-nav{
  position:fixed;bottom:0;left:0;right:0;
  background:#fff;border-top:1px solid var(--border);
  display:flex;justify-content:space-around;
  padding:.4rem 0;z-index:9;
  padding-bottom:calc(.4rem + env(safe-area-inset-bottom,0));
}
.bottom-nav a{
  flex:1;text-align:center;padding:.5rem .25rem;color:var(--muted);
  text-decoration:none;font-size:.7rem;font-weight:500;
  display:flex;flex-direction:column;align-items:center;gap:.15rem;
}
.bottom-nav a i{font-size:1.2rem;}
.bottom-nav a.active{color:var(--violet);}

/* ===== Submission item ===== */
.sub-item{display:flex;gap:.75rem;align-items:flex-start;}
.sub-item img{width:64px;height:64px;border-radius:10px;object-fit:cover;background:#f3f4f6;flex-shrink:0;}
.sub-item .meta{flex:1;min-width:0;}
.sub-item .meta strong{display:block;font-size:.95rem;}
.sub-item .meta small{color:var(--muted);font-size:.75rem;display:block;margin-top:.15rem;}
.status-pill{
  display:inline-block;font-size:.65rem;font-weight:700;text-transform:uppercase;
  padding:.15rem .55rem;border-radius:99px;letter-spacing:.04em;margin-top:.3rem;
}
.status-pill.en_attente{background:#fef3c7;color:#92400e;}
.status-pill.approuvee{background:#d1fae5;color:#065f46;}
.status-pill.rejetee{background:#fee2e2;color:#991b1b;}

/* ===== Capture ===== */
.photo-preview{
  width:100%;aspect-ratio:4/3;background:#000 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24" fill="%23999"><path d="M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"/></svg>') center/60px no-repeat;
  border-radius:14px;overflow:hidden;display:flex;align-items:center;justify-content:center;
  position:relative;
}
.photo-preview img{width:100%;height:100%;object-fit:cover;}
.photo-preview .gps-badge{
  position:absolute;top:.5rem;left:.5rem;
  background:rgba(0,0,0,.7);color:#fff;padding:.25rem .65rem;
  border-radius:99px;font-size:.7rem;display:flex;align-items:center;gap:.3rem;
}
.photo-preview .gps-badge.ok{background:rgba(12,138,76,.85);}
.photo-preview .gps-badge.warn{background:rgba(245,158,11,.85);}

/* ===== Toast ===== */
.toast{
  position:fixed;bottom:6.5rem;left:1rem;right:1rem;
  background:var(--dark);color:#fff;padding:.85rem 1rem;
  border-radius:10px;box-shadow:0 4px 16px rgba(0,0,0,.25);
  font-size:.9rem;display:flex;align-items:center;gap:.6rem;
  z-index:50;animation:slideUp .3s ease;
}
.toast.success{background:var(--vert);}
.toast.error{background:#dc2626;}
.toast.warn{background:#d97706;}

@keyframes slideUp{from{transform:translateY(20px);opacity:0;}to{transform:translateY(0);opacity:1;}}

/* ===== Login ===== */
.login-screen{
  min-height:100vh;background:linear-gradient(135deg,var(--dark),var(--marine));
  display:flex;flex-direction:column;justify-content:center;
  padding:2rem 1.5rem;color:#fff;
}
.login-screen .brand{text-align:center;margin-bottom:2.5rem;}
.login-screen .brand i{font-size:3rem;color:var(--orange);}
.login-screen .brand h1{margin:.5rem 0 .25rem;font-size:1.5rem;}
.login-screen .brand p{opacity:.75;font-size:.85rem;margin:0;}
.login-screen .field input{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15);color:#fff;}
.login-screen .field input::placeholder{color:rgba(255,255,255,.5);}
.login-screen .field label{color:rgba(255,255,255,.8);}

/* ===== Empty state ===== */
.empty{
  text-align:center;padding:3rem 1rem;color:var(--muted);
}
.empty i{font-size:3rem;color:#cbd5e1;display:block;margin-bottom:.75rem;}

/* ===== Spinner ===== */
.spinner{
  display:inline-block;width:18px;height:18px;
  border:3px solid rgba(255,255,255,.3);border-top-color:#fff;
  border-radius:50%;animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

.hidden{display:none !important;}

/* Tabs */
.tabs{display:flex;gap:.5rem;margin-bottom:1rem;overflow-x:auto;padding-bottom:.25rem;}
.tabs button{
  padding:.5rem 1rem;border-radius:99px;border:1px solid var(--border);
  background:#fff;font-size:.85rem;font-weight:600;color:var(--muted);
  white-space:nowrap;cursor:pointer;
}
.tabs button.active{background:var(--marine);color:#fff;border-color:var(--marine);}

/* Apercu de la derniere affiche dans la carte pancarte */
.pv-last-affiche{
  margin-top:.65rem;
  padding-top:.6rem;
  border-top:1px dashed #d1d5db;
}
.pv-last-affiche-row{
  display:flex;
  gap:.6rem;
  align-items:flex-start;
}
.pv-last-affiche-img{
  width:72px;
  height:72px;
  border-radius:10px;
  object-fit:cover;
  border:1px solid #d1d5db;
  background:#e5e7eb;
  flex-shrink:0;
}
.pv-last-affiche-meta{
  font-size:.82rem;
  color:#111827;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pv-last-affiche-date{
  color:var(--muted);
  font-size:.74rem;
}
.pv-last-affiche-empty{
  margin-top:.6rem;
  color:var(--muted);
  font-size:.8rem;
  border-top:1px dashed #d1d5db;
  padding-top:.6rem;
}