/*
 * Clouds and Light - Scoped CSS Stylesheet
 *
 * All selectors are scoped under .clouds-and-light to avoid
 * namespace clashes when content is embedded in third-party portals.
 *
 * The .clouds-and-light class is applied to the outermost docs-wrapper
 * div generated by the markup-converter.
 *
 * Usage:
 *   Include this stylesheet in the hosting environment.
 *   All markup-converter output is automatically scoped.
 */


/* ==========================================================================
   1. BASE ELEMENT STYLES
   Reset/override portal defaults for standard HTML elements
   ========================================================================== */

/* Headings */
.clouds-and-light h1 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--bs-heading-color);
    font-size: calc(1.375rem + 1.5vw);
    font-family: "Poppins", sans-serif;
    color: #252930;
    font-weight: 600;
}
@media (min-width: 1200px) {
    .clouds-and-light h1 {
        font-size: 2.5rem;
    }
}
.clouds-and-light h2 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--bs-heading-color);
    font-size: calc(1.325rem + 0.9vw);
    font-family: "Poppins", sans-serif;
    color: #252930;
    font-weight: 600;
}
@media (min-width: 1200px) {
    .clouds-and-light h2 {
        font-size: 2rem;
    }
}
.clouds-and-light h3 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--bs-heading-color);
    font-size: calc(1.3rem + 0.6vw);
    font-family: "Poppins", sans-serif;
    color: #252930;
    font-weight: 600;
}
@media (min-width: 1200px) {
    .clouds-and-light h3 {
        font-size: 1.75rem;
    }
}
.clouds-and-light h4 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--bs-heading-color);
    font-size: calc(1.275rem + 0.3vw);
    font-family: "Poppins", sans-serif;
    color: #252930;
    font-weight: 600;
}
@media (min-width: 1200px) {
    .clouds-and-light h4 {
        font-size: 1.5rem;
    }
}
.clouds-and-light h5 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--bs-heading-color);
    font-size: 1.25rem;
    font-family: "Poppins", sans-serif;
    color: #252930;
    font-weight: 600;
}
.clouds-and-light h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--bs-heading-color);
    font-size: 1rem;
    font-family: "Poppins", sans-serif;
    color: #252930;
    font-weight: 600;
}

/* Text */
.clouds-and-light p {
    margin-top: 0;
    margin-bottom: 1rem;
}
.clouds-and-light a {
    color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
    text-decoration: underline;
    color: #4550e6;
}
.clouds-and-light a:hover {
    --bs-link-color-rgb: var(--bs-link-hover-color-rgb);
    color: #2f3be3;
}
.clouds-and-light a:visited {}

/* Inline formatting */
.clouds-and-light strong {
    font-weight: bolder;
}
.clouds-and-light b {
    font-weight: bolder;
}
.clouds-and-light em {
    /* Inherited from .docs-article: color: #5d6778 */
}
.clouds-and-light i {
    /* Inherited from .docs-article: color: #5d6778 */
}
.clouds-and-light u {
    /* Inherited from .docs-article: color: #5d6778 */
}
.clouds-and-light mark {
    padding: 0.1875em;
    color: var(--bs-highlight-color);
    background-color: var(--bs-highlight-bg);
}
.clouds-and-light code {
    font-family: var(--bs-font-monospace);
    font-size: 1em;
    font-size: 0.875em;
    color: var(--bs-code-color);
    word-wrap: break-word;
    background: #f5f6fe;
    color: #252930;
    padding: 0.25rem 0.375rem;
    border-radius: 0.25rem;
}
.clouds-and-light pre {
    font-family: var(--bs-font-monospace);
    font-size: 1em;
    display: block;
    margin-top: 0;
    margin-bottom: 1rem;
    overflow: auto;
    font-size: 0.875em;
}
.clouds-and-light blockquote {
    margin: 0 0 1rem;
}

/* Lists */
.clouds-and-light ul {
    padding-left: 2rem;
    margin-top: 0;
    margin-bottom: 1rem;
}
.clouds-and-light ol {
    padding-left: 2rem;
    margin-top: 0;
    margin-bottom: 1rem;
}
.clouds-and-light li {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* Tables */
.clouds-and-light table {
    caption-side: bottom;
    border-collapse: collapse;
}
.clouds-and-light thead {
    border-color: inherit;
    border-style: solid;
    border-width: 0;
}
.clouds-and-light tbody {
    border-color: inherit;
    border-style: solid;
    border-width: 0;
}
.clouds-and-light tr {
    border-color: inherit;
    border-style: solid;
    border-width: 0;
}
.clouds-and-light th {
    text-align: inherit;
    text-align: -webkit-match-parent;
    border-color: inherit;
    border-style: solid;
    border-width: 0;
}
.clouds-and-light td {
    border-color: inherit;
    border-style: solid;
    border-width: 0;
}
.clouds-and-light .table-striped {}

/* Images */
.clouds-and-light img {
    vertical-align: middle;
}
.clouds-and-light .img-fluid {
    max-width: 100%;
    height: auto;
}
.clouds-and-light figure {
    margin: 0 0 1rem;
}
.clouds-and-light figcaption {
    /* Inherited from .docs-article: color: #5d6778 */
}

/* Forms */
.clouds-and-light form {
    /* Inherited from .docs-article: color: #5d6778 */
}
.clouds-and-light input {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
.clouds-and-light button {
    border-radius: 0;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    text-transform: none;
    -webkit-appearance: button;
}
.clouds-and-light label {
    display: inline-block;
}
.clouds-and-light span {
    /* Inherited from .docs-article: color: #5d6778 */
}


/* ==========================================================================
   2. PAGE LAYOUT
   Outermost structural containers
   ========================================================================== */

.clouds-and-light.docs-wrapper {
    position: relative;
}

.clouds-and-light .container {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-right: auto;
    margin-left: auto;
}
@media (min-width: 576px) {
    .clouds-and-light .container {
        max-width: 540px;
    }
}
@media (min-width: 768px) {
    .clouds-and-light .container {
        max-width: 720px;
    }
}
@media (min-width: 992px) {
    .clouds-and-light .container {
        max-width: 960px;
    }
}
@media (min-width: 1200px) {
    .clouds-and-light .container {
        max-width: 1140px;
    }
}
@media (min-width: 1400px) {
    .clouds-and-light .container {
        max-width: 1320px;
    }
}
@media (min-width: 320px) {
    .clouds-and-light .container {
        min-width: 320px;
    }
}
.clouds-and-light .page-content {}
.clouds-and-light .page-header {}
.clouds-and-light .single-col-max {
    max-width: 800px;
}


/* ==========================================================================
   3. NAVIGATION SIDEBAR
   Left-hand navigation menu
   ========================================================================== */

.clouds-and-light .docs-nav {
    overflow-y: auto;
    padding: 1rem;
}
.clouds-and-light .docs-nav .nav {}
.clouds-and-light .docs-nav .nav-item {
    margin-left: 2.5rem;
}
.clouds-and-light .docs-nav .nav-item.section-title {
    margin-left: 0;
}
.clouds-and-light .docs-nav .nav-link {
    display: inline-block;
    position: relative;
    padding: 0.5rem 1rem;
    color: #5d6778;
}
.clouds-and-light .docs-nav .nav-link.scrollto {}
.clouds-and-light .docs-nav .nav-link.active {
    color: #4550e6;
}

/* Search box in sidebar */
.clouds-and-light .top-search-box {}
.clouds-and-light .search-form {
    position: relative;
    width: 100%;
}
.clouds-and-light .search-input {}
.clouds-and-light .search-btn {}


/* ==========================================================================
   4. ARTICLE & SECTION STRUCTURE
   Main content area structure
   ========================================================================== */

.clouds-and-light .docs-article {
    padding: 2rem;
    color: #5d6778;
    scroll-margin-top: 69px;
    scroll-snap-margin-top: 69px;
}
.clouds-and-light .docs-header {}
.clouds-and-light .docs-intro {}
.clouds-and-light .docs-section {
    padding: 2rem 0;
    /* border-bottom: 1px solid #e7e9ed; */
    scroll-margin-top: 69px;
    scroll-snap-margin-top: 69px;
}
.clouds-and-light .docs-overview {}

/* Heading styles within articles */
.clouds-and-light .docs-heading {
    font-size: 3rem;
    margin-bottom: 2rem;
    position: relative;
}
@media (max-width: 767.98px) {
    .clouds-and-light .docs-heading {
        font-size: 2.25rem;
    }
}
.clouds-and-light .page-heading {
    font-size: 2.5rem;
}
.clouds-and-light .section-heading {
    font-size: 1.875rem;
    margin-bottom: 1rem;
    color: #252930;
}
@media (max-width: 767.98px) {
    .clouds-and-light .section-heading {
        font-size: 1.5rem;
    }
}

/* Theme icon holders (section heading icons) */
.clouds-and-light .theme-icon-holder {
    display: inline-block;
    background: #f5f6fe;
    color: #4550e6;
    width: 32px;
    height: 32px;
    padding-top: 4px;
    font-size: 1rem;
    text-align: center;
    border-radius: 50%;
}


/* ==========================================================================
   5. BANNER
   Full-width banner area
   ========================================================================== */

.clouds-and-light .theme-bg-dark {
    background: #4550e6;
}
.clouds-and-light .theme-bg-shapes-right {
    position: absolute;
    height: 100%;
    width: 100%;
    right: 0;
    top: 0;
    overflow: hidden;
}
.clouds-and-light .theme-bg-shapes-left {
    position: absolute;
    height: 100%;
    width: 100%;
    right: 0;
    top: 0;
    overflow: hidden;
}
.clouds-and-light .page-intro {
    font-size: 1.125rem;
}


/* ==========================================================================
   6. CODE BLOCKS
   Code display with copy/expand/overlay functionality
   ========================================================================== */

.clouds-and-light .docs-code-block {
    padding-top: 1rem;
    padding-bottom: 1rem;
    position: relative;
    margin: 20px 0;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background-color: #f8f9fa;
    overflow: hidden;
}
@media (max-width: 768px) {
    .clouds-and-light .docs-code-block {
        margin: 15px 0;
    }
}
.clouds-and-light .docs-code-block pre {
    margin: 0;
    padding: 15px;
    background-color: #f8f9fa;
    border: none;
    border-radius: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: #6c757d #f8f9fa;
}
@media (max-width: 768px) {
    .clouds-and-light .docs-code-block pre {
        padding: 12px;
        font-size: 13px;
    }
}
.clouds-and-light .docs-code-block code {}
.clouds-and-light .docs-code-block .shadow-lg {}
.clouds-and-light .docs-code-block .rounded {}

/* Expandable code blocks */
.clouds-and-light .docs-code-block-expandable {
    position: relative;
}
.clouds-and-light .docs-code-block-expandable .code-hidden {}
.clouds-and-light .docs-code-block-expandable .code-truncated-indicator {}

/* Overlay code blocks */
.clouds-and-light .docs-code-block-overlay {
    position: relative;
}

/* Code block header and footer */
.clouds-and-light .code-block-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 8px 12px;
    background-color: #e9ecef;
    border-bottom: 1px solid #dee2e6;
    min-height: 40px;
}
@media (max-width: 768px) {
    .clouds-and-light .code-block-header {
        padding: 6px 10px;
    }
}
.clouds-and-light .code-block-footer {
    display: flex;
    justify-content: center;
    padding: 8px 12px;
    background-color: #e9ecef;
    border-top: 1px solid #dee2e6;
    border-radius: 0 0 8px 8px;
}

/* Code action buttons */
.clouds-and-light .copy-code-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background-color: #6c757d;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 80px;
    justify-content: center;
}
@media (max-width: 768px) {
    .clouds-and-light .copy-code-btn {
        padding: 4px 8px;
        font-size: 11px;
        min-width: 70px;
    }
}
.clouds-and-light .copy-text {
    font-size: 12px;
}
.clouds-and-light .expand-code-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background-color: #6c757d;
    border: none;
    border-radius: 4px;
    color: white;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}
.clouds-and-light .expand-text {}
.clouds-and-light .overlay-code-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background-color: #6c757d;
    border: none;
    border-radius: 4px;
    color: white;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}
.clouds-and-light .overlay-text {}
.clouds-and-light .copy-inline-btn {
    display: inline-block;
    margin-left: 4px;
    padding: 0;
    background: none;
    color: #2c5aa0;
    border: none;
    cursor: pointer;
    font-size: 12px;
    vertical-align: baseline;
    transition: color 0.2s ease, transform 0.2s ease;
}


/* ==========================================================================
   7. CALLOUT BLOCKS
   Info, warning, success, danger, tip, note callouts
   ========================================================================== */

.clouds-and-light .callout-block {
    padding: 1.5rem;
    border-left: 5px solid #5d6778;
    border-right: 1px solid;
    border-top: 1px solid;
    border-bottom: 1px solid;
    background: #f5f5f5;
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.clouds-and-light .callout-block .callout-title {
    font-size: 1rem;
}
.clouds-and-light .callout-block .callout-icon-holder {}
.clouds-and-light .callout-block .content {}

/* Callout variants */
.clouds-and-light .callout-block-info {
    border-color: #5b99ea;
    background: #f9fbfe;
}
.clouds-and-light .callout-block-warning {
    border-color: #eebf41;
    background: #fdf6e5;
}
.clouds-and-light .callout-block-success {
    border-color: #5cb377;
    background: #e7f4eb;
}
.clouds-and-light .callout-block-danger {
    border-color: #d26d69;
    background: #fbf3f2;
}
.clouds-and-light .callout-block-tip {}
.clouds-and-light .callout-block-note {}


/* ==========================================================================
   8. ACCORDION
   Collapsible content sections
   ========================================================================== */

.clouds-and-light .accordion {
    --bs-accordion-color: var(--bs-body-color);
    --bs-accordion-bg: var(--bs-body-bg);
    --bs-accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
        border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
    --bs-accordion-border-color: var(--bs-border-color);
    --bs-accordion-border-width: var(--bs-border-width);
    --bs-accordion-border-radius: var(--bs-border-radius);
    --bs-accordion-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)));
    --bs-accordion-btn-padding-x: 1.25rem;
    --bs-accordion-btn-padding-y: 1rem;
    --bs-accordion-btn-color: var(--bs-body-color);
    --bs-accordion-btn-bg: var(--bs-accordion-bg);
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23252930' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
    --bs-accordion-btn-icon-width: 1.25rem;
    --bs-accordion-btn-icon-transform: rotate(-180deg);
    --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231c205c' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(69, 80, 230, 0.25);
    --bs-accordion-body-padding-x: 1.25rem;
    --bs-accordion-body-padding-y: 1rem;
    --bs-accordion-active-color: var(--bs-primary-text-emphasis);
    --bs-accordion-active-bg: var(--bs-primary-bg-subtle);
}
.clouds-and-light .accordion-item {
    color: var(--bs-accordion-color);
    background-color: var(--bs-accordion-bg);
    border: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
}
.clouds-and-light .accordion-header {
    margin-bottom: 0;
}
.clouds-and-light .accordion-button {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
    font-size: 1rem;
    color: var(--bs-accordion-btn-color);
    text-align: left;
    background-color: var(--bs-accordion-btn-bg);
    border: 0;
    border-radius: 0;
    overflow-anchor: none;
    transition: var(--bs-accordion-transition);
}
@media (prefers-reduced-motion: reduce) {
    .clouds-and-light .accordion-button {
        transition: none;
    }
}
.clouds-and-light .accordion-button.collapsed {}
.clouds-and-light .accordion-collapse {}
.clouds-and-light .accordion-collapse.show {}
.clouds-and-light .accordion-body {
    padding: var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x);
}


/* ==========================================================================
   9. TEST BLOCKS
   Lab exercise test sections
   ========================================================================== */

.clouds-and-light .docs-test-block {
    position: relative;
    margin: 20px 0;
    border: 1px solid #007bff;
    border-radius: 8px;
    background-color: #f8f9ff;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.1);
}
@media (max-width: 768px) {
    .clouds-and-light .docs-test-block {
        margin: 15px 0;
    }
}
.clouds-and-light .test-block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
    border-bottom: 1px solid #0056b3;
    min-height: 50px;
}
@media (max-width: 768px) {
    .clouds-and-light .test-block-header {
        padding: 10px 12px;
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}
.clouds-and-light .test-header-content {
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 15px;
}
@media (max-width: 768px) {
    .clouds-and-light .test-header-content {
        justify-content: center;
    }
}
.clouds-and-light .test-title {
    margin-left: 0;
}
.clouds-and-light .test-block-body {
    padding: 16px;
    background-color: #f8f9ff;
    border: none;
    border-radius: 0;
}
@media (max-width: 768px) {
    .clouds-and-light .test-block-body {
        padding: 12px;
    }
}
.clouds-and-light .test-list {
    margin: 0;
    padding-left: 20px;
    list-style-type: disc;
    color: #495057;
    line-height: 1.6;
}
@media (max-width: 768px) {
    .clouds-and-light .test-list {
        padding-left: 16px;
    }
}
.clouds-and-light .test-lab-button {
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-left: 15px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}
@media (max-width: 768px) {
    .clouds-and-light .test-lab-button {
        margin-left: 0;
        margin-top: 10px;
        width: 100%;
        justify-content: center;
    }
}


/* ==========================================================================
   10. CHECKPOINT BLOCKS
   Progress checkpoint sections
   ========================================================================== */

.clouds-and-light .docs-checkpoint-block {
    border-radius: 0.5rem;
    border: 1px solid #28a745;
    margin-bottom: 1.5rem;
    overflow: hidden;
}
.clouds-and-light .checkpoint-block-header {
    background-color: #28a745;
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.clouds-and-light .checkpoint-header-content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.clouds-and-light .checkpoint-title {
    color: #ffffff;
    font-weight: 600;
    font-size: 1.1rem;
}
.clouds-and-light .checkpoint-status {
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.2rem 0.5rem;
    border-radius: 0.25rem;
}
.clouds-and-light .checkpoint-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.clouds-and-light .checkpoint-block-body {
    padding: 1rem;
    background-color: #ffffff;
}
.clouds-and-light .checkpoint-confirm-bar {
    background-color: #d4edda;
    border-top: 1px solid #c3e6cb;
    border-bottom: 1px solid #c3e6cb;
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1rem -1rem;
}
.clouds-and-light .checkpoint-confirm-btn {
    background-color: #28a745;
    border: none;
    color: #ffffff;
    padding: 0.5rem 1.5rem;
    border-radius: 0.25rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}


/* ==========================================================================
   11. QUESTION BLOCKS
   Knowledge test / quiz sections
   ========================================================================== */

.clouds-and-light .docs-question-block {
    border-radius: 0.5rem;
    border: 1px solid #0d6efd;
    margin-bottom: 1.5rem;
    overflow: hidden;
}
.clouds-and-light .question-block-header {
    background-color: #0d6efd;
    padding: 0.75rem 1rem;
    color: white;
}
.clouds-and-light .question-header-content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.clouds-and-light .question-title {
    color: #ffffff;
    font-weight: 600;
    font-size: 1.1rem;
}
.clouds-and-light .question-block-body {
    padding: 1rem;
    background-color: #ffffff;
}
.clouds-and-light .question-text {
    font-size: 1.05rem;
    margin-bottom: 1rem;
    font-weight: 500;
}
.clouds-and-light .question-answers {
    margin-bottom: 1rem;
}
.clouds-and-light .question-answer-option {
    display: flex;
    align-items: flex-start;
    padding: 0.5rem 0;
    border-bottom: 1px solid #e9ecef;
}
.clouds-and-light .question-submit-bar {
    background-color: #cfe2ff;
    border-top: 1px solid #b6d4fe;
    border-bottom: 1px solid #b6d4fe;
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1rem -1rem;
}
.clouds-and-light .question-submit-btn {
    background-color: #0d6efd;
    border: none;
    color: #ffffff;
    padding: 0.5rem 1.5rem;
    border-radius: 0.25rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}
.clouds-and-light .question-feedback {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 0.25rem;
}
.clouds-and-light .question-feedback-correct {
    background-color: #d1e7dd;
    border: 1px solid #badbcc;
    color: #0f5132;
    padding: 0.75rem 1rem;
    border-radius: 0.25rem;
}
.clouds-and-light .question-feedback-incorrect {
    background-color: #f8d7da;
    border: 1px solid #f5c2c7;
    color: #842029;
    padding: 0.75rem 1rem;
    border-radius: 0.25rem;
}


/* ==========================================================================
   12. CHAPTER NAVIGATION
   Multi-chapter document navigation
   ========================================================================== */

.clouds-and-light .chapter-menu-nav {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    border-radius: 0 0 0 0;
    position: sticky;
    top: 0;
    z-index: 100;
    margin-bottom: 0;
}
@media print {
    .clouds-and-light .chapter-menu-nav {
        display: none !important;
    }
}
.clouds-and-light .chapter-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: #4550e6;
    color: #fff;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
}
@media (max-width: 575.98px) {
    .clouds-and-light .chapter-menu-header {
        padding: 0.625rem 0.75rem;
    }
}
.clouds-and-light .chapter-menu-title {
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.clouds-and-light .chapter-menu-icon {
    transition: transform 0.3s ease;
    font-size: 0.8rem;
}
.clouds-and-light .chapter-menu-quick-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    background-color: #fff;
    border-bottom: 1px solid #e9ecef;
    gap: 0.5rem;
}
@media (max-width: 767.98px) {
    .clouds-and-light .chapter-menu-quick-nav {
        flex-wrap: wrap;
    }
}
@media (max-width: 575.98px) {
    .clouds-and-light .chapter-menu-quick-nav {
        padding: 0.5rem 0.75rem;
    }
}
.clouds-and-light .chapter-menu-prev {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.5rem;
    font-size: 1rem;
    color: #4550e6;
    text-decoration: none;
    border-radius: 0.25rem;
    transition: background-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
    min-width: 40px;
    width: 40px;
}
@media (max-width: 767.98px) {
    .clouds-and-light .chapter-menu-prev {
        flex: 1;
    }
}
.clouds-and-light .chapter-menu-next {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.5rem;
    font-size: 1rem;
    color: #4550e6;
    text-decoration: none;
    border-radius: 0.25rem;
    transition: background-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
    min-width: 40px;
    width: 40px;
}
@media (max-width: 767.98px) {
    .clouds-and-light .chapter-menu-next {
        flex: 1;
    }
}
.clouds-and-light .chapter-menu-current {
    flex: 1;
    text-align: center;
    font-weight: 600;
    font-size: 0.85rem;
    color: #252930;
    padding: 0.25rem 0.5rem;
    background-color: #e7e9fd;
    border-radius: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
@media (max-width: 767.98px) {
    .clouds-and-light .chapter-menu-current {
        order: -1;
        width: 100%;
        max-width: none;
        margin-bottom: 0.5rem;
    }
}
.clouds-and-light .chapter-menu-disabled {
    visibility: hidden;
}
.clouds-and-light .chapter-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #fff;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 0 0 0.375rem 0.375rem;
}
.clouds-and-light .chapter-menu-collapsed {
    max-height: 0;
    box-shadow: none;
}
.clouds-and-light .chapter-menu-item {
    border-bottom: 1px solid #f0f0f0;
}
.clouds-and-light .chapter-menu-item-current {
    background-color: #f5f6fe;
    border-left: 3px solid #4550e6;
}
.clouds-and-light .chapter-menu-item-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #9ca3af;
    margin-bottom: 0.125rem;
}
.clouds-and-light .chapter-menu-item-title {
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ==========================================================================
   13. TEXT HIGHLIGHTING
   Inline highlight styles for select/enter/code/example markers
   ========================================================================== */

/* Warning highlight */
.clouds-and-light .mark.bg-danger {}
/* Success highlight */
.clouds-and-light .mark.bg-success {}
/* Default highlight */
.clouds-and-light .mark.bg-secondary {}
.clouds-and-light .text-white {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
}


/* ==========================================================================
   14. UTILITY CLASSES
   Bootstrap and custom utility classes used in generated output
   ========================================================================== */

.clouds-and-light .mx-auto {
    margin-right: auto !important;
    margin-left: auto !important;
}
.clouds-and-light .py-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}
.clouds-and-light .p-3 {
    padding: 1rem !important;
}
.clouds-and-light .pb-3 {
    padding-bottom: 1rem !important;
}
.clouds-and-light .mt-3 {
    margin-top: 1rem !important;
}
.clouds-and-light .mb-4 {
    margin-bottom: 1.5rem !important;
}
.clouds-and-light .me-1 {
    margin-right: 0.25rem !important;
}
.clouds-and-light .me-2 {
    margin-right: 0.5rem !important;
}
.clouds-and-light .d-lg-none {
}
@media (min-width: 992px) {
    .clouds-and-light .d-lg-none {
        display: none !important;
    }
}
.clouds-and-light .text-center {
    text-align: center !important;
}
.clouds-and-light .position-relative {
    position: relative !important;
}
.clouds-and-light .btn {
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.375rem;
    --bs-btn-font-family:;
    --bs-btn-font-size: 1rem;
    --bs-btn-font-weight: 400;
    --bs-btn-line-height: 1.5;
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: transparent;
    --bs-btn-border-width: var(--bs-border-width);
    --bs-btn-border-color: transparent;
    --bs-btn-border-radius: var(--bs-border-radius);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
    --bs-btn-disabled-opacity: 0.65;
    --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
    display: inline-block;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    font-family: var(--bs-btn-font-family);
    font-size: var(--bs-btn-font-size);
    font-weight: var(--bs-btn-font-weight);
    line-height: var(--bs-btn-line-height);
    color: var(--bs-btn-color);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
    border-radius: var(--bs-btn-border-radius);
    background-color: var(--bs-btn-bg);
    transition:
        color 0.15s ease-in-out,
        background-color 0.15s ease-in-out,
        border-color 0.15s ease-in-out,
        box-shadow 0.15s ease-in-out;
    font-weight: 600;
    padding: 0.6rem 1.25rem;
    border: none;
}
@media (prefers-reduced-motion: reduce) {
    .clouds-and-light .btn {
        transition: none;
    }
}
.clouds-and-light .list-unstyled {
    padding-left: 0;
    list-style: none;
}
.clouds-and-light .flex-column {
    flex-direction: column !important;
}


/* ==========================================================================
   15. SERVICE DISCOVERY TABLES
   Styles for AWS service discovery output tables
   All classes prefixed with "service-discovery-" to avoid namespace conflicts
   ========================================================================== */

/* Container */
.clouds-and-light .service-discovery-container {
    margin: 1.5rem 0;
    font-family: "Poppins", sans-serif;
    border-radius: 0.5rem;
    border: 1px solid #dee2e6;
    background: white;
    overflow: hidden;
}

/* Header bar */
.clouds-and-light .service-discovery-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #4550e6, #3540b8);
    color: #ffffff;
}
.clouds-and-light .service-discovery-header h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
}
.clouds-and-light .service-discovery-count {
    font-size: 0.85rem;
    font-weight: 500;
    background-color: rgba(255, 255, 255, 0.2);
    padding: 0.2rem 0.6rem;
    border-radius: 0.25rem;
}
.clouds-and-light .service-discovery-timestamp {
    font-size: 0.75rem;
    opacity: 0.8;
    margin-left: 1rem;
}

/* Refresh button */
.clouds-and-light .sd-refresh-btn {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 0.2rem 0.6rem;
    border-radius: 0.25rem;
    font-size: 0.8rem;
    cursor: pointer;
    margin-left: 0.75rem;
    transition: background 0.2s;
}
.clouds-and-light .sd-refresh-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}
.clouds-and-light .sd-refresh-btn:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}
.clouds-and-light .sd-refresh-btn.sd-refresh-spinning i {
    animation: service-discovery-spin 1s linear infinite;
}

/* Mock data indicator */
.clouds-and-light .sd-mock-indicator {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    background-color: rgba(255, 193, 7, 0.25);
    color: #fff3cd;
    border: 1px solid rgba(255, 193, 7, 0.4);
    padding: 0.15rem 0.5rem;
    border-radius: 0.25rem;
    margin-right: 0.75rem;
    cursor: help;
}
.clouds-and-light .sd-mock-indicator i {
    margin-right: 0.3rem;
}

/* Provider badges */
.clouds-and-light .service-discovery-provider-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 0.15em 0.5em;
    border-radius: 3px;
    margin-right: 0.5rem;
    vertical-align: middle;
    position: relative;
    top: -1px;
}
.clouds-and-light .sd-provider-aws {
    background-color: #ff9900;
    color: #fff;
}
.clouds-and-light .sd-provider-gcp {
    background-color: #4285f4;
    color: #fff;
}
.clouds-and-light .sd-provider-azure {
    background-color: #0078d4;
    color: #fff;
}
.clouds-and-light .sd-provider-alibaba {
    background-color: #ff6a00;
    color: #fff;
}
.clouds-and-light .sd-provider-oci {
    background-color: #c74634;
    color: #fff;
}

/* Table */
.clouds-and-light .service-discovery-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.clouds-and-light .service-discovery-table thead th {
    background-color: #f0f1f9;
    color: #252930;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.65rem 0.75rem;
    border-bottom: 2px solid #dee2e6;
    border-right: 1px solid #dee2e6;
    text-align: left;
    white-space: nowrap;
}
.clouds-and-light .service-discovery-table thead th:last-child {
    border-right: none;
}
.clouds-and-light .service-discovery-table tbody td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid #e9ecef;
    border-right: 1px solid #f0f0f0;
    color: #495057;
    vertical-align: top;
    overflow-wrap: break-word;
}
.clouds-and-light .service-discovery-table tbody td:first-child {
    /* white-space: nowrap; */
    width: 1%;
}
.clouds-and-light .service-discovery-table tbody td:last-child {
    border-right: none;
}

/* Alternating row colours */
.clouds-and-light .service-discovery-table tbody tr:nth-child(even) {
    background-color: #f8f9fe;
}
.clouds-and-light .service-discovery-table tbody tr:hover {
    background-color: #eef0fb;
}

/* Expandable detail row */
.clouds-and-light .service-discovery-detail-row {
    display: none;
}
.clouds-and-light .service-discovery-detail-row.service-discovery-expanded {
    display: table-row;
    background-color: #f8f9fe !important;
}
.clouds-and-light .service-discovery-detail-row > td {
    background-color: #f8f9fe;
    padding: 1.5rem 2rem;
    border-bottom: 2px solid #dee2e6;
    white-space: normal;
}

/* 4-column nested detail table */
.clouds-and-light .service-discovery-detail-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 0.9rem;
    border: 1px solid #d0d4f7;
}
.clouds-and-light .service-discovery-detail-table th {
    background-color: #f0f1f9;
    color: #252930;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.65rem 0.75rem;
    border-bottom: 2px solid #dee2e6;
    border-right: 1px solid #dee2e6;
    text-align: left;
    white-space: nowrap;
}
.clouds-and-light .service-discovery-detail-table th:last-child {
    border-right: none;
}
.clouds-and-light .service-discovery-detail-table td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid #e9ecef;
    border-right: 1px solid #f0f0f0;
    color: #495057;
    vertical-align: top;
    overflow-wrap: break-word;
    word-break: break-word;
    background-color: #ffffff;
}
.clouds-and-light .service-discovery-detail-table td:last-child {
    border-right: none;
}

/* Expand/collapse toggle */
.clouds-and-light .service-discovery-expand-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0.15rem 0.4rem;
    border-radius: 0.2rem;
    transition: background-color 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #4550e6;
    white-space: nowrap;
}
.clouds-and-light .service-discovery-expand-btn:hover {
    background-color: #eef0fb;
}
.clouds-and-light .service-discovery-details-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    background-color: #3540b8;
    color: #ffffff;
    white-space: nowrap;
}

/* Status badges */
.clouds-and-light .service-discovery-status-running,
.clouds-and-light .service-discovery-status-active,
.clouds-and-light .service-discovery-status-available {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.8rem;
    font-weight: 500;
    background-color: #d1e7dd;
    color: #0f5132;
}
.clouds-and-light .service-discovery-status-stopped,
.clouds-and-light .service-discovery-status-error {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.8rem;
    font-weight: 500;
    background-color: #f8d7da;
    color: #842029;
}
.clouds-and-light .service-discovery-status-pending,
.clouds-and-light .service-discovery-status-warning {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.8rem;
    font-weight: 500;
    background-color: #fff3cd;
    color: #664d03;
}
.clouds-and-light .service-discovery-status-terminated {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.8rem;
    font-weight: 500;
    background-color: #e2e3e5;
    color: #41464b;
}

/* Error message box */
.clouds-and-light .service-discovery-error {
    padding: 1rem 1.25rem;
    border: 1px solid #f5c2c7;
    border-radius: 0.5rem;
    background-color: #f8d7da;
    color: #842029;
    margin: 1rem 0;
}
.clouds-and-light .service-discovery-error h5 {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: #842029;
}
.clouds-and-light .service-discovery-error p {
    margin: 0;
    font-size: 0.9rem;
}

/* Loading state */
.clouds-and-light .service-discovery-loading {
    text-align: center;
    padding: 2rem;
    color: #6c757d;
}
.clouds-and-light .service-discovery-loading i {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    animation: service-discovery-spin 1s linear infinite;
}
@keyframes service-discovery-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Empty state */
.clouds-and-light .service-discovery-empty {
    text-align: center;
    padding: 2rem;
    color: #6c757d;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 0.5rem 0.5rem;
}

/* Error state (inline, with header) */
.clouds-and-light .service-discovery-error-inline {
    text-align: center;
    padding: 2rem;
    color: #842029;
    background-color: #f8d7da;
    border: 1px solid #f5c2c7;
    border-top: none;
    border-radius: 0 0 0.5rem 0.5rem;
}

/* Tag-style values (for lists of security groups, tags, etc.) */
.clouds-and-light .service-discovery-tag {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    margin: 0.1rem;
    background-color: #e7e9fd;
    color: #3540b8;
    border-radius: 0.2rem;
    font-size: 0.8rem;
}

/* Tags key-value table (nested within cells) */
.clouds-and-light .service-discovery-tags-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    margin: 0;
    border: 1px solid #d0d4f7;
}
.clouds-and-light .service-discovery-tags-table th {
    background-color: #eef0fd;
    color: #3540b8;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    text-align: left;
    border-bottom: 1px solid #d0d4f7;
}
.clouds-and-light .service-discovery-tags-table td {
    padding: 0.2rem 0.5rem;
    border-bottom: 1px solid #eef0fd;
    word-break: break-word;
}
.clouds-and-light .service-discovery-tags-table tr:last-child td {
    border-bottom: none;
}
.clouds-and-light .service-discovery-tags-table td:first-child {
    font-weight: 500;
    white-space: nowrap;
    color: #495057;
    width: 40%;
}

/* Sub-tables (inline nested tables within cells) */
.clouds-and-light .service-discovery-sub-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    border: 1px solid #dee2e6;
    margin-bottom: 0.5rem;
}
.clouds-and-light .service-discovery-sub-table:last-child {
    margin-bottom: 0;
}
.clouds-and-light .service-discovery-sub-table-title {
    background: linear-gradient(135deg, #4550e6, #3540b8) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 0.45rem 0.75rem !important;
    border-bottom: none !important;
    border-right: none !important;
    text-align: left;
}
.clouds-and-light .service-discovery-sub-table thead th {
    background-color: #f0f1f9;
    color: #252930;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.5rem 0.75rem;
    border-bottom: 2px solid #dee2e6;
    border-right: 1px solid #dee2e6;
    text-align: left;
    white-space: nowrap;
}
.clouds-and-light .service-discovery-sub-table thead th:last-child {
    border-right: none;
}
.clouds-and-light .service-discovery-sub-table tbody td {
    padding: 0.4rem 0.75rem;
    border-bottom: 1px solid #e9ecef;
    border-right: 1px solid #f0f0f0;
    color: #495057;
    white-space: nowrap;
}
.clouds-and-light .service-discovery-sub-table tbody td:last-child {
    border-right: none;
}
.clouds-and-light .service-discovery-sub-table tbody tr:last-child td {
    border-bottom: none;
}
.clouds-and-light .service-discovery-sub-table tbody tr:nth-child(even) {
    background-color: #f8f9fe;
}
.clouds-and-light .service-discovery-sub-table-empty {
    color: #adb5bd !important;
    font-style: italic;
    text-align: center !important;
    padding: 0.6rem 0.75rem !important;
}
.clouds-and-light .service-discovery-sub-table-allow td {
    color: #155724;
}
.clouds-and-light .service-discovery-sub-table-deny td {
    color: #721c24;
    font-weight: 500;
}

/* Policy link in table cells */
.clouds-and-light .service-discovery-policy-link {
    color: #0d6efd;
    cursor: pointer;
    text-decoration: underline;
    font-weight: 500;
}
.clouds-and-light .service-discovery-policy-link:hover {
    color: #0a58ca;
}

/* Policy viewer overlay */
.sd-policy-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    justify-content: center;
    align-items: flex-start;
    padding: 40px 20px;
}
.sd-policy-overlay.sd-policy-active {
    display: flex;
}
.sd-policy-content {
    background: #fff;
    border-radius: 8px;
    max-width: 960px;
    width: 100%;
    max-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.sd-policy-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background-color: #f0f1f9;
    color: #252930;
    border-bottom: 2px solid #dee2e6;
    flex-shrink: 0;
}
.sd-policy-header h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #252930;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sd-policy-close {
    background: none;
    border: none;
    color: #252930;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    opacity: 0.7;
}
.sd-policy-close:hover {
    opacity: 1;
}
.sd-policy-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}
.sd-policy-body pre {
    margin: 0;
    padding: 20px;
    background: #f8f9fa;
    color: #252930;
    font-size: 0.85rem;
    line-height: 1.5;
    min-height: 120px;
    border-radius: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.sd-policy-body code {
    font-family: 'Source Code Pro', 'Fira Code', 'Consolas', 'Monaco', monospace;
    background: transparent;
    padding: 0;
    color: inherit;
}
/* Light-theme syntax highlighting overrides for policy overlay */
.sd-policy-body .hljs {
    background: #f8f9fa;
    color: #383a42;
}
.sd-policy-body .hljs-attr { color: #986801; }
.sd-policy-body .hljs-string { color: #50a14f; }
.sd-policy-body .hljs-number { color: #986801; }
.sd-policy-body .hljs-literal { color: #0184bc; }
.sd-policy-body .hljs-keyword { color: #a626a4; }
.sd-policy-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    background-color: #f0f1f9;
    border-top: 2px solid #dee2e6;
    flex-shrink: 0;
}
.sd-policy-copy-btn,
.sd-policy-close-btn {
    padding: 6px 16px;
    border-radius: 4px;
    font-size: 0.85rem;
    cursor: pointer;
    border: 1px solid #dee2e6;
    background: #fff;
    color: #495057;
}
.sd-policy-copy-btn:hover,
.sd-policy-close-btn:hover {
    background: #e9ecef;
}

/* Split-screen icon button next to "View" link */
.clouds-and-light .service-discovery-policy-split-btn {
    display: inline-block;
    margin-left: 6px;
    color: #6c757d;
    cursor: pointer;
    font-size: 0.8rem;
    vertical-align: baseline;
    opacity: 0.7;
    transition: opacity 0.15s ease, color 0.15s ease;
}
.clouds-and-light .service-discovery-policy-split-btn:hover {
    opacity: 1;
    color: #0d6efd;
}

/* Policy viewer — split-screen mode (body-class approach)
 *
 * Instead of moving DOM elements (which breaks CSS scoping), we add
 * .sd-split-active to <body>.  This constrains all existing page content
 * to the left portion of the viewport via width/overflow.  The policy
 * panel (#sdPolicySplit) is fixed-position on the right.
 *
 * --sd-split-left-width: CSS custom property set by the divider drag.
 */
body.sd-split-active {
    --sd-split-left-width: 50%;
    overflow-x: hidden;
}
/* Constrain everything that isn't the split panel to the left portion */
body.sd-split-active > *:not(#sdPolicySplit) {
    width: var(--sd-split-left-width) !important;
    max-width: var(--sd-split-left-width) !important;
    overflow-x: hidden;
}
/* Hide the fixed site header — the page content scrolls to the top anyway */
body.sd-split-active > header.fixed-top {
    display: none !important;
}
/* Remove the top padding that compensates for the fixed header */
body.sd-split-active > .docs-wrapper {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
/* Hide the sidebar in split mode — it crowds the left pane */
body.sd-split-active .docs-sidebar {
    display: none !important;
}
/* Let .docs-content fill the left pane without sidebar margin */
body.sd-split-active .docs-content {
    margin-left: 0 !important;
}

/* The split panel: fixed on the right side of the viewport */
.sd-policy-split {
    display: none;
}
body.sd-split-active .sd-policy-split {
    display: flex;
    position: fixed;
    top: 0;
    left: var(--sd-split-left-width);
    width: calc(100vw - var(--sd-split-left-width));
    height: 100vh;
    z-index: 9999;
}

/* Draggable divider */
.sd-policy-split-divider {
    width: 6px;
    background: #dee2e6;
    cursor: col-resize;
    flex-shrink: 0;
    position: relative;
    transition: background-color 0.2s;
}
.sd-policy-split-divider:hover,
.sd-policy-split-divider.sd-policy-split-divider-dragging {
    background: #17a2b8;
}
.sd-policy-split-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 30px;
    background: #adb5bd;
    border-radius: 1px;
}
.sd-policy-split-divider:hover::before,
.sd-policy-split-divider.sd-policy-split-divider-dragging::before {
    background: #fff;
}

/* Right pane: policy document */
.sd-policy-split-right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
}
.sd-policy-split-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: 69px;
    background-color: #f0f1f9;
    border-bottom: 2px solid #dee2e6;
    flex-shrink: 0;
}
.sd-policy-split-header h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #252930;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    margin-right: 12px;
}
.sd-policy-split-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.sd-policy-split-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}
.sd-policy-split-body pre {
    margin: 0;
    padding: 20px;
    background: #f8f9fa;
    color: #252930;
    font-size: 0.85rem;
    line-height: 1.5;
    min-height: 100%;
    border-radius: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.sd-policy-split-body code {
    font-family: 'Source Code Pro', 'Fira Code', 'Consolas', 'Monaco', monospace;
    background: transparent;
    padding: 0;
    color: inherit;
}
/* Light-theme syntax highlighting for split view */
.sd-policy-split-body .hljs {
    background: #f8f9fa;
    color: #383a42;
}
.sd-policy-split-body .hljs-attr { color: #986801; }
.sd-policy-split-body .hljs-string { color: #50a14f; }
.sd-policy-split-body .hljs-number { color: #986801; }
.sd-policy-split-body .hljs-literal { color: #0184bc; }
.sd-policy-split-body .hljs-keyword { color: #a626a4; }

/* Responsive: horizontal scroll on mobile */
@media (max-width: 768px) {
    .clouds-and-light .service-discovery-header {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
    .clouds-and-light .service-discovery-timestamp {
        margin-left: 0;
    }
    .clouds-and-light .service-discovery-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .clouds-and-light .service-discovery-table {
        min-width: 600px;
    }
}