/* TNTL theme — Tailwind-CDN handles the bulk of styling.  This file
   adds Arabic RTL helpers, stage-badge colours, and the dark-mode
   token overrides + small modern-theme polish (M11 Phase 8). */

:root {
  --tntl-primary: #292524;      /* near-black warm charcoal — wordmark, primary buttons */
  --tntl-accent: #0f6e63;       /* deep teal — links, focus ring, active nav */
  --tntl-accent-soft: #e6f2f0;  /* pale teal wash */
  --tntl-bg: #f7f5f2;           /* warm stone-50 — page background */
  --tntl-surface: #ffffff;      /* clean white cards, kept crisp against the warm bg */
  --tntl-text: #292524;         /* stone-800 charcoal */
  --tntl-text-soft: #6b625b;    /* warm gray */
  --tntl-border: #e7e2da;       /* warm stone border */
  --tntl-font-body: "Inter", "Segoe UI", -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --tntl-font-arabic: "Tahoma", "Segoe UI", Arial, sans-serif;
}

html.dark {
  --tntl-primary: #f2ede6;      /* ivory wordmark on dark */
  --tntl-accent: #5fc9bb;       /* bright teal pop */
  --tntl-accent-soft: #123833;  /* deep teal wash */
  --tntl-bg: #1c1a18;           /* warm near-black */
  --tntl-surface: #242120;      /* warm charcoal card */
  --tntl-text: #f2ede6;         /* ivory */
  --tntl-text-soft: #b7ada2;    /* warm taupe-gray */
  --tntl-border: #3a352f;
}

html.dark body { background: var(--tntl-bg); color: var(--tntl-text); }
html.dark .bg-white { background: var(--tntl-surface) !important; color: var(--tntl-text); }
html.dark .bg-slate-50 { background: var(--tntl-bg) !important; }
html.dark .border-slate-200 { border-color: var(--tntl-border) !important; }
html.dark .text-slate-900 { color: var(--tntl-text) !important; }
html.dark .text-slate-700,
html.dark .text-slate-600 { color: var(--tntl-text-soft) !important; }
html.dark .text-slate-500,
html.dark .text-slate-400 { color: #94a3b8 !important; }
html.dark .hover\:bg-slate-50:hover { background: rgba(95, 201, 187, 0.06) !important; }
html.dark select,
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="password"] {
  background: var(--tntl-surface);
  color: var(--tntl-text);
  border-color: var(--tntl-border);
}

/* Arabic RTL helpers for bilingual legal documents */
[dir="rtl"] {
  font-family: "Amiri", "Scheherazade", "Arabic Typesetting", serif;
}

/* Stage-badge colours for the Kanban dashboard */
.badge-queued         { background: #e2e8f0; color: #0f172a; }
.badge-extracting     { background: #dbeafe; color: #1e40af; }
.badge-researching    { background: #fef3c7; color: #92400e; }
.badge-translating    { background: #fde68a; color: #78350f; }
.badge-proofreading   { background: #fce7f3; color: #9d174d; }
.badge-delivered      { background: #d1fae5; color: #065f46; }
.badge-failed         { background: #fee2e2; color: #991b1b; }

/* Modern polish — soft shadows, subtle hover, focus ring */
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.04), 0 1px 3px 0 rgba(15, 23, 42, 0.05) !important; }
button, a, select, input { transition: background-color 120ms, border-color 120ms, color 120ms, box-shadow 120ms; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible {
  outline: 2px solid var(--tntl-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Cross-module link affordance */
.tntl-xref {
  color: var(--tntl-accent);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  cursor: pointer;
}
.tntl-xref:hover { text-decoration-style: solid; }

/* ═══════════════════════════════════════════════════════════════════
   T2.1 design system (2026-07-14) — app shell + semantic status palette.
   Surfaces use the --tntl-* variables above, so they auto-adapt to dark
   mode with no per-class overrides.  Reused by dashboard, lane cards,
   gate reports, and notifications in later tasks.
   ═══════════════════════════════════════════════════════════════════ */
:root { --tntl-sidebar-w: 15rem; --tntl-radius: 0.6rem; }

/* ── App shell ── */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--tntl-sidebar-w); flex: 0 0 var(--tntl-sidebar-w);
  background: var(--tntl-surface); border-right: 1px solid var(--tntl-border);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column;
}
.sidebar-brand {
  font-weight: 700; letter-spacing: -0.01em; font-size: 1.05rem;
  color: var(--tntl-text); padding: 1.1rem 1.25rem 0.9rem;
}
.nav-link {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.5rem 1.25rem; font-size: 0.875rem; color: var(--tntl-text-soft);
  border-left: 2px solid transparent;
}
.nav-link:hover { color: var(--tntl-text); background: var(--tntl-accent-soft); }
.nav-link.active {
  color: var(--tntl-accent); background: var(--tntl-accent-soft);
  border-left-color: var(--tntl-accent); font-weight: 600;
}
.nav-link svg { width: 1.05rem; height: 1.05rem; flex: none; }
.app-main { flex: 1 1 0%; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: var(--tntl-surface); border-bottom: 1px solid var(--tntl-border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.6rem 1.25rem; gap: 1rem;
}
.topbar-title { font-weight: 600; color: var(--tntl-text); }
.content { padding: 1.5rem; flex: 1; }

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

/* ── Icon buttons / chips in the topbar ── */
.icon-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 0.5rem; color: var(--tntl-text-soft);
  border: 1px solid transparent;
}
.icon-btn:hover { color: var(--tntl-text); background: var(--tntl-accent-soft); }
.icon-btn svg { width: 1.15rem; height: 1.15rem; }
.badge-count {
  position: absolute; top: -0.25rem; right: -0.25rem; min-width: 1.05rem; height: 1.05rem;
  padding: 0 0.25rem; border-radius: 999px; background: #b3261e; color: #fff;
  font-size: 0.65rem; font-weight: 700; line-height: 1.05rem; text-align: center;
}
.chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.25rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 500;
  border: 1px solid var(--tntl-border); color: var(--tntl-text-soft);
  background: var(--tntl-bg);
}
.dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; flex: none; }

/* ── Semantic status palette (gates, lanes, verdicts) ── */
.status-pass     { background: #eef6ee; color: #166534; border-color: #bfe0c4; }
.status-warn     { background: #fbf1e1; color: #a15c07; border-color: #f0d2a0; }
.status-fail     { background: #fbeceb; color: #b3261e; border-color: #eec0bc; }
.status-advisory { background: #f2efe9; color: #5c564f; border-color: #ded8cc; }
.status-running  { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.status-idle     { background: var(--tntl-bg); color: var(--tntl-text-soft); border-color: var(--tntl-border); }
.dot-pass     { background: #10b981; } .dot-warn    { background: #f59e0b; }
.dot-fail     { background: #f43f5e; } .dot-advisory{ background: #94a3b8; }
.dot-running  { background: #3b82f6; } .dot-idle    { background: #cbd5e1; }
.status-pill {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.15rem 0.55rem; border-radius: 999px; border: 1px solid transparent;
  font-size: 0.72rem; font-weight: 600;
}
.dot-pulse { animation: tntl-pulse 1.4s ease-in-out infinite; }
@keyframes tntl-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

html.dark .status-pass     { background: #122a1a; color: #8fd19e; border-color: #1f4d2f; }
html.dark .status-warn     { background: #332406; color: #f0be6f; border-color: #6b4a12; }
html.dark .status-fail     { background: #3a1512; color: #f2a29c; border-color: #6b2521; }
html.dark .status-advisory { background: #332f2b; color: #d6d0c6; border-color: #4a453e; }
html.dark .status-running  { background: rgba(59,130,246,0.12); color: #93c5fd; border-color: rgba(59,130,246,0.3); }

/* ═══════════════════════════════════════════════════════════════════
   T2.4 — notifications bell dropdown.  <details>/<summary> gives the
   open/close toggle with zero JS. ".badge-count" above is reused as-is.
   ═══════════════════════════════════════════════════════════════════ */
.notif-dropdown { position: relative; }
.notif-dropdown > summary { list-style: none; cursor: pointer; }
.notif-dropdown > summary::-webkit-details-marker { display: none; }
.notif-panel {
  position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: 40;
  width: 22rem; max-width: calc(100vw - 2rem); max-height: 28rem; overflow-y: auto;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
}
.notif-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--tntl-border);
  font-size: 0.8rem; font-weight: 600; color: var(--tntl-text);
}
.notif-mark-all {
  font-size: 0.72rem; font-weight: 500; color: var(--tntl-accent);
  background: none; border: none; cursor: pointer; padding: 0;
}
.notif-mark-all:hover { text-decoration: underline; }
.notif-list { list-style: none; margin: 0; padding: 0; }
.notif-item { padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--tntl-border); font-size: 0.8rem; }
.notif-item:last-child { border-bottom: none; }
.notif-item.unread { background: var(--tntl-accent-soft); }
.notif-item-title { font-weight: 600; color: var(--tntl-text); text-decoration: none; display: block; }
.notif-item-title:hover { text-decoration: underline; }
.notif-item-title.level-error { color: #be123c; }
.notif-item-title.level-action { color: #b45309; }
.notif-item-body { color: var(--tntl-text-soft); margin-top: 0.15rem; }
.notif-item-time { color: var(--tntl-text-soft); font-size: 0.7rem; margin-top: 0.25rem; }
.notif-empty { padding: 1.2rem; text-align: center; color: var(--tntl-text-soft); font-size: 0.8rem; }
html.dark .notif-item.unread { background: rgba(95, 201, 187, 0.12); }

/* ═══════════════════════════════════════════════════════════════════
   T2.6 — job detail page tabs.  CSS-only (radio-driven), zero JS.
   Structure: a run of hidden <input type=radio> siblings, a `.tab-nav-row`
   of <label for="..."> siblings, then a single `.tab-panels` container
   whose children are shown/hidden via the general-sibling combinator
   keyed off which radio is :checked.  Every panel is always present in
   the DOM (so route/template tests that grep response text for a
   button/form still find it regardless of which tab is active) — only
   visibility toggles. ═══════════════════════════════════════════════ */
.tab-input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.tab-nav-row {
  display: flex; flex-wrap: wrap; gap: 0.25rem;
  border-bottom: 1px solid var(--tntl-border); margin-bottom: 1rem;
}
.tab-btn {
  display: inline-flex; align-items: center;
  padding: 0.55rem 0.9rem; margin-bottom: -1px;
  font-size: 0.825rem; font-weight: 600; color: var(--tntl-text-soft);
  border-bottom: 2px solid transparent; cursor: pointer; user-select: none;
}
.tab-btn:hover { color: var(--tntl-text); }
.tab-panels .tab-panel { display: none; }

#tab-overview:checked ~ .tab-nav-row label[for="tab-overview"],
#tab-pipeline:checked ~ .tab-nav-row label[for="tab-pipeline"],
#tab-gates:checked ~ .tab-nav-row label[for="tab-gates"],
#tab-files:checked ~ .tab-nav-row label[for="tab-files"],
#tab-history:checked ~ .tab-nav-row label[for="tab-history"] {
  color: var(--tntl-accent); border-bottom-color: var(--tntl-accent);
}

#tab-overview:checked ~ .tab-panels [data-tab-panel="overview"],
#tab-pipeline:checked ~ .tab-panels [data-tab-panel="pipeline"],
#tab-gates:checked ~ .tab-panels [data-tab-panel="gates"],
#tab-files:checked ~ .tab-panels [data-tab-panel="files"],
#tab-history:checked ~ .tab-panels [data-tab-panel="history"] {
  display: block;
}

/* ── LOCAL-instance ribbon (2026-07-24) ─────────────────────────────────
   Shown only when instance_env != "production" (main.py binds the global).
   The server at pipeline.topnotchtransloc.com is primary; this makes the
   local dev stack unmistakable at a glance. Amber warning stripes so it
   reads as "caution: not the real one" in both themes. */
.local-ribbon {
  position: sticky;
  top: 0;
  z-index: 60;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #78350f;
  padding: 4px 8px;
  background: repeating-linear-gradient(
    -45deg, #fbbf24 0 14px, #fde68a 14px 28px);
  border-bottom: 1px solid #b45309;
}
html.dark .local-ribbon {
  color: #fef3c7;
  background: repeating-linear-gradient(
    -45deg, #78350f 0 14px, #92400e 14px 28px);
  border-bottom-color: #f59e0b;
}