/* Plain-background ASCII diagrams.
 *
 * Used on `.. code:: text` blocks tagged with `:class: diagram`.
 * Strips the code-block background, border, and padding so the
 * box-and-pipe drawing sits on the page like an inline figure
 * instead of a chunk of code.
 */

div.highlight-text.diagram,
div.highlight-text.diagram .highlight,
div.highlight-text.diagram pre {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

div.highlight-text.diagram pre {
    padding: 0 !important;
    margin: 0.75em 0 !important;
    color: inherit;
}

/* Some Sphinx themes wrap the code in a different container. */
.diagram > pre,
.diagram > .highlight > pre {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Output blocks (`.. code:: text`) are visually distinct from input
 * blocks (`.. code:: bash`, `.. code:: python`, etc.) so the reader
 * can tell at a glance what the operator typed vs. what the system
 * printed back.
 *
 * Convention:
 *   .. code:: bash    -> default input style (light bg, syntax highlight)
 *   .. code:: text    -> dimmer "terminal output" style (dark bg,
 *                        light monospace text, left accent bar in
 *                        terminal green)
 *
 * The `.diagram` class above strips backgrounds entirely for
 * box-and-pipe ASCII art, so its rules win where both apply
 * (`.diagram` always sits on `.highlight-text`).
 */

div.highlight-text:not(.diagram) {
    background-color: #1f2328;
    border-left: 3px solid #3fb950;
    border-radius: 0;
    margin: 0.5em 0 1em 0;
}

div.highlight-text:not(.diagram) .highlight,
div.highlight-text:not(.diagram) pre {
    background-color: transparent !important;
    color: #c9d1d9;
    font-size: 0.9em;
    line-height: 1.45;
    margin: 0;
}

div.highlight-text:not(.diagram) pre {
    padding: 0.6em 0.9em;
}

/* Mermaid diagrams render inside `<pre class="mermaid">`. The default
 * `pre` styling adds vertical padding / margin that doubles up with the
 * SVG's own whitespace. Strip it so diagrams sit flush against
 * surrounding paragraphs.
 */
pre.mermaid {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    /* 25px of breathing room above and below the SVG so the diagram
     * does not crash into neighbouring paragraphs. Horizontal padding
     * stays at 0 because the SVG is already width-capped at 80%
     * (see `pre.mermaid svg` below) and centred. */
    padding: 25px 0 !important;
    margin: 0 !important;
    line-height: 0;
}

pre.mermaid svg {
    display: block;
    /* Render mermaid diagrams at 80% of the container width and
     * centre them. Keeps the SVG from sprawling the full text
     * column on wider screens. */
    width: 80% !important;
    max-width: 80% !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    vertical-align: top;
}

/* Sharp 90-degree corners on every mermaid node. The default mermaid
 * theme rounds rectangles via `rx` / `ry` SVG attributes; force them
 * back to zero so flowchart and graph nodes match the handbook's
 * sharp-corner style. */
pre.mermaid svg .node rect,
pre.mermaid svg .node path,
pre.mermaid svg .cluster rect,
pre.mermaid svg rect.actor,
pre.mermaid svg rect.activation0,
pre.mermaid svg rect.activation1,
pre.mermaid svg rect.activation2,
pre.mermaid svg rect.note,
pre.mermaid svg rect.labelBox,
pre.mermaid svg foreignObject,
pre.mermaid svg .label rect {
    rx: 0 !important;
    ry: 0 !important;
}

/* Mermaid colours per theme. The init-time config in `conf.py`
 * paints node borders, text, and lines with `#c9d1d9` (light grey),
 * which lands well on the dark page but disappears on the light page.
 * Override per theme so both modes are legible. The init-time block
 * also sets every fill to `transparent`, which we keep -- nodes show
 * the page background and read as outlines.
 */

/* Light mode -- dark text / borders / lines on the transparent fill. */
html[data-theme="light"] pre.mermaid svg .node rect,
html[data-theme="light"] pre.mermaid svg .node polygon,
html[data-theme="light"] pre.mermaid svg .node path,
html[data-theme="light"] pre.mermaid svg .node circle,
html[data-theme="light"] pre.mermaid svg .cluster rect {
    stroke: #1f2328 !important;
    stroke-width: 1.4px !important;
}

html[data-theme="light"] pre.mermaid svg .nodeLabel,
html[data-theme="light"] pre.mermaid svg .cluster-label,
html[data-theme="light"] pre.mermaid svg .edgeLabel,
html[data-theme="light"] pre.mermaid svg text,
html[data-theme="light"] pre.mermaid svg .label {
    color: #1f2328 !important;
    fill: #1f2328 !important;
}

html[data-theme="light"] pre.mermaid svg .edgePath .path,
html[data-theme="light"] pre.mermaid svg .flowchart-link,
html[data-theme="light"] pre.mermaid svg path.flowchart-link {
    stroke: #1f2328 !important;
}

html[data-theme="light"] pre.mermaid svg marker path,
html[data-theme="light"] pre.mermaid svg .marker {
    fill: #1f2328 !important;
    stroke: #1f2328 !important;
}

/* Edge-label background -- the floating label that sits on a link
 * needs a solid background that matches the page, not the inherited
 * transparent fill (otherwise the line crosses through the text). */
html[data-theme="light"] pre.mermaid svg .edgeLabel rect,
html[data-theme="light"] pre.mermaid svg .edgeLabel,
html[data-theme="light"] pre.mermaid svg .edgeLabel span {
    background-color: #ffffff !important;
    color: #1f2328 !important;
}

/* Dark mode -- bright text / borders / lines. The init-time `#c9d1d9`
 * mostly works, but mark-up here so the rules survive any future
 * theme-variable changes. */
html[data-theme="dark"] pre.mermaid svg .node rect,
html[data-theme="dark"] pre.mermaid svg .node polygon,
html[data-theme="dark"] pre.mermaid svg .node path,
html[data-theme="dark"] pre.mermaid svg .node circle,
html[data-theme="dark"] pre.mermaid svg .cluster rect {
    stroke: #c9d1d9 !important;
    stroke-width: 1.4px !important;
}

html[data-theme="dark"] pre.mermaid svg .nodeLabel,
html[data-theme="dark"] pre.mermaid svg .cluster-label,
html[data-theme="dark"] pre.mermaid svg .edgeLabel,
html[data-theme="dark"] pre.mermaid svg text,
html[data-theme="dark"] pre.mermaid svg .label {
    color: #c9d1d9 !important;
    fill: #c9d1d9 !important;
}

html[data-theme="dark"] pre.mermaid svg .edgePath .path,
html[data-theme="dark"] pre.mermaid svg .flowchart-link,
html[data-theme="dark"] pre.mermaid svg path.flowchart-link {
    stroke: #c9d1d9 !important;
}

html[data-theme="dark"] pre.mermaid svg marker path,
html[data-theme="dark"] pre.mermaid svg .marker {
    fill: #c9d1d9 !important;
    stroke: #c9d1d9 !important;
}

html[data-theme="dark"] pre.mermaid svg .edgeLabel rect,
html[data-theme="dark"] pre.mermaid svg .edgeLabel,
html[data-theme="dark"] pre.mermaid svg .edgeLabel span {
    background-color: #1d1f24 !important;
    color: #c9d1d9 !important;
}

/* Wrap a `.. mermaid::` directive in `.. container:: compact-diagram`
 * to cap the rendered SVG at a sensible height. Useful for wide or
 * tall diagrams that otherwise consume too much vertical space.
 * (sphinxcontrib-mermaid does not support a `:class:` directive
 * option in this version, hence the wrapping container.)
 */
.compact-diagram pre.mermaid svg {
    max-height: 400px;
    width: auto;
    max-width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Compact tables.
 *
 * Sphinx wraps RST tables in `<div class="pst-scrollable-table-container">`
 * with `<table class="table">`. The default Bootstrap-derived styling
 * (used by `sphinx_book_theme`) leaves a lot of vertical air inside
 * cells: every cell has a `<p>` with default top/bottom margin, plus
 * generous cell padding and outer margin. Tighten all four levers so
 * RST tables read more like dense reference grids without changing
 * any source content.
 */
div.pst-scrollable-table-container {
    margin: 0.5em 0;
    width: 100%;
}

table.table,
table.docutils {
    font-size: 0.9em;
    width: 100%;
}

table.table th,
table.table td {
    padding: 0.25em 0.55em;
    line-height: 1.35;
    vertical-align: top;
}

/* Kill paragraph / list margins inside cells -- they're the biggest
 * source of vertical bloat in RST-rendered tables. */
table.table th > p,
table.table td > p,
table.table th > ol,
table.table td > ol,
table.table th > ul,
table.table td > ul {
    margin: 0;
}

table.table th > ol > li,
table.table td > ol > li,
table.table th > ul > li,
table.table td > ul > li {
    margin-bottom: 0;
}

/* Same idea for the older docutils class (some pages use plain
 * `.docutils` tables instead of the theme's `.table` wrapper). */
table.docutils th,
table.docutils td {
    padding: 0.25em 0.55em;
    line-height: 1.35;
    vertical-align: top;
}
table.docutils th > p,
table.docutils td > p,
table.docutils th > ol,
table.docutils td > ol,
table.docutils th > ul,
table.docutils td > ul {
    margin: 0;
}

/* Keep inline-code commands on one line inside tables. The
 * scrollable wrapper (`pst-scrollable-table-container`) provides a
 * horizontal scrollbar when a long command would otherwise overflow
 * the viewport, so `nowrap` here preserves command readability
 * without breaking the page layout.
 *
 * `!important` is needed because docutils inserts `<col style="width:N%">`
 * hints from `:widths:` directives, which combined with default
 * `table-layout` would otherwise let the browser break long inline-code
 * tokens across lines. Apply `table-layout: auto` to tables in our
 * scrollable wrapper as well, so `:widths:` becomes a hint and content
 * drives the final column width. */
div.pst-scrollable-table-container > table {
    table-layout: auto;
}
table.table td code,
table.table th code,
table.docutils td code,
table.docutils th code,
table.table td code .pre,
table.table th code .pre,
table.docutils td code .pre,
table.docutils th code .pre {
    white-space: nowrap !important;
}


/* Index page hero title.
 *
 * Replace the flat "CYBINT Operator Handbook" H1 with a centered,
 * two-line hero: "CYBINT" stacked above "Operator Handbook". Scoped
 * to the index page via the auto-generated section id, so other H1s
 * are untouched. */
section#cybint-operator-handbook > h1 {
    text-align: center;
    font-size: 0;
    margin-block: 2rem 2.5rem;
}
section#cybint-operator-handbook > h1::before {
    content: "CYBINT";
    display: block;
    font-size: 7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.1;
}
section#cybint-operator-handbook > h1::after {
    content: "Operator Handbook";
    display: block;
    font-size: 1.75rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    margin-top: 0.4rem;
}

/* Shrink the first column of every table to the width of its longest
 * cell. The classic CSS-table trick is `width: 1%; white-space: nowrap`
 * on the leftmost cells; the browser then expands them only as far as
 * the content demands, and the remaining columns absorb the rest of
 * the row width.
 *
 * Applies to both `.. list-table::` and standard grid/simple tables,
 * which Sphinx renders as <table class="docutils ..."> with a real
 * <tbody>. Headers (<th>) match too so the column stays balanced when
 * the header is wider than every row.
 */

table.docutils tbody > tr > td:first-child,
table.docutils tbody > tr > th:first-child,
table.docutils thead > tr > th:first-child {
    width: 1%;
    white-space: nowrap;
}

/* Code-block styling.
 *
 * The output-block rules above (`div.highlight-text:not(.diagram)`)
 * give `.. code:: text` a dark "terminal output" appearance with a
 * green left accent. The rules below give input code blocks
 * (`.. code:: bash`, `python`, `yaml`, etc.) a distinct, mode-aware
 * surface so the reader can tell input from output at a glance and
 * so the page background does not bleed through the syntax-highlight
 * tokens.
 *
 * Selectors target `div.highlight` excluding `highlight-text` (the
 * output-block selector) so the existing terminal styling wins where
 * both could apply.
 */

/* Light mode -- soft GitHub-style surface with a blue left accent. */
html[data-theme="light"] div.highlight:not(.highlight-text) {
    background-color: #f6f8fa;
    border-left: 3px solid #218bff;
    border-radius: 0;
    margin: 0.5em 0 1em 0;
}

html[data-theme="light"] div.highlight:not(.highlight-text) pre {
    background-color: transparent !important;
    padding: 0.6em 0.9em;
    line-height: 1.45;
}

/* Dark mode -- darker-than-page surface, blue left accent, brighter
 * default token color so syntax-highlight spans read clearly against
 * the deeper background. */
html[data-theme="dark"] div.highlight:not(.highlight-text) {
    background-color: #0d1117;
    border-left: 3px solid #58a6ff;
    border-radius: 0;
    margin: 0.5em 0 1em 0;
}

html[data-theme="dark"] div.highlight:not(.highlight-text) pre {
    background-color: transparent !important;
    color: #e6edf3;
    padding: 0.6em 0.9em;
    line-height: 1.45;
}

/* Inline ``code`` spans inside prose. The default theme styling can
 * blend into surrounding text in dark mode; bump the contrast on
 * background and foreground so identifiers stand out. */
html[data-theme="light"] :not(pre) > code.literal,
html[data-theme="light"] :not(pre) > code:not(.docutils) {
    background-color: rgba(175, 184, 193, 0.2);
    color: #0550ae;
    border-radius: 0;
    padding: 0.1em 0.35em;
}

html[data-theme="dark"] :not(pre) > code.literal,
html[data-theme="dark"] :not(pre) > code:not(.docutils) {
    background-color: rgba(110, 118, 129, 0.3);
    color: #ffa657;
    border-radius: 0;
    padding: 0.1em 0.35em;
}

/* Pygments span overrides in dark mode -- bump the default token
 * colors so they read against the darker block surface. Scoped to
 * input blocks (non-text) so the terminal-output styling is left
 * alone. */
html[data-theme="dark"] div.highlight:not(.highlight-text) .c,
html[data-theme="dark"] div.highlight:not(.highlight-text) .c1,
html[data-theme="dark"] div.highlight:not(.highlight-text) .cm,
html[data-theme="dark"] div.highlight:not(.highlight-text) .cp,
html[data-theme="dark"] div.highlight:not(.highlight-text) .cs {
    color: #8b949e;                /* comments -- soft grey */
    font-style: italic;
}

html[data-theme="dark"] div.highlight:not(.highlight-text) .k,
html[data-theme="dark"] div.highlight:not(.highlight-text) .kc,
html[data-theme="dark"] div.highlight:not(.highlight-text) .kd,
html[data-theme="dark"] div.highlight:not(.highlight-text) .kn,
html[data-theme="dark"] div.highlight:not(.highlight-text) .kp,
html[data-theme="dark"] div.highlight:not(.highlight-text) .kr,
html[data-theme="dark"] div.highlight:not(.highlight-text) .kt {
    color: #ff7b72;                /* keywords -- coral */
}

html[data-theme="dark"] div.highlight:not(.highlight-text) .s,
html[data-theme="dark"] div.highlight:not(.highlight-text) .s1,
html[data-theme="dark"] div.highlight:not(.highlight-text) .s2,
html[data-theme="dark"] div.highlight:not(.highlight-text) .sb,
html[data-theme="dark"] div.highlight:not(.highlight-text) .sc,
html[data-theme="dark"] div.highlight:not(.highlight-text) .sd,
html[data-theme="dark"] div.highlight:not(.highlight-text) .se,
html[data-theme="dark"] div.highlight:not(.highlight-text) .sh,
html[data-theme="dark"] div.highlight:not(.highlight-text) .si,
html[data-theme="dark"] div.highlight:not(.highlight-text) .sx,
html[data-theme="dark"] div.highlight:not(.highlight-text) .sr,
html[data-theme="dark"] div.highlight:not(.highlight-text) .ss {
    color: #a5d6ff;                /* strings -- soft blue */
}

html[data-theme="dark"] div.highlight:not(.highlight-text) .n,
html[data-theme="dark"] div.highlight:not(.highlight-text) .na,
html[data-theme="dark"] div.highlight:not(.highlight-text) .nb,
html[data-theme="dark"] div.highlight:not(.highlight-text) .nc,
html[data-theme="dark"] div.highlight:not(.highlight-text) .nf,
html[data-theme="dark"] div.highlight:not(.highlight-text) .nn,
html[data-theme="dark"] div.highlight:not(.highlight-text) .nv,
html[data-theme="dark"] div.highlight:not(.highlight-text) .nx {
    color: #d2a8ff;                /* names / functions / classes -- lavender */
}

html[data-theme="dark"] div.highlight:not(.highlight-text) .m,
html[data-theme="dark"] div.highlight:not(.highlight-text) .mb,
html[data-theme="dark"] div.highlight:not(.highlight-text) .mf,
html[data-theme="dark"] div.highlight:not(.highlight-text) .mh,
html[data-theme="dark"] div.highlight:not(.highlight-text) .mi,
html[data-theme="dark"] div.highlight:not(.highlight-text) .mo,
html[data-theme="dark"] div.highlight:not(.highlight-text) .il {
    color: #79c0ff;                /* numbers -- bright blue */
}

html[data-theme="dark"] div.highlight:not(.highlight-text) .o,
html[data-theme="dark"] div.highlight:not(.highlight-text) .ow,
html[data-theme="dark"] div.highlight:not(.highlight-text) .p {
    color: #e6edf3;                /* operators / punctuation -- foreground */
}

html[data-theme="dark"] div.highlight:not(.highlight-text) .err {
    color: #f85149;                /* errors -- red */
    background: none;
}

/* Copy-button on hover. The theme provides one but its dark-mode
 * contrast is poor; bump the foreground so the icon is readable. */
html[data-theme="dark"] button.copybtn {
    background-color: rgba(255, 255, 255, 0.05);
    color: #c9d1d9;
    border-color: rgba(255, 255, 255, 0.1);
}
html[data-theme="dark"] button.copybtn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

/* Country reference pages.
 *
 * The hero flag at the top of each country page gets a thin border
 * so near-white flags (Japan, Israel, Vatican) don't disappear into
 * the page background. The smaller flags inside cards on the
 * /refs/countries/ landing get the same treatment plus a uniform
 * 80px display width so every card looks even regardless of the
 * SVG's intrinsic aspect ratio.
 */
img.country-flag {
    border: 1px solid var(--pst-color-border, #ccc);
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    margin-block: 0.5rem 1rem;
}
img.country-flag-card {
    display: block;
    width: 80px;
    height: auto;
    border: 1px solid var(--pst-color-border, #ccc);
    border-radius: 2px;
    margin: 0 auto 0.5rem;
}

/* AWS-service palette for mermaid diagrams.
 *
 * Cloud-architecture diagrams (aws.rst and friends) opt in to
 * AWS-style service-coded colours by tagging mermaid nodes with
 * a `classDef aws-<category>` and a matching `class` directive.
 * Selectors below win over the monochrome theme rules earlier in
 * the file because `.node.aws-compute` is more specific than
 * `.node`.
 *
 * Categories mirror the AWS service groupings:
 *   aws-compute   -- orange   -- EC2, Lambda, EKS, Fargate
 *   aws-network   -- purple   -- ELB, CloudFront, API Gateway, Kinesis
 *   aws-db        -- blue     -- RDS, DynamoDB, Redshift
 *   aws-storage   -- green    -- S3, EBS, EFS
 *   aws-messaging -- red      -- SES, SNS, SQS
 *   aws-external  -- grey     -- email recipient, user-agent, off-cloud
 */

pre.mermaid svg .node.aws-compute rect,
pre.mermaid svg .node.aws-compute polygon,
pre.mermaid svg .node.aws-compute path,
pre.mermaid svg .node.aws-compute circle {
    fill: #FF9900 !important;
    stroke: #cc7700 !important;
}
pre.mermaid svg .node.aws-compute .nodeLabel,
pre.mermaid svg .node.aws-compute text,
pre.mermaid svg .node.aws-compute foreignObject span {
    color: #ffffff !important;
    fill: #ffffff !important;
}

pre.mermaid svg .node.aws-network rect,
pre.mermaid svg .node.aws-network polygon,
pre.mermaid svg .node.aws-network path,
pre.mermaid svg .node.aws-network circle {
    fill: #8C4FFF !important;
    stroke: #6b3acc !important;
}
pre.mermaid svg .node.aws-network .nodeLabel,
pre.mermaid svg .node.aws-network text,
pre.mermaid svg .node.aws-network foreignObject span {
    color: #ffffff !important;
    fill: #ffffff !important;
}

pre.mermaid svg .node.aws-db rect,
pre.mermaid svg .node.aws-db polygon,
pre.mermaid svg .node.aws-db path,
pre.mermaid svg .node.aws-db circle {
    fill: #3B48CC !important;
    stroke: #2a36a3 !important;
}
pre.mermaid svg .node.aws-db .nodeLabel,
pre.mermaid svg .node.aws-db text,
pre.mermaid svg .node.aws-db foreignObject span {
    color: #ffffff !important;
    fill: #ffffff !important;
}

pre.mermaid svg .node.aws-storage rect,
pre.mermaid svg .node.aws-storage polygon,
pre.mermaid svg .node.aws-storage path,
pre.mermaid svg .node.aws-storage circle {
    fill: #3F8624 !important;
    stroke: #2b5e19 !important;
}
pre.mermaid svg .node.aws-storage .nodeLabel,
pre.mermaid svg .node.aws-storage text,
pre.mermaid svg .node.aws-storage foreignObject span {
    color: #ffffff !important;
    fill: #ffffff !important;
}

pre.mermaid svg .node.aws-messaging rect,
pre.mermaid svg .node.aws-messaging polygon,
pre.mermaid svg .node.aws-messaging path,
pre.mermaid svg .node.aws-messaging circle {
    fill: #D13212 !important;
    stroke: #a82710 !important;
}
pre.mermaid svg .node.aws-messaging .nodeLabel,
pre.mermaid svg .node.aws-messaging text,
pre.mermaid svg .node.aws-messaging foreignObject span {
    color: #ffffff !important;
    fill: #ffffff !important;
}

pre.mermaid svg .node.aws-external rect,
pre.mermaid svg .node.aws-external polygon,
pre.mermaid svg .node.aws-external path,
pre.mermaid svg .node.aws-external circle {
    fill: #545b64 !important;
    stroke: #3a3f47 !important;
}
pre.mermaid svg .node.aws-external .nodeLabel,
pre.mermaid svg .node.aws-external text,
pre.mermaid svg .node.aws-external foreignObject span {
    color: #ffffff !important;
    fill: #ffffff !important;
}