/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
   CORE/OPERATOR/CLASSES.CSS

   Operator console chrome overrides. Selectors scoped via the framework's
   auto-generated `_i--operator--` HTML_IDs so they never bleed into public-
   site components reusing the same DOM classes.

   Reach for this file ONLY when the framework's Config engine cannot express
   the override — typically because a prototype ships a non-null sub-Config
   value and `null` cannot clear it (the navbar offcanvas backdrop image
   below is the canonical example).
   ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */


/* #region Navbar */

/* The navbar OUTER paints GRAY_900 so the framework's three stacked inner
   states (`when-default`, `when-scrolled`, `when-with-offcanvas`) read as
   one continuous surface. The framework hides non-active states with
   `opacity: 0` (NOT `display: none`), so they keep their vertical space
   below the active state. On the public site the body bg matches the
   navbar bg (both LOW_DARK_1 on client skins) and the gap is invisible;
   on the operator console the navbar is GRAY_900 while the body remains
   the site's navy default, exposing the gap as a navy band. */
[id*="_c--Navbar--"][id*="_i--operator--"][id*="_p--desktop--"],
[id*="_c--Navbar--"][id*="_i--operator--"][id*="_p--mobile--"] {
	background-color	: var(--bs-gray-900);
	border-bottom		: 1px solid rgba(255, 255, 255, 0.08);
}

/* #endregion Navbar */


/* #region Offcanvas */

/* Hide the offcanvas backdrop image inherited from `navbar---default`
   (a public-site gradient that clashes with the operator dark chrome).
   The framework's Config engine cannot null a prototype's nested
   ImageConfig — see the file header for context. */
[id*="_c--Navbar--"][id*="_i--operator--"] .navbar--offcanvas--inner .backdrop-image,
[id*="_c--Navbar--"][id*="_i--operator--"] .navbar--offcanvas--inner .backdrop-image-parallax {
	display: none !important;
}

[id*="_c--Navbar--"][id*="_i--operator--"] .navbar--offcanvas--inner {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Replace the framework's default `Highlight` opacity-fade hover (which
   reads as the link DISAPPEARING on a dark surface) with a bg-color shift,
   so hovered links visibly LIFT off the surface. */
[id*="_c--Navbar--"][id*="_i--operator--"] .navbar--offcanvas--page-link {
	display			: inline-block;
	padding			: 0.5rem 1.5rem;
	border-radius	: 0.5rem;
	transition		: background-color 150ms ease, color 150ms ease;
}

[id*="_c--Navbar--"][id*="_i--operator--"] .navbar--offcanvas--page-link:hover,
[id*="_c--Navbar--"][id*="_i--operator--"] .navbar--offcanvas--page-link:focus-visible {
	background-color	: rgba(255, 255, 255, 0.08);
	outline				: none;
}

/* #endregion Offcanvas */


/* #region Dashboard cards */

/* 1px inset border for tile definition; intensifies on hover to pair
   with the framework's Highlight::_90 (opacity) on the same wrapper. */
[id*="_c--Card--_n--operator-dashboard--"] {
	border		: 1px solid rgba(255, 255, 255, 0.06);
	transition	: border-color 150ms ease, transform 150ms ease;
}

[id*="_c--Card--_n--operator-dashboard--"]:hover {
	border-color	: rgba(255, 255, 255, 0.16);
}

/* #endregion Dashboard cards */


/* #region Inline code */

/* Bootstrap defaults `<code>` to pink (#d63384) which fights the operator
   chrome's blue accent. Recolor to blue inside `.operator-content` (added
   in draw_operator_page) so file paths / parameter names / variable refs
   share the section's accent palette. */
.operator-content code {
	color: var(--bs-blue);
}

/* Strongly-colored alert backgrounds (bcp-red/blue/orange/green) make
   the blue `<code>` invisible. Inside those, drop a dark translucent
   pill with white text instead. Higher specificity than the rule above
   so it wins automatically. */
.operator-content .alert.bcp-red code,
.operator-content .alert.bcp-blue code,
.operator-content .alert.bcp-orange code,
.operator-content .alert.bcp-green code {
	background		: rgba(0, 0, 0, 0.35);
	color			: #fff;
	padding			: 0 6px;
	border-radius	: 3px;
	font-weight		: 500;
}

/* #endregion Inline code */


/* #region Table stripes */

/* Bootstrap's `table-striped` on a non-`table-dark` table applies
   BOTH a barely-visible bg overlay AND a near-black text color via
   --bs-table-color-type, which washes out the text against the dark
   operator surface. Set background-color and color directly on odd
   cells — bypasses the var chain Bootstrap normally uses for theming
   (none of which we need here). */
.operator-content .table-striped > tbody > tr:nth-of-type(odd) > * {
	background-color	: rgba(255, 255, 255, 0.06);
	color				: var(--bs-light, #f8f9fa);
}

/* #endregion Table stripes */


/* #region Section spacing */

/* Tighten the gap between the section heading/description and the contents
   block (which holds either the tabbed nav + tab content, or the page's
   inline rendered content). The framework's default leaves a roomy 2-3rem
   void on operator pages where the heading is short and the description
   is a single banner — collapses to a more balanced ~1rem instead. Scoped
   via the auto-generated section HTML_ID's `_m--scrollreveal--_k--contents`
   suffix so it only hits the outermost contents wrapper, not the inner
   tab_content / heading / description slots. */
.operator-content [id*="_c--Section--"][id*="_m--scrollreveal--_k--contents"] {
	margin-top: 1rem;
}

/* #endregion Section spacing */


/* #region Operator footers */

/* Thin top separator that lifts the footer text off the section content
   above. Used by the "VISIOFRAMEWORK v<x>" version footer auto-injected
   at the end of every operator page's section content (see
   OperatorOps::draw_version_footer()). The legacy
   `.operator-dashboard-footer` class still gets the same treatment so
   any future re-introduction of an in-section dashboard footer reads
   consistently. */
.operator-version-footer,
.operator-dashboard-footer {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* #endregion Operator footers */
