/* XRM Documentation — Bootstrap 5 customizations and overrides
   Bootstrap 5 core (reboot, grid, components) is loaded via CDN.
   This file contains ONLY this site's overrides and additions. */

/* ===== Base ===== */

body {
    font-family: 'Open Sans', Arial, sans-serif;
    color: #494d55;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.page-wrapper {
    flex: 1 0 auto;
}

.footer {
    flex-shrink: 0;
}

code {
    background: #222;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    padding: 2px 8px;
    padding-top: 4px;
    display: inline-block;
}

/* ===== Color schemes ===== */
/* Each body-X class retints Bootstrap's CSS variables and this site's
   own header/branding/card/doc-nav accents for that color theme. */

body.body-blue {
    --bs-primary: #0078d4;
    --bs-primary-rgb: 0, 120, 212;
    --bs-link-color: #0078d4;
    --bs-link-color-rgb: 0, 120, 212;
    --bs-link-hover-color: #005a9e;
    --bs-link-hover-color-rgb: 0, 90, 158;
}

body.body-green {
    --bs-primary: #107c10;
    --bs-primary-rgb: 16, 124, 16;
    --bs-link-color: #107c10;
    --bs-link-color-rgb: 16, 124, 16;
    --bs-link-hover-color: #0d630d;
    --bs-link-hover-color-rgb: 13, 99, 13;
}

body.body-purple {
    --bs-primary: #5b2c6a;
    --bs-primary-rgb: 91, 44, 106;
    --bs-link-color: #5b2c6a;
    --bs-link-color-rgb: 91, 44, 106;
    --bs-link-hover-color: #482355;
    --bs-link-hover-color-rgb: 72, 35, 85;
}

body.body-pink {
    --bs-primary: #883e93;
    --bs-primary-rgb: 136, 62, 147;
    --bs-link-color: #883e93;
    --bs-link-color-rgb: 136, 62, 147;
    --bs-link-hover-color: #6d3275;
    --bs-link-hover-color-rgb: 109, 50, 117;
}

/* ===== Header / branding (shared by index.html and docs/*.html) ===== */

.header {
    background: #494d55;
    color: rgba(255, 255, 255, 0.85);
    border-top: 5px solid #40babd;
    padding: 30px 0;
}

.header a {
    color: #fff;
}

.header .breadcrumb {
    background: none;
    margin-bottom: 0;
    padding: 0;
}

.header .breadcrumb-item,
.header .breadcrumb-item.active {
    color: rgba(255, 255, 255, 0.5);
}

.header .breadcrumb-item a {
    color: rgba(255, 255, 255, 0.5);
}

.header .breadcrumb-item a:hover {
    color: #fff;
}

.branding {
    text-transform: uppercase;
}

.branding .logo {
    font-size: 28px;
    margin-top: 0;
    margin-bottom: 0;
}

.branding .logo a {
    text-decoration: none;
}

.branding .text-bold {
    font-weight: 800;
    color: #fff;
}

.branding .icon {
    font-size: 24px;
    color: #40babd;
}

.branding .text-highlight {
    color: #40babd;
}

.body-green .header {
    border-color: #75c181;
}

.body-green .branding .text-highlight,
.body-green .branding .icon {
    color: #75c181;
}

.body-blue .header {
    border-color: #58bbee;
}

.body-blue .branding .text-highlight,
.body-blue .branding .icon {
    color: #58bbee;
}

.body-orange .header {
    border-color: #F88C30;
}

.body-orange .branding .text-highlight,
.body-orange .branding .icon {
    color: #F88C30;
}

.body-red .header {
    border-color: #f77b6b;
}

.body-red .branding .text-highlight,
.body-red .branding .icon {
    color: #f77b6b;
}

.body-pink .header {
    border-color: #EA5395;
}

.body-pink .branding .text-highlight,
.body-pink .branding .icon {
    color: #EA5395;
}

.body-purple .header {
    border-color: #8A40A7;
}

.body-purple .branding .text-highlight,
.body-purple .branding .icon {
    color: #8A40A7;
}

/* ===== Landing page (index.html) ===== */

.landing-page .header {
    padding: 60px 0;
}

.landing-page .branding {
    margin-bottom: 20px;
}

.landing-page .branding .logo {
    font-size: 38px;
}

.landing-page .branding .icon {
    font-size: 32px;
}

.landing-page .tagline {
    font-weight: 600;
    font-size: 20px;
}

.landing-page .tagline p {
    margin-bottom: 5px;
}

.landing-page .tagline .text-highlight {
    color: #266f71;
}

.landing-page .fa-heart {
    color: #EA5395;
}

.cards-section {
    padding: 60px 0;
    background: #f9f9fb;
}

.cards-section .title {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 24px;
    font-weight: 600;
}

.cards-section .intro {
    margin: 0 auto;
    max-width: 800px;
    margin-bottom: 60px;
    color: #616670;
}

.cards-section .cards-wrapper {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

.cards-section .item {
    margin-bottom: 30px;
}

.cards-section .item .icon-holder {
    margin-bottom: 15px;
}

.cards-section .item .icon {
    font-size: 36px;
}

.cards-section .item .title {
    font-size: 16px;
    font-weight: 600;
}

.cards-section .item .intro {
    margin-bottom: 15px;
}

.cards-section .item-inner {
    padding: 45px 30px;
    background: #fff;
    position: relative;
    border: 1px solid #f0f0f0;
    border-radius: 4px;
}

.cards-section .item-inner .link {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

.cards-section .item-inner:hover {
    background: #f5f5f5;
}

/* Card type variants */
.cards-section .item-primary .item-inner {
    border-top: 3px solid #40babd;
}

.cards-section .item-primary .item-inner:hover .title {
    color: #2d8284;
}

.cards-section .item-primary .icon {
    color: #40babd;
}

.cards-section .item-green .item-inner {
    border-top: 3px solid #75c181;
}

.cards-section .item-green .item-inner:hover .title {
    color: #48a156;
}

.cards-section .item-green .icon {
    color: #75c181;
}

.cards-section .item-blue .item-inner {
    border-top: 3px solid #58bbee;
}

.cards-section .item-blue .item-inner:hover .title {
    color: #179de2;
}

.cards-section .item-blue .icon {
    color: #58bbee;
}

.cards-section .item-orange .item-inner {
    border-top: 3px solid #F88C30;
}

.cards-section .item-orange .item-inner:hover .title {
    color: #d46607;
}

.cards-section .item-orange .icon {
    color: #F88C30;
}

.cards-section .item-red .item-inner {
    border-top: 3px solid #f77b6b;
}

.cards-section .item-red .item-inner:hover .title {
    color: #f33a22;
}

.cards-section .item-red .icon {
    color: #f77b6b;
}

.cards-section .item-pink .item-inner {
    border-top: 3px solid #EA5395;
}

.cards-section .item-pink .item-inner:hover .title {
    color: #d61a6c;
}

.cards-section .item-pink .icon {
    color: #EA5395;
}

.cards-section .item-purple .item-inner {
    border-top: 3px solid #8A40A7;
}

.cards-section .item-purple .item-inner:hover .title {
    color: #5c2b70;
}

.cards-section .item-purple .icon {
    color: #8A40A7;
}

.body-green .cards-section .item-primary .item-inner {
    border-top-color: #75c181;
}

.body-green .cards-section .item-primary .icon,
.body-green .cards-section .item-inner:hover .title {
    color: #75c181;
}

.body-blue .cards-section .item-primary .item-inner {
    border-top-color: #58bbee;
}

.body-blue .cards-section .item-primary .icon,
.body-blue .cards-section .item-inner:hover .title {
    color: #58bbee;
}

.body-orange .cards-section .item-primary .item-inner {
    border-top-color: #F88C30;
}

.body-orange .cards-section .item-primary .icon,
.body-orange .cards-section .item-inner:hover .title {
    color: #F88C30;
}

.body-red .cards-section .item-primary .item-inner {
    border-top-color: #f77b6b;
}

.body-red .cards-section .item-primary .icon,
.body-red .cards-section .item-inner:hover .title {
    color: #f77b6b;
}

.body-pink .cards-section .item-primary .item-inner {
    border-top-color: #EA5395;
}

.body-pink .cards-section .item-primary .icon,
.body-pink .cards-section .item-inner:hover .title {
    color: #EA5395;
}

.body-purple .cards-section .item-primary .item-inner {
    border-top-color: #8A40A7;
}

.body-purple .cards-section .item-primary .icon,
.body-purple .cards-section .item-inner:hover .title {
    color: #8A40A7;
}

/* ===== Documentation pages (docs/*.html) ===== */
/* Sidebar + content sit side by side via flexbox (order swaps them visually
   without reordering the DOM) with a sticky sidebar — replaces Bootstrap 3's
   Affix plugin, which Bootstrap 5 removed, with plain CSS. */

.doc-wrapper {
    padding: 45px 0;
    background: #f9f9fb;
}

.doc-body {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.doc-content {
    flex: 1 1 0;
    min-width: 0;
    order: 2;
}

.doc-sidebar {
    flex: 0 0 200px;
    order: 1;
    align-self: flex-start;
    position: sticky;
    top: 15px;
}

.doc-section {
    padding-top: 15px;
    padding-bottom: 15px;
}

.doc-section .section-title {
    font-size: 26px;
    margin-top: 0;
    margin-bottom: 0;
    font-weight: bold;
    padding-bottom: 10px;
    border-bottom: 4px solid #494d55;
}

.doc-section h1 {
    font-size: 24px;
    font-weight: bold;
}

.doc-section h2 {
    font-size: 22px;
    font-weight: bold;
}

.doc-section h3 {
    font-size: 20px;
    font-weight: bold;
    padding-bottom: 5px;
    border-bottom: 1px solid #494d55;
}

.doc-section h4 {
    font-size: 18px;
    font-weight: bold;
}

.doc-section h5 {
    font-size: 16px;
    font-weight: bold;
}

.doc-section h6 {
    font-size: 14px;
    font-weight: bold;
}

.section-block {
    padding-top: 15px;
    padding-bottom: 15px;
}

.section-block .block-title,
.section-block .block-subtitle {
    margin-top: 0;
}

.section-block .list>li {
    margin-bottom: 10px;
}

/* Bootstrap's .nav sets display:flex, which would lay these <li>s out in a
   row and wrap them — force them back to a stacked, block list. */
.doc-menu,
.doc-sub-menu {
    display: block;
    list-style: none;
    padding-left: 0;
}

.doc-menu>li {
    display: block;
    margin-bottom: 5px;
}

.doc-menu>li>a {
    display: block;
    padding: 5px 15px;
    border-left: 4px solid transparent;
    color: #616670;
    text-decoration: none;
}

.doc-menu>li>a:hover,
.doc-menu>li>a:focus {
    color: #40babd;
    text-decoration: none;
    background: none;
}

.doc-menu>li.active>a,
.doc-menu>li>a.active {
    background: none;
    border-left: 4px solid #40babd;
    color: #40babd;
    font-weight: 600;
}

.doc-sub-menu>li {
    display: block;
    margin-bottom: 10px;
    font-size: 12px;
}

.doc-sub-menu>li:first-child {
    padding-top: 5px;
}

.doc-sub-menu>li>a {
    display: block;
    color: #616670;
    padding: 0;
    padding-left: 34px;
    background: none;
    text-decoration: none;
}

.doc-sub-menu>li>a:hover {
    color: #40babd;
    text-decoration: none;
    background: none;
}

.doc-sub-menu>li.active>a,
.doc-sub-menu>li>a.active {
    background: none;
    color: #40babd;
}

.body-green .doc-menu>li>a:hover,
.body-green .doc-menu>li>a:focus,
.body-green .doc-menu>li.active>a,
.body-green .doc-menu>li>a.active,
.body-green .doc-sub-menu>li>a:hover,
.body-green .doc-sub-menu>li.active>a,
.body-green .doc-sub-menu>li>a.active {
    color: #75c181;
    border-color: #75c181;
}

.body-blue .doc-menu>li>a:hover,
.body-blue .doc-menu>li>a:focus,
.body-blue .doc-menu>li.active>a,
.body-blue .doc-menu>li>a.active,
.body-blue .doc-sub-menu>li>a:hover,
.body-blue .doc-sub-menu>li.active>a,
.body-blue .doc-sub-menu>li>a.active {
    color: #58bbee;
    border-color: #58bbee;
}

.body-orange .doc-menu>li>a:hover,
.body-orange .doc-menu>li>a:focus,
.body-orange .doc-menu>li.active>a,
.body-orange .doc-menu>li>a.active,
.body-orange .doc-sub-menu>li>a:hover,
.body-orange .doc-sub-menu>li.active>a,
.body-orange .doc-sub-menu>li>a.active {
    color: #F88C30;
    border-color: #F88C30;
}

.body-red .doc-menu>li>a:hover,
.body-red .doc-menu>li>a:focus,
.body-red .doc-menu>li.active>a,
.body-red .doc-menu>li>a.active,
.body-red .doc-sub-menu>li>a:hover,
.body-red .doc-sub-menu>li.active>a,
.body-red .doc-sub-menu>li>a.active {
    color: #f77b6b;
    border-color: #f77b6b;
}

.body-pink .doc-menu>li>a:hover,
.body-pink .doc-menu>li>a:focus,
.body-pink .doc-menu>li.active>a,
.body-pink .doc-menu>li>a.active,
.body-pink .doc-sub-menu>li>a:hover,
.body-pink .doc-sub-menu>li.active>a,
.body-pink .doc-sub-menu>li>a.active {
    color: #EA5395;
    border-color: #EA5395;
}

.body-purple .doc-menu>li>a:hover,
.body-purple .doc-menu>li>a:focus,
.body-purple .doc-menu>li.active>a,
.body-purple .doc-menu>li>a.active,
.body-purple .doc-sub-menu>li>a:hover,
.body-purple .doc-sub-menu>li.active>a,
.body-purple .doc-sub-menu>li>a.active {
    color: #8A40A7;
    border-color: #8A40A7;
}

.doc-content pre {
    background-color: #f6f8fa;
    border: 1px solid #e9ecef;
    border-radius: 0.5rem;
    padding: 1rem;
    overflow-x: auto;
}

.doc-content pre code {
    background-color: transparent;
    padding: 0;
    color: inherit;
    font-weight: normal;
    display: inline;
}

@media (max-width: 767.98px) {
    .doc-body {
        flex-direction: column;
    }

    .doc-sidebar {
        flex-basis: auto;
        position: static;
    }
}

/* ===== Footer ===== */

.footer {
    background: #363a41;
    padding: 30px 0;
    margin-top: 90px;
    color: rgba(255, 255, 255, 0.5);
}

.footer a {
    color: #fff;
}

.footer .copyright {
    font-size: 13px;
}

/* ===== Responsive adjustments ===== */
@media (max-width: 767px) {
    .cards-section .item-inner {
        padding: 30px 15px;
    }

    .landing-page .header {
        padding: 30px 0;
    }

    .landing-page .branding .logo {
        font-size: 28px;
    }
}