<!DOCTYPE html>
<html lang="en" data-theme="{% if request.cookies.get('theme') == 'dark' %}dark{% else %}light{% endif %}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" xintegrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-okaidia.min.css" rel="stylesheet" />
    <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='favicon.ico') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/fire-animation.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/animation.css') }}">
    <script src="{{ url_for('static', filename='js/htmx.min.js') }}"></script>
    <title>{% if app_mode == 'lite' %}(Lite Version) {% endif %}{% if title %}{{ title }} - {% endif %}{{ site_name }}</title>
    <style>
        /* Prevent flash of unstyled content */
        :root { visibility: hidden; }
        [data-theme="dark"], [data-theme="light"] { visibility: visible; }

        /* Default (Light Theme) Styles */
        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background-color: #f8f9fa;
            color: #212529;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            margin: 0;
        }
        main {
            flex-grow: 1;
        }
        h1, h5 {
            font-weight: 600;
        }
        .navbar-light {
            background-color: #ffffff !important;
            border-bottom: 1px solid #e0e0e0;
        }
        .navbar-brand {
            font-weight: bold;
            color: #007bff !important;
        }
        .nav-link {
            color: #333 !important;
            transition: color 0.2s ease;
        }
        .nav-link:hover {
            color: #007bff !important;
        }
        .nav-link.active {
            color: #007bff !important;
            font-weight: bold;
            border-bottom: 2px solid #007bff;
        }
        .dropdown-menu {
            list-style: none !important;
            position: absolute;
            background-color: #ffffff;
            border: none;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            padding: 0;
            min-width: 160px;
            z-index: 1000;
        }
        .dropdown-item {
            padding: 0.5rem 1rem;
            transition: background-color 0.2s ease;
        }
        .dropdown-item:hover {
            background-color: #e9ecef;
        }
        .dropdown-item.active {
            background-color: #007bff;
            color: white !important;
        }
        .card {
            background-color: #ffffff;
            border-radius: 10px;
            overflow: hidden;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15) !important;
        }
        .text-muted {
            color: #6c757d !important;
        }
        .form-check-input {
            width: 1.25rem !important;
            height: 1.25rem !important;
            margin-top: 0.25rem;
            display: inline-block !important;
            border: 1px solid #6c757d;
        }
        .form-check-input:checked {
            background-color: #007bff;
            border-color: #007bff;
        }
        .form-check-label {
            font-size: 1rem;
            margin-left: 0.5rem;
            vertical-align: middle;
        }
        .form-check-label i {
            font-size: 1.2rem;
            margin-left: 0.5rem;
        }
        .form-check {
            margin-bottom: 1rem;
        }
        .navbar-controls {
            gap: 0.5rem;
            padding-right: 0;
        }
        /* Footer Styles */
        footer {
            background-color: #ffffff;
            height: 56px;
            display: flex;
            align-items: center;
            padding: 0.5rem 1rem;
            border-top: 1px solid #e0e0e0;
        }
        .footer-left,
        .footer-right {
            display: inline-flex;
            gap: 0.75rem;
            align-items: center;
        }
        .footer-left a,
        .footer-right a {
            color: #007bff;
            text-decoration: none;
            font-size: 0.85rem;
        }
        .footer-left a:hover,
        .footer-right a:hover {
            text-decoration: underline;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        /* Alert Styles */
        .alert {
            border-radius: 8px;
        }
        .alert-danger {
            background-color: #f8d7da;
            color: #721c24;
            border-color: #f5c6cb;
        }
        .alert-success {
            background-color: #d4edda;
            color: #155724;
            border-color: #c3e6cb;
        }
        .alert-info {
            background-color: #d1ecf1;
            color: #0c5460;
            border-color: #bee5eb;
        }

        /* --- Unified Button and Badge Styles --- */

        /* Add some basic adjustments for Prism compatibility if needed */
        /* Ensure pre takes full width and code block behaves */
        .highlight-code pre, pre[class*="language-"] {
            margin: 0.5em 0;
            overflow: auto; /* Allow scrolling */
            border-radius: 0.3em;
        }
        code[class*="language-"],
        pre[class*="language-"] {
            text-shadow: none; /* Adjust if theme adds text shadow */
             white-space: pre-wrap; /* Wrap long lines */
             word-break: break-all; /* Break long words/tokens */
        }
        /* Adjust padding if needed based on theme */
        :not(pre) > code[class*="language-"], pre[class*="language-"] {
             background: inherit; /* Ensure background comes from pre or theme */
        }

        /* General Button Theme (Primary, Secondary) */
        .btn-primary {
            background-color: #007bff;
            border-color: #007bff;
            color: white;
        }
        .btn-primary:hover {
            background-color: #0056b3;
            border-color: #004085;
        }
        .btn-outline-primary {
            color: #007bff;
            border-color: #007bff;
        }
        .btn-outline-primary:hover {
            background-color: #007bff;
            color: white;
        }

        .btn-secondary {
            background-color: #6c757d;
            border-color: #6c757d;
            color: white;
        }
        .btn-secondary:hover {
            background-color: #5a6268;
            border-color: #545b62;
        }
        .btn-outline-secondary {
            color: #6c757d;
            border-color: #6c757d;
        }
        .btn-outline-secondary:hover {
            background-color: #6c757d;
            color: white;
        }

        /* --- Prism.js Theme Overrides for Light Mode --- */

        /* Target code blocks only when NOT in dark theme */
        html:not([data-theme="dark"]) .token.punctuation,
        html:not([data-theme="dark"]) .token.operator,
        html:not([data-theme="dark"]) .token.entity,
        html:not([data-theme="dark"]) .token.url,
        html:not([data-theme="dark"]) .token.symbol,
        html:not([data-theme="dark"]) .token.number,
        html:not([data-theme="dark"]) .token.boolean,
        html:not([data-theme="dark"]) .token.variable,
        html:not([data-theme="dark"]) .token.constant,
        html:not([data-theme="dark"]) .token.property,
        html:not([data-theme="dark"]) .token.regex,
        html:not([data-theme="dark"]) .token.inserted,
        html:not([data-theme="dark"]) .token.null, /* Target null specifically */
        html:not([data-theme="dark"]) .language-css .token.string,
        html:not([data-theme="dark"]) .style .token.string,
        html:not([data-theme="dark"]) .token.important,
        html:not([data-theme="dark"]) .token.bold {
             /* Choose a darker color that works on your light code background */
             /* Example: A dark grey or the default text color */
             color: #333 !important; /* You might need !important to override theme */
        }

        /* You might need to adjust other tokens as well based on the specific theme */
        /* Example: Make strings slightly darker too if needed */
        html:not([data-theme="dark"]) .token.string {
            color: #005cc5 !important; /* Example: A shade of blue */
        }

        /* Ensure background of highlighted code isn't overridden by theme in light mode */
         html:not([data-theme="dark"]) pre[class*="language-"] {
              background: #e9ecef !important; /* Match your light theme pre background */
         }
         html:not([data-theme="dark"]) :not(pre) > code[class*="language-"] {
              background: #e9ecef !important; /* Match inline code background */
              color: #333 !important; /* Ensure inline code text is dark */
         }

        /* --- End Prism.js Overrides --- */

        /* --- Theme Styles for FSH Code Blocks --- */
        pre, pre code {
            font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            font-size: 0.875em;
            white-space: pre-wrap; /* Allow wrapping */
            word-break: break-all; /* Break long lines */
        }

        /* Target pre blocks specifically used for FSH output if needed */
        /* If the pre block has a specific class or ID, use that */
        #fsh-output pre, /* Targets any pre within the output container */
        ._fsh_output pre /* Targets any pre within the partial template content */
        {
            background-color: #e9ecef; /* Light theme background */
            color: #212529; /* Light theme text */
            border: 1px solid #dee2e6;
            border-radius: 4px;
            padding: 10px;
            max-height: 600px; /* Adjust as needed */
            overflow: auto;
        }

        #fsh-output pre code,
        ._fsh_output pre code {
             background-color: transparent !important; /* Ensure code tag doesn't override pre bg */
             padding: 0;
             color: inherit; /* Inherit text color from pre */
             font-size: inherit; /* Inherit font size from pre */
             display: block; /* Make code fill pre */
        }

        /* Dark Theme Override */
        html[data-theme="dark"] #fsh-output pre,
        html[data-theme="dark"] ._fsh_output pre {
            background-color: #495057; /* Dark theme background */
            color: #f8f9fa; /* Dark theme text */
            border-color: #6c757d;
        }

        html[data-theme="dark"] #fsh-output pre code,
        html[data-theme="dark"] ._fsh_output pre code {
            color: inherit;
        }

        /* --- Theme Styles for FHIR UI Operations (fhir_ui_operations.html) --- */

        /* Operation Block Container */
        .opblock {
            border: 1px solid #dee2e6; /* Light theme border */
            background: #ffffff; /* Light theme background */
            color: #212529; /* Light theme text */
        }
        html[data-theme="dark"] .opblock {
            border-color: #495057; /* Dark theme border */
            background: #343a40; /* Dark theme background (card bg) */
            color: #f8f9fa; /* Dark theme text */
        }

        /* Operation Summary (Header) */
        .opblock-summary {
            background: #f8f9fa; /* Light theme summary bg */
            border-bottom: 1px solid #dee2e6;
            color: #212529; /* Default text color for summary */
        }
        .opblock-summary:hover {
            background: #e9ecef;
        }
        html[data-theme="dark"] .opblock-summary {
            background: #40464c; /* Darker summary bg */
            border-bottom-color: #495057;
            color: #f8f9fa;
        }
        html[data-theme="dark"] .opblock-summary:hover {
            background: #495057;
        }
        /* Keep method badge colors fixed - DO NOT override .opblock-summary-method */
        .opblock-summary-description {
            color: #495057; /* Slightly muted description text */
        }
        html[data-theme="dark"] .opblock-summary-description {
            color: #adb5bd; /* Lighter muted text for dark */
        }

        /* Operation Body (Expanded Section) */
        .opblock-body {
            border-top: 1px solid #dee2e6;
        }
        html[data-theme="dark"] .opblock-body {
            border-top-color: #495057;
        }

        /* Section Headers within Body */
        .opblock-section-header {
            border-bottom: 1px solid #eee;
            color: inherit; /* Inherit from .opblock */
        }
        html[data-theme="dark"] .opblock-section-header {
            border-bottom-color: #495057;
        }
        .opblock-title {
             color: inherit; /* Inherit from .opblock */
        }

        /* Parameters Table */
        .parameters-table th,
        .parameters-table td {
            border: 1px solid #dee2e6;
            color: inherit; /* Inherit from .opblock */
        }
        html[data-theme="dark"] .parameters-table th,
        html[data-theme="dark"] .parameters-table td {
            border-color: #495057;
        }
        .parameter__type,
        .parameter__in {
            color: #6c757d; /* Use standard muted color */
        }
        html[data-theme="dark"] .parameter__type,
        html[data-theme="dark"] .parameter__in {
            color: #adb5bd; /* Use standard dark muted color */
        }
        .parameters-col_description input[type="text"],
        .parameters-col_description input[type="number"] {
            background-color: #fff; /* Match light form controls */
            border: 1px solid #ced4da;
            color: #212529;
        }
        html[data-theme="dark"] .parameters-col_description input[type="text"],
        html[data-theme="dark"] .parameters-col_description input[type="number"] {
            background-color: #495057; /* Match dark form controls */
            border-color: #6c757d;
            color: #f8f9fa;
        }

        /* Request Body Textarea */
        .request-body-textarea {
            background-color: #fff; /* Match light form controls */
            border: 1px solid #ced4da;
            color: #212529;
        }
        html[data-theme="dark"] .request-body-textarea {
            background-color: #495057; /* Match dark form controls */
            border-color: #6c757d;
            color: #f8f9fa;
        }

        /* Responses Table */
        .responses-table th,
        .responses-table td {
            border: 1px solid #dee2e6;
            color: inherit;
        }
        html[data-theme="dark"] .responses-table th,
        html[data-theme="dark"] .responses-table td {
            border-color: #495057;
        }

        /* Example/Schema Tabs & Controls */
        .response-control-media-type {
            background-color: #f8f9fa;
        }
        html[data-theme="dark"] .response-control-media-type {
            background-color: #40464c; /* Match summary header bg */
        }
        .tablinks.badge { /* Default inactive tab */
            background: #dee2e6 !important; /* Light grey inactive */
            color: #333 !important;
        }
        .tablinks.badge.active { /* Default active tab */
            background: #007bff !important; /* Use primary color */
            color: white !important;
        }
        html[data-theme="dark"] .tablinks.badge { /* Dark inactive tab */
            background: #6c757d !important; /* Dark grey inactive */
            color: white !important;
        }
        html[data-theme="dark"] .tablinks.badge.active { /* Dark active tab */
            background: #4dabf7 !important; /* Use dark primary color */
            color: #000 !important;
        }

        /* Code/Output Blocks */
        .highlight-code,
        .request-url-output,
        .curl-output,
        .execute-wrapper pre.response-output-content {
            background: #e9ecef; /* Light theme pre background */
            color: #212529;
            border: 1px solid #dee2e6;
        }
        html[data-theme="dark"] .highlight-code,
        html[data-theme="dark"] .request-url-output,
        html[data-theme="dark"] .curl-output,
        html[data-theme="dark"] .execute-wrapper pre.response-output-content {
            background: #495057; /* Dark theme pre background */
            color: #f8f9fa;
            border-color: #6c757d;
        }

        /* Narrative Response Box */
        .execute-wrapper div.response-output-narrative {
             background: #ffffff;
             color: #212529;
             border: 1px solid #dee2e6;
        }
        html[data-theme="dark"] .execute-wrapper div.response-output-narrative {
             background: #343a40; /* Match card body */
             color: #f8f9fa;
             border: 1px solid #495057;
        }

        /* Response Status Text */
        .execute-wrapper .response-status[style*="color: green"] { color: #198754 !important; }
        .execute-wrapper .response-status[style*="color: red"] { color: #dc3545 !important; }
        html[data-theme="dark"] .execute-wrapper .response-status[style*="color: green"] { color: #20c997 !important; }
        html[data-theme="dark"] .execute-wrapper .response-status[style*="color: red"] { color: #e63946 !important; }

        /* Specific Action Buttons (Success, Danger, Warning, Info) */
        .btn-success { background-color: #198754; border-color: #198754; color: white; }
        .btn-success:hover { background-color: #157347; border-color: #146c43; }
        .btn-outline-success { color: #198754; border-color: #198754; }
        .btn-outline-success:hover { background-color: #198754; color: white; }

        .btn-danger { background-color: #dc3545; border-color: #dc3545; color: white; }
        .btn-danger:hover { background-color: #bb2d3b; border-color: #b02a37; }
        .btn-outline-danger { color: #dc3545; border-color: #dc3545; }
        .btn-outline-danger:hover { background-color: #dc3545; color: white; }

        .btn-warning { background-color: #ffc107; border-color: #ffc107; color: #000; }
        .btn-warning:hover { background-color: #ffca2c; border-color: #ffc720; }
        .btn-outline-warning { color: #ffc107; border-color: #ffc107; }
        .btn-outline-warning:hover { background-color: #ffc107; color: #000; }

        .btn-info { background-color: #0dcaf0; border-color: #0dcaf0; color: #000; }
        .btn-info:hover { background-color: #31d2f2; border-color: #25cff2; }
        .btn-outline-info { color: #0dcaf0; border-color: #0dcaf0; }
        .btn-outline-info:hover { background-color: #0dcaf0; color: #000; }

        /* General Badge Theme */
        .badge {
            padding: 0.4em 0.6em; /* Slightly larger padding */
            font-size: 0.85em;
            font-weight: 600;
        }
        /* Specific Badge Backgrounds (Add more as needed) */
        .badge.bg-primary { background-color: #007bff !important; color: white !important; }
        .badge.bg-secondary { background-color: #6c757d !important; color: white !important; }
        .badge.bg-success { background-color: #198754 !important; color: white !important; }
        .badge.bg-danger { background-color: #dc3545 !important; color: white !important; }
        .badge.bg-warning { background-color: #ffc107 !important; color: #000 !important; }
        .badge.bg-info { background-color: #0dcaf0 !important; color: #000 !important; }
        .badge.bg-light { background-color: #f8f9fa !important; color: #000 !important; border: 1px solid #dee2e6; }
        .badge.bg-dark { background-color: #343a40 !important; color: white !important; }

        /* Copy Button Specific Style */
        .btn-copy { /* Optional: Add a specific class if needed, or style .btn-outline-secondary directly */
            padding: 0.25rem 0.5rem;
            font-size: 0.875rem;
            line-height: 1.5;
        }

        /* --- Dark Theme Overrides --- */
        html[data-theme="dark"] .btn-primary { background-color: #4dabf7; border-color: #4dabf7; color: #000; }
        html[data-theme="dark"] .btn-primary:hover { background-color: #68bcef; border-color: #5fb7ea; }
        html[data-theme="dark"] .btn-outline-primary { color: #4dabf7; border-color: #4dabf7; }
        html[data-theme="dark"] .btn-outline-primary:hover { background-color: #4dabf7; color: #000; }

        html[data-theme="dark"] .btn-secondary { background-color: #6c757d; border-color: #6c757d; color: white; }
        html[data-theme="dark"] .btn-secondary:hover { background-color: #5a6268; border-color: #545b62; }
        html[data-theme="dark"] .btn-outline-secondary { color: #adb5bd; border-color: #6c757d; } /* Lighter text/border */
        html[data-theme="dark"] .btn-outline-secondary:hover { background-color: #6c757d; color: white; }

        html[data-theme="dark"] .btn-success { background-color: #20c997; border-color: #20c997; color: #000; }
        html[data-theme="dark"] .btn-success:hover { background-color: #3ce0ac; border-color: #36d8a3; }
        html[data-theme="dark"] .btn-outline-success { color: #20c997; border-color: #20c997; }
        html[data-theme="dark"] .btn-outline-success:hover { background-color: #20c997; color: #000; }

        /* Keep danger as is */
        html[data-theme="dark"] .btn-danger { background-color: #e63946; border-color: #e63946; color: white; }
        html[data-theme="dark"] .btn-danger:hover { background-color: #c82b39; border-color: #bd2130; }
        html[data-theme="dark"] .btn-outline-danger { color: #e63946; border-color: #e63946; }
        html[data-theme="dark"] .btn-outline-danger:hover { background-color: #e63946; color: white; }

        html[data-theme="dark"] .btn-warning { background-color: #ffca2c; border-color: #ffca2c; color: #000; }
        html[data-theme="dark"] .btn-warning:hover { background-color: #ffd24a; border-color: #ffce3d; }
        html[data-theme="dark"] .btn-outline-warning { color: #ffca2c; border-color: #ffca2c; }
        html[data-theme="dark"] .btn-outline-warning:hover { background-color: #ffca2c; color: #000; }

        html[data-theme="dark"] .btn-info { background-color: #22b8cf; border-color: #22b8cf; color: #000; }
        html[data-theme="dark"] .btn-info:hover { background-color: #44cee3; border-color: #38cae0; }
        html[data-theme="dark"] .btn-outline-info { color: #22b8cf; border-color: #22b8cf; }
        html[data-theme="dark"] .btn-outline-info:hover { background-color: #22b8cf; color: #000; }

        /* Dark Theme Badges */
        html[data-theme="dark"] .badge.bg-primary { background-color: #4dabf7 !important; color: #000 !important; }
        html[data-theme="dark"] .badge.bg-secondary { background-color: #6c757d !important; color: white !important; }
        html[data-theme="dark"] .badge.bg-success { background-color: #20c997 !important; color: #000 !important; }
        html[data-theme="dark"] .badge.bg-danger { background-color: #e63946 !important; color: white !important; }
        html[data-theme="dark"] .badge.bg-warning { background-color: #ffca2c !important; color: #000 !important; }
        html[data-theme="dark"] .badge.bg-info { background-color: #22b8cf !important; color: #000 !important; }
        html[data-theme="dark"] .badge.bg-light { background-color: #495057 !important; color: #f8f9fa !important; border: 1px solid #6c757d; }
        html[data-theme="dark"] .badge.bg-dark { background-color: #adb5bd !important; color: #000 !important; }

        /* --- Themed Backgrounds for Code/Structure View (cp_view_processed_ig.html) --- */

        /* Styling for <pre> blocks containing code */
        #raw-structure-wrapper pre,
        #example-content-wrapper pre {
            background-color: #e9ecef; /* Light theme background */
            color: #212529; /* Light theme text */
            border: 1px solid #dee2e6;
            border-radius: 4px;
            padding: 10px;
            max-height: 400px; /* Keep existing max-height */
            overflow-y: auto; /* Keep existing overflow */
            white-space: pre-wrap; /* Ensure wrapping */
            word-break: break-all; /* Break long strings */
        }

        /* Ensure code tag inside inherits background and has appropriate font */
        #raw-structure-wrapper pre code,
        #example-content-wrapper pre code {
            background-color: transparent !important; /* Let pre handle background */
            padding: 0;
            font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            font-size: 0.875em;
            color: inherit; /* Inherit text color from pre */
            display: block; /* Make code block fill pre */
            white-space: pre-wrap;
            word-break: break-all;
        }

        /* Styling for the Structure Definition tree list items */
        .structure-tree-root .list-group-item {
            background-color: #ffffff; /* Light theme default background */
            border-color: #dee2e6;
            color: #212529;
        }

        .structure-tree-root .list-group-item-warning {
            background-color: #fff3cd; /* Bootstrap light theme warning */
            border-color: #ffeeba;
            /*color: #856404;  Ensure text is readable */
        }

        /* --- Dark Theme Overrides for Code/Structure View --- */
        html[data-theme="dark"] #raw-structure-wrapper pre,
        html[data-theme="dark"] #example-content-wrapper pre {
            background-color: #495057; /* Dark theme background */
            color: #f8f9fa; /* Dark theme text */
            border-color: #6c757d;
        }

        /* Dark theme code text color already inherited, but explicit doesn't hurt */
        html[data-theme="dark"] #raw-structure-wrapper pre code,
        html[data-theme="dark"] #example-content-wrapper pre code {
             color: #f8f9fa;
        }

        /* Dark theme structure list items */
        html[data-theme="dark"] .structure-tree-root .list-group-item {
            background-color: #343a40; /* Dark theme card background */
            border-color: #495057;
            color: #f8f9fa;
        }

        html[data-theme="dark"] .structure-tree-root .list-group-item-warning {
            background-color: #664d03; /* Darker warning background */
            border-color: #997404;
            /*color: #ffecb5; Lighter text for contrast */
        }

        /* Dark Theme Styles */
        html[data-theme="dark"] body {
            background-color: #212529;
            color: #f8f9fa;
        }
        html[data-theme="dark"] .navbar-light {
            background-color: #343a40 !important;
            border-bottom: 1px solid #495057;
        }
        html[data-theme="dark"] .navbar-brand {
            color: #4dabf7 !important;
        }
        html[data-theme="dark"] .nav-link {
            color: #f8f9fa !important;
        }
        html[data-theme="dark"] .nav-link:hover,
        html[data-theme="dark"] .nav-link.active {
            color: #4dabf7 !important;
            border-bottom-color: #4dabf7;
        }
        html[data-theme="dark"] .dropdown-menu {
            background-color: #495057;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }
        html[data-theme="dark"] .dropdown-item {
            color: #f8f9fa;
        }
        html[data-theme="dark"] .dropdown-item:hover {
            background-color: #6c757d;
        }
        html[data-theme="dark"] .dropdown-item.active {
            background-color: #4dabf7;
            color: white !important;
        }
        html[data-theme="dark"] .card {
            background-color: #343a40;
            border: 1px solid #495057;
        }
        html[data-theme="dark"] .text-muted {
            color: #adb5bd !important;
        }
        html[data-theme="dark"] h1,
        html[data-theme="dark"] h5 {
            color: #f8f9fa;
        }
        html[data-theme="dark"] .form-label {
            color: #f8f9fa;
        }
        html[data-theme="dark"] .form-control {
            background-color: #495057;
            color: #f8f9fa;
            border-color: #6c757d;
        }
        html[data-theme="dark"] .form-control::placeholder {
            color: #adb5bd;
        }
        html[data-theme="dark"] .form-select {
            background-color: #495057;
            color: #f8f9fa;
            border-color: #6c757d;
        }
        html[data-theme="dark"] .alert-danger {
            background-color: #dc3545;
            color: white;
            border-color: #dc3545;
        }
        html[data-theme="dark"] .alert-success {
            background-color: #198754;
            color: white;
            border-color: #198754;
        }
        html[data-theme="dark"] .alert-info {
            background-color: #0dcaf0;
            color: white;
            border-color: #0dcaf0;
        }
        html[data-theme="dark"] .form-check-input {
            border-color: #adb5bd;
        }
        html[data-theme="dark"] .form-check-input:checked {
            background-color: #4dabf7;
            border-color: #4dabf7;
        }
        html[data-theme="dark"] footer {
            background-color: #343a40;
            border-top: 1px solid #495057;
        }
        html[data-theme="dark"] .footer-left a,
        html[data-theme="dark"] .footer-right a {
            color: #4dabf7;
        }
        @media (max-width: 576px) {
            .navbar-controls {
                flex-direction: column;
                align-items: stretch;
                width: 100%;
            }
            .navbar-controls .form-check {
                margin-bottom: 0.5rem;
            }
            footer {
                height: auto;
                padding: 0.5rem;
                flex-direction: column;
                gap: 0.5rem;
            }
            .footer-left,
            .footer-right {
                flex-direction: column;
                text-align: center;
                gap: 0.5rem;
            }
            .footer-left a,
            .footer-right a {
                font-size: 0.8rem;
            }
        }
    </style>
</head>
<body class="d-flex flex-column min-vh-100 {% block body_class %}{% endblock %}">
    <nav class="navbar navbar-expand-lg navbar-light">
        <div class="container-fluid">
            <a class="navbar-brand" href="{{ url_for('index') }}">{{ site_name }}{% if app_mode == 'lite' %} (Lite){% endif %}</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse d-flex justify-content-between" id="navbarNav">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link {{ 'active' if request.endpoint == 'index' else '' }}" aria-current="page" href="{{ url_for('index') }}"><i class="fas fa-house me-1"></i> Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {% if request.path == '/search-and-import' %}active{% endif %}" href="{{ url_for('search_and_import') }}"><i class="fas fa-download me-1"></i> Search and Import</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {{ 'active' if request.endpoint == 'manual_import_ig' else '' }}" href="{{ url_for('manual_import_ig') }}"><i class="fas fa-folder-open me-1"></i> Manual Import</a>
                    </li>
                    <li class="nav-item">                        
                        <a class="nav-link {{ 'active' if request.endpoint == 'view_igs' else '' }}" href="{{ url_for('view_igs') }}"><i class="fas fa-folder-open me-1"></i> Manage FHIR Packages</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {{ 'active' if request.endpoint == 'push_igs' else '' }}" href="{{ url_for('push_igs') }}"><i class="fas fa-upload me-1"></i> Push IGs</a>
                    </li>                    
                    <li class="nav-item">
                        <a class="nav-link {{ 'active' if request.endpoint == 'upload_test_data' else '' }}" href="{{ url_for('upload_test_data') }}"><i class="bi bi-clipboard-data me-1"></i>Upload Test Data</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {{ 'active' if request.endpoint == 'validate_sample' else '' }}" href="{{ url_for('validate_sample') }}"><i class="fas fa-check-circle me-1"></i> Validate FHIR Sample</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {{ 'active' if request.endpoint == 'retrieve_split_data' else '' }}" href="{{ url_for('retrieve_split_data') }}"><i class="fas bi-cloud-download me-1"></i> Retrieve & Split Data</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {{ 'active' if request.endpoint == 'fhir_ui' else '' }}" href="{{ url_for('fhir_ui') }}"><i class="fas fa-cloud-download-alt me-1"></i> FHIR API Explorer</a>
                    </li>
                     <li class="nav-item">
                        <a class="nav-link {{ 'active' if request.endpoint == 'fhir_ui_operations' else '' }}" href="{{ url_for('fhir_ui_operations') }}"><i class="bi bi-gear me-1"></i> FHIR UI Operations</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {{ 'active' if request.endpoint == 'fsh_converter' else '' }}" href="{{ url_for('fsh_converter') }}"><i class="fas fa-file-code me-1"></i> FSH Converter</a>
                    </li>
                    {% if app_mode != 'lite' %}
                    <li class="nav-item">
                        <a class="nav-link {{ 'active' if request.endpoint == 'config_hapi' else '' }}" href="{{ url_for('config_hapi') }}"><i class="fas fa-cog me-1"></i> Configure HAPI</a>
                    </li>
                    {% endif %}
                    </ul>
                <div class="navbar-controls d-flex align-items-center">
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="themeToggle" onchange="toggleTheme()" aria-label="Toggle dark mode" {% if request.cookies.get('theme') == 'dark' %}checked{% endif %}>
                        <label class="form-check-label" for="themeToggle">
                            <i class="fas fa-sun"></i>
                            <i class="fas fa-moon d-none"></i>
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <main class="flex-grow-1">
        <div class="container mt-4">
            {% with messages = get_flashed_messages(with_categories=true) %}
                {% if messages %}
                    <div class="mt-3">
                        {% for category, message in messages %}
                            <div class="alert 
                                        {{ 'alert-danger' if category == 'error' else 
                                           'alert-success' if category == 'success' else 
                                           'alert-info' }} 
                                        alert-dismissible fade show" role="alert">
                                <i class="fas 
                                    {{ 'fa-exclamation-triangle me-2' if category == 'error' else 
                                       'fa-check-circle me-2' if category == 'success' else 
                                       'fa-info-circle me-2' }}"></i>
                                {{ message }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                            </div>
                        {% endfor %}
                    </div>
                {% endif %}
            {% endwith %}
            {% block content %}{% endblock %}
        </div>
    </main>

    <footer class="main-footer" role="contentinfo">
        <div class="container-fluid">
            <div class="d-flex justify-content-between align-items-center">
                <div class="footer-left">
                    <a href="https://github.com/Sudo-JHare/FHIRFLARE-IG-Toolkit" target="_blank" rel="noreferrer" aria-label="Project Github">Project Github</a>
                    <a href="/about" aria-label="Learn about this project">What is FHIRFLARE</a>
                    <a href="https://www.hl7.org/fhir/" target="_blank" rel="noreferrer" aria-label="Visit FHIR website">FHIR</a>
                    <a href="https://github.com/Sudo-JHare/FHIRFLARE-IG-Toolkit/issues/new/choose" class="text-danger text-decoration-none" aria-label="FHIRFLARE support"><i class="fas fa-exclamation-circle me-1"></i> Raise an Issue</a>
                </div>
                <div class="footer-right">
                    <a class="nav-link {{ 'active' if request.endpoint == 'flasgger.apidocs' else '' }}" href="{{ url_for('flasgger.apidocs') }}" aria-label="API Documentation"><i class="fas fa-book-open me-1"></i> API Docs</a>
                    <a href="https://github.com/Sudo-JHare/FHIRFLARE-IG-Toolkit/discussions" target="_blank" rel="noreferrer" aria-label="Project Discussion">Project Discussions</a>
                    <a href="https://github.com/Sudo-JHare" aria-label="Developer">Developer</a>
                    <a href="https://github.com/Sudo-JHare/FHIRFLARE-IG-Toolkit/blob/main/LICENSE.md" aria-label="License">License</a>
                </div>
            </div>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    <script>
        function getCookie(name) {
            const value = `; ${document.cookie}`;
            const parts = value.split(`; ${name}=`);
            if (parts.length === 2) return parts.pop().split(';').shift();
            return null;
        }

        function toggleTheme() {
            const html = document.documentElement;
            const toggle = document.getElementById('themeToggle');
            const sunIcon = document.querySelector('.fa-sun');
            const moonIcon = document.querySelector('.fa-moon');
            const newTheme = toggle.checked ? 'dark' : 'light';
            html.setAttribute('data-theme', newTheme);
            localStorage.setItem('theme', newTheme);
            sunIcon.classList.toggle('d-none', toggle.checked);
            moonIcon.classList.toggle('d-none', !toggle.checked);
            document.cookie = `theme=${newTheme}; path=/; max-age=31536000`;
            if (typeof loadLottieAnimation === 'function') {
                loadLottieAnimation(newTheme);
            }
        }

        document.addEventListener('DOMContentLoaded', () => {
            const savedTheme = localStorage.getItem('theme') || getCookie('theme') || 'light';
            const themeToggle = document.getElementById('themeToggle');
            const sunIcon = document.querySelector('.fa-sun');
            const moonIcon = document.querySelector('.fa-moon');
            document.documentElement.setAttribute('data-theme', savedTheme);
            themeToggle.checked = savedTheme === 'dark';
            sunIcon.classList.toggle('d-none', savedTheme === 'dark');
            moonIcon.classList.toggle('d-none', savedTheme !== 'dark');
            const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
            tooltips.forEach(t => new bootstrap.Tooltip(t));
        });
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
    {% block scripts %}{% endblock %}
</body>
</html>
