/* ══════════════════════════════════════════════════════════
   Greg Services Web — Feuille de style principale
   Design sombre, professionnel, cohérent avec l'app desktop
══════════════════════════════════════════════════════════ */

/* ── Variables ─────────────────────────────────────────── */
:root {
  --gs-bg:        #0f0f1a;
  --gs-surface:   #1a1a2e;
  --gs-surface2:  #16213e;
  --gs-border:    #2a2a4a;
  --gs-gold:      #c9a227;
  --gs-gold-dim:  #a07d1a;
  --gs-text:      #e0e0e0;
  --gs-text-muted:#8888aa;
  --gs-accent:    #0f3460;
  --gs-accent2:   #1a4a8a;
}

/* ── Base ──────────────────────────────────────────────── */
html {
  /* Empêche Safari iOS de zoomer sur rotation paysage */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background-color: var(--gs-bg);
  color: var(--gs-text);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 0.92rem;
  /* Safe-area iPhone (notch / home indicator) */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  /* Évite l'overscroll bounce blanc visible derrière le fond sombre sur iOS */
  overscroll-behavior-y: none;
  /* Lissage du texte sur Safari macOS / iOS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--gs-gold);
  text-decoration: none;
}
a:hover {
  color: #f0c040;
  text-decoration: underline;
}

/* ── Navbar ────────────────────────────────────────────── */
.gs-navbar {
  background: var(--gs-surface) !important;
  border-bottom: 2px solid var(--gs-gold);
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}

.gs-brand {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  color: var(--gs-gold) !important;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.gs-logo-text {
  font-size: 1.2rem;
  color: var(--gs-gold);
}

.gs-logo-sub {
  font-size: 0.65rem;
  color: var(--gs-text-muted);
  font-weight: 400;
  letter-spacing: 0.1em;
}

.navbar-nav .nav-link {
  color: var(--gs-text) !important;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  transition: background 0.2s, color 0.2s;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  background: var(--gs-accent);
  color: var(--gs-gold) !important;
}

/* ── Page titles ───────────────────────────────────────── */
.gs-page-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--gs-gold);
  margin-bottom: 0;
}

/* ── Cards ─────────────────────────────────────────────── */
.gs-card {
  background: var(--gs-surface);
  border: 1px solid var(--gs-border);
  border-radius: 8px;
}

.gs-card-header {
  background: var(--gs-surface2);
  border-bottom: 1px solid var(--gs-border);
  color: var(--gs-gold);
  font-weight: 600;
  padding: 0.6rem 1rem;
}

/* ── Tables ────────────────────────────────────────────── */
.gs-table {
  color: var(--gs-text);
  border-color: var(--gs-border);
  font-size: 0.88rem;
}

.gs-table thead th {
  background: var(--gs-surface2);
  color: var(--gs-gold);
  border-color: var(--gs-border);
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.5rem 0.75rem;
  white-space: nowrap;
}

.gs-table tbody tr {
  border-color: var(--gs-border);
  transition: background 0.15s;
}

.gs-table tbody tr:hover {
  background: rgba(201, 162, 39, 0.07) !important;
}

.gs-table tbody td {
  border-color: var(--gs-border);
  padding: 0.45rem 0.75rem;
  vertical-align: middle;
}

.gs-table tfoot tr {
  background: var(--gs-surface2);
  border-color: var(--gs-border);
}

.gs-table tfoot td {
  border-color: var(--gs-border);
  padding: 0.5rem 0.75rem;
}

.gs-table-mini {
  font-size: 0.82rem;
  color: var(--gs-text);
}

.gs-table-mini thead th {
  background: transparent;
  color: var(--gs-text-muted);
  border-color: var(--gs-border);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.35rem 0.5rem;
}

.gs-table-mini td {
  border-color: var(--gs-border);
  padding: 0.3rem 0.5rem;
}

/* ── Buttons ───────────────────────────────────────────── */
.gs-btn-primary {
  background: var(--gs-gold);
  border-color: var(--gs-gold);
  color: #0f0f1a;
  font-weight: 600;
}

.gs-btn-primary:hover,
.gs-btn-primary:focus {
  background: #f0c040;
  border-color: #f0c040;
  color: #0f0f1a;
}

.btn-xs {
  padding: 0.1rem 0.35rem;
  font-size: 0.75rem;
}

/* ── Forms ─────────────────────────────────────────────── */
.form-control,
.form-select {
  background: var(--gs-surface2);
  border-color: var(--gs-border);
  color: var(--gs-text);
}

/* Safari iOS : zoome automatiquement sur tout input avec font-size < 16px
   au focus. On force 16px sur mobile pour empêcher ce zoom intempestif.
   (Sur ≥ tablette, on garde la taille compacte d'origine.) */
@media (max-width: 768px) {
  .form-control,
  .form-select,
  .form-control-sm,
  .form-select-sm,
  input,
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* Stylise <input type="month"> de manière cohérente sur Safari et Chrome.
   Safari iOS rend ces inputs avec une apparence native qui ignore les
   couleurs du thème — on force notre look. */
input[type="month"],
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
  -webkit-appearance: none;
  appearance: none;
  min-height: 38px;
  color-scheme: dark;
}

input[type="month"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(0.7) sepia(1) hue-rotate(20deg) saturate(3);
  cursor: pointer;
}

.form-control:focus,
.form-select:focus {
  background: var(--gs-surface2);
  border-color: var(--gs-gold);
  color: var(--gs-text);
  box-shadow: 0 0 0 0.2rem rgba(201, 162, 39, 0.25);
}

.form-control::placeholder {
  color: var(--gs-text-muted);
}

.input-group-text {
  background: var(--gs-surface2);
  border-color: var(--gs-border);
  color: var(--gs-text-muted);
}

.form-label {
  color: var(--gs-text);
  font-weight: 500;
  margin-bottom: 0.3rem;
}

.form-check-input {
  background-color: var(--gs-surface2);
  border-color: var(--gs-border);
}

.form-check-input:checked {
  background-color: var(--gs-gold);
  border-color: var(--gs-gold);
}

/* ── Modals ────────────────────────────────────────────── */
.gs-modal {
  background: var(--gs-surface);
  border: 1px solid var(--gs-border);
  color: var(--gs-text);
}

.gs-modal .modal-header {
  background: var(--gs-surface2);
  border-bottom: 1px solid var(--gs-border);
  color: var(--gs-gold);
}

.gs-modal .modal-footer {
  background: var(--gs-surface2);
  border-top: 1px solid var(--gs-border);
}

/* ── Badges ────────────────────────────────────────────── */
.badge {
  font-size: 0.75rem;
  font-weight: 600;
}

/* ── Alerts ────────────────────────────────────────────── */
.alert {
  border-radius: 6px;
  border: none;
}

/* ── Footer ────────────────────────────────────────────── */
.gs-footer {
  background: var(--gs-surface);
  border-top: 1px solid var(--gs-border);
  padding: 0.5rem 0;
}

/* ── Login page ────────────────────────────────────────── */
.gs-login-body {
  background: radial-gradient(ellipse at center, var(--gs-surface) 0%, var(--gs-bg) 70%);
}

.gs-login-card {
  background: var(--gs-surface);
  border: 1px solid var(--gs-border);
  border-radius: 12px;
}

.gs-brand-text {
  color: var(--gs-gold);
  letter-spacing: 0.05em;
}

/* ── Utility ───────────────────────────────────────────── */
.gs-gold {
  color: var(--gs-gold) !important;
}

.gs-link {
  color: var(--gs-gold);
  font-weight: 600;
}

.gs-link:hover {
  color: #f0c040;
}

/* ── Dropdown menus ────────────────────────────────────── */
.dropdown-menu {
  background: var(--gs-surface);
  border: 1px solid var(--gs-border);
}

.dropdown-item {
  color: var(--gs-text);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--gs-accent);
  color: var(--gs-gold);
}

/* ── Scrollbar (Webkit) ────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--gs-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--gs-border);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gs-gold-dim);
}

/* ── Table.active override ─────────────────────────────── */
.table-active {
  --bs-table-accent-bg: var(--gs-surface2);
  color: var(--gs-text);
}

/* ── Collapse row transition ───────────────────────────── */
tr.collapse {
  display: none;
}
tr.collapse.show {
  display: table-row;
}

/* ── HR ────────────────────────────────────────────────── */
hr {
  border-color: var(--gs-border);
  opacity: 0.5;
}

/* ══════════════════════════════════════════════════════════
   TABLEAUX RESPONSIVES — scroll fluide tactile + indicateur
   ══════════════════════════════════════════════════════════ */

/* Scroll horizontal fluide sur Safari iOS (sinon saccadé) */
.table-responsive {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* Indicateur visuel de scroll horizontal sur mobile : ombre douce
   au bord droit qui suggère qu'on peut faire défiler. */
@media (max-width: 768px) {
  .table-responsive {
    position: relative;
    background:
      linear-gradient(to right, var(--gs-surface) 30%, rgba(26,26,46,0)) left center,
      linear-gradient(to right, rgba(26,26,46,0), var(--gs-surface) 70%) right center,
      radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.4), rgba(0,0,0,0)) left center,
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.4), rgba(0,0,0,0)) right center;
    background-repeat: no-repeat;
    background-size: 24px 100%, 24px 100%, 12px 100%, 12px 100%;
    background-attachment: local, local, scroll, scroll;
  }
}

/* Classe utilitaire : masque un élément sur mobile (XS),
   le ré-affiche en table-cell à partir de SM (≥ 576 px). */
.gs-hide-xs {
  display: none !important;
}
@media (min-width: 576px) {
  .gs-hide-xs {
    display: table-cell !important;
  }
}

/* Idem pour MD (≥ 768 px) — colonnes très secondaires */
.gs-hide-sm {
  display: none !important;
}
@media (min-width: 768px) {
  .gs-hide-sm {
    display: table-cell !important;
  }
}

/* ══════════════════════════════════════════════════════════
   MOBILE — ajustements généraux (≤ 768 px)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Base un peu plus lisible sur petit écran */
  body {
    font-size: 0.95rem;
  }

  /* Conteneur principal : moins de padding latéral pour gagner
     de la place horizontale (les cards/tableaux se collent un peu
     plus aux bords mais restent lisibles). */
  main.container-fluid {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.75rem !important;
  }

  /* Titre de page plus compact */
  .gs-page-title {
    font-size: 1.15rem;
  }

  /* Brand : taille adaptée aux petits écrans (le sous-titre est
     déjà masqué via d-none d-md-inline dans base.html) */
  .gs-logo-text {
    font-size: 1rem;
    letter-spacing: 0.03em;
  }

  /* Nav links : hauteur tactile confortable (Apple HIG : 44px min) */
  .navbar-nav .nav-link {
    padding: 0.65rem 0.85rem;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Boutons d'actions dans les tableaux : on garde compact mais on
     remonte la cible tactile à 36px minimum (compromis utile/utilisable) */
  .btn-sm {
    min-height: 36px;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
  }
  .btn-xs {
    min-height: 30px;
  }

  /* Cartes : padding interne réduit pour tirer parti de l'espace */
  .card-body {
    padding: 0.75rem;
  }
  .card-body.p-0 {
    padding: 0 !important;
  }

  /* Tables : taille de police légèrement réduite et padding compact
     pour caser un maximum d'infos sans casser le scroll horizontal */
  .gs-table {
    font-size: 0.85rem;
  }
  .gs-table thead th {
    font-size: 0.72rem;
    padding: 0.4rem 0.5rem;
  }
  .gs-table tbody td {
    padding: 0.4rem 0.5rem;
  }

  /* Largeurs fixes inline (style="width:Xpx") sur les sélecteurs de
     mois/recherche : on les remet en 100% pour qu'ils respirent. */
  input[type="month"][style*="width"],
  input[type="search"][style*="width"],
  .input-group[style*="width"] {
    width: 100% !important;
    max-width: 100%;
  }

  /* Badges légende statut : un peu plus compacts */
  .badge {
    font-size: 0.72rem;
  }

  /* Footer : version compacte sur 1 ligne resserrée */
  .gs-footer {
    padding: 0.4rem 0.5rem;
  }
  .gs-footer small {
    font-size: 0.7rem;
    line-height: 1.3;
  }

  /* Modales : sur mobile, on les passe en mode quasi-plein-écran
     pour faciliter la saisie (sinon les champs des formulaires
     sont trop étroits) */
  .modal-dialog:not(.modal-dialog-centered):not(.modal-fullscreen) {
    margin: 0.5rem;
  }
  .modal-lg,
  .modal-xl {
    max-width: 100%;
    margin: 0.5rem;
  }
  .modal-content {
    border-radius: 0.5rem;
  }

  /* Dropdowns alignés à droite : empêche le débordement hors écran */
  .dropdown-menu-end {
    --bs-position: end;
    right: 0;
    left: auto !important;
  }

  /* KPI cards du dashboard : 2 colonnes sur mobile, valeurs réduites */
  .fs-2 {
    font-size: 1.5rem !important;
  }
  .fs-4 {
    font-size: 1.15rem !important;
  }
}

/* ══════════════════════════════════════════════════════════
   TRÈS PETIT ÉCRAN (≤ 480 px) — iPhone SE & similaires
   ══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  main.container-fluid {
    padding-left: 0.35rem;
    padding-right: 0.35rem;
  }

  .gs-page-title {
    font-size: 1.05rem;
  }

  .gs-table {
    font-size: 0.8rem;
  }
  .gs-table thead th {
    font-size: 0.68rem;
    padding: 0.35rem 0.4rem;
  }
  .gs-table tbody td {
    padding: 0.35rem 0.4rem;
  }

  /* Empile l'export Excel et le bouton "Nouvelle course" sur 2 lignes
     plutôt que de les serrer */
  .d-flex.gap-2.align-items-center.flex-wrap {
    width: 100%;
  }

  /* Login card : occupe presque toute la largeur */
  .gs-login-card {
    width: 92vw !important;
    max-width: 380px;
  }
}

/* ══════════════════════════════════════════════════════════
   SAFARI / WEBKIT — fixes spécifiques
   ══════════════════════════════════════════════════════════ */

/* Empêche Safari de cacher le focus ring sur les inputs */
.form-control:focus,
.form-select:focus,
.btn:focus {
  outline: 2px solid transparent;
  outline-offset: 1px;
}

/* Safari : la sticky-top de Bootstrap perd parfois sa position
   à cause du sub-pixel rendering. On force un compositing layer. */
.sticky-top {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/* Safari iOS : enlève le surlignage bleu au tap sur les liens/boutons */
a, button, .btn, .nav-link {
  -webkit-tap-highlight-color: transparent;
}

/* Login page : le min-vh-100 de Bootstrap pose problème sur iOS Safari
   car la barre d'adresse rétractable change la hauteur du viewport.
   On utilise une variable custom mise à jour en JS (cf. base.html), avec
   fallback sur min-vh-100 pour les autres navigateurs. */
.gs-login-body {
  min-height: 100vh;
  min-height: 100dvh; /* dynamic viewport height — supporté Safari 15.4+ */
}

/* Cards / modales : Safari rendait parfois les bordures floues à cause
   du transform parent. On force l'arrondi à être net. */
.card,
.modal-content,
.gs-card,
.gs-modal {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Inputs en mode dark sur Safari : la coloration du texte autocomplete
   est blanche par défaut → fond bleu pâle illisible. On la force. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--gs-text);
  -webkit-box-shadow: 0 0 0 1000px var(--gs-surface2) inset;
  caret-color: var(--gs-text);
  transition: background-color 5000s ease-in-out 0s;
}

/* Footer en safe-area iPhone (home indicator) */
.gs-footer {
  padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
}