/* ============================================================
   TVLG Portal shared theme
   Served from tvlg-id, proxied same-origin at /shell/v2/tvlg-theme.css
   ============================================================

   Loaded by all three apps so Calls, Conflict, and Contracts share one
   palette. Two jobs:

   1. Define the canonical design tokens. These are lifted verbatim from Call
      Analytics (app/static/css/app.css:5-54), which was chosen as the standard
      because it is the most recently designed of the three.

   2. Alias ConflictCheck's OWN token names onto those values. That is what
      makes the migration cheap: every rule in ConflictCheck's 13 pages already
      says var(--accent), var(--panel), var(--line) and so on, so deleting each
      page's local :root block converges its palette without touching a single
      layout rule. The union of tokens used across those 13 pages is aliased
      below -- all 16 of them. Removing any alias will silently break whichever
      page still uses it, so add, never subtract.

   This file must stay a plain <link>, never injected by JavaScript. If the
   identity service is down, nginx 502s the shell script, the rail is absent,
   and every page still renders with its own styles intact. */

:root {
  /* ---- Canvas + surfaces ---- */
  --bg-base:      #f4f6fb;
  --bg-surface:   #f7f9fd;
  --bg-card:      #ffffff;
  --bg-hover:     #eef1f9;
  --border:       #e5e8f1;
  --border-light: #d6dbe9;

  /* ---- Ink ---- */
  --text-primary: #1b2039;
  --text-muted:   #5a6280;
  --text-dim:     #969db6;

  /* ---- Brand (TVLG orange) ---- */
  --brand-orange: #ff7e00;
  --accent:       #ef6d00;   /* deepened so white text on it passes contrast */
  --accent-hover: #d96200;
  --accent-active:#c25800;
  --accent-soft:  #fff3e8;
  --accent-ink:   #c25e00;

  /* ---- Status ---- */
  --green:  #1f9d57;  --green-bg: #e7f5ed;  --green-solid: #22a55c;
  --amber:  #a5750c;  --amber-bg: #fbf1d6;  --amber-solid: #e0a12b;
  --red:    #d24141;  --red-bg:   #fcebeb;  --red-solid:   #de524d;
  --blue:   #2f7dcc;  --blue-bg:  #e8f1fb;  --blue-solid:  #3f8ede;

  /* ---- Navy rail (sidebar + portal rail) ---- */
  --sidebar-bg:       #172441;
  --sidebar-surface:  #1e2d4f;
  --sidebar-border:   rgba(255, 255, 255, .14);
  --sidebar-text:     rgba(255, 255, 255, .98);
  --sidebar-dim:      rgba(255, 255, 255, .68);
  --sidebar-active-bg:rgba(255, 255, 255, .10);
  --sidebar-active:   #ffffff;
  --sidebar-hover:    rgba(255, 255, 255, .06);
  --sidebar-ink:      #ffffff;

  /* Portal rail sits OUTSIDE each app's own chrome, so it is a shade darker
     than --sidebar-bg. Call Analytics and Contracts both have their own left
     nav; without the contrast the two navy columns fuse into one slab and the
     boundary between "which system" and "where in it" disappears. */
  --tvlg-rail-bg:     #0e1730;
  --tvlg-rail-border: rgba(255, 255, 255, .10);

  /* ---- Metrics ---- */
  --sidebar-w: 240px;
  --tvlg-rail-w: 60px;      /* collapsed: icons only */
  --tvlg-rail-w-open: 216px;
  --radius:    8px;
  --radius-lg: 12px;
  --shadow:    0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  --shadow-md: 0 2px 4px rgba(16, 24, 40, .05), 0 6px 16px rgba(16, 24, 40, .08);
  --shadow-lg: 0 8px 24px rgba(16, 24, 40, .10), 0 2px 6px rgba(16, 24, 40, .06);

  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---- Semantic aliases used by the login page and shell ---- */
  --danger:    var(--red);
  --danger-bg: var(--red-bg);

  /* ============================================================
     ConflictCheck compatibility aliases
     Its pages hardcoded a warm-cream palette (--bg:#f4f1ea, --ink:#1f2b2d,
     --accent:#d36d38). Mapping the old names onto the new values is what lets
     each page drop its :root block and inherit the shared look for free.
     ============================================================ */
  --bg:             var(--bg-base);
  --ink:            var(--text-primary);
  --ink-soft:       var(--text-muted);
  --panel:          var(--bg-card);
  --line:           var(--border);
  --accent-strong:  var(--accent-active);
  --ok:             var(--green);
  --warn:           var(--amber);
  --danger-strong:  #a52d2d;
  --radius-md:      var(--radius);
  --radius-sm:      6px;
  /* NOTE: --accent-soft is intentionally NOT re-aliased. ConflictCheck's admin
     pages set it to #dfe5dd (a grey-green), but it is only ever used as a soft
     tint background, so the shared warm tint above reads correctly in the same
     slots. --radius-lg and --shadow are likewise already defined above with
     values that suit both. */
}

/* ============================================================
   Portal rail
   Rendered by tvlg-shell.js. Scoped under .tvlg- so it cannot collide with any
   host app's rules.

   Collapsed (60px) is the default: three icons take almost no room and the
   apps underneath keep their full width. Expanded (216px) adds labels. The
   choice lives in the tvlg_rail cookie on .thevalleylawgroup.com, so it
   follows the user across all three subdomains.
   ============================================================ */

.tvlg-rail {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 2147483000;   /* above app chrome, below native browser UI */
  width: var(--tvlg-rail-w);
  display: flex;
  flex-direction: column;
  background: var(--tvlg-rail-bg);
  color: var(--sidebar-text);
  border-right: 1px solid var(--tvlg-rail-border);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.2;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  box-sizing: border-box;
  transition: width .16s ease;
}
.tvlg-rail::-webkit-scrollbar { display: none; }
.tvlg-rail * { box-sizing: border-box; }

.tvlg-rail-open .tvlg-rail { width: var(--tvlg-rail-w-open); }

/* Labels exist in the DOM at all times and are hidden by width, not removed.
   Keeping them present is what lets the rail animate, and what keeps the
   accessible name of every row stable for a screen reader in both states. */
.tvlg-rail__label {
  display: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.tvlg-rail-open .tvlg-rail__label { display: block; }

/* ---- Brand ---- */
.tvlg-rail__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  height: 56px;
  padding: 0 18px;
  color: var(--sidebar-ink);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--tvlg-rail-border);
}
.tvlg-rail__brand img { width: 24px; height: 24px; flex: none; display: block; border-radius: 50%; background: #fff; }
.tvlg-rail__brand:hover { color: var(--sidebar-ink); }

/* Collapsed, every row is a lone glyph in a 60px column, so it centres. The
   open state is what re-introduces the left padding, not the other way round:
   the collapsed rail is the default and should not need an override to look
   right. */
.tvlg-rail__brand,
.tvlg-rail__item,
.tvlg-rail__user,
.tvlg-rail__toggle {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}
.tvlg-rail-open .tvlg-rail__brand { justify-content: flex-start; padding-left: 18px; padding-right: 18px; }
.tvlg-rail-open .tvlg-rail__item,
.tvlg-rail-open .tvlg-rail__user,
.tvlg-rail-open .tvlg-rail__toggle {
  justify-content: flex-start;
  padding-left: 10px;
  padding-right: 10px;
}

/* ---- System list ---- */
.tvlg-rail__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  padding: 10px 8px;
  min-height: 0;
}

.tvlg-rail__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px;
  border-radius: var(--radius);
  color: var(--sidebar-dim);
  text-decoration: none;
  font-weight: 500;
  position: relative;
  transition: background-color .12s ease, color .12s ease;
}
.tvlg-rail__item:hover { background: var(--sidebar-hover); color: var(--sidebar-active); }
.tvlg-rail__item:focus-visible { outline: 2px solid var(--brand-orange); outline-offset: -2px; }

.tvlg-rail__icon { display: flex; flex: none; width: 22px; height: 22px; }
.tvlg-rail__icon svg { width: 22px; height: 22px; opacity: .9; }

.tvlg-rail__item--current {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active);
  font-weight: 600;
}
.tvlg-rail__item--current .tvlg-rail__icon svg { opacity: 1; color: var(--brand-orange); }
/* The active marker is on the LEFT edge, where the eye lands first on a
   vertical list -- the old bar underlined instead, which reads as wrong once
   the axis rotates. */
.tvlg-rail__item--current::before {
  content: "";
  position: absolute;
  left: -8px; top: 6px; bottom: 6px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--brand-orange);
}

/* ---- Footer ---- */
.tvlg-rail__footer {
  flex: none;
  padding: 8px;
  border-top: 1px solid var(--tvlg-rail-border);
}

.tvlg-rail__user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  min-width: 0;
}
.tvlg-rail__avatar {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3px;
}
.tvlg-rail__name { font-size: 13px; color: var(--sidebar-dim); }

.tvlg-rail__toggle {
  width: 100%;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: var(--radius);
  color: var(--sidebar-dim);
}
.tvlg-rail__toggle:hover { background: var(--sidebar-hover); color: var(--sidebar-active); }
.tvlg-rail__toggle:focus-visible { outline: 2px solid var(--brand-orange); outline-offset: -2px; }
/* One chevron, rotated: pointing right means "expand", left means "collapse". */
.tvlg-rail__toggle .tvlg-rail__icon svg { transition: transform .16s ease; }
.tvlg-rail-open .tvlg-rail__toggle .tvlg-rail__icon svg { transform: rotate(180deg); }

/* ============================================================
   Host page offset

   The rail is position:fixed so it cannot be pushed around by app layout,
   which means the host page needs left padding. tvlg-shell.js sets
   .tvlg-has-rail (and .tvlg-rail-open) on <html> rather than writing inline
   styles, so an app can override if its own layout needs something different.

   Every rule below is scoped to .tvlg-has-rail, so when the shell renders
   nothing -- IdP unreachable, kill switch off, or running inside the GHL
   iframe -- the class is absent and NONE of this applies. An app's layout is
   never touched by a rail that is not there.
   ============================================================ */
.tvlg-has-rail body {
  padding-left: var(--tvlg-rail-w);
  transition: padding-left .16s ease;
}
.tvlg-has-rail.tvlg-rail-open body { padding-left: var(--tvlg-rail-w-open); }

/* Fixed-position app chrome does not inherit body padding, so each app's own
   fixed elements are re-anchored to the rail's edge by hand. There are three
   apps, they are named here, and a generic selector does not exist. Adding a
   fourth app means adding its selectors here.

   Call Analytics -- app/templates/base.html: .app-shell is a flex row and
   .sidebar is position:sticky, so body padding already moves both. Only the
   100vh budget needs no change now that the rail is vertical. Nothing to do.

   Contracts -- MUI. The AppBar is position:fixed at left:0/width:100%, and the
   permanent Drawer's paper is fixed at left:0. Both must start where the rail
   ends or they slide underneath it. */
.tvlg-has-rail .MuiAppBar-root {
  left: var(--tvlg-rail-w);
  width: calc(100% - var(--tvlg-rail-w));
  transition: left .16s ease, width .16s ease;
}
.tvlg-has-rail.tvlg-rail-open .MuiAppBar-root {
  left: var(--tvlg-rail-w-open);
  width: calc(100% - var(--tvlg-rail-w-open));
}
.tvlg-has-rail .MuiDrawer-paper {
  left: var(--tvlg-rail-w);
  transition: left .16s ease;
}
.tvlg-has-rail.tvlg-rail-open .MuiDrawer-paper { left: var(--tvlg-rail-w-open); }

/* ConflictCheck -- renderAccountChrome() in intake-shared.js injects a
   position:fixed "signed in as..." pill at top:16px;right:16px. It is on the
   opposite edge from the rail, so it no longer needs nudging; the rule is gone
   rather than kept at 0, because a stale offset is harder to explain than none. */

/* Narrow screens: never let an expanded rail eat the page. The rail still
   expands (it is fixed, so it overlays), but the content keeps the collapsed
   offset underneath it. */
@media (max-width: 760px) {
  .tvlg-has-rail.tvlg-rail-open body { padding-left: var(--tvlg-rail-w); }
  .tvlg-has-rail.tvlg-rail-open .MuiAppBar-root {
    left: var(--tvlg-rail-w);
    width: calc(100% - var(--tvlg-rail-w));
  }
  .tvlg-has-rail.tvlg-rail-open .MuiDrawer-paper { left: var(--tvlg-rail-w); }
}

@media (prefers-reduced-motion: reduce) {
  .tvlg-rail,
  .tvlg-has-rail body,
  .tvlg-has-rail .MuiAppBar-root,
  .tvlg-has-rail .MuiDrawer-paper,
  .tvlg-rail__toggle .tvlg-rail__icon svg { transition: none; }
}

@media print {
  .tvlg-rail { display: none; }
  .tvlg-has-rail body,
  .tvlg-has-rail.tvlg-rail-open body { padding-left: 0; }
}