/*
 * TIDEFORGE DESIGN SYSTEM — a MunFar Workshop product
 * Source of truth: https://munfar.mael.dk/v1/munfar.css (linked in every page).
 * The tokens below are a local floor, in case that file fails to load.
 * Forge-tech: carved brass, firelight & circuit.
 */

/* ═══════════════════════════════════════════════════════
   COLOR TOKENS — MunFar Workshop palette
   ═══════════════════════════════════════════════════════ */
:root {
  /* TYPE — three voices. Canonical: munfar-palette.md */
  --font-display: 'Cinzel', Georgia, serif;
  --font-body:    'Spectral', Georgia, serif;
  --font-data:    'Azeret Mono', ui-monospace, monospace;

  /* CANONICAL MunFar tokens — the only place a hex lives.
     Source of truth: munfar-palette.md */
  --forge-black:  #13100B;
  --charcoal:     #1C1813;
  --ember-slate:  #261F16;
  --raised:       #322817;
  --copper-line:  #4E3A22;
  --copper:       #B87333;
  --oak:          #8B5E3C;
  --amber:        #E8832A;
  --amber-glow:   #FFB763;
  --teal:         #2ABFBF;
  --teal-soft:    #3FA8A4;
  --ink:          #F1E7D3;
  --ink-soft:     #CCB99B;
  --muted:        #8C7C64;
  --faint:        #5E5343;
  --success:      #8FAE4D;
  --warning:      #E6B23A;
  --danger:       #C7492A;
  --info:         #2ABFBF;

  /* TIDEFORGE LOCAL ALIASES — this app's historic names, now pointing at the
     canonical tokens above. Kept so the ~90 existing usages keep working.
     Do not add new ones; use the canonical names in new code. */
  --abyss:        var(--forge-black);
  --fjord:        var(--charcoal);
  --slate:        var(--ember-slate);
  --slate-2:      var(--raised);
  --line:         var(--copper-line);
  --brass:        var(--amber);
  --brass-bright: var(--amber-glow);
  --teal-dim:     var(--teal-soft);
  --muted-2:      var(--faint);
  --good:         var(--success);
  --warn:         var(--warning);
}

/* ═══════════════════════════════════════════════════════
   RESET + BASE
   ═══════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  font-family: var(--font-body);
  background: var(--abyss);
  color: var(--ink);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
  line-height: 1.6;
  /* Override any Tailwind background */
  background-color: var(--abyss) !important;
}

/* ═══════════════════════════════════════════════════════
   ATMOSPHERE — layered fixed pseudo-elements
   ═══════════════════════════════════════════════════════ */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(100% 60% at 50% -10%, rgba(232,131,42,.10), transparent 55%),
    radial-gradient(80% 60% at 90% 110%, rgba(42,191,191,.07), transparent 50%);
}

/* Subtle fractal-noise grain at ~3.5% */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════════════════════
   PAGE STRUCTURE
   ═══════════════════════════════════════════════════════ */

/* Sits above the atmospheric background */
.fj-page {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Centred, padded content column */
.fj-wrap {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px 80px;
  width: 100%;
}

/* ═══════════════════════════════════════════════════════
   HEADER & BRAND
   ═══════════════════════════════════════════════════════ */
.fj-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 0 22px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 36px;
}

/* Brand */
.fj-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}

.fj-mark {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--brass);
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 30%, rgba(232,131,42,.18), transparent 70%);
  box-shadow: 0 0 22px rgba(232,131,42,.18);
  flex-shrink: 0;
}

.fj-mark svg {
  width: 24px;
  height: 24px;
}

.fj-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 21px;
  letter-spacing: .14em;
  color: var(--ink);
  line-height: 1;
}

.fj-sub {
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: .34em;
  color: var(--brass);
  text-transform: uppercase;
  margin-top: 5px;
}

/* ═══════════════════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════════════════ */
.fj-nav {
  display: flex;
  gap: 4px;
  align-items: center;
}

.fj-nav a,
.fj-nav button {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 9px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: color .25s, background .25s, border-color .25s;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}

.fj-nav a:hover,
.fj-nav button:hover {
  color: var(--ink);
  background: var(--slate);
}

.fj-nav a.fj-active {
  color: var(--abyss);
  background: var(--brass);
  font-weight: 700;
  border-color: transparent;
}

.fj-nav button.fj-signout {
  color: var(--muted-2);
  border-color: var(--line);
}

.fj-nav button.fj-signout:hover {
  color: var(--ink);
  background: var(--slate);
  border-color: var(--teal-dim);
}

/* ═══════════════════════════════════════════════════════
   EYEBROW SECTION HEADING
   ═══════════════════════════════════════════════════════ */
.eyebrow {
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--teal);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}

/* ═══════════════════════════════════════════════════════
   PANEL / CARD SURFACE
   ═══════════════════════════════════════════════════════ */
.panel {
  background: linear-gradient(155deg, var(--slate) 0%, var(--fjord) 100%);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 24px 60px -30px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.03);
}

/* ═══════════════════════════════════════════════════════
   CTA BUTTON
   ═══════════════════════════════════════════════════════ */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--brass);
  color: var(--abyss);
  border: none;
  cursor: pointer;
  font-family: var(--font-data);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 13px 22px;
  border-radius: 10px;
  transition: background .25s, transform .25s, box-shadow .25s;
  text-decoration: none;
}

.cta:hover {
  background: var(--brass-bright);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -10px rgba(232,131,42,.6);
}

/* ═══════════════════════════════════════════════════════
   SCORE PILLS / BADGES
   ═══════════════════════════════════════════════════════ */
.pip {
  font-family: var(--font-data);
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: .05em;
  white-space: nowrap;
}

.pip.hot  { background: rgba(127,176,105,.14); color: var(--good);   border: 1px solid rgba(127,176,105,.30); }
.pip.mid  { background: rgba(217,160,74,.12);  color: var(--brass);  border: 1px solid rgba(217,160,74,.28);  }
.pip.low  { background: rgba(239,68,68,.10);   color: #f87171;       border: 1px solid rgba(239,68,68,.25);   }
.pip.none { background: rgba(93,113,123,.12);  color: var(--muted);  border: 1px solid rgba(93,113,123,.25);  }

/* ═══════════════════════════════════════════════════════
   DATA GAUGE (instrument panel cells)
   ═══════════════════════════════════════════════════════ */
.gauge {
  padding: 22px 20px;
  border-right: 1px solid var(--line);
  position: relative;
}

.gauge:last-child { border-right: none; }

.gauge .g-label {
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.gauge .g-val {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  color: var(--ink);
  margin-top: 8px;
  line-height: 1;
}

.gauge .g-val small {
  font-size: 14px;
  color: var(--brass);
  font-family: var(--font-data);
  font-weight: 400;
}

.gauge .g-meta {
  font-size: 13px;
  color: var(--teal);
  margin-top: 7px;
  font-family: var(--font-body);
}

/* ═══════════════════════════════════════════════════════
   SPOT / LOG CARDS
   ═══════════════════════════════════════════════════════ */
.spot {
  padding: 20px;
  cursor: pointer;
  transition: border-color .25s, transform .25s, background .25s;
}

.spot:hover {
  border-color: var(--teal-dim);
  transform: translateY(-2px);
  background: linear-gradient(155deg, var(--slate-2) 0%, var(--slate) 100%);
}

.spot-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.spot-head h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .02em;
}

.spot .row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--muted);
  padding: 6px 0;
  border-bottom: 1px dashed var(--line);
}

.spot .row:last-child { border-bottom: none; }

.spot .row b {
  color: var(--ink);
  font-weight: 500;
  font-family: var(--font-data);
  font-size: 12px;
}

/* ═══════════════════════════════════════════════════════
   LOG ENTRY ROWS
   ═══════════════════════════════════════════════════════ */
.log-item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  transition: background .2s;
}

.log-item:last-child { border-bottom: none; }
.log-item:hover      { background: var(--slate); }

.log-fish {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 40% 30%, rgba(42,191,191,.25), rgba(28,24,19,.4));
  border: 1px solid var(--teal-dim);
  color: var(--teal);
}

.log-item .info { flex: 1; }

.log-item .info .sp {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--ink);
}

.log-item .info .dt {
  font-family: var(--font-data);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .06em;
  margin-top: 3px;
  text-transform: uppercase;
}

.log-item .log-size {
  text-align: right;
  font-family: var(--font-data);
}

.log-item .log-size .big   { font-size: 18px; color: var(--brass); }
.log-item .log-size .small { font-size: 11px; color: var(--muted); display: block; margin-top: 2px; }

/* ═══════════════════════════════════════════════════════
   FORMS (interim — refined page-by-page)
   ═══════════════════════════════════════════════════════ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
select,
textarea {
  background: var(--fjord) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  outline: none !important;
  transition: border-color .2s !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--teal) !important;
}

label {
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
  display: block;
}

/* ═══════════════════════════════════════════════════════
   ENTRANCE ANIMATION
   ═══════════════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  animation: fj-rise .7s cubic-bezier(.2,.7,.3,1) forwards;
}

@keyframes fj-rise {
  to { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════
   LEAFLET MAP — keep above atmosphere layer
   ═══════════════════════════════════════════════════════ */
.leaflet-container {
  z-index: 2 !important;
  background: var(--fjord) !important;
}

.leaflet-popup-content-wrapper {
  background: var(--slate) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 40px -10px rgba(0,0,0,.7) !important;
}

.leaflet-popup-tip {
  background: var(--slate) !important;
}

.leaflet-popup-content {
  font-family: var(--font-body);
  margin: 12px 16px !important;
}

.leaflet-control-zoom a {
  background: var(--fjord) !important;
  color: var(--teal) !important;
  border-color: var(--line) !important;
}

.leaflet-control-zoom a:hover {
  background: var(--slate) !important;
  color: var(--brass) !important;
}

/* ═══════════════════════════════════════════════════════
   TAILWIND OVERRIDE — neutralise conflicting Tailwind
   ═══════════════════════════════════════════════════════ */
.bg-slate-900 { background-color: var(--abyss) !important; }
.bg-slate-800 { background-color: var(--fjord) !important; }
.bg-slate-700 { background-color: var(--slate) !important; }
.border-slate-700 { border-color: var(--line) !important; }
.text-slate-100 { color: var(--ink) !important; }
.text-slate-400 { color: var(--muted) !important; }
.text-slate-500 { color: var(--muted-2) !important; }
.text-cyan-400  { color: var(--teal) !important; }
.text-cyan-300  { color: var(--brass-bright) !important; }
.bg-cyan-600    { background-color: var(--brass) !important; }
.bg-cyan-500    { background-color: var(--brass-bright) !important; }
.hover\:bg-cyan-500:hover { background-color: var(--brass-bright) !important; }
.text-white     { color: var(--ink) !important; }

/* ═══════════════════════════════════════════════════════
   UTILITY — replaces Tailwind essentials
   ═══════════════════════════════════════════════════════ */
.hidden { display: none !important; }

@keyframes spin {
  to { transform: rotate(360deg); }
}
.animate-spin { animation: spin 1s linear infinite; }

@keyframes fj-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .4; }
}
.animate-pulse { animation: fj-pulse 1.5s ease-in-out infinite; }

/* ═══════════════════════════════════════════════════════
   MOBILE  ≤720px
   ═══════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .fj-header {
    flex-direction: column;
    gap: 18px;
    align-items: flex-start;
  }

  .fj-nav {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 4px;
    /* hide scrollbar visually */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .fj-nav::-webkit-scrollbar { display: none; }
}