/* ORamaVR brand overrides for the generated Structurizr site.
   Loaded on every page via the "generatr.style.customStylesheet" view
   property (see workspace.dsl). Colors match the public docs site at
   mages-docs.oramavr.com (black header, blue accent #0071BC). */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono&display=swap');

:root {
    --oramavr-blue: #0071bc;
    --oramavr-blue-dark: #00549a;
    --oramavr-font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --oramavr-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Code", monospace;
}

body,
.navbar,
.menu,
.content,
.title,
.subtitle,
.box,
.card,
.tag,
.button,
.navbar-item,
.navbar-link,
.menu-list a,
.tabs a,
.breadcrumb a {
    font-family: var(--oramavr-font-sans);
}

code,
pre,
.input {
    font-family: var(--oramavr-font-mono);
}

svg,
svg text,
svg [font-family] {
    font-family: var(--oramavr-font-sans) !important;
}

/* Links + active-tab underline: swap Bulma's stock purple-blue for the
   ORamaVR brand blue used throughout the class-reference docs site. */
a {
    color: var(--oramavr-blue);
}

.tabs li.is-active a {
    color: var(--oramavr-blue);
    border-bottom-color: var(--oramavr-blue);
}

/* Header logo sizing (generatr.style.logoPath renders it at native size
   otherwise, which is too tall for a 52px navbar). */
.navbar-brand img {
    max-height: 2.25rem;
}

/* Keep the logo, but remove the duplicated site name and the single-branch
   selector/version dropdown generated for the static site. */
.navbar-brand > .navbar-item + .navbar-item,
.navbar-end > .navbar-item.has-dropdown {
    display: none;
}

/* Sidebar section labels ("Platform", "Externals", ...) read as bold
   uppercase micro-headings, matching the docs site's sidebar convention,
   instead of Bulma's plain default. */
.menu-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #7a7a7a;
}

/* Subtle themed scrollbar (WebKit/Blink) instead of the OS default. */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 100px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.4);
}

/* A touch more breathing room for diagram descriptions and body copy. */
.content p {
    line-height: 1.65;
}

/* Inline interactive landscape on the home page (see customize_nav's
   home_page.py — system boxes are wrapped in <a> links). */
.landscape-embed {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #ffffff;
    padding: 0.5rem;
    overflow-x: auto;
}
.landscape-embed svg {
    max-width: 100%;
    height: auto;
}
.landscape-embed a g.entity {
    cursor: pointer;
}
.landscape-embed a:hover g.entity {
    opacity: 0.85;
}

.content figure {
    position: relative;
}

.diagram-maximize {
    display: block;
    width: fit-content;
    margin: 0 0 0.5rem auto;
    padding: 0.4rem 0.7rem;
    border: 1px solid rgba(11, 72, 132, 0.22);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--oramavr-blue-dark);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
    cursor: pointer;
    font-family: var(--oramavr-font-sans);
    font-size: 0.82rem;
    font-weight: 600;
}

.diagram-maximize:hover,
.diagram-maximize:focus {
    background: #ffffff;
    border-color: rgba(0, 113, 188, 0.48);
}

.diagram-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.85rem;
    margin: 0.65rem 0 1rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid #d8e1ea;
    border-radius: 6px;
    background: #f8fafc;
    color: #334155;
    font-size: 0.78rem;
    line-height: 1.25;
}

.diagram-legend-title {
    font-weight: 700;
}

.diagram-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.diagram-legend-swatch {
    display: inline-block;
    width: 1.1rem;
    height: 0.72rem;
    border: 2px solid #64748b;
    border-radius: 3px;
}

.diagram-legend-swatch.is-dashed {
    border-style: dashed;
}

.diagram-legend-line {
    display: inline-block;
    width: 1.45rem;
    border-top: 2px solid #7a8699;
}

.diagram-legend-line.is-dashed {
    border-top-style: dashed;
}

/* ---- Diagram relationship hover focus ----------------------------------
   The PlantUML SVGs are embedded inline (also inside the zoom modal, which
   pan-zooms the same element), so this stylesheet reaches into them. Each
   relationship is a <g class="link"> containing its path + label <text>
   lines. The tiny in-SVG labels stay hidden at all times — the styled
   cursor tooltip (below) is the single place the edge text appears.
   Hovering still dims the other edges to spotlight the hovered one. */
g.link {
    cursor: pointer;
    transition: opacity 0.15s ease;
}
g.link text {
    opacity: 0;
    pointer-events: none;
}
svg:has(g.link:hover) g.link:not(:hover) {
    opacity: 0.15;
}

/* Cursor-following tooltip for relationship edges (see link-tooltips.js).
   High z-index so it also floats above the Bulma zoom modal. */
.link-tooltip {
    position: fixed;
    z-index: 9999;
    max-width: 380px;
    padding: 8px 12px;
    background: rgba(22, 22, 22, 0.94);
    color: #ffffff;
    font-family: var(--oramavr-font-sans);
    font-size: 13px;
    line-height: 1.45;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.1s ease;
}
.link-tooltip.visible {
    opacity: 1;
}
.link-tooltip .route {
    font-weight: 700;
    margin-bottom: 2px;
}