/* Template Selector Modal */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.template-modal {
    background: #252526;
    border: 1px solid #454545;
    border-radius: 8px;
    width: 1080px;
    max-width: 92vw;
    height: 720px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Modal Header */
.template-modal .modal-header {
    height: 50px;
    padding: 0 20px;
    border-bottom: 1px solid #1E1E1E;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #2D2D2D;
    border-radius: 8px 8px 0 0;
}

.template-modal .modal-title {
    font-size: 15px;
    font-weight: 600;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    gap: 10px;
}

.template-modal .modal-title i {
    font-size: 20px;
    color: #007ACC;
}

.template-modal .modal-close {
    background: transparent;
    border: none;
    color: #858585;
    cursor: pointer;
    padding: 6px;
    font-size: 18px;
    border-radius: 4px;
}

.template-modal .modal-close:hover {
    background: #3A3D41;
    color: #FFFFFF;
}

/* Modal Body */
.template-modal .modal-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Template List Panel */
.template-list-panel {
    width: 340px;
    flex-shrink: 0;          /* prevent the preview pane from squeezing it */
    border-right: 1px solid #1E1E1E;
    display: flex;
    flex-direction: column;
    background: #1E1E1E;
    overflow: hidden;
}

.template-search {
    padding: 12px;
    border-bottom: 1px solid #252526;
}

.search-wrapper {
    position: relative;
}

.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #858585;
    font-size: 14px;
    pointer-events: none;
}

.search-input {
    width: 100%;
    box-sizing: border-box;
    background: #3C3C3C;
    border: 1px solid #454545;
    border-radius: 4px;
    padding: 8px 30px 8px 36px;     /* right padding makes room for the clear button */
    color: #CCCCCC;
    font-size: 13px;
    outline: none;
}

.search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #858585;
    font-size: 14px;
    cursor: pointer;
    padding: 2px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-clear:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

.search-input:focus {
    border-color: #007ACC;
    background: #2D2D2D;
}

.template-categories {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.category-section {
    margin-bottom: 20px;
}

.category-header {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #858585;
    padding: 8px 12px 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.template-item {
    padding: 10px 12px 10px 9px;  /* left=9 leaves room for the 3px type stripe */
    margin: 2px 0;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    transition: all 0.15s ease;
}

.template-item:hover {
    background: #2A2D2E;
}

/* Selected state — bolder background only. The bi-color type stripe set by
   .template-item-app / .template-item-file stays intact, since border-left is
   the type indicator. We use box-shadow to add a subtle blue accent if needed. */
.template-item.selected {
    background: #37373D;
    box-shadow: inset 0 0 0 1px #007ACC;
}

.template-icon {
    font-size: 20px;
    color: #858585;
    flex-shrink: 0;
    margin-top: 2px;
}

.template-item.selected .template-icon {
    color: #007ACC;
}

.template-info {
    flex: 1;
    min-width: 0;
}

.template-name {
    font-size: 13px;
    font-weight: 500;
    color: #CCCCCC;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.template-item.selected .template-name {
    color: #FFFFFF;
}

/* Suffix glyph next to template title — marks application templates. */
.template-type-glyph {
    color: #f59e0b;
    font-size: 13px;
    opacity: 0.9;
    flex-shrink: 0;
}

/* Bi-color left-edge stripe — Apps (amber) vs Files (slate). The colored
   stripe is a left border on the list item; selected state preserves it. */
.template-item-app  { border-left: 3px solid #f59e0b; }
.template-item-file { border-left: 3px solid #525b71; }
body.theme-light .template-item-file { border-left-color: #c7cad1; }

/* Per-module stripe tints — each category gets its own hue so the user can
   visually scan/sort by category at a glance. App vs file is still indicated
   by the 📦 glyph beside the title, so the stripe is freed up to carry the
   category signal. The colours intentionally mirror the module badge palette
   so a "Core" stripe and a "Core" badge read as the same colour. */
.template-item.template-item-module-core         { border-left-color: #6b7280; }   /* slate */
.template-item.template-item-module-ai           { border-left-color: #8b5cf6; }   /* violet */
.template-item.template-item-module-rag          { border-left-color: #0ea5b7; }   /* teal-cyan */
.template-item.template-item-module-guardrails   { border-left-color: #d97706; }   /* amber */
.template-item.template-item-module-vectorstore  { border-left-color: #4f46e5; }   /* indigo */
.template-item.template-item-module-orm          { border-left-color: #a855f7; }   /* purple */
.template-item.template-item-module-chroma       { border-left-color: #9333ea; }
.template-item.template-item-module-milvus       { border-left-color: #6366f1; }
.template-item.template-item-module-pinecone     { border-left-color: #c2410c; }
.template-item.template-item-module-qdrant       { border-left-color: #dc2626; }

/* App rows get a slightly thicker stripe than file rows in the same category
   so the app/file binary is still glance-able via stripe weight, while the
   hue carries the category. 4px (app) vs 2px (file) — subtle but readable. */
.template-item.template-item-app  { border-left-width: 4px; padding-left: 8px; }
.template-item.template-item-file { border-left-width: 2px; padding-left: 10px; }

.template-description {
    font-size: 12.5px;
    color: var(--vscode-text-primary) !important;
    line-height: 1.4;
    font-family: var(--vscode-font-ui);
    font-weight: 450;
}

.template-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

/* Solid-color pill (same shape/size as the erstwhile popular/advanced badges). */
.template-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border: 0;
}

/* CF version chips — each version gets its own brand-ish color. A template
   supporting both CF2025 and CF2023 shows both chips, one after the other. */
.badge-version            { background: #6b7280; color: #ffffff; }
.badge-cf2025             { background: #16a34a; color: #ffffff; }
.badge-cf2023             { background: #007ACC; color: #ffffff; }

/* Type pill — distinguishes single-file templates from multi-file application
   templates at a glance, next to the cf-version and module pills. */
.badge-type                     { font-weight: 600; }
.badge-type-file                { background: #525b71; color: #ffffff; }
.badge-type-app                 { background: #f59e0b; color: #1f2937; }

/* Application-template preview: tabbed file picker + scrollable Monaco body.
   Scroll lives ONLY on .applist-tab-body. The inner .preview-code-monaco gets
   its own scroll disabled when nested here so we don't end up with a double-
   overflow that swallows the wheel events. */
.preview-applist                { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.preview-applist .applist-tabs  { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px 8px 0; background: #252526; border-bottom: 1px solid #3c3c3c; flex-shrink: 0; }
.preview-applist .applist-tab   { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 12px; color: #cccccc; background: #2d2d30; border: 1px solid transparent; border-bottom: none; border-top-left-radius: 4px; border-top-right-radius: 4px; cursor: pointer; user-select: none; }
.preview-applist .applist-tab:hover { background: #37373d; }
.preview-applist .applist-tab.active { background: #1e1e1e; border-color: #3c3c3c; color: #ffffff; }
.preview-applist .applist-tab .codicon { color: #75beff; font-size: 14px; }
.preview-applist .applist-entry-dot { width: 6px; height: 6px; border-radius: 50%; background: #16a34a; display: inline-block; }
.preview-applist .applist-tab-body { flex: 1 1 0; min-height: 0; overflow: auto; background: #1e1e1e; }
/* Cancel the inner scroll/flex when the Monaco container is nested inside
   .applist-tab-body — the body itself handles scrolling here. */
.preview-applist .applist-tab-body .preview-code,
.preview-applist .applist-tab-body .preview-code-monaco {
    flex: none;
    min-height: 0;
    overflow: visible;
}

.applist-summary                { display: flex; align-items: center; gap: 8px; color: var(--vscode-text-primary); font-style: italic; font-size: 12px; font-weight: 500; white-space: nowrap; flex-shrink: 0; }
.applist-summary .codicon       { color: #f59e0b; }

/* Light theme tweaks */
body.theme-light .preview-applist .applist-tabs { background: #f3f3f3; border-bottom-color: #e4e4e4; }
body.theme-light .preview-applist .applist-tab  { background: #ececec; color: #424242; }
body.theme-light .preview-applist .applist-tab.active { background: #ffffff; color: #1f2937; border-color: #e4e4e4; }
body.theme-light .preview-applist .applist-tab-body  { background: #ffffff; }
body.theme-light .badge-type-file               { background: #6b7280; }

/* Module chips — distinct hue per module so the category is scannable.
   Default neutral pill for anything unrecognized. */
.badge-module                  { background: #3a3a3a; color: #d4d4d4; }
.badge-module-core             { background: #555555; color: #ffffff; }

/* AI / vector family */
.badge-module-ai               { background: #7c3aed; color: #ffffff; }
.badge-module-vectorstore      { background: #4338ca; color: #ffffff; }
.badge-module-rag              { background: #0e7490; color: #ffffff; }
.badge-module-guardrails       { background: #b45309; color: #ffffff; }
.badge-module-milvus           { background: #6366f1; color: #ffffff; }
.badge-module-chroma           { background: #9333ea; color: #ffffff; }
.badge-module-pinecone         { background: #c2410c; color: #ffffff; }
.badge-module-qdrant           { background: #dc2626; color: #ffffff; }

/* Database family */
.badge-module-mysql            { background: #00758F; color: #ffffff; }
.badge-module-postgresql       { background: #336791; color: #ffffff; }
.badge-module-sqlserver        { background: #A91D22; color: #ffffff; }
.badge-module-oracle           { background: #C74634; color: #ffffff; }
.badge-module-db2              { background: #1F70C1; color: #ffffff; }
.badge-module-derby            { background: #B91C1C; color: #ffffff; }
.badge-module-cfmongodb        { background: #4DB33D; color: #ffffff; }
.badge-module-awsdynamodb      { background: #4053D6; color: #ffffff; }
.badge-module-gcpfirestore     { background: #FFA000; color: #1E1E1E; }

/* AWS family */
.badge-module-awss3            { background: #E25444; color: #ffffff; }
.badge-module-awss3legacy      { background: #B0412E; color: #ffffff; }
.badge-module-awslambda        { background: #FF9900; color: #1E1E1E; }
.badge-module-awssns           { background: #E7434C; color: #ffffff; }
.badge-module-awssqs           { background: #DC382D; color: #ffffff; }

/* Azure family */
.badge-module-azureblob        { background: #0078D4; color: #ffffff; }
.badge-module-azureservicebus  { background: #00BCF2; color: #1E1E1E; }

/* GCP family */
.badge-module-gcpstorage       { background: #4285F4; color: #ffffff; }
.badge-module-gcppubsub        { background: #DB4437; color: #ffffff; }

/* Microsoft / Office family */
.badge-module-exchange         { background: #0078D4; color: #ffffff; }
.badge-module-msgraph          { background: #2C7AD9; color: #ffffff; }
.badge-module-sharepoint       { background: #038387; color: #ffffff; }
.badge-module-dotnet           { background: #512BD4; color: #ffffff; }

/* Document / report formats */
.badge-module-pdf              { background: #dc2626; color: #ffffff; }
.badge-module-htmltopdf        { background: #B91C1C; color: #ffffff; }
.badge-module-chart            { background: #f59e0b; color: #1E1E1E; }
.badge-module-report           { background: #EA580C; color: #ffffff; }
.badge-module-spreadsheet      { background: #15803d; color: #ffffff; }
.badge-module-presentation     { background: #D97706; color: #ffffff; }
.badge-module-document         { background: #4B5563; color: #ffffff; }
.badge-module-zip              { background: #6B7280; color: #ffffff; }
.badge-module-image            { background: #DB2777; color: #ffffff; }

/* Messaging / transport */
.badge-module-mail             { background: #2563EB; color: #ffffff; }
.badge-module-feed             { background: #F26522; color: #ffffff; }
.badge-module-ftp              { background: #0EA5E9; color: #ffffff; }
.badge-module-websocket        { background: #06B6D4; color: #1E1E1E; }
.badge-module-eventgateways    { background: #475569; color: #ffffff; }
.badge-module-graphqlclient    { background: #E10098; color: #ffffff; }

/* ORM / search */
.badge-module-orm              { background: #0d9488; color: #ffffff; }
.badge-module-ormsearch        { background: #14b8a6; color: #ffffff; }
.badge-module-search           { background: #4F46E5; color: #ffffff; }

/* Security / scheduling / misc */
.badge-module-saml             { background: #A16207; color: #ffffff; }
.badge-module-scheduler        { background: #84CC16; color: #1E1E1E; }
.badge-module-caching          { background: #92400E; color: #ffffff; }
.badge-module-ajax             { background: #6D28D9; color: #ffffff; }
.badge-module-axis             { background: #B45309; color: #ffffff; }

/* Module-name slug rendered inside each category section header so the
   underlying tag value (e.g. "ai", "orm") is visible alongside the title. */
.category-module-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 3px;
    background: #2d2d30;
    color: #b0b0b0;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.4px;
    text-transform: lowercase;
    font-family: var(--vscode-font-mono, 'Menlo', 'Monaco', monospace);
}

/* Preview Panel */
.template-preview-panel {
    flex: 1;
    min-width: 0;            /* allow shrinking so long code lines don't push the list panel */
    min-height: 0;           /* ensure descendants with overflow:auto can shrink below content */
    display: flex;
    flex-direction: column;
    background: #252526;
    overflow: hidden;        /* contain the preview-content's overflow chain */
}

/* The conditional `template &&` block in the JSX wraps everything in one extra
   div. Without flexing that wrapper, the flex chain (.preview-content flex:1)
   breaks because its direct parent is a non-flex block sized to content. */
.template-preview-inner {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.preview-header {
    padding: 16px 20px;
    border-bottom: 1px solid #1E1E1E;
}

.preview-template-name {
    font-size: 16px;
    font-weight: 600;
    color: #FFFFFF;
    margin-bottom: 6px;
}

.preview-template-description {
    font-size: 13px;
    color: #d4d4d4;
    line-height: 1.5;
    font-weight: 450;
}

.preview-tabs {
    display: flex;
    border-bottom: 1px solid #1E1E1E;
    background: #2D2D2D;
    padding: 0 12px;
}

.preview-tab {
    padding: 10px 16px;
    background: transparent;
    border: none;
    color: #858585;
    cursor: pointer;
    font-size: 13px;
    border-bottom: 2px solid transparent;
    transition: all 0.15s ease;
}

.preview-tab:hover {
    color: #CCCCCC;
}

.preview-tab.active {
    color: #FFFFFF;
    border-bottom-color: #007ACC;
}

.preview-content {
    flex: 1 1 0;             /* explicit basis 0 so this box can shrink below content height */
    min-height: 0;           /* required so descendants with overflow:auto can scroll */
    display: flex;
    flex-direction: column;
    overflow: hidden;        /* contain children — only the inner scroll container scrolls */
}

.preview-code {
    flex: 1 1 0;
    min-height: 0;
    overflow: auto;
    padding: 20px;
    /* Match the Monaco editor's font / size / leading (MonacoEditorWrapper:
       fontSize 12, lineHeight 18 → 1.5 ratio) so the template preview reads
       at the same scale as the editor pane. */
    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.5;
    color: #D4D4D4;
    background: #1E1E1E;
}

/* Monaco-colorized template preview. Monaco's colorize() emits one <br>- or
   newline-separated <span> per line with mtk* classes; the .mtk* color rules
   are injected by Monaco itself when it loads. We add a CSS-counter gutter for
   line numbers so it visually matches the editor pane.

   The .monaco-editor class sits on an INNER wrapper (see renderCodePreview):
       .preview-code.preview-code-monaco          ← scroll container (this one)
         > .monaco-editor                          ← color-cascade anchor
             > <span class="mtk*">…                ← Monaco token spans
   so Monaco's own `.monaco-editor { overflow: visible }` reset can't reach
   this scroll container. */
.preview-code-monaco {
    flex: 1 1 0;
    min-height: 0;
    padding: 20px 20px 20px 0;
    white-space: pre;
    counter-reset: cf-tpl-line;
    overflow: auto;
    /* Match the editor pane. Monaco's bundled `.monaco-editor` CSS sets a
       different default monospace stack (SF Mono first); the actual editor
       overrides that via `monaco.editor.create({fontFamily})`. Pin the same
       value here so the preview reads at the same width/height as the editor. */
    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.5;
}

/* The inner wrapper carries Monaco's `.monaco-editor` class for colour cascade,
   so we have to override its font there too — otherwise its rule wins on the
   spans containing the actual text. */
.preview-code-monaco > .monaco-editor,
.preview-code-monaco > .monaco-editor * {
    font-family: 'Menlo', 'Monaco', 'Courier New', monospace !important;
    font-size: 12px;
    line-height: 1.5;
}

/* Monaco's colorize() emits <br> between lines AND wraps each line in a
   <span>/<div> with display:block. Without hiding the <br>, you get double
   line-breaks (one from block, one from <br>). */
.preview-code-monaco > .monaco-editor > br {
    display: none;
}

.preview-code-monaco > .monaco-editor > span,
.preview-code-monaco > .monaco-editor > div {
    counter-increment: cf-tpl-line;
    display: block;
    padding-left: 56px;
    position: relative;
}

.preview-code-monaco > .monaco-editor > span::before,
.preview-code-monaco > .monaco-editor > div::before {
    content: counter(cf-tpl-line);
    position: absolute;
    left: 0;
    width: 40px;
    text-align: right;
    color: #858585;
    user-select: none;
}

.preview-empty {
    padding: 60px 20px;
    text-align: center;
    color: #858585;
}

.code-line {
    display: flex;
    gap: 16px;
}

.code-line-number {
    color: #858585;
    text-align: right;
    width: 32px;
    user-select: none;
    flex-shrink: 0;
}

.code-content {
    flex: 1;
    white-space: pre;
}

/* Template Variables Form */
.template-variables {
    padding: 20px;
    background: #1E1E1E;
}

.variables-header {
    font-size: 14px;
    font-weight: 600;
    color: #FFFFFF;
    margin-bottom: 16px;
}

.variable-field {
    margin-bottom: 16px;
}

.variable-label {
    display: block;
    font-size: 13px;
    color: #CCCCCC;
    margin-bottom: 6px;
    font-weight: 500;
}

.variable-input {
    width: 100%;
    background: #3C3C3C;
    border: 1px solid #454545;
    border-radius: 4px;
    padding: 8px 12px;
    color: #CCCCCC;
    font-size: 13px;
    outline: none;
    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
}

.variable-input:focus {
    border-color: #007ACC;
    background: #2D2D2D;
}

/* Custom themed dropdown */
.variable-dropdown {
    position: relative;
    width: 100%;
    outline: none;
}
.variable-dropdown.disabled {
    opacity: 0.5;
    pointer-events: none;
}
.variable-dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
}
.variable-dropdown-value {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.variable-dropdown-arrow {
    font-size: 12px;
    color: #858585;
    flex-shrink: 0;
    margin-left: 8px;
}
.variable-dropdown-menu {
    z-index: 10000;
    background: #3C3C3C;
    border: 1px solid #454545;
    border-radius: 4px;
    max-height: 240px;
    overflow-y: auto;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.variable-dropdown-item {
    padding: 6px 12px;
    font-size: 13px;
    color: #CCCCCC;
    cursor: pointer;
    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
}
.variable-dropdown-item:hover,
.variable-dropdown-item.highlighted {
    background: #094771;
    color: #FFFFFF;
}
.variable-dropdown-item.selected {
    background: #04395E;
    color: #FFFFFF;
}
.variable-dropdown-other {
    border-top: 1px solid #454545;
    font-style: italic;
    color: #858585;
}
.variable-dropdown-other:hover,
.variable-dropdown-other.highlighted {
    color: #FFFFFF;
}
.variable-dropdown-group-label {
    padding: 6px 12px 2px;
    font-size: 11px;
    font-weight: 600;
    color: #858585;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

body.theme-light .variable-dropdown-menu {
    background: #FFFFFF;
    border-color: #D0D0D0;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
body.theme-light .variable-dropdown-item {
    color: #252526;
}
body.theme-light .variable-dropdown-item:hover,
body.theme-light .variable-dropdown-item.highlighted {
    background: #E8E8E8;
    color: #111111;
}
body.theme-light .variable-dropdown-item.selected {
    background: #D6EBFF;
    color: #005FB8;
}
body.theme-light .variable-dropdown-other {
    border-top-color: #D0D0D0;
    color: #616161;
}
body.theme-light .variable-dropdown-group-label {
    color: #616161;
}

.variable-custom-wrap {
    width: 100%;
    display: flex;
    gap: 6px;
    align-items: center;
}

.variable-custom-wrap .variable-input {
    flex: 1;
}

.variable-custom-back {
    background: transparent;
    border: 1px solid #454545;
    color: #cccccc;
    border-radius: 3px;
    padding: 6px 8px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}

.variable-custom-back:hover {
    background: #3c3c3c;
    color: #ffffff;
}

body.theme-light .variable-custom-back { border-color: #d0d0d0; color: #333; }
body.theme-light .variable-custom-back:hover { background: #e8e8e8; }

/* Modal Footer */
.template-modal .modal-footer {
    height: 70px;
    padding: 16px 20px;
    border-top: 1px solid #1E1E1E;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #2D2D2D;
    border-radius: 0 0 8px 8px;
}

.filename-input-wrapper {
    flex: 1;
    max-width: 400px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.filename-label {
    font-size: 13px;
    color: #CCCCCC;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

.filename-input {
    flex: 1;
    background: #3C3C3C;
    border: 1px solid #454545;
    border-radius: 4px;
    padding: 8px 12px;
    color: #CCCCCC;
    font-size: 13px;
    outline: none;
    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
}

.filename-input:focus {
    border-color: #007ACC;
    background: #2D2D2D;
}

.modal-actions {
    display: flex;
    gap: 12px;
}

.template-modal .btn {
    padding: 8px 20px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    border: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.template-modal .btn-secondary {
    background: transparent;
    color: #CCCCCC;
    border: 1px solid #454545;
}

.template-modal .btn-secondary:hover {
    background: #3A3D41;
    border-color: #858585;
}

.template-modal .btn-primary {
    background: #007ACC;
    color: #FFFFFF;
}

.template-modal .btn-primary:hover {
    background: #0098FF;
}

.template-modal .btn-primary:disabled {
    background: #454545;
    color: #858585;
    cursor: not-allowed;
}

/* ============================================================
   Light theme overrides — driven by body.theme-light (set by
   Home.toggleTheme). Every dark surface/border/text rule above
   gets a paired light counterpart so the modal looks native in
   both themes. Vivid pill colors are deliberately kept the same
   since the chip backgrounds already have high contrast.
   ============================================================ */
body.theme-light .template-modal {
    background: #F3F3F3;
    border-color: #D4D4D4;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}
body.theme-light .template-modal .modal-header {
    background: #ECECEC;
    border-bottom-color: #D4D4D4;
}
body.theme-light .template-modal .modal-title       { color: #1F1F1F; }
body.theme-light .template-modal .modal-close       { color: #616161; }
body.theme-light .template-modal .modal-close:hover { background: #E0E0E0; color: #1F1F1F; }

body.theme-light .template-list-panel {
    background: #FFFFFF;
    border-right-color: #D4D4D4;
}
body.theme-light .template-search {
    border-bottom-color: #E5E5E5;
}
body.theme-light .search-input {
    background: #FFFFFF;
    border-color: #D0D0D0;
    color: #1F1F1F;
}
body.theme-light .search-input:focus {
    background: #FFFFFF;
    border-color: #007ACC;
}
body.theme-light .search-icon          { color: #717171; }
body.theme-light .category-header      { color: #717171; }

body.theme-light .template-item:hover     { background: #ECECEC; }
body.theme-light .template-item.selected  { background: #D6EBFF; border-left-color: #007ACC; }
body.theme-light .template-icon           { color: #616161; }
body.theme-light .template-name           { color: #1F1F1F; }
body.theme-light .template-item.selected .template-name { color: #003B6E; }
body.theme-light .template-item.selected .template-icon { color: #007ACC; }
body.theme-light .template-description    { color: #333333; }

/* Module-slug tag inside section headers */
body.theme-light .category-module-tag {
    background: #E5E5E5;
    color: #1F1F1F;
}

/* Preview panel */
body.theme-light .template-preview-panel { background: #F3F3F3; }
body.theme-light .preview-header         { border-bottom-color: #D4D4D4; }
body.theme-light .preview-template-name  { color: #1F1F1F; }
body.theme-light .preview-template-description { color: #333333; }
body.theme-light .preview-tabs {
    background: #ECECEC;
    border-bottom-color: #D4D4D4;
}
body.theme-light .preview-tab            { color: #616161; }
body.theme-light .preview-tab:hover      { color: #1F1F1F; }
body.theme-light .preview-tab.active     { color: #1F1F1F; border-bottom-color: #007ACC; }

/* Code preview pane — flip background + default token color. Monaco's
   .mtk* color classes are theme-driven globally, so toggling theme on
   the editor side re-tints the colorized HTML for us. */
body.theme-light .preview-code,
body.theme-light .preview-code-monaco {
    background: #FFFFFF;
    color: #1F1F1F;
}
body.theme-light .preview-code-monaco > .monaco-editor > span::before,
body.theme-light .preview-code-monaco > .monaco-editor > div::before,
body.theme-light .code-line-number {
    color: #9A9A9A;
}
body.theme-light .preview-empty { color: #717171; }

/* Variables form */
body.theme-light .template-variables { background: #FFFFFF; }
body.theme-light .variables-header   { color: #1F1F1F; }
body.theme-light .variable-label     { color: #1F1F1F; }
body.theme-light .variable-input {
    background: #FFFFFF;
    border-color: #D0D0D0;
    color: #1F1F1F;
}
body.theme-light .variable-input:focus {
    background: #FFFFFF;
    border-color: #007ACC;
}

/* Footer */
body.theme-light .template-modal .modal-footer {
    background: #ECECEC;
    border-top-color: #D4D4D4;
}
body.theme-light .filename-label  { color: #1F1F1F; }
body.theme-light .filename-input {
    background: #FFFFFF;
    border-color: #D0D0D0;
    color: #1F1F1F;
}
body.theme-light .filename-input:focus {
    background: #FFFFFF;
    border-color: #007ACC;
}

/* Buttons */
body.theme-light .template-modal .btn-secondary {
    background: transparent;
    color: #1F1F1F;
    border-color: #D0D0D0;
}
body.theme-light .template-modal .btn-secondary:hover {
    background: #E0E0E0;
    border-color: #9A9A9A;
}
body.theme-light .template-modal .btn-primary:disabled {
    background: #D4D4D4;
    color: #9A9A9A;
}