/* Shared styling for the designer's "Select Template" and "Select Multi" picker/preview/create-new
   windows. Both TemplatePropertySection and MultiPropertySection are kept as SEPARATE components but
   render their chrome from this single, non-scoped stylesheet so they can never drift apart again.
   Only content-specific pieces (window title, field label wording, row icon glyph, data source)
   differ — those live in each component's markup, not here.

   Source of truth: these values were taken from the Select Template design. Do NOT re-introduce
   component-scoped (.razor.css) copies of these rules; edit them here so both stay in sync. */

.pi-template-picker {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pi-template-browse {
    width: 28px;
    height: 28px;
    border: 1px solid var(--kailo-border);
    border-radius: 4px;
    background: var(--kailo-background);
    color: var(--kailo-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pi-template-browse:hover {
    background: color-mix(in srgb, var(--kailo-primary) 12%, transparent);
    border-color: var(--kailo-primary);
}

.pi-template-validation {
    margin: 0 0 12px;
    padding: 8px 10px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--kailo-error) 8%, var(--kailo-background));
    color: var(--kailo-error);
    font-size: 12px;
    border: 1px solid color-mix(in srgb, var(--kailo-error) 35%, transparent);
}

/* ---- Tab bar (mirrors the designer-mode toolbar pill chrome) ---- */
.pi-tpl-tabbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    margin-bottom: 12px;
    background: #eaf3fc;
    border: 1px solid #cfe2f6;
    border-radius: 6px;
}

/* Push the Preview qualifier + confirm to the right of the Back button on the same row. */
.pi-tpl-tabbar-actions {
    margin-left: auto;
}

.pi-tpl-tab {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: #374151;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    cursor: pointer;
}

.pi-tpl-tab > i {
    opacity: 0.85;
}

.pi-tpl-tab:hover {
    background: #e1edfb;
}

.pi-tpl-tab-active {
    color: #0a6dbc;
    background: #e1edfb;
    border-color: #2e8fd0;
    font-weight: 700;
}

.pi-tpl-tab-back {
    color: #0a6dbc;
}

[data-theme="dark"] .pi-tpl-tabbar {
    background: #11293a;
    border-color: #1c668e;
}

[data-theme="dark"] .pi-tpl-tab {
    color: #d0d0d0;
}

[data-theme="dark"] .pi-tpl-tab:hover {
    background: #16384f;
}

[data-theme="dark"] .pi-tpl-tab-active,
[data-theme="dark"] .pi-tpl-tab-back {
    color: #7cc0f0;
    background: #16384f;
    border-color: #2e8fd0;
}

/* ---- Step windows (Picker / Preview / Create New) ---- */

.pi-tpl-step {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 320px;
}

.pi-tpl-toolbar {
    padding: 0;
}

.pi-tpl-list {
    border: 1px solid var(--kailo-border);
    border-radius: 6px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    min-height: 260px;
    max-height: 360px;
    background: var(--kailo-background);
}

.pi-tpl-preview-name {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--kailo-contrast);
    padding-bottom: 4px;
}

.pi-tpl-preview-name > i {
    color: var(--kailo-primary);
}

.pi-tpl-preview-pane {
    border: 1px solid var(--kailo-border);
    border-radius: 6px;
    padding: 10px;
    overflow: auto;
    min-height: 300px;
    max-height: 440px;
    background: var(--kailo-moderate-contrast);
}

.pi-tpl-create-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 260px;
}

.pi-tpl-field-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--kailo-contrast);
    margin-top: 4px;
}

.pi-tpl-help {
    font-size: 12px;
    color: var(--kailo-light-text-on-background);
    margin-top: 4px;
}

/* Footer / actions */
.pi-tpl-footer {
    display: flex;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid var(--kailo-background-accent);
    gap: 8px;
}

.pi-tpl-footer-split {
    justify-content: space-between;
}

.pi-tpl-footer-end {
    justify-content: flex-end;
}

.pi-tpl-confirm-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Picker list rows */
.pi-template-loading {
    text-align: center;
    color: var(--kailo-light-text-on-background);
    font-size: 12px;
    padding: 24px 20px;
}

.pi-template-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--kailo-background-accent);
    border-radius: 0;
    background: none;
    text-align: left;
    padding: 10px 12px;
    cursor: pointer;
    font-size: 13px;
    color: var(--kailo-contrast);
}

.pi-template-option:last-child {
    border-bottom: none;
}

.pi-template-option .pi-tpl-option-name {
    flex: 1 1 auto;
}

.pi-template-option .pi-tpl-option-chevron {
    color: var(--kailo-light-text-on-background);
    font-size: 11px;
}

.pi-template-option:hover {
    background: color-mix(in srgb, var(--kailo-primary) 12%, transparent);
    color: var(--kailo-primary-accent);
}

.pi-template-option:hover .pi-tpl-option-chevron {
    color: var(--kailo-primary-accent);
}

.pi-template-selected {
    background: var(--kailo-primary);
    color: var(--kailo-on-background);
}

.pi-template-selected .pi-tpl-option-chevron {
    color: var(--kailo-on-background);
}