/*
 * zissou.css — Zissou Design System Tokens
 *
 * Shared CSS custom properties for the Team Zissou homelab suite.
 * Link this file before app-specific stylesheets in each fleet app.
 *
 * Apps: Steve (7777) · Ned (8443) · Seu (8765) · Wolodarsky (5577) · Ferry (58081)
 */

/* Typography */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&display=swap');

:root {
  /* ── Brand palette ─────────────────────────────────────── */
  --zissou-red:  #c0392b;   /* Team Zissou brand red — reserved for future use */
  --ocean-deep:  #0d7377;   /* Primary teal — interactive elements              */
  --ocean-dark:  #0a5e61;   /* Teal hover / active state                        */
  --sand:        #e5e5e0;   /* Warm border / divider                            */
  --off-white:   #f7f7f5;   /* Page background                                  */

  /* ── Semantic UI colors ────────────────────────────────── */
  --color-ok:       #22c55e;
  --color-warn:     #f59e0b;
  --color-critical: #ef4444;

  /* ── Text hierarchy ────────────────────────────────────── */
  --text-primary:   #1a1a1a;  /* headings, body copy                 */
  --text-secondary: #555;     /* descriptions, drawer labels         */
  --text-muted:     #888;     /* stat labels, section headings       */
  --text-faint:     #999;     /* icon buttons at rest, subtle detail */
  --text-ghost:     #bbb;     /* timestamps, arrows, footer          */

  /* ── Surfaces ──────────────────────────────────────────── */
  --card-bg:      #fff;
  --border-color: var(--sand);
  --border-inner: #f0f0ec;  /* inner / subtle dividers  */
  --track-bg:     #eee;     /* progress bar track       */

  /* ── Interaction ───────────────────────────────────────── */
  --shadow-card:  rgba(13, 115, 119, 0.10);  /* card hover glow  */
  --del-hover-bg: #fef2f2;                   /* delete btn hover */

  /* ── Typography ────────────────────────────────────────── */
  --font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-heading: 'Playfair Display', Georgia, serif;

  /* ── Shape & motion ────────────────────────────────────── */
  --radius-card:      10px;
  --radius-btn:       6px;
  --transition-base:  0.15s;

  /* ── Color scheme hint ─────────────────────────────────── */
  color-scheme: light;

  /* ── Per-app accent colors ─────────────────────────────── */

  /* Ned — amber */
  --ned-accent: #f59e0b;
  --ned-bg:     #fef3c7;
  --ned-text:   #92400e;

  /* Seu — teal */
  --seu-accent: #0d9488;
  --seu-bg:     #ccfbf1;
  --seu-text:   #065f46;

  /* Wolodarsky — violet */
  --wolodarsky-accent: #8b5cf6;
  --wolodarsky-bg:     #ede9fe;
  --wolodarsky-text:   #5b21b6;

  /* Ferry — blue */
  --ferry-accent: #3b82f6;
  --ferry-bg:     #dbeafe;
  --ferry-text:   #1e40af;

  /* Forecast — sky */
  --forecast-accent: #0ea5e9;
  --forecast-bg:     #e0f2fe;
  --forecast-text:   #075985;

  /* Eleanor — warm amber/gold */
  --eleanor-accent: #c08b2b;
  --eleanor-bg:     #fff7e6;
  --eleanor-text:   #92400e;

  /* Jane — coral red (Zissou jumpsuit) */
  --jane-accent: #e05c4b;
  --jane-bg:     #fef2ef;
  --jane-text:   #7a1f12;

  /* Bill — emerald */
  --bill-accent: #10b981;
  --bill-bg:     #d1fae5;
  --bill-text:   #065f46;

  /* Ogata — slate */
  --ogata-accent: #64748b;
  --ogata-bg:     #f1f5f9;
  --ogata-text:   #334155;

  /* Pelé — rose pink */
  --pele-accent: #f43f5e;
  --pele-bg:     #ffe4e6;
  --pele-text:   #881337;

  /* SquareWorld — lime green */
  --squareworld-accent: #84cc16;
  --squareworld-bg:     #f7fee7;
  --squareworld-text:   #3f6212;

  /* BaronOfRails — warm rust */
  --baronofrails-accent: #b45309;
  --baronofrails-bg:     #fef3c7;
  --baronofrails-text:   #78350f;

  /* Belafonte — nautical navy/brass */
  --belafonte-accent: #c9a84c;
  --belafonte-bg:     #0d1b2a;
  --belafonte-text:   #f0ebe0;
}

/* ── Dark mode ──────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    /* Surfaces */
    --off-white:    #111318;
    --card-bg:      #1a1d27;
    --sand:         #252836;
    --border-color: #252836;
    --border-inner: #1e2232;
    --track-bg:     #252836;

    /* Interactive — brighter teal reads on dark bg */
    --ocean-deep: #14b8a6;
    --ocean-dark: #0d9488;

    /* Text */
    --text-primary:   #e0dedd;
    --text-secondary: #9a9895;
    --text-muted:     #666a78;
    --text-faint:     #555d72;
    --text-ghost:     #6b7280;

    /* Misc */
    --shadow-card:  rgba(20, 184, 166, 0.10);
    --del-hover-bg: #2d1515;

    /* Per-app badges — inverted for dark surfaces */
    --ned-bg:          #451a03;  --ned-text:        #fcd34d;
    --seu-bg:          #022c22;  --seu-text:        #34d399;
    --wolodarsky-bg:   #2e1065;  --wolodarsky-text: #a78bfa;
    --ferry-bg:        #172554;  --ferry-text:      #60a5fa;
    --forecast-bg:     #082f49;  --forecast-text:   #38bdf8;
    --eleanor-bg:      #1c1508;  --eleanor-text:    #fde68a;
    --jane-bg:         #2a1210;  --jane-text:       #f4a99a;
    --bill-accent: #34d399;
    --bill-bg:     #064e3b;
    --bill-text:   #a7f3d0;
    /* Ogata — slate (dark) */
    --ogata-accent: #94a3b8;
    --ogata-bg:     #1e293b;
    --ogata-text:   #cbd5e1;
    /* Pelé — rose pink (dark) */
    --pele-accent: #fb7185;
    --pele-bg:     #4c0519;
    --pele-text:   #fda4af;
  }
}

/* ── Shared fleet navigation bar ───────────────────────────────────────── */
/*
 * .zissou-nav — 40px sticky top bar shared by all fleet apps.
 * Left:   Team Zissou crest + wordmark
 * Center: app name (in Playfair)
 * Right:  link back to Steve (empty on Steve itself)
 *
 * Usage in other apps:
 *   <nav class="zissou-nav">
 *     <div class="zissou-nav-inner">
 *       <div class="zissou-nav-brand">
 *         <img src="/static/favicon.svg" class="zissou-nav-crest" alt="" />
 *         <span class="zissou-nav-wordmark">Team Zissou</span>
 *       </div>
 *       <span class="zissou-nav-app">AppName</span>
 *       <div class="zissou-nav-end">
 *         <a class="zissou-nav-back" href="http://100.73.184.25:7777">Steve</a>
 *       </div>
 *     </div>
 *   </nav>
 */
.zissou-nav {
  height: 40px;
  background: var(--ocean-deep);
  border-bottom: 2px solid var(--ocean-dark);
  position: sticky;
  top: 0;
  z-index: 100;
}

.zissou-nav-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 2rem;
  height: 100%;
  display: flex;
  align-items: center;
}

.zissou-nav-brand {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  min-width: 0;
}

.zissou-nav-crest {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.zissou-nav-wordmark {
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
}

.zissou-nav-app {
  flex: 0;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  color: #fff;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.zissou-nav-end {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.zissou-nav-link {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.70);
  text-decoration: none;
  letter-spacing: 0.02em;
  margin-right: 0.8rem;
  padding: 0.3rem 0.2rem;  /* tap target */
  transition: color var(--transition-base);
}
.zissou-nav-link:hover { color: #fff; }

.zissou-nav-back {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.60);
  text-decoration: none;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.2rem;  /* tap target */
  transition: color var(--transition-base);
}
.zissou-nav-back:hover { color: rgba(255, 255, 255, 0.95); }

.zissou-nav-theme-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0.35rem 0.5rem;  /* tap target */
  border-radius: var(--radius-btn);
  line-height: 1;
  transition: color var(--transition-base), background var(--transition-base);
}

@media (max-width: 600px) {
  .zissou-nav-inner { padding: 0 1rem; }
  .zissou-nav-wordmark { display: none; }
}

@media (max-width: 480px) {
  /* Icon-only nav on small phones — title attr provides context on hover/tap */
  .nav-label { display: none; }
  .zissou-nav-link { margin-right: 0.4rem; }
}
.zissou-nav-theme-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

/* ── Forced theme overrides (via data-theme attribute + localStorage) ─────── */
/* Specificity (0,1,1) beats @media :root (0,1,0) in both directions.          */

html[data-theme="dark"] {
  color-scheme: dark;
  --off-white:    #111318;
  --card-bg:      #1a1d27;
  --sand:         #252836;
  --border-color: #252836;
  --border-inner: #1e2232;
  --track-bg:     #252836;
  --ocean-deep:   #14b8a6;
  --ocean-dark:   #0d9488;
  --text-primary:   #e0dedd;
  --text-secondary: #9a9895;
  --text-muted:     #666a78;
  --text-faint:     #555d72;
  --text-ghost:     #6b7280;
  --shadow-card:  rgba(20, 184, 166, 0.10);
  --del-hover-bg: #2d1515;
  --ned-bg: #451a03; --ned-text: #fcd34d;
  --seu-bg: #022c22; --seu-text: #34d399;
  --wolodarsky-bg: #2e1065; --wolodarsky-text: #a78bfa;
  --ferry-bg: #172554; --ferry-text: #60a5fa;
  --forecast-bg: #082f49; --forecast-text: #38bdf8;
  --eleanor-bg:  #1c1508; --eleanor-text:  #fde68a;
  --jane-bg:     #2a1210; --jane-text:     #f4a99a;
  --bill-accent: #34d399; --bill-bg: #064e3b; --bill-text: #a7f3d0;
  --pele-accent: #fb7185; --pele-bg: #4c0519; --pele-text: #fda4af;
  --belafonte-accent: #e5c05c; --belafonte-bg: #162436; --belafonte-text: #f0ebe0;
}

html[data-theme="light"] {
  color-scheme: light;
  --off-white:    #f7f7f5;
  --card-bg:      #fff;
  --sand:         #e5e5e0;
  --border-color: #e5e5e0;
  --border-inner: #f0f0ec;
  --track-bg:     #eee;
  --ocean-deep:   #0d7377;
  --ocean-dark:   #0a5e61;
  --text-primary:   #1a1a1a;
  --text-secondary: #555;
  --text-muted:     #888;
  --text-faint:     #999;
  --text-ghost:     #bbb;
  --shadow-card:  rgba(13, 115, 119, 0.10);
  --del-hover-bg: #fef2f2;
  --ned-bg: #fef3c7; --ned-text: #92400e;
  --seu-bg: #ccfbf1; --seu-text: #065f46;
  --wolodarsky-bg: #ede9fe; --wolodarsky-text: #5b21b6;
  --ferry-bg: #dbeafe; --ferry-text: #1e40af;
  --forecast-bg: #e0f2fe; --forecast-text: #075985;
  --eleanor-bg:  #fff7e6; --eleanor-text:  #92400e;
  --jane-bg:     #fef2ef; --jane-text:     #7a1f12;
  --bill-accent: #10b981; --bill-bg: #d1fae5; --bill-text: #065f46;
  --pele-accent: #f43f5e; --pele-bg: #ffe4e6; --pele-text: #881337;
}