/* ─────────────────────────────────────────────────────────────────────────────
   cfs-portal.css — Call Flow Studio branding for the osTicket client portal.
   Loaded after theme.css from include/client/header.inc.php.

   v6 — DARK panel on the CFS grid (v5's light-panel experiment reverted).

   Two things v2–v4 got wrong and this fixes:

   1. THE WIDE DARK BLOCK BEHIND THE BOX was my own box-shadow:
      0 24px 60px -12px rgba(0,0,0,0.55) — a 60px blur at 55% black, which
      smeared a large dark halo over the grid and made it look like a second
      background sitting on top of it. The grid should stay visible right up to
      the panel edge. Shadow is now tight and low-alpha.

   2. THE ODD DARK BAND AT THE TOP OF THE BOX was the header strip: I painted it
      --cfs-bg (#1a1e27) against a --cfs-bg-raised (#232834) panel, so it read as
      a mismatched block. The header is now the SAME surface as the panel, with
      only a hairline rule under it. The light-ink logo does not need a darker
      strip — it works on any dark surface.

   Earlier mistakes, recorded so they are not repeated after an osTicket upgrade
   wipes the two core-file edits:
     v1  restyled only #container and left osTicket's inner .thread-body white,
         so light-ink copy rendered white-on-white.
     v2  targeted "#header #logo a", but the anchor IS #logo — the <img> got
         hidden and nothing replaced it. The logo vanished.
     v3  "#content a { color: signal }" (1,0,1) out-specified
         ".front-page-button a" (0,1,1); both !important, so the ID won and the
         buttons rendered orange-on-orange with invisible labels.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  --cfs-bg-deep:   #15181f;
  --cfs-bg-raised: #232834;
  --cfs-line:      #2d3444;
  --cfs-ink:       #e8ebf2;
  --cfs-ink-dim:   #a0a8b8;
  --cfs-ink-mute:  #6a7285;
  --cfs-signal:    #ff5a1f;
}

/* ── Page background: DO NOT TOUCH IT. ────────────────────────────────────────
   The CFS grid already exists, appended to theme.css on 2026-05-24:

     html { background-color:#1a1f2e; background-image:<40px grid>;
            background-attachment:fixed !important; }
     body { background: transparent !important; }

   It is deliberately on HTML (so it fills the viewport regardless of content
   height) with BODY explicitly transparent so the body box does not cover it.
   Painting a background on body here re-broke exactly that: body is only as tall
   as the content, so it laid a viewport-wide, content-tall dark SLAB over the
   grid. That was the "wide dark background on top of the grid". Leave body alone. */
body {
  background: transparent !important;
  color: var(--cfs-ink);
}

/* ── The panel. Tight shadow so the grid stays readable right up to the edge. */
#container {
  background: var(--cfs-bg-raised) !important;
  border: 1px solid var(--cfs-line);
  border-radius: 10px;
  margin: 48px auto 24px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  overflow: hidden;
}

/* ── Every inner surface osTicket paints white ────────────────────────────── */
#content,
#content .content,
#content .main-content,
#content .thread-body,
.main-content,
.thread-body,
#body,
.content {
  background: transparent !important;
  color: var(--cfs-ink-dim) !important;
  border-color: var(--cfs-line) !important;
  box-shadow: none !important;
}
#content p, #content li, #content td, #content span, #content div,
.thread-body p, .thread-body li, .thread-body div {
  color: var(--cfs-ink-dim) !important;
}
#content h1, #content h2, #content h3,
.thread-body h1, .thread-body h2, .thread-body h3 {
  color: var(--cfs-ink) !important;
  font-weight: 500;
}
#content a, .thread-body a { color: var(--cfs-signal) !important; }
#content a:hover { text-decoration: underline; }

/* ── Header: SAME surface as the panel. No separate dark band. ────────────── */
#header {
  background: transparent !important;
  border-bottom: 1px solid var(--cfs-line);
  height: auto;
  padding: 16px 24px 12px;
}
#header p, #header a { color: var(--cfs-ink-dim) !important; }
#header a:hover { color: var(--cfs-ink) !important; }

/* The anchor IS the logo: <a class="pull-left" id="logo" href="/index.php"><img></a>.
   cfs-lockup-light.png is the dark-ink original recoloured to #e8ebf2 text, with
   the three brand dots left untouched. */
#header a#logo {
  display: inline-block;
  width: 300px;
  height: 56px;
  background: url('cfs-lockup-light.png') left center / contain no-repeat !important;
  text-indent: -9999px;
  overflow: hidden;
  vertical-align: middle;
}
#header a#logo img,
#header a#logo .valign-helper { display: none !important; }

/* ── Nav tabs ─────────────────────────────────────────────────────────────── */
/* theme.css gives #nav a "border-top: 1px solid #aaa" plus a nav_bg.png strip and
   a drop shadow — that #aaa rule is the light/white hairline that showed under the
   logo row. Overriding only the background and border-bottom left it drawing. */
ul#nav {
  background: transparent !important;
  background-image: none !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--cfs-line) !important;
  box-shadow: none !important;
  padding: 0 12px !important;
  height: auto !important;
  margin: 0 !important;
}
ul#nav li a {
  color: var(--cfs-ink-dim) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}
ul#nav li a:hover { color: var(--cfs-ink) !important; }
ul#nav li.active a,
ul#nav li a.active {
  color: var(--cfs-signal) !important;
  background: transparent !important;
  border-bottom: 2px solid var(--cfs-signal) !important;
}

/* ── Form fields stay LIGHT on purpose ────────────────────────────────────── */
/* osTicket's inputs, Redactor and select2 are built for a light surface. A
   blanket dark repaint half-styles them (invisible placeholders, unreadable
   dropdowns). A white field on a dark panel is deliberate and readable. */
#content input[type="text"],
#content input[type="email"],
#content input[type="password"],
#content textarea,
#content select {
  background: #ffffff !important;
  color: #15181f !important;
  border: 1px solid var(--cfs-line) !important;
  border-radius: 4px;
}
#content label, #content .faded { color: var(--cfs-ink-mute) !important; }

/* ── Buttons in the site's signal colour ──────────────────────────────────── */
/* Must out-specify "#content a { color: signal }" above (ID beats class, and
   !important on both does not break the tie) or labels go orange-on-orange. */
#content input[type="submit"],
#content button,
#content .front-page-button a,
#content a.button,
#content a.blue.button,
#content a.green.button,
.front-page-button a,
a.green.button, a.button {
  background: var(--cfs-signal) !important;
  border: 1px solid var(--cfs-signal) !important;
  color: #fff !important;
  border-radius: 3px;
  text-shadow: none !important;
}
#content input[type="submit"]:hover,
#content button:hover,
#content .front-page-button a:hover,
#content a.button:hover,
.front-page-button a:hover,
a.button:hover {
  background: #e64a10 !important;
  border-color: #e64a10 !important;
}

/* ── Footer sits outside the panel, on the grid ───────────────────────────── */
#footer {
  background: transparent !important;
  border: 0 !important;
  color: var(--cfs-ink-mute) !important;
  text-align: center;
  padding: 10px 0 28px;
}
#footer p, #footer a { color: var(--cfs-ink-mute) !important; }

/* ── Narrow screens ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  #container { width: auto; margin: 24px 16px 40px; }
  #header a#logo { width: 220px; height: 44px; }
}