/* ============================================================
   GestRapport — Planning Skin
   Overlay qui aligne l'apparence du SPA React sur le style planning
   (fond clair, DM Sans, navy accent, radius 14, if-section look).
   Les classes .gr-* restent les mêmes — seules les couleurs/espaces changent.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  /* Override tokens clés gestrapport → planning light theme */
  --bg:            #f4f6fa;
  --bg-2:          #eef1f6;
  --card:          #ffffff;
  --card-hover:    #f8fafc;
  --border:        #e6eaf0;
  --border-light:  #eef1f6;

  --text:          #0b1220;
  --text-muted:    #64748b;
  --text-faint:    #94a3b8;

  --accent:        #00477F;
  --accent-light:  #0a5d9c;
  --accent-bright: #1a7fc9;
  --accent-glow:   rgba(26,127,201,.20);

  --success:       #0f9d58;
  --success-bg:    #e7f6ed;
  --warning:       #d08400;
  --warning-bg:    #fff5dd;
  --danger:        #d92d20;
  --danger-bg:     #fdecec;
  --info:          #1a7fc9;
  --info-bg:       #eaf3fb;

  --glass-bg:      rgba(255,255,255,.85);
  --glass-border:  rgba(0,71,127,.10);

  --sidebar-bg:    #0b1f3a;

  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  20px;

  --shadow-sm:  0 1px 3px rgba(13,24,40,.06);
  --shadow-md:  0 8px 20px -6px rgba(13,24,40,.12), 0 2px 6px rgba(13,24,40,.06);
  --shadow-lg:  0 24px 44px -20px rgba(13,24,40,.22);
  --shadow-accent: 0 0 0 3px rgba(26,127,201,.15);
}

html { background: var(--bg) !important; }
body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
  letter-spacing: -0.005em;
}

/* ── Sidebar dark kept (navy) but refined ── */
.sidebar, .app-sidebar {
  background: var(--sidebar-bg) !important;
  color: #fff;
  border-right: none !important;
}
.sidebar *, .app-sidebar * { color: inherit; }
.sidebar a, .sidebar button { border-radius: 10px !important; }

/* ── Topbar / Header (solide, pas de transparence) ── */
.topbar, .app-topbar, .gr-topbar, header.main-header {
  background: #ffffff !important;           /* opaque : le contenu ne doit pas transparaitre */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-sm);
  height: 56px !important;
  z-index: 100 !important;
}

/* ── Main content area ── */
.main-content, .view, .gr-view {
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* ══════════════════════════════════════════════════════
   Scroll natif : body scrolle, bandeaux opaques fixes
   La bottom-nav et la topbar restent OÙ React les pose,
   on ne fait que les rendre opaques et ajouter le padding.
   ══════════════════════════════════════════════════════ */

/* Bottom nav : opaque, fixed, au-dessus de tout */
.gr-bottom-nav, .mobile-nav, .bottom-nav {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-top: 1px solid var(--border) !important;
  box-shadow: 0 -2px 10px rgba(13,24,40,.06) !important;
  z-index: 200 !important;
  display: flex !important;
  padding-top: 6px !important;
  padding-bottom: max(env(safe-area-inset-bottom, 0px), 10px) !important;
}
.gr-bottom-nav-items { display: flex !important; width: 100%; }
.gr-bottom-nav-item, .mobile-nav-item, .bottom-nav-item {
  flex: 1 !important;
  min-height: 52px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  padding: 4px 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  background: none !important;
  border: none !important;
  cursor: pointer;
  font-family: inherit;
}
.gr-bottom-nav-item.active, .mobile-nav-item.active {
  color: var(--accent) !important;
}
.gr-bottom-nav-item .nav-icon, .mobile-nav-item .nav-icon {
  font-size: 22px !important;
  line-height: 1 !important;
}

/* Topbar : sticky opaque, prend sa place dans le flux */
.gr-topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  height: 56px !important;
  background: #ffffff !important;
}

/* Main content : padding-bottom pour laisser la place à la bottom-nav fixed
   (90px = 52px item + 6px top + 10px+safe bottom + marge) */
.gr-main {
  min-height: 100dvh;
  padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
}
.gr-content {
  padding: 20px !important;
  padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
}
@media (max-width: 768px) {
  .gr-content { padding: 14px !important; padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ── Cards ── */
.gr-card, .card, .gr-panel {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  color: var(--text) !important;
}

/* ── Inputs / selects / textareas — look planning .inter-form-field ── */
.gr-input, .gr-select, .gr-textarea,
input.gr-input, select.gr-select, textarea.gr-textarea {
  background: #fff !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  font-size: 15px !important;
  font-family: inherit !important;
  transition: border-color .15s, box-shadow .15s;
}
.gr-input:focus, .gr-select:focus, .gr-textarea:focus,
.gr-input:focus-visible, .gr-select:focus-visible, .gr-textarea:focus-visible {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: var(--shadow-accent) !important;
}
.gr-textarea { resize: vertical; min-height: 80px; }

/* Labels style planning (uppercase 11px muted) */
.gr-label {
  display: block;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted) !important;
  margin-bottom: 6px !important;
}
.gr-form-group { margin-bottom: 14px !important; }

/* ── Rows 2 cols ── */
.gr-input-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}
@media (max-width: 640px) { .gr-input-row { grid-template-columns: 1fr !important; } }

/* ══════════════════════════════════════════════════════
   Boutons — style mockup terrain (orange CTA, vert validation,
   secondaire outline, actions icon-label)
   ══════════════════════════════════════════════════════ */
.gr-btn, button.gr-btn {
  border-radius: 14px !important;
  font-family: inherit !important;
  font-weight: 700 !important;
  padding: 14px 20px !important;
  min-height: 52px !important;
  font-size: 15px !important;
  letter-spacing: -0.01em;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: transform .12s, background .15s, border-color .15s, box-shadow .15s !important;
  cursor: pointer;
  border: 1.5px solid transparent;
}
.gr-btn:active { transform: scale(.97); }
.gr-btn:disabled { opacity: .5; cursor: not-allowed; }

/* PRIMARY = orange CTA (Se connecter, Itinéraire) */
.gr-btn-primary, .gr-btn-accent, .gr-btn-cta {
  background: #ea580c !important;
  border-color: #ea580c !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(234,88,12,.30) !important;
}
.gr-btn-primary:hover, .gr-btn-accent:hover, .gr-btn-cta:hover {
  background: #c2410c !important;
  border-color: #c2410c !important;
  box-shadow: 0 6px 18px rgba(234,88,12,.40) !important;
}

/* NAVY (action principale navy, moins courant) */
.gr-btn-navy {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(0,71,127,.25) !important;
}
.gr-btn-navy:hover { background: var(--accent-light) !important; border-color: var(--accent-light) !important; }

/* SECONDARY = blanc outline */
.gr-btn-secondary {
  background: #fff !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  box-shadow: 0 1px 2px rgba(13,24,40,.04) !important;
}
.gr-btn-secondary:hover {
  background: var(--bg) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* OUTLINE ACCENT = blanc avec texte et bordure navy */
.gr-btn-outline {
  background: #fff !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}
.gr-btn-outline:hover { background: var(--accent) !important; color: #fff !important; }

/* SUCCESS = vert validation (Valider l'intervention) */
.gr-btn-success {
  background: #16a34a !important;
  border-color: #16a34a !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(22,163,74,.30) !important;
}
.gr-btn-success:hover { background: #15803d !important; border-color: #15803d !important; }

/* DANGER = rouge */
.gr-btn-danger {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(220,38,38,.25) !important;
}
.gr-btn-danger-outline {
  background: #fff !important;
  color: #dc2626 !important;
  border-color: #fecaca !important;
  width: 52px !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 !important;
  border-radius: 14px !important;
}
.gr-btn-danger-outline:hover { background: #fee2e2 !important; border-color: #dc2626 !important; }

/* GHOST */
.gr-btn-ghost {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--accent) !important;
  box-shadow: none !important;
}
.gr-btn-ghost:hover { background: var(--bg) !important; }

/* Tailles */
.gr-btn-sm { min-height: 40px !important; padding: 8px 14px !important; font-size: 13px !important; border-radius: 10px !important; }
.gr-btn-lg { min-height: 60px !important; padding: 18px 28px !important; font-size: 16px !important; border-radius: 16px !important; }
.gr-btn-block { width: 100% !important; }

/* ── Action-icon row (Itinéraire / Appeler / Photo / Scan) ── */
.gr-action-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  gap: 10px;
}
.gr-action-btn {
  background: var(--accent-glow, rgba(26,127,201,.08)) !important;
  border: 1.5px solid rgba(26,127,201,.18) !important;
  border-radius: 14px !important;
  padding: 12px 8px !important;
  color: var(--accent) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  min-height: 64px;
  cursor: pointer;
  transition: transform .12s, background .15s;
  font-family: inherit;
}
.gr-action-btn .ico {
  font-size: 22px;
  line-height: 1;
}
.gr-action-btn:active { transform: scale(.96); }
.gr-action-btn:hover { background: rgba(26,127,201,.14) !important; }
.gr-action-btn.primary {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
  box-shadow: 0 4px 12px rgba(0,71,127,.25);
}
.gr-action-btn.primary:hover { background: var(--accent-light) !important; }

/* ── FAB center (gros bouton + orange au milieu d'une nav) ── */
.gr-fab-center {
  width: 58px !important;
  height: 58px !important;
  border-radius: 50% !important;
  background: #ea580c !important;
  color: #fff !important;
  border: none !important;
  font-size: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 6px 20px rgba(234,88,12,.45) !important;
  cursor: pointer;
  transition: transform .12s;
  margin-top: -20px;
}
.gr-fab-center:active { transform: scale(.94); }

/* ── Accordion (style if-section) ── */
.gr-accordion {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  margin-bottom: 14px !important;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.gr-accordion-header {
  padding: 14px 16px !important;
  background: #fff !important;
  color: var(--text) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid transparent;
  transition: background .15s;
}
.gr-accordion-header:hover { background: var(--bg) !important; }
.gr-accordion-header.open {
  background: var(--accent) !important;
  color: #fff !important;
  border-bottom-color: var(--accent);
}
.gr-accordion-title {
  flex: 1;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em;
  text-transform: none;
}
.gr-accordion-chevron {
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--bg);
  color: var(--accent);
  font-size: 15px;
}
.gr-accordion-header.open .gr-accordion-chevron {
  background: rgba(255,255,255,.18);
  color: #fff;
}
.gr-accordion-body {
  padding: 16px !important;
  background: #fff !important;
  color: var(--text) !important;
}

/* ── Tables ── */
.gr-table, table.gr-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
  color: var(--text);
}
.gr-table thead th, table.gr-table thead th {
  background: var(--bg-2) !important;
  color: var(--accent) !important;
  padding: 10px 12px !important;
  text-align: left;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
}
.gr-table tbody td, table.gr-table tbody td {
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text);
}
.gr-table tbody tr:hover td { background: var(--bg) !important; }

/* ── Status chips / badges ── */
.gr-chip, .status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px !important;
  border-radius: 14px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.gr-chip-success, .status-success { background: var(--success-bg) !important; color: var(--success) !important; }
.gr-chip-warning, .status-warning { background: var(--warning-bg) !important; color: var(--warning) !important; }
.gr-chip-danger, .status-danger { background: var(--danger-bg) !important; color: var(--danger) !important; }
.gr-chip-info { background: var(--info-bg) !important; color: var(--info) !important; }

/* ── Modals ── */
.gr-modal, .modal {
  background: rgba(11,31,58,.45) !important;
  backdrop-filter: blur(4px);
}
.gr-modal-content, .modal-content {
  background: #fff !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* ── Loading screen harmonisé ── */
#app-loader {
  background: #0b1f3a !important;
  color: #fff !important;
}
#app-loader::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(26,107,181,.35), transparent 55%),
    radial-gradient(circle at 80% 10%, rgba(234,88,12,.18), transparent 50%);
  pointer-events: none;
}
#app-loader .loader-icon {
  background: linear-gradient(135deg, #00477F, #1a7fc9) !important;
  box-shadow: 0 4px 24px rgba(26,127,201,.35) !important;
}
#app-loader h1 { color: #fff !important; font-family: 'DM Sans', sans-serif; letter-spacing: -0.02em; }
#app-loader .spinner { border-top-color: #ea580c !important; }
#app-loader .msg { color: rgba(255,255,255,.65) !important; }

/* ── Dashboard stats cards (light versions) ── */
.dashboard-stat, .stat-card {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  color: var(--text) !important;
}

/* ── Sidebar actif item ── */
.sidebar-item.active, .app-sidebar-item.active {
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
  position: relative;
}
.sidebar-item.active::before, .app-sidebar-item.active::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  background: #ea580c;
  border-radius: 0 3px 3px 0;
}

/* ── Scrollbar discret ── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

/* ── Photo grid (reprend le style mobile.html) ── */
.gr-photo-grid, .photo-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
  gap: 10px !important;
}
.gr-photo-tile, .photo-tile {
  aspect-ratio: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.gr-photo-tile img, .photo-tile img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* ── FAB / Floating buttons ── */
.gr-fab, .fab {
  background: #ea580c !important;
  color: #fff !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 16px rgba(234,88,12,.45) !important;
  border: none !important;
}

/* ── Checkboxes stylés ── */
input[type="checkbox"] { accent-color: var(--accent) !important; }

/* ── Switches React (toggle) ── */
.gr-switch, .toggle { --sw-on: var(--accent) !important; }

/* ── Responsive — hide some heavy bits on narrow ── */
@media (max-width: 768px) {
  .gr-accordion-header { padding: 12px 14px !important; }
  .gr-accordion-body { padding: 12px !important; }
}