/* ============================================
   Pixel theme: only the look, on top of Bootstrap 5.3 and campa-base.css.
   Light = Pradera (sky, hills, gold blocks). Dark = Castillo (stone, lava, gold).
   Opt-in per user (Manage > Appearance). Pages are not touched: this file restyles the Bootstrap and
   Falcon-named classes they already use. See /Admin/UiKit.
   ============================================ */

:root,
[data-bs-theme="light"] {
    --px-ol: #20180c;
    --px-lite: #ffffff;
    --px-shade: #e0cf9f;
    --px-head: #ead9ae;
    --px-head-fg: #20180c;
    --px-msg-bg: #101828;
    --px-msg-fg: #ffffff;
    --px-path: #a86820;
    --px-map-bg: #48b848;
    --px-map-tile: url("../img/pixel/map-grass.svg");
    --px-map-edge: url("../img/pixel/map-edge.svg");
    --px-map-path: #f8e8a8;
    --px-gold: #f8b800;
    --px-gold-lite: #ffe880;
    --px-gold-dark: #b87000;
    --px-sel: #a85420;
    --px-sel-fg: #ffffff;
    --px-nav-tile: url("../img/pixel/brick.svg");
    --px-nav-bg: #a85420;
    --px-side-bg: #6c3a14;
    --px-side-fg: #fff6df;
    --px-side-active: #ffe880;
    --px-page: linear-gradient(#78c0f8 0 90px, #8ccaf9 90px 200px, #a0d4fa 200px 340px, #b6e0fb 340px 500px, #cdeafc 500px);
    --px-scene: url("../img/pixel/hills.svg");
    --px-sky: url("../img/pixel/clouds.svg");

    --bs-body-font-family: "Nunito", "Segoe UI", system-ui, sans-serif;
    --bs-body-bg: #fff8e4;
    --bs-body-bg-rgb: 255, 248, 228;
    --bs-body-color: #20180c;
    --bs-body-color-rgb: 32, 24, 12;
    --bs-emphasis-color: #000000;
    --bs-emphasis-color-rgb: 0, 0, 0;
    --bs-secondary-color: #5c4a2e;
    --bs-secondary-color-rgb: 92, 74, 46;
    --bs-tertiary-color: #7a6a4c;
    --bs-tertiary-color-rgb: 122, 106, 76;
    --bs-secondary-bg: #f4e4b8;
    --bs-secondary-bg-rgb: 244, 228, 184;
    --bs-tertiary-bg: #fbeec6;
    --bs-tertiary-bg-rgb: 251, 238, 198;
    --bs-border-color: #cdb988;
    --bs-border-color-translucent: rgba(32, 24, 12, 0.3);
    --bs-primary: #1a5fd0;
    --bs-primary-rgb: 26, 95, 208;
    --bs-secondary: #8a5a30;
    --bs-secondary-rgb: 138, 90, 48;
    --bs-success: #1f8a2a;
    --bs-success-rgb: 31, 138, 42;
    --bs-info: #1878c8;
    --bs-info-rgb: 24, 120, 200;
    --bs-warning: #e88a00;
    --bs-warning-rgb: 232, 138, 0;
    --bs-danger: #d02818;
    --bs-danger-rgb: 208, 40, 24;
    --bs-link-color: #1a5fd0;
    --bs-link-color-rgb: 26, 95, 208;
    --bs-link-hover-color: #0c3f96;
    --bs-link-hover-color-rgb: 12, 63, 150;
}

[data-bs-theme="dark"] {
    --px-ol: #07050c;
    --px-lite: #5e5478;
    --px-shade: #18132a;
    --px-head: #4a4060;
    --px-head-fg: #ffd860;
    --px-msg-bg: #07050c;
    --px-msg-fg: #ffeec0;
    --px-path: #e84818;
    --px-map-bg: #2a2438;
    --px-map-tile: url("../img/pixel/map-stone.svg");
    --px-map-edge: url("../img/pixel/map-edge-dark.svg");
    --px-map-path: #f07020;
    --px-gold: #f8b818;
    --px-gold-lite: #ffe880;
    --px-gold-dark: #a06000;
    --px-sel: #6a5a90;
    --px-sel-fg: #ffffff;
    --px-nav-tile: url("../img/pixel/brick-dark.svg");
    --px-nav-bg: #3a3250;
    --px-side-bg: #1b1628;
    --px-side-fg: #eee6f2;
    --px-side-active: #ffd860;
    --px-page: linear-gradient(#120d1c 0 120px, #181226 120px 280px, #1f1730 280px 460px, #2a1a30 460px);
    --px-scene: url("../img/pixel/castle.svg");
    --px-sky: none;
    color-scheme: dark;

    --bs-body-bg: #2e2840;
    --bs-body-bg-rgb: 46, 40, 64;
    --bs-body-color: #eee6f2;
    --bs-body-color-rgb: 238, 230, 242;
    --bs-emphasis-color: #ffffff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color: #c4b8d2;
    --bs-secondary-color-rgb: 196, 184, 210;
    --bs-tertiary-color: #a497b4;
    --bs-tertiary-color-rgb: 164, 151, 180;
    --bs-secondary-bg: #1b1628;
    --bs-secondary-bg-rgb: 27, 22, 40;
    --bs-tertiary-bg: #383050;
    --bs-tertiary-bg-rgb: 56, 48, 80;
    --bs-border-color: #5a4f72;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.2);
    --bs-primary: #5a9cf4;
    --bs-primary-rgb: 90, 156, 244;
    --bs-secondary: #7a6e96;
    --bs-secondary-rgb: 122, 110, 150;
    --bs-success: #48c060;
    --bs-success-rgb: 72, 192, 96;
    --bs-info: #58a4f4;
    --bs-info-rgb: 88, 164, 244;
    --bs-warning: #f89818;
    --bs-warning-rgb: 248, 152, 24;
    --bs-danger: #f05828;
    --bs-danger-rgb: 240, 88, 40;
    --bs-light-rgb: 56, 48, 80;
    --bs-dark-rgb: 238, 230, 242;
    --bs-link-color: #8cc0ff;
    --bs-link-color-rgb: 140, 192, 255;
    --bs-link-hover-color: #ffd860;
    --bs-link-hover-color-rgb: 255, 216, 96;
}

:root,
[data-bs-theme] {
    --campa-surface: var(--bs-body-bg);
    --shell-sidebar-bg: var(--px-side-bg);
    --shell-sidebar-border: var(--px-u) solid var(--px-ol);
    --shell-top-bg: var(--px-nav-bg) var(--px-nav-tile);
    --shell-top-border: var(--px-u) solid var(--px-ol);
    --timeline-line: var(--px-path);
    --px-u: 3px;
    --px-frame: 0 calc(var(--px-u) * -1) 0 var(--px-ol), 0 var(--px-u) 0 var(--px-ol), calc(var(--px-u) * -1) 0 0 var(--px-ol), var(--px-u) 0 0 var(--px-ol);
    --px-title: "Press Start 2P", ui-monospace, monospace;
    --bs-border-radius: 0;
    --bs-border-radius-sm: 0;
    --bs-border-radius-lg: 0;
    --bs-border-radius-xl: 0;
    --bs-border-radius-xxl: 0;
    --bs-border-radius-2xl: 0;
    --bs-border-radius-pill: 0;
    --bs-box-shadow: var(--px-frame), 0 9px 0 rgba(0, 0, 0, 0.28);
    --bs-box-shadow-sm: var(--px-frame), 0 6px 0 rgba(0, 0, 0, 0.25);
    --bs-box-shadow-lg: var(--px-frame), 0 12px 0 rgba(0, 0, 0, 0.3);
}

/* ---------- Page ---------- */
html { background: var(--px-page) fixed; }
/* The page paints on <html> so the scene below (z-index -1) stays visible behind a transparent body */
body {
    background: transparent;
    min-height: 100vh;
}
body::before {
    content: "";
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: 140px;
    background: var(--px-scene) repeat-x left bottom;
    image-rendering: pixelated;
    pointer-events: none;
    z-index: -1;
}
body::after {
    content: "";
    position: fixed;
    left: 0; right: 0; top: 80px;
    height: 120px;
    background: var(--px-sky) repeat-x;
    image-rendering: pixelated;
    pointer-events: none;
    z-index: -1;
}
/* Nothing round in a 16-bit world, including the inline styles on the public pages */
*, *::before, *::after, [class*="rounded"] { border-radius: 0 !important; }

/* ---------- Pixel type: headings and controls. Data stays in the readable body face ---------- */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
.btn, .badge, .nav-tabs .nav-link, .nav-pills .nav-link, .page-link, .navbar-brand, .card-title, .modal-title,
.table > thead th, .form-label, .breadcrumb, .dropdown-header, .accordion-button, .navbar-vertical-label, .toast-header {
    font-family: var(--px-title);
    font-weight: 400;
    font-synthesis: none;
}
:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6).fs-11 { font-size: 0.54rem !important; }
:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6).fs-10 { font-size: 0.62rem !important; }
:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6).fs-9 { font-size: 0.72rem !important; }
:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6).fs-8 { font-size: 0.84rem !important; }
:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6).fs-7 { font-size: 0.96rem !important; }
:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6).fs-6 { font-size: 1.1rem !important; }
:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6).fs-5 { font-size: 1.25rem !important; }
:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6).fs-4 { font-size: 1.4rem !important; }
h1, .h1 { font-size: 1.4rem; line-height: 1.5; }
h2, .h2 { font-size: 1rem; line-height: 1.5; }
h3, .h3 { font-size: 0.9rem; line-height: 1.5; }
h4, .h4 { font-size: 0.82rem; line-height: 1.55; }
h5, .h5 { font-size: 0.74rem; line-height: 1.6; }
h6, .h6 { font-size: 0.64rem; line-height: 1.6; }
[data-bs-theme="dark"] h1, [data-bs-theme="dark"] .h1 { font-family: "Jacquard 12", var(--px-title); font-size: 2.6rem; line-height: 1.15; color: #ffd860; }
.form-label { font-size: 0.6rem; line-height: 1.6; margin-bottom: 0.4rem; }
kbd { background: var(--px-ol); color: #fff; border-radius: 0; }
hr { opacity: 0.4; }
a { text-underline-offset: 2px; }
.text-warning { color: #a85800 !important; }
[data-bs-theme="dark"] .text-warning { color: #ffb040 !important; }
[data-bs-theme="dark"] .bg-dark { background-color: #07050c !important; color: #eee6f2; }

/* ---------- Buttons: 16-bit blocks ---------- */
.btn {
    --px-b: var(--bs-tertiary-bg); --px-f: var(--bs-body-color); --px-l: var(--px-lite); --px-d: var(--px-shade);
    --bs-btn-color: var(--px-f); --bs-btn-bg: var(--px-b);
    --bs-btn-hover-color: var(--px-f); --bs-btn-hover-bg: var(--px-b);
    --bs-btn-active-color: var(--px-f); --bs-btn-active-bg: var(--px-b);
    --bs-btn-disabled-color: var(--px-f); --bs-btn-disabled-bg: var(--px-b);
    --bs-btn-border-width: 0;
    --bs-btn-font-size: 0.62rem;
    --bs-btn-font-weight: 400;
    --bs-btn-line-height: 1.5;
    --bs-btn-padding-x: 0.85rem;
    --bs-btn-padding-y: 0.65rem;
    --bs-btn-disabled-opacity: 0.5;
    transition: none;
    box-shadow: var(--px-frame), inset var(--px-u) var(--px-u) 0 var(--px-l), inset calc(var(--px-u) * -1) calc(var(--px-u) * -1) 0 var(--px-d), 0 6px 0 rgba(0, 0, 0, 0.32);
}
.btn:hover { filter: brightness(1.07); transform: translateY(-2px); }
.btn:active, .btn.active, .btn.show {
    transform: translateY(2px);
    box-shadow: var(--px-frame), inset var(--px-u) var(--px-u) 0 var(--px-d);
}
.btn:focus-visible { outline: 3px dashed var(--bs-primary); outline-offset: 4px; box-shadow: var(--px-frame), inset var(--px-u) var(--px-u) 0 var(--px-l), inset calc(var(--px-u) * -1) calc(var(--px-u) * -1) 0 var(--px-d); }
.btn:disabled, .btn.disabled { filter: grayscale(0.75); transform: none; }
.btn-sm, .btn-group-sm > .btn { --bs-btn-font-size: 0.54rem; --bs-btn-padding-x: 0.6rem; --bs-btn-padding-y: 0.45rem; }
.btn-lg, .btn-group-lg > .btn { --bs-btn-font-size: 0.74rem; --bs-btn-padding-x: 1.15rem; --bs-btn-padding-y: 0.85rem; }

.btn-primary, .btn-falcon-primary { --px-b: var(--px-gold); --px-f: #20140a; --px-l: var(--px-gold-lite); --px-d: var(--px-gold-dark); }
.btn-secondary, .btn-falcon-secondary { --px-b: #c86c34; --px-f: #fff; --px-l: #f0a070; --px-d: #843410; }
.btn-success, .btn-falcon-success { --px-b: #2a9a34; --px-f: #fff; --px-l: #78e060; --px-d: #0e5e12; }
.btn-danger, .btn-falcon-danger { --px-b: #d82c1c; --px-f: #fff; --px-l: #f88870; --px-d: #8c0e06; }
.btn-warning, .btn-falcon-warning { --px-b: #f09000; --px-f: #20140a; --px-l: #fcc860; --px-d: #a05400; }
.btn-info, .btn-falcon-info { --px-b: #2474d8; --px-f: #fff; --px-l: #80c0f8; --px-d: #0e4498; }
.btn-dark, .btn-falcon-dark { --px-b: #2a2230; --px-f: #fff; --px-l: #5e5478; --px-d: #07050c; }
.btn-light, .btn-falcon-default { --px-b: var(--bs-body-bg); --px-f: var(--bs-body-color); --px-l: var(--px-lite); --px-d: var(--px-shade); }
[class*="btn-outline-"] { --px-b: transparent; --px-l: transparent; --px-d: transparent; }
.btn-outline-primary { --px-f: var(--bs-primary); }
.btn-outline-secondary { --px-f: var(--bs-secondary-color); }
.btn-outline-success { --px-f: var(--bs-success); }
.btn-outline-danger { --px-f: var(--bs-danger); }
.btn-outline-warning { --px-f: #a85800; }
.btn-outline-info { --px-f: var(--bs-info); }
.btn-outline-dark { --px-f: var(--bs-body-color); }
.btn-outline-light { --px-f: #fff; }
[class*="btn-outline-"]:hover, [class*="btn-outline-"].active, .btn-check:checked + [class*="btn-outline-"] { --px-b: var(--bs-secondary-bg); }
.btn-link { --bs-btn-color: var(--bs-link-color); --bs-btn-hover-color: var(--bs-link-hover-color); --bs-btn-bg: transparent; --bs-btn-hover-bg: transparent; --bs-btn-active-bg: transparent; box-shadow: none !important; font-family: inherit; --bs-btn-font-size: 0.9rem; }
.btn-group > .btn, .btn-group-vertical > .btn { margin-left: var(--px-u); }
.btn-group > .btn:first-child { margin-left: 0; }
.btn-close { border-radius: 0; }
.navbar-toggler-humburger-icon { box-shadow: none !important; transform: none !important; background: transparent; }
.btn.bg-body-tertiary { font-family: inherit; font-size: 0.82rem; }

/* ---------- Cards ---------- */
.card {
    --bs-card-bg: var(--bs-body-bg);
    --bs-card-border-width: 0;
    --bs-card-border-radius: 0;
    --bs-card-inner-border-radius: 0;
    --bs-card-cap-bg: var(--px-head);
    --bs-card-cap-color: var(--px-head-fg);
    --bs-card-cap-padding-y: 0.7rem;
    box-shadow: var(--bs-box-shadow-sm);
}
.card > .card-header,
.card > .card-header.bg-body-tertiary,
.card > .card-header.bg-body-secondary,
.card > .card-header.bg-white {
    background-color: var(--px-head) !important;
    color: var(--px-head-fg);
    --bs-body-color: var(--px-head-fg);
    --bs-body-color-rgb: 32, 24, 12;
    --bs-secondary-color: var(--px-head-fg);
    --bs-tertiary-color: var(--px-head-fg);
    --bs-emphasis-color: var(--px-head-fg);
    --bs-link-color-rgb: 12, 50, 120;
    border-bottom: var(--px-u) solid var(--px-ol);
    box-shadow: inset var(--px-u) var(--px-u) 0 rgba(255, 255, 255, 0.35);
}
[data-bs-theme="dark"] .card > .card-header { --bs-body-color-rgb: 255, 216, 96; --bs-link-color-rgb: 140, 192, 255; }
.card > .card-header h1, .card > .card-header h2, .card > .card-header h3, .card > .card-header h4, .card > .card-header h5, .card > .card-header h6 { color: inherit; }
.card-footer { background-color: var(--bs-tertiary-bg); border-top: var(--px-u) solid var(--px-ol); }
.card:hover.hover-shadow { box-shadow: var(--bs-box-shadow-lg); }
.dropdown-menu-card .card, .card .card.shadow-none { box-shadow: none; }

/* ---------- Badges ---------- */
.badge {
    --bs-badge-font-size: 0.54rem;
    --bs-badge-font-weight: 400;
    --bs-badge-padding-x: 0.45rem;
    --bs-badge-padding-y: 0.35rem;
    --bs-badge-border-radius: 0;
    line-height: 1.3;
    box-shadow: 0 -2px 0 var(--px-ol), 0 2px 0 var(--px-ol), -2px 0 0 var(--px-ol), 2px 0 0 var(--px-ol);
}
.badge.fs-11, .badge.fs-10 { font-size: 0.54rem !important; }
.badge-subtle-primary { color: #fff; background-color: var(--bs-primary); }
.badge-subtle-secondary { color: #fff; background-color: var(--bs-secondary); }
.badge-subtle-success { color: #fff; background-color: var(--bs-success); }
.badge-subtle-danger { color: #fff; background-color: var(--bs-danger); }
.badge-subtle-warning { color: #000; background-color: var(--bs-warning); }
.badge-subtle-info { color: #000; background-color: var(--bs-info); }

/* ---------- Tables ---------- */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--bs-body-color);
    --bs-table-striped-bg: var(--bs-tertiary-bg);
    --bs-table-hover-bg: var(--bs-secondary-bg);
    --bs-table-border-color: var(--bs-border-color);
}
.table > thead th { font-size: 0.56rem; line-height: 1.5; border-bottom: var(--px-u) solid var(--px-ol); vertical-align: bottom; }
.table > tbody { font-variant-numeric: tabular-nums; }
.card .table > :not(caption) > * > *:first-child { padding-left: 0.75rem; }
.card .table > :not(caption) > * > *:last-child { padding-right: 0.75rem; }

/* ---------- Forms ---------- */
.form-control, .form-select, .input-group-text {
    border: var(--px-u) solid var(--px-ol);
    border-radius: 0;
    box-shadow: inset 2px 2px 0 var(--px-shade);
}
.form-control, .form-select { background-color: var(--bs-secondary-bg); }
:root .form-control, :root .form-select { background-color: #ffffff; color: #20180c; }
[data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background-color: #1b1628; color: #eee6f2; }
.form-control:focus, .form-select:focus { border-color: var(--bs-primary); box-shadow: inset 2px 2px 0 var(--px-shade); outline: 2px solid var(--bs-primary); outline-offset: 1px; }
.input-group { --bs-border-width: 3px; }
.input-group-text { background-color: var(--bs-secondary-bg); }
.input-group > .btn { margin-left: 3px; }
.form-check-input { border: 2px solid var(--px-ol); border-radius: 0 !important; }
.form-check-input:checked { background-color: var(--bs-success); border-color: var(--px-ol); }
.form-check-input:focus { box-shadow: 0 0 0 2px var(--bs-primary); border-color: var(--px-ol); }
.form-switch .form-check-input { border-radius: 0 !important; }
.form-range::-webkit-slider-thumb { border-radius: 0; background: var(--px-gold); }

/* ---------- Message boxes: alerts and modals ---------- */
.alert {
    --px-edge: #ffffff;
    --bs-alert-bg: var(--px-msg-bg);
    --bs-alert-color: var(--px-msg-fg);
    --bs-alert-border-color: transparent;
    --bs-alert-link-color: #ffd860;
    --bs-alert-border-radius: 0;
    --bs-body-color: var(--px-msg-fg);
    --bs-body-color-rgb: 255, 255, 255;
    --bs-secondary-color: #ccd4e4;
    --bs-tertiary-color: #aab4c8;
    --bs-emphasis-color: #ffffff;
    --bs-primary-rgb: 140, 192, 255;
    --bs-link-color-rgb: 255, 216, 96;
    border: 0;
    margin-left: 6px;
    margin-right: 6px;
    box-shadow: 0 -3px 0 var(--px-edge), 0 3px 0 var(--px-edge), -3px 0 0 var(--px-edge), 3px 0 0 var(--px-edge), 0 0 0 6px var(--px-ol);
}
.alert-primary, .alert-info { --px-edge: #80c0f8; }
.alert-success { --px-edge: #78e060; }
.alert-warning { --px-edge: #f8b800; }
.alert-danger { --px-edge: #f88870; }
.alert-secondary, .alert-light, .alert-dark { --px-edge: #cfc6a8; }
.alert .btn-close { filter: invert(1) grayscale(1) brightness(2); }
.alert [class*="btn-outline-"] { --px-b: rgba(255, 255, 255, 0.14); --px-f: #ffd860; }
.alert .text-warning { color: #ffc860 !important; }
.alert .text-success { color: #78e060 !important; }
.alert .text-danger { color: #f8a090 !important; }

.modal {
    --bs-modal-bg: var(--bs-body-bg);
    --bs-modal-border-width: 0;
    --bs-modal-border-radius: 0;
    --bs-modal-inner-border-radius: 0;
    --bs-modal-box-shadow: none;
    --bs-modal-header-border-width: 0;
    --bs-modal-footer-border-width: 3px;
    --bs-modal-footer-border-color: var(--px-ol);
}
.modal-content { box-shadow: var(--px-frame), 8px 11px 0 3px rgba(0, 0, 0, 0.4); }
.modal-header { background: var(--px-msg-bg); color: var(--px-msg-fg); }
.modal-header .modal-title, .modal-header h1, .modal-header h2, .modal-header h3, .modal-header h4, .modal-header h5, .modal-header h6 { color: inherit; font-size: 0.74rem; font-family: var(--px-title); line-height: 1.6; }
.modal-header .btn-close { filter: invert(1) grayscale(1) brightness(2); }
.modal-backdrop { --bs-backdrop-opacity: 0.6; }
.modal.fade .modal-dialog { transition: none; transform: none; }

/* ---------- Menus and navigation pieces ---------- */
.dropdown-menu {
    --bs-dropdown-bg: var(--bs-body-bg);
    --bs-dropdown-border-width: 0;
    --bs-dropdown-border-radius: 0;
    --bs-dropdown-link-hover-bg: var(--px-sel);
    --bs-dropdown-link-hover-color: var(--px-sel-fg);
    --bs-dropdown-link-active-bg: var(--px-sel);
    --bs-dropdown-link-active-color: var(--px-sel-fg);
    box-shadow: var(--px-frame), 6px 8px 0 rgba(0, 0, 0, 0.3);
    z-index: 1050;
}
.dropdown-menu-notification .card-header { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.notification-indicator-primary::before {
    right: 3px; top: 6px;
    width: 10px; height: 10px;
    background-color: #d82c1c !important;
    box-shadow: 0 0 0 2px #fff;
}

.nav-tabs { --bs-nav-tabs-border-width: 0; --bs-nav-tabs-border-radius: 0; border-bottom: var(--px-u) solid var(--px-ol); gap: 4px; }
.nav-tabs .nav-link { font-size: 0.58rem; line-height: 1.5; background: var(--bs-tertiary-bg); color: var(--bs-body-color); margin-bottom: 0; }
.nav-tabs .nav-link:hover { background: var(--bs-secondary-bg); }
.nav-tabs .nav-link.active { background: var(--px-sel); color: var(--px-sel-fg); box-shadow: none; }
.nav-pills { --bs-nav-pills-border-radius: 0; --bs-nav-pills-link-active-bg: var(--px-sel); --bs-nav-pills-link-active-color: var(--px-sel-fg); }
.nav-pills .nav-link { font-size: 0.58rem; line-height: 1.5; }
.pagination { --bs-pagination-border-radius: 0; --bs-pagination-bg: var(--bs-body-bg); --bs-pagination-color: var(--bs-body-color); --bs-pagination-border-color: var(--px-ol); --bs-pagination-border-width: 2px; --bs-pagination-hover-bg: var(--bs-secondary-bg); --bs-pagination-hover-color: var(--bs-body-color); --bs-pagination-active-bg: var(--px-sel); --bs-pagination-active-color: var(--px-sel-fg); --bs-pagination-active-border-color: var(--px-ol); --bs-pagination-font-size: 0.6rem; }
.breadcrumb { font-size: 0.56rem; line-height: 1.6; }
.progress { --bs-progress-bg: var(--bs-secondary-bg); --bs-progress-border-radius: 0; box-shadow: 0 0 0 2px var(--px-ol); }
.progress-bar { background-image: repeating-linear-gradient(90deg, transparent 0 14px, var(--px-ol) 14px 17px); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.35); transition: none; }
.list-group { --bs-list-group-border-radius: 0; --bs-list-group-bg: transparent; --bs-list-group-color: var(--bs-body-color); --bs-list-group-action-hover-bg: var(--bs-secondary-bg); --bs-list-group-active-bg: var(--px-sel); --bs-list-group-active-color: var(--px-sel-fg); --bs-list-group-active-border-color: var(--px-ol); }
.accordion { --bs-accordion-bg: var(--bs-body-bg); --bs-accordion-border-radius: 0; --bs-accordion-inner-border-radius: 0; --bs-accordion-active-bg: var(--px-sel); --bs-accordion-active-color: var(--px-sel-fg); --bs-accordion-border-color: var(--px-ol); --bs-accordion-btn-focus-box-shadow: none; --bs-accordion-transition: none; }
.accordion-button { font-size: 0.66rem; line-height: 1.6; }
.toast { --bs-toast-bg: var(--px-msg-bg); --bs-toast-color: var(--px-msg-fg); --bs-toast-border-radius: 0; --bs-toast-header-bg: var(--px-msg-bg); --bs-toast-header-color: var(--px-msg-fg); box-shadow: var(--px-frame); }
.tooltip { --bs-tooltip-bg: var(--px-msg-bg); --bs-tooltip-color: #fff; --bs-tooltip-border-radius: 0; --bs-tooltip-opacity: 1; }
.popover { --bs-popover-border-radius: 0; --bs-popover-border-width: 0; --bs-popover-bg: var(--bs-body-bg); box-shadow: var(--px-frame); }
.spinner-border { border-radius: 0; animation: spinner-border 0.8s steps(4) infinite; }
.spinner-grow { border-radius: 0; }
.img-thumbnail { border-radius: 0; border: 2px solid var(--px-ol); }

/* ---------- Avatars and icon tiles ---------- */
.avatar .avatar-name { background: var(--px-sel); color: var(--px-sel-fg); font-family: var(--px-title); text-transform: uppercase; box-shadow: 0 0 0 2px var(--px-ol); }
.avatar-s .avatar-name { font-size: 0.42rem; }
.avatar-xl .avatar-name { font-size: 0.6rem; }
.icon-item { box-shadow: var(--px-frame); }
.card-span .card-span-img { box-shadow: var(--px-frame); }

/* ---------- Timelines: stations along the path of a world map ----------
   Pages keep their markup and status colors; here each timeline becomes a piece of land, its line a road,
   its icons stations, and anything written directly on the land sits on a small sign so it stays readable. */
.timeline-vertical:has(> .timeline-item),
div.timeline-simple,
div.project-timeline,
ol.rfq-timeline {
    background-color: var(--px-map-bg);
    background-image: var(--px-map-edge), var(--px-map-tile);
    background-repeat: repeat-x, repeat;
    background-position: left bottom, left top;
    box-shadow: var(--px-frame);
}
.timeline-vertical:has(> .timeline-item) { padding: 1.5rem 1rem 3.25rem; }
div.timeline-simple { padding: 1rem 1rem 3rem; }
div.project-timeline { padding: 1rem 1rem 3rem 2.25rem; }
ol.rfq-timeline { padding: 2rem 1rem 3.5rem; max-width: 760px; }

/* The road */
.timeline-vertical .timeline-item:not(:last-child)::before,
.timeline-simple .timeline-item:not(:last-child)::before,
div.project-timeline::before,
.rfq-timeline .rfq-timeline-item:not(:last-child)::after {
    background: var(--px-map-path);
    border: 0;
    box-shadow: -3px 0 0 var(--px-ol), 3px 0 0 var(--px-ol);
}
.timeline-vertical .timeline-item:not(:last-child)::before { width: 14px; left: 13px; }
div.timeline-vertical::before { content: none; }
.timeline-simple .timeline-item:not(:last-child)::before { width: 10px; left: 11px; top: 1rem; height: calc(100% + 1rem); }
div.project-timeline::before { width: 8px; left: 20px; top: 1.25rem; bottom: 3.25rem; }
.rfq-timeline .rfq-timeline-item:not(:last-child)::after {
    top: 23px; left: 50%; right: calc(-50% - 0.5rem); height: 10px;
    box-shadow: 0 -3px 0 var(--px-ol), 0 3px 0 var(--px-ol);
}

/* The stations: a round pixel dot. The clip cuts the corners, the image draws the outline. */
.timeline-vertical .timeline-icon,
ol.rfq-timeline .rfq-timeline-dot,
.timeline-simple .timeline-item .me-3 {
    border: 3px solid transparent;
    border-image: url("../img/pixel/station.svg") 12 / 12px;
    border-radius: 0 !important;
    box-shadow: inset 3px 3px 0 rgba(255, 255, 255, 0.5), inset -3px -3px 0 rgba(0, 0, 0, 0.25) !important;
    clip-path: polygon(6px 0, calc(100% - 6px) 0, calc(100% - 6px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 3px) calc(100% - 6px), calc(100% - 3px) calc(100% - 3px), calc(100% - 6px) calc(100% - 3px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 3px), 3px calc(100% - 3px), 3px calc(100% - 6px), 0 calc(100% - 6px), 0 6px, 3px 6px, 3px 3px, 6px 3px);
}
div.project-timeline .project-timeline-dot {
    border-radius: 0;
    box-shadow: 0 -3px 0 var(--px-ol), 0 3px 0 var(--px-ol), -3px 0 0 var(--px-ol), 3px 0 0 var(--px-ol);
}
.timeline-vertical .timeline-icon.bg-warning { color: var(--px-ol) !important; }
.timeline-vertical .timeline-icon.bg-warning .fas { color: var(--px-ol); }
.timeline-simple .timeline-item .me-3 {
    position: relative; z-index: 1; flex: none;
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    background: var(--px-gold);
}
.timeline-simple .timeline-item .me-3 .fas { color: var(--px-ol) !important; }
div.project-timeline .project-timeline-dot { width: 14px; height: 14px; left: -19px; }
/* The clip would cut the step number off the station, so it moves to the sign. */
ol.rfq-timeline .rfq-timeline-dot::before { content: none; }
.rfq-timeline .rfq-timeline-label::before { content: counter(rfq-step) ". "; }

/* Signs: text standing directly on the land */
.timeline-vertical .timeline-item-time p,
.timeline-vertical .timeline-item-content:not(:has(.timeline-item-card)),
.timeline-simple .timeline-item .flex-1,
.project-timeline .project-timeline-content,
.rfq-timeline .rfq-timeline-label {
    background: var(--campa-surface);
    box-shadow: var(--px-frame);
    padding: 0.25rem 0.5rem;
}
.timeline-vertical .timeline-item-time p { display: inline-block; }
.timeline-vertical .timeline-item-time > * { align-self: flex-start; }
.timeline-simple .timeline-item .flex-1 { min-width: 0; }
.project-timeline .project-timeline-content { flex: 1; min-width: 0; }
.rfq-timeline .rfq-timeline-label { display: table; margin: 0.75rem auto 0; }
.timeline-vertical .timeline-item-card { box-shadow: var(--px-frame), 0 6px 0 rgba(0, 0, 0, 0.25); }

/* The compact timelines in the sidebars of documents */
.timeline-vertical:has(.icon-item-sm) .timeline-item { padding-left: 2.5rem; padding-bottom: 0; }
.timeline-vertical:has(.icon-item-sm) .timeline-item:not(:first-child) { margin-top: 1rem; }
.timeline-vertical:has(.icon-item-sm) .timeline-item:not(:last-child)::before { left: 10px; width: 10px; top: 6px; height: calc(100% + 1rem); transform: none; }
.timeline-vertical:has(.icon-item-sm) .timeline-icon { left: 1px; top: 6px; width: 28px; height: 28px; transform: none; }
.timeline-vertical:has(.icon-item-sm) .timeline-item-content { margin: 0; }

@media (min-width: 992px) {
    .timeline-vertical .timeline-item:not(:last-child)::before { left: 50%; }
}
@media (max-width: 575.98px) {
    .rfq-timeline { padding-left: 0.25rem; padding-right: 0.25rem; }
}

/* ---------- App shell ---------- */
.scrollbar { scrollbar-color: var(--px-sel) transparent; scrollbar-width: thin; }

.navbar-top {
    image-rendering: pixelated;
    --bs-navbar-color: #fff;
    --bs-navbar-hover-color: #ffe880;
    --bs-navbar-active-color: #ffe880;
    --bs-navbar-brand-color: #fff;
    --bs-navbar-brand-hover-color: #ffe880;
}
.navbar-top .nav-link { color: #fff; filter: drop-shadow(2px 2px 0 var(--px-ol)); }
.navbar-top .nav-link:hover, .navbar-top .nav-link:focus { color: #ffe880; }
.navbar-top .nav-link [class*="text-"], .navbar-standard .nav-link [class*="text-"] { color: inherit !important; }
.navbar-top .nav-link.text-warning, .navbar-standard .nav-link.text-warning { color: #ffe880 !important; }
.navbar-top .dropdown-menu { filter: none; }
.navbar-top .form-control { box-shadow: none; }

.navbar-top .navbar-toggler-humburger-icon { color: #fff; }
.navbar-top .navbar-toggler-humburger-icon:hover { color: #ffe880; }

.navbar-vertical { color: var(--px-side-fg); }
.navbar-vertical .nav-link {
    color: var(--px-side-fg);
    padding: 0.5rem 0.7rem;
    font-weight: 600;
    font-size: 0.92rem;
}
.navbar-vertical .nav-link:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.navbar-vertical .nav-link.active {
    background: var(--px-gold);
    color: #20140a;
    box-shadow: inset 3px 3px 0 var(--px-gold-lite), inset -3px -3px 0 var(--px-gold-dark);
}
/* Category colours were tuned for a white sidebar; on the panel every icon follows the text */
.navbar-vertical .nav-link-icon [class*="icon-"] { color: inherit !important; }
.navbar-vertical-label { font-size: 0.5rem; line-height: 1.5; color: var(--px-side-active); }
.navbar-vertical-divider { border-color: var(--px-side-fg); opacity: 0.35; }
@media (max-width: 1199.98px) { .navbar-vertical .navbar-collapse { background: var(--px-side-bg); } }
.navbar-vertical .navbar-brand { color: #fff; }
.navbar-vertical .navbar-toggler-humburger-icon { color: #fff; }
.navbar-vertical .navbar-toggler-humburger-icon:hover { color: var(--px-side-active); }
.navbar-brand { --bs-navbar-brand-font-size: 1rem; }

@media (min-width: 1200px) {
    .navbar-vertical > .d-flex { background: var(--px-nav-bg) var(--px-nav-tile); image-rendering: pixelated; border-bottom: var(--px-u) solid var(--px-ol); }
}
.content > .footer { padding: 0.5rem 1rem; background: var(--bs-body-bg); box-shadow: var(--px-frame); --bs-secondary-color: var(--bs-body-color); }
.content > .footer .brand-campa { color: var(--bs-emphasis-color); }

/* ---------- Brand on the bars ---------- */
.brand-logo, .brand-campa, .brand-technologies, .brand-name { font-family: var(--px-title); }
.navbar .brand-campa, .navbar .brand-name { color: #fff; text-shadow: 2px 2px 0 var(--px-ol); }
.navbar .brand-technologies { color: #ffd860; text-shadow: 1px 1px 0 var(--px-ol); }
:root, [data-bs-theme] {
    --brand-navbar-campa: 15px;
    --brand-navbar-tech: 6px;
    --brand-footer-campa: 11px;
    --brand-footer-tech: 5px;
    --brand-hero-campa: 32px;
    --brand-hero-tech: 12px;
}
.navbar-brand .brand-campa, .navbar-top .brand-inline .brand-campa, .navbar-standard .brand-inline .brand-campa { font-size: 15px; letter-spacing: 0; }
.navbar-brand .brand-technologies, .navbar-top .brand-inline .brand-technologies, .navbar-standard .brand-inline .brand-technologies { font-size: 6px; letter-spacing: 0; }
.project-codename-emoji { font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }

/* ---------- Public pages ---------- */
.navbar-standard.navbar-dark, .navbar-standard.navbar-dark.navbar-glass-shadow {
    background: var(--px-nav-bg) var(--px-nav-tile) !important;
    image-rendering: pixelated;
    border-bottom: var(--px-u) solid var(--px-ol);
}
.navbar-standard .nav-link { font-family: var(--px-title); font-size: 0.58rem; text-shadow: 2px 2px 0 var(--px-ol); }
.navbar-standard .navbar-toggler { background: var(--px-ol); border-radius: 0; }
.navbar-standard .dropdown-menu { border-radius: 0; box-shadow: var(--px-frame), 6px 8px 0 rgba(0, 0, 0, 0.3); background-color: var(--bs-body-bg); }
.navbar-standard .dropdown-item { color: var(--bs-body-color); font-weight: 600; }
.navbar-standard .dropdown-item:hover, .navbar-standard .dropdown-item:focus { background-color: var(--px-sel); color: var(--px-sel-fg); }
@media (max-width: 991.98px) { .navbar-standard .navbar-collapse { background-color: var(--px-side-bg); } }
@media (min-width: 992px) { .navbar-standard .navbar-collapse { overflow: visible; } }

.landing-page-header, .landing-hero, .landing-cta, .landing-stats {
    background: #2a68d8;
    background-image: linear-gradient(#1c50b8 0 30%, #2a68d8 30% 60%, #3c80e8 60%);
    border-bottom: 6px solid var(--px-ol);
    border-top: 6px solid var(--px-ol);
    image-rendering: pixelated;
}
[data-bs-theme="dark"] .landing-page-header, [data-bs-theme="dark"] .landing-hero, [data-bs-theme="dark"] .landing-cta, [data-bs-theme="dark"] .landing-stats { background: #1b1628; }
.landing-page-header-info { background: #008c8a; background-image: linear-gradient(#006d6b 0 30%, #008c8a 30% 60%, #00aba9 60%); }
.landing-page-header-success { background: #2a9a34; background-image: linear-gradient(#1a7824 0 30%, #2a9a34 30% 60%, #3cb448 60%); }
.landing-page-header-secondary { background: #2a2230; background-image: none; }
.landing-page-header-warning { background: #d88000; background-image: linear-gradient(#b86c00 0 30%, #d88000 30% 60%, #f09800 60%); }
.landing-page-header-danger { background: #c8281c; background-image: linear-gradient(#a81c12 0 30%, #c8281c 30% 60%, #e03c2c 60%); }
.landing-page-header-purple { background: #6a2ca8; background-image: linear-gradient(#54208c 0 30%, #6a2ca8 30% 60%, #8040c4 60%); }
.landing-page-header h1, .landing-hero h1, .landing-cta h2, .landing-stats .stat-number { color: #fff; font-family: var(--px-title); text-shadow: 3px 3px 0 var(--px-ol); }
.landing-page-header h1 { font-size: 1.5rem; line-height: 1.5; }
.landing-cta h2 { font-size: 1.1rem; line-height: 1.5; }
.landing-stats .stat-number { font-size: 1.4rem; }
.landing-section-title { font-family: var(--px-title); font-size: 1.1rem; line-height: 1.5; color: var(--bs-emphasis-color); }
.landing-section-subtitle { color: var(--bs-body-color); }
.landing-section-gray { background-color: var(--bs-body-bg); }
.landing-portfolio-card, .landing-service-card, .landing-product-card, .landing-feature-card, .landing-trust-card, .landing-news-card, .landing-contact-card, .landing-vision-card, .portfolio-product-card, .portfolio-gallery-item {
    border-radius: 0;
    border: 0;
    background: var(--bs-body-bg);
    box-shadow: var(--bs-box-shadow-sm);
    transition: none;
}
.landing-portfolio-card:hover, .landing-service-card:hover, .landing-product-card:hover, .portfolio-product-card:hover { transform: translateY(-3px); box-shadow: var(--bs-box-shadow); }
.landing-portfolio-card .portfolio-overlay h5, .landing-portfolio-card.portfolio-primary .portfolio-overlay h5 { color: var(--bs-emphasis-color); }
.landing-feature-card .feature-icon, .landing-trust-card .trust-icon, .landing-vision-card .vision-icon { border-radius: 0; background: var(--px-sel); color: var(--px-sel-fg); box-shadow: var(--px-frame); }
.landing-portfolio-card .portfolio-image { background: var(--bs-tertiary-bg) !important; }
.landing-category-tabs .tab-btn { border-radius: 0; border: 0; font-family: var(--px-title); font-size: 0.56rem; color: var(--bs-body-color); background: var(--bs-body-bg); box-shadow: var(--px-frame); }
.landing-category-tabs .tab-btn:hover, .landing-category-tabs .tab-btn.active { background: var(--px-sel); color: var(--px-sel-fg); }
.chat-message { border-radius: 0 !important; box-shadow: 0 -2px 0 var(--px-ol), 0 2px 0 var(--px-ol), -2px 0 0 var(--px-ol), 2px 0 0 var(--px-ol); }

@media (prefers-reduced-motion: reduce) {
    .btn:hover, .btn:active, .landing-portfolio-card:hover, .landing-service-card:hover, .landing-product-card:hover, .portfolio-product-card:hover { transform: none; }
    .spinner-border, .spinner-grow { animation-duration: 2s; }
}

/* Home hero sits on the sky itself */
#banner { background: transparent !important; }
@media (min-width: 768px) {
    :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6).fs-md-5 { font-size: 1.25rem !important; }
}
@media (max-width: 767.98px) {
    #banner .brand-vertical .brand-campa { font-size: 2.2rem; }
    #banner .brand-vertical .brand-technologies { font-size: 0.86rem; }
}
@media (max-width: 575.98px) {
    .btn-group:has(.btn-copy-email) { flex-wrap: wrap; max-width: 100%; }
    .btn-group:has(.btn-copy-email) > span.btn { flex: 1 1 100%; white-space: normal; overflow-wrap: anywhere; }
}
.navbar-toggler-humburger-icon { background: transparent !important; }

/* Any colour utility on a modal header still gets the message-box look */
.modal .modal-header { background: var(--px-msg-bg) !important; color: var(--px-msg-fg); }
.modal .modal-header .text-primary { color: #ffd860 !important; }

/* Our gold C block next to the brand on the bars */
.navbar-brand .brand-inline::before { content: ""; align-self: center; width: 24px; height: 24px; margin-right: 0.3em; background: url("../img/pixel/block.svg") center / contain no-repeat; image-rendering: pixelated; }

/* Text on the colored parts: dark on the bright dark-mode colors, readable on the footer and headers */
[data-bs-theme="dark"] .badge.bg-success, [data-bs-theme="dark"] .badge.bg-primary, [data-bs-theme="dark"] .badge.bg-warning,
[data-bs-theme="dark"] .badge.text-dark,
[data-bs-theme="dark"] .badge-subtle-success, [data-bs-theme="dark"] .badge-subtle-primary { color: #20140a !important; }
.avatar .avatar-name[class*="-subtle"], .avatar .avatar-name[class*="bg-200"] { color: var(--bs-emphasis-color); }
.avatar .avatar-name.bg-soft-primary { background-color: var(--px-sel) !important; color: var(--px-sel-fg) !important; }
[data-bs-theme="light"] section.bg-dark .text-600, [data-bs-theme="light"] section.bg-dark .text-500 { color: #d8d0bc !important; }
.card-header.text-white { color: var(--px-head-fg) !important; }
.avatar .avatar-name[class*="-subtle"] span { color: #20140a !important; }
[data-bs-theme="dark"] .avatar .avatar-name[class*="-subtle"] span { color: #fff !important; }
[data-bs-theme="dark"] .badge.bg-light.text-dark { color: var(--bs-emphasis-color) !important; }
.card > .card-header:is(.text-dark, .text-white, .text-body) { color: var(--px-head-fg) !important; }
[data-bs-theme="dark"] .btn-outline-warning { --px-f: var(--bs-warning); }
[data-bs-theme="dark"] .btn-outline-danger { --px-f: #ff8a6a; }