/**
 * mobile.css — POINTAQOO
 * Styles mobile-first pour le Smart Pointage
 * Import après style.css dans index.html
 */

/* ─────────────────────────────────────────────────
   Variables de couleurs pour les états de pointage
   ───────────────────────────────────────────────── */
:root {
  --sp-green:        #16A34A;
  --sp-green-light:  #DCFCE7;
  --sp-green-ring:   #86EFAC;
  --sp-red:          #DC2626;
  --sp-red-light:    #FEE2E2;
  --sp-red-ring:     #FCA5A5;
  --sp-orange:       #D97706;
  --sp-orange-light: #FEF3C7;
  --sp-orange-ring:  #FDE68A;
  --sp-blue:         #2563EB;
  --sp-blue-light:   #DBEAFE;
  --sp-blue-ring:    #93C5FD;
  --sp-idle:         #64748B;
  --sp-idle-light:   #F1F5F9;
  --sp-idle-ring:    #CBD5E1;
}

/* ─────────────────────────────────────────────────
   SMART POINTAGE — Conteneur principal
   ───────────────────────────────────────────────── */
.smart-pointage-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 0 2rem;
  animation: sp-fadein 0.3s ease;
}

@keyframes sp-fadein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────────────
   SÉLECTEUR SIRET — version mobile compacte
   ───────────────────────────────────────────────── */
.sp-siret-select {
  width: 100%;
  max-width: 420px;
  padding: .6rem 1rem;
  font-size: .9rem;
  font-weight: 500;
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 12px;
  background: var(--white, #fff);
  color: var(--text, #1e293b);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  cursor: pointer;
}

/* ─────────────────────────────────────────────────
   TIMER LIVE — HH:MM:SS depuis le début
   ───────────────────────────────────────────────── */
.live-timer-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
}

.live-timer-label {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted, #94a3b8);
}

.live-timer {
  font-size: 2.8rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1;
  transition: color .3s;
}

.live-timer.state-in-service  { color: var(--sp-green); }
.live-timer.state-in-pause    { color: var(--sp-orange); }
.live-timer.state-in-absence  { color: var(--sp-blue); }
.live-timer.state-idle         { color: var(--sp-idle); }
.live-timer.state-done         { color: var(--sp-idle); }

/* ─────────────────────────────────────────────────
   SMART POINTAGE BUTTON — grand bouton contextuel
   ───────────────────────────────────────────────── */
.smart-pointage-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  width: min(320px, calc(100vw - 3rem));
  min-height: 120px;
  padding: 1.5rem 2rem;
  border: none;
  border-radius: 20px;
  font-family: inherit;
  font-size: 1.4rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s, box-shadow .2s, background .3s;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}

.smart-pointage-btn:active {
  transform: scale(.96);
}

.smart-pointage-btn .sp-btn-icon {
  font-size: 2rem;
  line-height: 1;
}

.smart-pointage-btn .sp-btn-label {
  font-size: 1.15rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
}

.smart-pointage-btn .sp-btn-hint {
  font-size: .78rem;
  font-weight: 500;
  opacity: .75;
  text-align: center;
}

/* ── État : Idle (pas de service aujourd'hui) — vert démarrer */
.smart-pointage-btn.idle {
  background: var(--sp-green-light);
  color: var(--sp-green);
  box-shadow: 0 4px 20px rgba(22, 163, 74, .18);
}
.smart-pointage-btn.idle:hover {
  box-shadow: 0 6px 28px rgba(22, 163, 74, .28);
  transform: translateY(-1px);
}

/* ── État : En service — rouge terminer, avec pulse */
.smart-pointage-btn.active {
  background: var(--sp-red-light);
  color: var(--sp-red);
  box-shadow: 0 4px 20px rgba(220, 38, 38, .18);
}
.smart-pointage-btn.active::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 24px;
  border: 2px solid var(--sp-green);
  animation: sp-pulse-green 2.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sp-pulse-green {
  0%, 100% { opacity: .5; transform: scale(1); }
  50%       { opacity: 0; transform: scale(1.04); }
}
.smart-pointage-btn.active:hover {
  box-shadow: 0 6px 28px rgba(220, 38, 38, .28);
  transform: translateY(-1px);
}

/* ── État : En pause — orange reprendre */
.smart-pointage-btn.pause {
  background: var(--sp-orange-light);
  color: var(--sp-orange);
  box-shadow: 0 4px 20px rgba(217, 119, 6, .18);
}
.smart-pointage-btn.pause::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 24px;
  border: 2px solid var(--sp-orange);
  animation: sp-pulse-orange 2.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sp-pulse-orange {
  0%, 100% { opacity: .5; transform: scale(1); }
  50%       { opacity: 0; transform: scale(1.04); }
}
.smart-pointage-btn.pause:hover {
  box-shadow: 0 6px 28px rgba(217, 119, 6, .28);
  transform: translateY(-1px);
}

/* ── État : Service terminé (journée finie) */
.smart-pointage-btn.ending {
  background: var(--sp-idle-light);
  color: var(--sp-idle);
  box-shadow: 0 2px 12px rgba(100, 116, 139, .12);
  cursor: default;
}

/* ─────────────────────────────────────────────────
   ACTIONS SECONDAIRES (Pause, Absence…)
   ───────────────────────────────────────────────── */
.sp-secondary-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  width: 100%;
  max-width: 420px;
}

.sp-secondary-btn {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .7rem 1.2rem;
  min-height: 56px;
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 14px;
  background: var(--white, #fff);
  color: var(--text, #1e293b);
  font-family: inherit;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.sp-secondary-btn:active {
  transform: scale(.96);
}

.sp-secondary-btn:hover {
  background: var(--sp-blue-light);
  border-color: var(--sp-blue-ring);
}

.sp-secondary-btn.pause-start {
  color: var(--sp-orange);
  border-color: var(--sp-orange-ring);
}
.sp-secondary-btn.pause-start:hover {
  background: var(--sp-orange-light);
}

.sp-secondary-btn.absence-start {
  color: var(--sp-blue);
  border-color: var(--sp-blue-ring);
}
.sp-secondary-btn.absence-start:hover {
  background: var(--sp-blue-light);
}

/* ─────────────────────────────────────────────────
   BADGE OFFLINE
   ───────────────────────────────────────────────── */
.offline-badge {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .7rem;
  background: #DC2626;
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  border-radius: 999px;
  letter-spacing: .04em;
  box-shadow: 0 2px 8px rgba(220, 38, 38, .35);
  animation: sp-fadein .25s ease;
  pointer-events: none;
}

.offline-badge::before {
  content: '⚡';
  font-size: .8rem;
}

.pending-sync-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: rgba(255,255,255,.25);
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 800;
}

/* ─────────────────────────────────────────────────
   ÉTAT DU SERVICE — résumé compact
   ───────────────────────────────────────────────── */
.sp-status-card {
  width: 100%;
  max-width: 420px;
  padding: .85rem 1.2rem;
  background: var(--white, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: .75rem;
}

.sp-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sp-status-dot.on         { background: var(--sp-green); box-shadow: 0 0 0 3px var(--sp-green-ring); }
.sp-status-dot.pause      { background: var(--sp-orange); box-shadow: 0 0 0 3px var(--sp-orange-ring); }
.sp-status-dot.off        { background: var(--sp-idle); }
.sp-status-dot.absence    { background: var(--sp-blue); box-shadow: 0 0 0 3px var(--sp-blue-ring); }

.sp-status-text {
  flex: 1;
  font-size: .88rem;
  font-weight: 600;
  color: var(--text, #1e293b);
}

.sp-status-time {
  font-size: .78rem;
  color: var(--muted, #94a3b8);
  font-weight: 500;
}

/* ─────────────────────────────────────────────────
   ACTIVITÉS DU JOUR — version mobile compacte
   ───────────────────────────────────────────────── */
.sp-activites-today {
  width: 100%;
  max-width: 420px;
  background: var(--white, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 14px;
  overflow: hidden;
}

.sp-activites-header {
  padding: .7rem 1rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted, #94a3b8);
  border-bottom: 1px solid var(--border, #e2e8f0);
}

.sp-activite-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem 1rem;
  border-bottom: 1px solid var(--border, #e2e8f0);
  font-size: .85rem;
}
.sp-activite-row:last-child { border-bottom: none; }

.sp-activite-color {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sp-activite-name  { flex: 1; font-weight: 600; color: var(--text, #1e293b); }
.sp-activite-times { font-size: .78rem; color: var(--muted, #94a3b8); }

/* ─────────────────────────────────────────────────
   BOTTOM NAVIGATION — sur mobile uniquement
   ───────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Faire de la place en bas pour la nav fixe */
  .app-main {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  /* Masquer la top nav pour les salariés (remplacée par la bottom nav) */
  .app-nav.salarie-nav {
    display: none !important;
  }

  /* Bottom navigation fixe */
  .bottom-nav {
    display: flex !important;
  }

  .bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--white, #fff);
    border-top: 1px solid var(--border, #e2e8f0);
    display: flex;
    padding: 0 0 env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .06);
  }

  .bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    padding: .6rem .25rem .5rem;
    min-height: 56px;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: .65rem;
    font-weight: 600;
    color: var(--muted, #94a3b8);
    cursor: pointer;
    transition: color .15s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    text-transform: uppercase;
    letter-spacing: .04em;
  }

  .bottom-nav-item .bn-icon {
    font-size: 1.3rem;
    line-height: 1;
  }

  .bottom-nav-item.active {
    color: var(--sp-blue);
  }

  .bottom-nav-item.active .bn-icon {
    transform: scale(1.1);
  }

  /* Ajustements header sur mobile */
  .app-header {
    height: 52px;
    padding: 0 16px;
  }

  /* Smart pointage : plein largeur sur mobile */
  .smart-pointage-wrapper {
    padding: .75rem 0 1.5rem;
  }

  .smart-pointage-btn {
    width: calc(100vw - 2.5rem);
    min-height: 130px;
  }

  /* Augmenter les touch targets */
  button, .btn-ghost, .btn-cta, .btn-save {
    min-height: 44px;
  }

  /* Section-card moins de padding sur mobile */
  .section-card {
    padding: 1rem;
    border-radius: 14px;
  }
}

/* Bottom nav cachée sur desktop */
@media (min-width: 769px) {
  .bottom-nav {
    display: none !important;
  }
}

/* ─────────────────────────────────────────────────
   DARK MODE — adaptations smart pointage
   ───────────────────────────────────────────────── */
[data-theme="dark"] .smart-pointage-btn.idle {
  background: rgba(22, 163, 74, .15);
  color: #4ADE80;
}
[data-theme="dark"] .smart-pointage-btn.active {
  background: rgba(220, 38, 38, .15);
  color: #F87171;
}
[data-theme="dark"] .smart-pointage-btn.pause {
  background: rgba(217, 119, 6, .15);
  color: #FCD34D;
}
[data-theme="dark"] .smart-pointage-btn.ending {
  background: rgba(100, 116, 139, .15);
  color: #94A3B8;
}
[data-theme="dark"] .sp-status-card,
[data-theme="dark"] .sp-activites-today {
  background: #1E293B;
  border-color: #334155;
}
[data-theme="dark"] .bottom-nav {
  background: #1E293B;
  border-top-color: #334155;
}
[data-theme="dark"] .sp-siret-select {
  background-color: #1E293B;
  border-color: #334155;
  color: #f1f5f9;
}