/* ===== P6 Tools Hub — ScopeControl skin ===== */
/* Loaded after custom.css on every page unless the owner has chosen the
   classic look on /admin/appearance (UiSkinService). Classic is custom.css
   alone, so nothing here may be needed for a page to work — this file only
   restyles.

   The look, shared with Doc and scopecontrol.net:
     - navy accent (#2e3192, the logo's navy; lifted to #9a9ff0 in dark mode)
     - a warm stone ground instead of blue-grey, with a faint amber wash on
       card and section headers
     - Tenor Sans headings (scopecontrol.net's face), Lato body text; IBM Plex
       Mono stays on the numbers and IDs, where it already is
     - the ScopeControl mark beside the brand and a red rule under the navbar

   Amber still means "warning" here. custom.css lets a few warning states
   borrow the accent; with a navy accent they would turn navy, so they are
   pinned back to amber at the end of this file. */

@import url('https://fonts.bunny.net/css?family=tenor-sans:400|lato:400,700');

/* ─── Tokens ─── */
:root,
[data-theme="light"] {
  --accent: #2e3192;
  --accent-rgb: 46, 49, 146;
  --accent-hover: #23266f;
  --accent-text: #ffffff;

  --bs-link-color: #2e3192;
  --bs-link-color-rgb: 46, 49, 146;
  --bs-link-hover-color: #23266f;
  --bs-link-hover-color-rgb: 35, 38, 111;

  --skin-header-band: #f8f0e2;
  --skin-subtle: #faf8f4;
}
[data-theme="light"] {
  --bg: #f7f5f1;
  --surface: #ffffff;
  --text: #1c1917;
  --text-muted: #6f6862;
  --border: #e7e2d9;
  --navbar-bg: #1c1917;
}
[data-theme="dark"] {
  --accent: #9a9ff0;
  --accent-rgb: 154, 159, 240;
  --accent-hover: #b8bcf5;
  --accent-text: #110f0d;

  --bs-link-color: #b8bcf5;
  --bs-link-color-rgb: 184, 188, 245;
  --bs-link-hover-color: #d4d6fa;
  --bs-link-hover-color-rgb: 212, 214, 250;

  --bg: #1a1816;
  --surface: #24211e;
  --text: #ece8e1;
  --text-muted: #a8a29e;
  --border: #3a3530;
  --navbar-bg: #110f0d;

  --skin-header-band: #2e2820;
  --skin-subtle: #2a2723;
}

/* ─── Type ───
   custom.css names a role on every rule (--font-heading / --font-ui /
   --font-data), so these three lines restyle the whole site. Plex Mono stays
   the data face: numbers, IDs and codes line up in columns. */
:root {
  --font-heading: 'Tenor Sans', 'Lato', sans-serif;
  --font-ui: 'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-data: 'IBM Plex Mono', monospace;

  /* <code> and <pre> (activity IDs, chat tables) take the data face too. */
  --bs-font-monospace: var(--font-data);

  /* The narrative diagrams are SVG drawn in Java; they read these, and fall
     back to system faces when the skin is off or the SVG stands alone. */
  --font-diagram-text: var(--font-ui);
  --font-diagram-data: var(--font-data);
}
body {
  background-color: #f7f5f1;
  color: #1c1917;
}
h1, h2, h3, h4, h5, h6,
.navbar-brand,
.app-nav-drawer .offcanvas-title,
.nav-drawer-group,
.section-header,
.card-header,
.dcma-popover-header-title,
.diff-table thead .diff-group-row th,
.narr-section-toggle {
  /* Tenor Sans has one weight; anything heavier is a synthesised bold. */
  font-weight: 400;
}
h1, h2, h3, h4, h5, h6, .navbar-brand, .section-header, .card-header { letter-spacing: 0.02em; }

/* ─── Navbar: the mark and the red rule ─── */
.navbar { border-bottom: 2px solid #ec1a24; }
.navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.navbar-brand::before {
  content: "";
  flex: none;
  width: 28px;
  height: 28px;
  background: url('/icons/scope-mark.svg') center / contain no-repeat;
}

/* ─── Header bands: the faint amber wash ─── */
[data-theme="light"] .card-header,
[data-theme="light"] .section-header { background-color: var(--skin-header-band); }
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-header:not(.section-header),
[data-theme="dark"] .section-header { background-color: var(--skin-header-band); }
[data-theme="dark"] #ai-admin .card-header { background-color: var(--skin-header-band); }

/* ─── Neutrals custom.css writes as literals ─── */
.stat-card,
.card,
.dcma-metric-card,
.dcma-popover { border-color: #e7e2d9; }
.stat-label,
.table thead th,
.col-form-label,
.dcma-popover-body label,
.dcma-popover-reset:hover { color: #6f6862; }
.table thead th { border-bottom-color: #e7e2d9; }
.text-muted { color: #77706a !important; }
.dcma-metric-card .dcma-metric-id,
.dcma-popover-close-btn,
.dcma-popover-reset,
.dcma-popover-range { color: #a8a29e; }
.dcma-metric-card.status-na::before { background: #a8a29e; }
.dcma-detail-header.na { border-left-color: #a8a29e; }
.badge-dcma-na { background: #f3f0ea; color: #6f6862; border-color: #e7e2d9; }
.dcma-metric-card .dcma-tooltip { background: #1c1917; }
.dcma-metric-card .dcma-tooltip::after { border-top-color: #1c1917; }
.dcma-popover-header { background: #faf8f4; border-bottom-color: #e7e2d9; }
.dcma-popover-header-title { color: #1c1917; }
.dcma-popover-body input { background: #faf8f4; }
.wbs-bar-wrapper { background: #e7e2d9; }

[data-theme="dark"] .dcma-popover-body label,
[data-theme="dark"] .dcma-popover-reset:hover { color: #a8a29e; }
[data-theme="dark"] .dcma-popover-reset,
[data-theme="dark"] .dcma-popover-close-btn { color: #78716c; }
[data-theme="dark"] .dcma-popover-body input,
[data-theme="dark"] pre { background: #1a1816; }
[data-theme="dark"] .dcma-popover-header,
[data-theme="dark"] .input-group-text,
[data-theme="dark"] .card-footer { background-color: var(--skin-subtle); }
[data-theme="dark"] .text-muted { color: var(--text-muted) !important; }

/* ─── Warning stays amber ─── */
.dcma-metric-card.status-warning::before { background: #d97706; }
.alert-warning,
.dcma-detail-header.warning { border-left-color: #d97706; }
[data-theme="dark"] .dcma-metric-card.status-warning::before { background: #f59e0b; }
[data-theme="dark"] .badge-dcma-warning {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.3);
}

/* ═══ Normalised to Doc (2026-10-22) ═══
   Doc's sign-in box, menu button and menu, copied from its Tailwind classes
   (LoginForm.tsx, AuthBrandHeader.tsx, Header.tsx, Sidebar.tsx) so the two
   apps read as one product. Classic keeps P6 Tools' own versions. */

/* ─── Sign-in pages (.auth-page): Doc's max-w-md column and card ─── */
.auth-page { max-width: 28rem; padding-top: 1.5rem; }
.auth-page > .text-center { margin-bottom: 2rem !important; }
.auth-page h1 { font-size: 1.875rem; line-height: 2.25rem; margin: 1.5rem 0 0; }
.auth-page .lead { font-size: 0.875rem; margin: 0.5rem 0 0; color: var(--text-muted); }
.auth-page .card {
  max-width: none !important;
  border: 0;
  border-radius: 0.5rem;
  background: var(--surface);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}
.auth-page .card:hover { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); }
[data-theme="dark"] .auth-page .card { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4); }
.auth-page .card-body { padding: 2rem 2.5rem !important; }
@media (max-width: 639px) { .auth-page .card { border-radius: 0; } .auth-page .card-body { padding: 2rem 1rem !important; } }
.auth-page form > div { margin-bottom: 1rem !important; }
.auth-page .form-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 0.25rem;
}
.auth-page .form-control {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  background-color: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.auth-page .form-control:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.auth-page .btn {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.375rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.auth-page .card p,
.auth-page .card .small { font-size: 0.875rem; }
.auth-page .card a:not(.btn) { color: var(--accent); text-decoration: none; }
.auth-page .card a:not(.btn):hover { color: var(--accent-hover); }
.auth-page .card hr { display: none; }
.auth-page .card p.text-center { margin-top: 1rem !important; }

/* ─── Menu button: Doc's bare icon button (p-2, rounded-md, 24px icon) ───
   The page name stays in the markup for screen readers; the button keeps its
   aria-label. */
.nav-drawer-toggle {
  gap: 0;
  padding: 0.5rem;
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--text-muted);
}
.nav-drawer-toggle:hover { background: rgba(0, 0, 0, 0.05); border: 0; color: var(--text); }
.navbar .nav-drawer-toggle { margin-right: 1rem; border: 0; color: rgba(255, 255, 255, 0.55); }
.navbar .nav-drawer-toggle:hover { background: rgba(255, 255, 255, 0.1); color: #ffffff; }
.nav-drawer-toggle:focus-visible,
.navbar .nav-drawer-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none; }
.nav-drawer-toggle .nav-drawer-current {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* Lucide's Menu icon: three 16px strokes, 2px thick, 6px apart, in a 24px box. */
.nav-drawer-toggle .nav-drawer-bars { width: 16px; height: 2px; margin: 11px 4px; border-radius: 1px; }
.nav-drawer-toggle .nav-drawer-bars::before { top: -6px; border-radius: 1px; }
.nav-drawer-toggle .nav-drawer-bars::after { top: 6px; border-radius: 1px; }

/* ─── The menu: Doc's sidebar (w-64, card colour, text-sm medium items) ─── */
.app-nav-drawer { width: 16rem; background-color: var(--surface); border-right: 1px solid var(--border); }
.app-nav-drawer .offcanvas-body { padding: 1rem; }
.app-nav-drawer .nav-drawer-group {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 1.25rem 0 0.25rem;
  padding: 0 0.75rem;
}
.app-nav-drawer .nav-drawer-group:first-child { margin-top: 0; }
.app-nav-drawer .nav-drawer-link {
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.125rem;
  border-left: 0;
  border-radius: 0.375rem;
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 500;
}
.app-nav-drawer .nav-drawer-link:hover { background: rgba(0, 0, 0, 0.05); color: var(--text); }
[data-theme="dark"] .app-nav-drawer .nav-drawer-link:hover { background: rgba(255, 255, 255, 0.1); }
.app-nav-drawer .nav-drawer-link.active,
.app-nav-drawer .nav-drawer-link.active:hover { background: var(--accent); color: var(--accent-text); border-left: 0; }

/* ─── Signed-out pages (body.auth-standalone): no navbar, centred, as Doc's are ───
   Doc's sign-in pages are `flex min-h-screen items-center justify-center py-12`
   with no header. Change password is used while signed in, so it keeps the bar. */
body.auth-standalone {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  padding: 3rem 1rem;
}
body.auth-standalone > .navbar { display: none; }
body.auth-standalone .auth-page { width: 100%; padding-top: 0; }
body.auth-standalone .site-footer { margin-top: 2rem; padding-top: 0; }