/* =====================================================================
   GeoSplit Maroc — Feuille de base
   Repère visuel : tableau de bord d'instrument, pas page marketing.
   L'accent laiton ne sert qu'à l'outil actif et à l'action principale ;
   les couleurs de géométrie suivent la convention topographique.
   ===================================================================== */

:root {
  /* Habillage */
  --ink:        #0d1117;
  --ink-2:      #141a22;
  --panel:      #182029;
  --panel-2:    #1e2732;
  --rule:       #2a3441;
  --rule-soft:  #222b36;

  /* Texte */
  --fg:         #dde5ee;
  --fg-dim:     #93a1b3;
  --fg-faint:   #647082;

  /* Accent de marque — parcimonieux */
  --brass:      #c9a84c;
  --brass-dim:  #8f7633;
  --brass-glow: rgba(201,168,76,.14);

  /* Géométrie (convention de plan) */
  --g-boundary: #37d7ff;
  --g-parcel:   #ffb03a;
  --g-road:     #9b8cff;
  --g-point:    #ff4d8d;
  --g-measure:  #6ee7a8;
  --g-guide:    #ff6b6b;

  /* États */
  --ok:    #35c88a;
  --warn:  #e9a93c;
  --err:   #ff5f5f;
  --info:  #4aa3ff;

  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 10px;

  --f-ui:   "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --rail: 56px;
  --props: 320px;
  --topbar: 48px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--ink);
  color: var(--fg);
  font-family: var(--f-ui);
  font-size: 14px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

body[dir="rtl"] { font-feature-settings: "liga" 1; }

a { color: var(--brass); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---- Chiffres : toujours tabulaires, c'est un outil de mesure ---- */
.num, .mono, td.num, input[type="number"] {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------------------------------------------------------------
   Contrôles
   --------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--panel-2);
  color: var(--fg);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.btn:hover:not(:disabled) { background: #26313e; border-color: #3a4756; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn-primary {
  background: var(--brass);
  border-color: var(--brass);
  color: #15100a;
  font-weight: 600;
}
.btn-primary:hover:not(:disabled) { background: #d6b75c; border-color: #d6b75c; }

.btn-ghost { background: transparent; border-color: transparent; color: var(--fg-dim); }
.btn-ghost:hover:not(:disabled) { background: var(--panel-2); color: var(--fg); }

.btn-danger { border-color: #4a2626; color: #ff8a8a; background: #2a1618; }
.btn-danger:hover:not(:disabled) { background: #3a1d20; }

.btn-sm { padding: 5px 10px; font-size: 12.5px; }

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="tel"], select, textarea {
  width: 100%;
  padding: 9px 11px;
  background: var(--ink-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  color: var(--fg);
  font: inherit;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--brass-dim);
  outline: none;
  box-shadow: 0 0 0 3px var(--brass-glow);
}
input::placeholder { color: var(--fg-faint); }

label { display: block; margin-bottom: 5px; color: var(--fg-dim); font-size: 12.5px; }

.field { margin-bottom: 14px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Petites étiquettes de provenance — §53 */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .01em;
  border: 1px solid transparent;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-OFFICIAL      { color: #6ee7a8; background: #12291f; border-color: #1f4433; }
.badge-SURVEY,
.badge-TOPOX        { color: #7fd4ff; background: #10242e; border-color: #1c3d4d; }
.badge-GNSS         { color: #9fb4ff; background: #171d33; border-color: #2a3358; }
.badge-GEOREFERENCED{ color: #ffc978; background: #2a2114; border-color: #4a3a1c; }
.badge-SATELLITE,
.badge-ESTIMATED,
.badge-USER_DRAWING,
.badge-OTHER        { color: #a5b2c2; background: #1c232c; border-color: #2e3a47; }

.chip {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  font-size: 11.5px;
  color: var(--fg-dim);
  font-family: var(--f-mono);
}

/* ---------------------------------------------------------------
   Pages de compte
   --------------------------------------------------------------- */

.auth-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(900px 500px at 78% -10%, #16202b 0%, transparent 62%),
    var(--ink);
}
@media (min-width: 900px) {
  .auth-page { grid-template-columns: 1.05fr .95fr; place-items: stretch; padding: 0; }
}

.auth-aside {
  display: none;
  padding: 56px 52px;
  border-inline-end: 1px solid var(--rule-soft);
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
@media (min-width: 900px) { .auth-aside { display: flex; } }

/* Trame de plan de bornage en fond : le sujet, pas un dégradé décoratif */
.auth-aside::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--rule-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: .35;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at 30% 40%, #000 20%, transparent 78%);
}
.auth-aside > * { position: relative; z-index: 1; }

.auth-form-wrap {
  width: 100%;
  max-width: 420px;
  margin: auto;
  padding: 40px 28px;
}

.brand { display: flex; align-items: center; gap: 11px; }
.brand-mark { width: 34px; height: 34px; flex: none; }
.brand-name { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.brand-name span { color: var(--brass); }

h1 { font-size: 26px; font-weight: 600; letter-spacing: -.02em; margin: 0 0 6px; }
h2 { font-size: 19px; font-weight: 600; margin: 0 0 10px; }
h3 { font-size: 14px; font-weight: 600; margin: 0 0 8px; color: var(--fg-dim); }
.lede { color: var(--fg-dim); margin: 0 0 26px; }

.alert {
  padding: 11px 13px;
  border-radius: var(--r-md);
  border: 1px solid;
  margin-bottom: 16px;
  font-size: 13px;
}
.alert-err  { background: #2a1618; border-color: #4a2626; color: #ffb3b3; }
.alert-ok   { background: #12291f; border-color: #1f4433; color: #9df0c6; }
.alert-info { background: #14202c; border-color: #234055; color: #a9d4f5; }
.alert-warn { background: #291f12; border-color: #4a3a1c; color: #f0d29d; }

.feature-list { list-style: none; padding: 0; margin: 28px 0 0; }
.feature-list li {
  padding: 11px 0;
  border-top: 1px solid var(--rule-soft);
  color: var(--fg-dim);
  display: flex;
  gap: 12px;
  align-items: baseline;
}
.feature-list li b { color: var(--fg); font-weight: 600; min-width: 132px; flex: none; }

.legal {
  font-size: 11.5px;
  color: var(--fg-faint);
  line-height: 1.6;
  border-top: 1px solid var(--rule-soft);
  padding-top: 14px;
  margin-top: 26px;
}

/* ---------------------------------------------------------------
   Tableau de bord
   --------------------------------------------------------------- */

.topbar {
  height: var(--topbar);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 16px;
  background: var(--ink-2);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 40;
}
.topbar .spacer { flex: 1; }

.lang-switch { display: flex; border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden; }
.lang-switch a {
  padding: 4px 9px;
  font-size: 12px;
  color: var(--fg-dim);
  border-inline-end: 1px solid var(--rule);
}
.lang-switch a:last-child { border-inline-end: 0; }
.lang-switch a:hover { background: var(--panel-2); text-decoration: none; }
.lang-switch a[aria-current="true"] { background: var(--brass); color: #15100a; font-weight: 600; }

.page { max-width: 1180px; margin: 0 auto; padding: 28px 20px 64px; }

.page-head {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.page-head .spacer { flex: 1; }

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--rule-soft);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 26px;
}
.stat { background: var(--ink-2); padding: 14px 16px; }
.stat dt { color: var(--fg-faint); font-size: 11.5px; margin: 0 0 4px; }
.stat dd { margin: 0; font-size: 20px; font-weight: 600; font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.stat dd small { font-size: 12px; color: var(--fg-faint); font-weight: 400; }

/* Liste des projets : un registre, pas une grille de cartes */
.proj-table { width: 100%; border-collapse: collapse; }
.proj-table th {
  text-align: start;
  padding: 8px 12px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--fg-faint);
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
.proj-table td {
  padding: 13px 12px;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: middle;
}
.proj-table tbody tr:hover { background: var(--ink-2); }
.proj-table .pname { font-weight: 600; }
.proj-table .psub { color: var(--fg-faint); font-size: 12px; }
.proj-table td.num { text-align: end; white-space: nowrap; }
.proj-actions { display: flex; gap: 6px; justify-content: flex-end; }

.empty {
  border: 1px dashed var(--rule);
  border-radius: var(--r-lg);
  padding: 44px 24px;
  text-align: center;
  color: var(--fg-dim);
}
.empty h2 { color: var(--fg); }

/* ---------------------------------------------------------------
   Fenêtre modale
   --------------------------------------------------------------- */

.modal-back {
  position: fixed;
  inset: 0;
  background: rgba(6, 9, 13, .72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 200;
}
.modal-back[hidden] { display: none; }
.modal {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
}
.modal-head {
  padding: 15px 18px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  gap: 12px;
}
.modal-head h2 { margin: 0; font-size: 16px; }
.modal-head .spacer { flex: 1; }
.modal-body { padding: 18px; overflow: auto; }
.modal-foot {
  padding: 13px 18px;
  border-top: 1px solid var(--rule);
  display: flex;
  gap: 9px;
  justify-content: flex-end;
}

/* ---------------------------------------------------------------
   Messages éphémères
   --------------------------------------------------------------- */

.toasts {
  position: fixed;
  inset-block-end: 18px;
  inset-inline-end: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 500;
  pointer-events: none;
  max-width: min(420px, calc(100vw - 36px));
}
.toast {
  pointer-events: auto;
  background: var(--panel-2);
  border: 1px solid var(--rule);
  border-inline-start: 3px solid var(--info);
  border-radius: var(--r-md);
  padding: 10px 13px;
  font-size: 13px;
  box-shadow: 0 10px 28px rgba(0,0,0,.4);
}
.toast-ok   { border-inline-start-color: var(--ok); }
.toast-err  { border-inline-start-color: var(--err); }
.toast-warn { border-inline-start-color: var(--warn); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}