/* ============================================================
   public/css/polynesian.css
   Thème visuel polynésien — Va'a Tracker
   Palette : océan profond, sable chaud, corail, nacre, bois de toa
   Motifs : tatouages maori/polynésiens (SVG inline via CSS)
   Polices : Cinzel (titres sculptés) + Nunito (corps aéré)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Cinzel+Decorative:wght@400;700&family=Nunito:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

/* ============================================================
   TOKENS POLYNÉSIENS
   ============================================================ */
:root {
  /* Océan profond polynésien */
  --p-deep:       #0a1a2e;        /* profondeur nuit */
  --p-ocean:      #0d2640;        /* ocean nuit */
  --p-lagoon:     #0e6b8c;        /* lagon profond */
  --p-turquoise:  #12a8c4;        /* turquoise lagon */
  --p-aqua:       #20cfe0;        /* eau claire */
  --p-foam:       #a8e6f0;        /* écume */

  /* Chaleur polynésienne */
  --p-toa:        #8b4513;        /* bois de toa (brun chaud) */
  --p-sable:      #d4a574;        /* sable blanc */
  --p-nacre:      #f5e6d3;        /* nacre */
  --p-corail:     #e8522a;        /* corail vivant */
  --p-feu:        #f4841a;        /* coucher de soleil */
  --p-or:         #d4a017;        /* or polynésien */
  --p-hibiscus:   #d4416b;        /* fleur hibiscus */

  /* Tatouage */
  --p-ink:        #1a0f0a;        /* encre noire tatouage */
  --p-ink2:       #2d1810;        /* encre brun profond */

  /* Texte */
  --p-text:       #f0ead6;        /* parchemin/nacre */
  --p-text2:      #b8a898;        /* sable moyen */
  --p-text3:      #7a6a5a;        /* sable foncé */

  /* Surfaces */
  --p-surface:    rgba(13,38,64,0.92);
  --p-surface2:   rgba(10,26,46,0.96);
  --p-glass:      rgba(255,255,255,0.04);
  --p-border:     rgba(164,134,100,0.18);   /* bord nacré */
  --p-border2:    rgba(164,134,100,0.32);

  /* Polices polynésiennes */
  --f-display:    'Cinzel Decorative', serif;   /* titres sculptés */
  --f-title:      'Cinzel', serif;              /* sous-titres */
  --f-body:       'Nunito', sans-serif;         /* corps */
  --f-mono:       'Space Mono', monospace;      /* données */

  /* Overrides globaux */
  --c-bg:         var(--p-deep);
  --c-surface:    var(--p-ocean);
  --c-surface2:   rgba(13,38,64,0.85);
  --c-border:     var(--p-border);
  --c-border2:    var(--p-border2);
  --c-ocean:      var(--p-lagoon);
  --c-lagoon:     var(--p-turquoise);
  --c-lagoon2:    var(--p-aqua);
  --c-coral:      var(--p-corail);
  --c-gold:       var(--p-or);
  --c-text:       var(--p-text);
  --c-text2:      var(--p-text2);
  --c-text3:      var(--p-text3);
  --c-rameur-v1:  var(--p-turquoise);
  --c-club:       var(--p-corail);
  --c-federation: var(--p-hibiscus);
}

/* ============================================================
   POLICE GLOBALE
   ============================================================ */
body {
  font-family: var(--f-body) !important;
  background: var(--p-deep);
  color: var(--p-text);
}

/* ============================================================
   MOTIFS SVG POLYNÉSIENS (réutilisables via background-image)

   Motif 1 : Bande de triangles pointus (dents de requin / niho mano)
   Motif 2 : Spirales enata (représentation humaine)
   Motif 3 : Vagues stylisées (niho)
   Motif 4 : Losanges tressés (tapa cloth)
   ============================================================ */

/* Pattern dents de requin (niho mano) — horizontal */
.poly-band-shark {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='16'%3E%3Cpolygon points='0,16 20,0 40,16' fill='%23d4a574' opacity='0.12'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 40px 16px;
}

/* Pattern vagues (niho ika) */
.poly-band-wave {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='12'%3E%3Cpath d='M0,6 Q15,0 30,6 Q45,12 60,6' stroke='%23d4a574' stroke-width='1.5' fill='none' opacity='0.2'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 60px 12px;
}

/* Pattern losanges tapa */
.poly-band-tapa {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='12' y='0' width='12' height='12' transform='rotate(45 12 6)' fill='none' stroke='%23d4a574' stroke-width='0.8' opacity='0.15'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 24px 24px;
}

/* ============================================================
   FOND PRINCIPAL POLYNÉSIEN
   Dégradé nuit + motif tapa subtil
   ============================================================ */
.poly-bg {
  background:
    radial-gradient(ellipse at 20% 80%, rgba(14,107,140,0.25) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(212,96,23,0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(10,26,46,0.95) 0%, #0a1a2e 100%);
  position: relative;
}
.poly-bg::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Crect x='40' y='0' width='40' height='40' transform='rotate(45 40 20)' fill='none' stroke='%23d4a574' stroke-width='0.5' opacity='0.05'/%3E%3Crect x='0' y='40' width='40' height='40' transform='rotate(45 0 60)' fill='none' stroke='%23d4a574' stroke-width='0.5' opacity='0.05'/%3E%3C/svg%3E");
  background-size: 80px 80px;
}

/* ============================================================
   CARD / SURFACES
   ============================================================ */
.card {
  background: rgba(13,38,64,0.75);
  border: 1px solid var(--p-border);
  backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
}
/* Bordure décorative tatouage en haut des cards */
.card::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--p-turquoise) 20%,
    var(--p-or) 50%,
    var(--p-turquoise) 80%,
    transparent 100%);
  opacity: 0.5;
}

/* ============================================================
   SIDEBAR POLYNÉSIENNE
   ============================================================ */
.sidebar {
  background:
    linear-gradient(180deg,
      rgba(6,14,26,0.99) 0%,
      rgba(10,26,46,0.98) 100%) !important;
  border-right: 1px solid var(--p-border) !important;
  position: relative;
  overflow: hidden;
}

/* Motif tatouage sur le côté gauche de la sidebar */
.sidebar::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0; width: 4px;
  background: repeating-linear-gradient(
    180deg,
    var(--p-turquoise)    0px,
    var(--p-turquoise)    6px,
    transparent           6px,
    transparent           10px,
    var(--p-or)           10px,
    var(--p-or)           14px,
    transparent           14px,
    transparent           20px
  );
  opacity: 0.6;
}

/* Bandeau décoratif entre logo et nav */
.sidebar-logo {
  border-bottom: 1px solid var(--p-border) !important;
  position: relative;
}
.sidebar-logo::after {
  content: '';
  position: absolute; bottom: -1px; left: 16px; right: 16px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--p-turquoise), var(--p-or), var(--p-turquoise), transparent);
  opacity: 0.5;
}

.sidebar-logo-icon {
  background: linear-gradient(135deg, var(--p-lagoon), var(--p-turquoise)) !important;
  box-shadow: 0 2px 12px rgba(18,168,196,0.35);
}

.sidebar-logo-text {
  font-family: var(--f-title) !important;
  font-size: 15px !important;
  letter-spacing: 1px;
  background: linear-gradient(135deg, var(--p-aqua), var(--p-nacre)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.sidebar-logo-sub {
  font-family: var(--f-body);
  color: var(--p-sable) !important;
  letter-spacing: 2px;
}

/* Nav items */
.nav-item {
  font-family: var(--f-body);
  font-size: 13px;
  color: var(--p-text2) !important;
  border-radius: 8px;
}
.nav-item:hover {
  background: rgba(18,168,196,0.08) !important;
  color: var(--p-aqua) !important;
}
.nav-item.active {
  background: rgba(18,168,196,0.14) !important;
  color: var(--p-aqua) !important;
  border-right: none;
}
.nav-item.active::before {
  background: linear-gradient(180deg, var(--p-turquoise), var(--p-or)) !important;
}
.nav-label {
  color: var(--p-sable) !important;
  opacity: 0.5;
}

/* Footer sidebar */
.sidebar-footer {
  border-top: 1px solid var(--p-border) !important;
  position: relative;
}
.sidebar-footer::before {
  content: '';
  position: absolute; top: -1px; left: 12px; right: 12px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--p-or), transparent);
  opacity: 0.4;
}
.sidebar-user-name { font-family: var(--f-title); font-size: 13px; letter-spacing: .5px; }
.sidebar-user-role { color: var(--p-sable) !important; opacity: 0.6; }

/* ============================================================
   BOUTONS POLYNÉSIENS
   ============================================================ */
.btn-primary {
  background: linear-gradient(135deg, var(--p-lagoon), var(--p-turquoise)) !important;
  box-shadow: 0 4px 18px rgba(18,168,196,0.35) !important;
  font-family: var(--f-title);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 13px !important;
}
.btn-primary:hover {
  box-shadow: 0 6px 28px rgba(18,168,196,0.5) !important;
}
.btn-coral, .btn-club {
  background: linear-gradient(135deg, #c0411f, var(--p-corail)) !important;
}
.btn-ghost {
  border-color: var(--p-border) !important;
  color: var(--p-text2) !important;
}
.btn-ghost:hover {
  border-color: var(--p-turquoise) !important;
  color: var(--p-aqua) !important;
}

/* ============================================================
   FORM INPUTS
   ============================================================ */
.form-label {
  color: var(--p-turquoise) !important;
  font-family: var(--f-title);
  letter-spacing: 1.5px;
}
.form-input, .form-select, .form-textarea {
  background: rgba(10,26,46,0.6) !important;
  border-color: var(--p-border) !important;
  color: var(--p-text) !important;
  font-family: var(--f-body);
}
.form-input:focus, .form-select:focus {
  border-color: var(--p-turquoise) !important;
  background: rgba(18,168,196,0.07) !important;
  box-shadow: 0 0 0 3px rgba(18,168,196,0.14) !important;
}
.form-input::placeholder { color: var(--p-text3) !important; }

/* ============================================================
   STAT CARDS / KPI
   ============================================================ */
.kpi, .stat-card {
  background: rgba(10,26,46,0.7) !important;
  border-color: var(--p-border) !important;
}
.kpi::before { background: linear-gradient(90deg, var(--p-turquoise), var(--p-or)) !important; }
.stat-value, .kpi-val { font-family: var(--f-mono); color: var(--p-text) !important; }
.stat-label, .kpi-label { color: var(--p-text2) !important; font-family: var(--f-body); }

/* ============================================================
   BADGES
   ============================================================ */
.badge-blue   { background: rgba(18,168,196,.15) !important; color: var(--p-aqua) !important; border-color: rgba(18,168,196,.25) !important; }
.badge-orange { background: rgba(232,82,42,.15) !important;  color: #f07850 !important;        border-color: rgba(232,82,42,.25) !important; }
.badge-live   { background: rgba(18,168,196,.15) !important; color: var(--p-aqua) !important;  border-color: rgba(18,168,196,.3) !important; }
.badge-green  { background: rgba(34,207,128,.15) !important; color: #3dd68c !important;        border-color: rgba(34,207,128,.25) !important; }

/* ============================================================
   PAGE HEADER
   ============================================================ */
.page-title {
  font-family: var(--f-title) !important;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--p-nacre) !important;
}
.page-sub { font-family: var(--f-body); color: var(--p-sable) !important; }

/* ============================================================
   TABLE
   ============================================================ */
thead { background: rgba(6,14,26,0.7) !important; }
th {
  font-family: var(--f-title);
  letter-spacing: 1.5px;
  color: var(--p-sable) !important;
  font-size: 9px !important;
}
td { font-family: var(--f-body); color: var(--p-text) !important; }
tr:hover td { background: rgba(18,168,196,0.04) !important; }

/* ============================================================
   MODAL
   ============================================================ */
.modal {
  background: rgba(10,26,46,0.96) !important;
  border-color: var(--p-border2) !important;
}
.modal-title {
  font-family: var(--f-title) !important;
  color: var(--p-nacre) !important;
  letter-spacing: 1px;
}

/* ============================================================
   TOAST
   ============================================================ */
.toast {
  background: rgba(10,26,46,0.95) !important;
  border-color: var(--p-border2) !important;
  font-family: var(--f-body);
}

/* ============================================================
   SECTION TITLE
   ============================================================ */
.sect, .section-title, .t-label {
  font-family: var(--f-title) !important;
  letter-spacing: 2.5px !important;
  color: var(--p-sable) !important;
  opacity: 0.65;
}

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--p-turquoise), var(--p-or));
  border-radius: 3px;
  opacity: 0.5;
}

/* ============================================================
   DIVIDER DÉCORATIF
   ============================================================ */
.divider {
  background: linear-gradient(90deg, transparent, var(--p-border2), transparent) !important;
}

/* ============================================================
   RACE INFO BAR
   ============================================================ */
.race-info-bar {
  background: rgba(18,168,196,0.06) !important;
  border-bottom-color: var(--p-border) !important;
}
.race-name { font-family: var(--f-title) !important; color: var(--p-nacre) !important; }
.race-label { color: var(--p-sable) !important; }
.status-text { color: #3dd68c !important; }

/* ============================================================
   VAA CARD (sidebar)
   ============================================================ */
.vc, .vaa-card {
  background: rgba(10,26,46,0.5) !important;
  border-color: var(--p-border) !important;
}
.vc:hover, .vaa-card:hover {
  background: rgba(18,168,196,0.06) !important;
  border-color: rgba(18,168,196,0.2) !important;
}
.vc.active, .vaa-card.active {
  background: rgba(18,168,196,0.10) !important;
  border-color: rgba(18,168,196,0.3) !important;
}
.sv, .stat-value { font-family: var(--f-mono) !important; }
.sl, .stat-label { font-family: var(--f-title) !important; font-size: 7px !important; letter-spacing: 1.5px !important; }
.vn, .vaa-name { font-family: var(--f-title) !important; letter-spacing: .5px; }
.vb, .vaa-live-badge { background: rgba(18,168,196,.12) !important; color: var(--p-aqua) !important; border-color: rgba(18,168,196,.25) !important; }

/* ============================================================
   CHRONO
   ============================================================ */
.chrono-display, .chrono-time, .chrono-big {
  font-family: var(--f-mono) !important;
  text-shadow: 0 0 30px rgba(18,168,196,.45) !important;
}
.chrono-display.running, .chrono-time.running, .chrono-big.live {
  color: var(--p-aqua) !important;
}

/* ============================================================
   PROGRESS FILL
   ============================================================ */
.progress-fill, .pf {
  background: linear-gradient(90deg, var(--p-lagoon), var(--p-turquoise)) !important;
}

/* ============================================================
   LIMIT BAR
   ============================================================ */
.limit-fill { background: var(--p-turquoise) !important; }