/*
 * SuperSheet side-panel styles.
 * Extracted from inline <style> blocks during the .razor.cs refactor of:
 *   - AutomationsPanel
 *   - ColumnEditorPanel (uses .column-editor-panel-* defined elsewhere)
 *   - CommentsPanel
 *   - ConditionalFormatPanel
 *   - FiltersPanel
 *   - FormsPanel
 */

/* ── AutomationsPanel ─────────────────────────────────────────────── */
.auto-panel { display: flex; flex-direction: column; gap: 0.75rem; padding: 0.75rem; }
.auto-loading { display: flex; gap: 0.5rem; align-items: center; padding: 1rem; color: var(--rz-text-secondary-color); }
.auto-list-header { display: flex; justify-content: flex-end; }
.auto-empty { display: flex; flex-direction: column; gap: 0.5rem; align-items: center; padding: 2rem 0; color: var(--rz-text-secondary-color); text-align: center; }
.auto-list { display: flex; flex-direction: column; gap: 0.5rem; }
.auto-card { padding: 0.625rem 0.75rem; }
.auto-card-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.auto-card-info { flex: 1; min-width: 0; }
.auto-card-actions { display: flex; gap: 0.25rem; align-items: center; }
.auto-error { margin-top: 0.5rem; font-size: 0.75rem; }

.auto-editor { display: flex; flex-direction: column; gap: 0.75rem; padding-bottom: 3rem; }
.auto-editor-footer {
    position: sticky; bottom: 0; background: var(--rz-base-background-color);
    padding-top: 0.5rem;
    display: flex; gap: 0.5rem; justify-content: flex-end;
    border-top: 1px solid var(--rz-base-200);
}

.auto-action-card {
    border: 1px solid var(--rz-base-200);
    border-radius: var(--rz-border-radius);
    padding: 0.5rem;
    background: var(--rz-base-50);
}
.auto-action-toolbar { display: flex; justify-content: flex-end; gap: 0.125rem; margin-bottom: 0.25rem; }

.auto-history { display: flex; flex-direction: column; gap: 0.375rem; padding: 0.25rem 0; }
.auto-history-row { display: flex; flex-direction: column; gap: 0.125rem; padding: 0.375rem 0.5rem; border: 1px solid var(--rz-base-200); border-radius: var(--rz-border-radius); background: var(--rz-base-50); }
.auto-history-line { display: flex; align-items: center; gap: 0.5rem; }
.auto-history-name { font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auto-history-error { color: var(--rz-danger); font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── CommentsPanel ────────────────────────────────────────────────── */
.cp-root { display: flex; flex-direction: column; height: 100%; gap: .5rem; padding: .5rem; }
.cp-filters { display: flex; flex-wrap: wrap; gap: .25rem; }
.cp-filter { font-size: 12px; padding: .125rem .5rem; border-radius: 999px;
             border: 1px solid var(--rz-base-300); background: var(--rz-base-100);
             color: var(--rz-text-color); cursor: pointer; transition: all .15s; }
.cp-filter.active { background: var(--rz-primary); color: white; border-color: var(--rz-primary); }
.cp-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: .75rem; }
.cp-record-group { border: 1px solid var(--rz-base-200); border-radius: 6px; overflow: hidden; }
.cp-record-head { display: flex; align-items: center; gap: .5rem; padding: .375rem .625rem;
                  background: var(--rz-base-100); cursor: pointer; font-size: 12px; font-weight: 600; }
.cp-record-head .rzi { font-size: 16px; color: var(--rz-text-secondary-color); }
.cp-record-body { padding: .5rem; display: flex; flex-direction: column; gap: .5rem; }
.cp-comment { display: flex; gap: .5rem; padding: .5rem; border-radius: 6px;
              background: var(--rz-base-50); border: 1px solid var(--rz-base-200); }
.cp-comment.reply { margin-left: 1.75rem; background: var(--rz-base-100); }
.cp-comment.resolved { opacity: .6; }
.cp-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--rz-primary-lighter);
             color: var(--rz-primary-dark); display: inline-flex; align-items: center;
             justify-content: center; font-size: 12px; font-weight: 600; flex-shrink: 0; }
.cp-body-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.cp-meta { display: flex; align-items: center; gap: .375rem; font-size: 11px; color: var(--rz-text-secondary-color); }
.cp-author { font-weight: 600; color: var(--rz-text-color); }
.cp-body { font-size: 13px; color: var(--rz-text-color); white-space: pre-wrap; word-wrap: break-word; }
.cp-body strong { font-weight: 700; }
.cp-body em { font-style: italic; }
.cp-mention { display: inline-block; padding: 0 .25rem; border-radius: 4px;
              background: var(--rz-primary-lighter); color: var(--rz-primary-dark); font-weight: 500; }
.cp-actions { display: flex; gap: .25rem; margin-top: .25rem; }
.cp-actions button { font-size: 11px; padding: .125rem .375rem; border-radius: 4px;
                     border: 1px solid transparent; background: transparent;
                     color: var(--rz-text-secondary-color); cursor: pointer; }
.cp-actions button:hover { background: var(--rz-base-200); color: var(--rz-text-color); }
.cp-compose { border-top: 1px solid var(--rz-base-200); padding-top: .5rem;
              display: flex; flex-direction: column; gap: .375rem; position: relative; }
.cp-compose textarea { width: 100%; min-height: 60px; max-height: 180px; resize: vertical;
                       padding: .375rem .5rem; border-radius: 6px; border: 1px solid var(--rz-base-300);
                       font-family: inherit; font-size: 13px; }
.cp-compose-actions { display: flex; justify-content: space-between; align-items: center; }
.cp-mention-pop { position: absolute; bottom: 100%; left: 0; right: 0;
                   max-height: 200px; overflow-y: auto;
                   background: var(--rz-base-background-color);
                   border: 1px solid var(--rz-base-300); border-radius: 6px;
                   box-shadow: 0 4px 12px rgba(0,0,0,.12); z-index: 10; }
.cp-mention-option { display: flex; align-items: center; gap: .5rem;
                      padding: .375rem .625rem; cursor: pointer; font-size: 12px; }
.cp-mention-option:hover, .cp-mention-option.active { background: var(--rz-primary-lighter); }
.cp-empty { text-align: center; padding: 2rem 1rem; color: var(--rz-text-secondary-color); font-size: 13px; }

/* ── ConditionalFormatPanel ──────────────────────────────────────── */
.cf-panel { display: flex; flex-direction: column; gap: 0.75rem; padding: 0.75rem; }

.cf-toolbar { display: flex; gap: 0.375rem; align-items: center; }

.cf-list { display: flex; flex-direction: column; gap: 0.375rem; }
.cf-card {
    display: flex; align-items: stretch; gap: 0.25rem;
    border: 1px solid var(--rz-base-200);
    border-radius: var(--rz-border-radius);
    background: var(--rz-base-50);
}
.cf-card-body { flex: 1; padding: 0.5rem 0.625rem; cursor: pointer; min-width: 0; }
.cf-card-body:hover { background: var(--rz-base-100); }
.cf-card-head { display: flex; align-items: center; gap: 0.375rem; }
.cf-card-icon { font-size: 16px; color: var(--rz-primary); }
.cf-card-name { font-weight: 600; font-size: 0.875rem; flex: 1; }
.cf-card-count { font-size: 0.75rem; color: var(--rz-text-secondary-color); }
.cf-card-preview { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.25rem; }
.cf-card-chip {
    display: inline-flex; align-items: center;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-size: 0.6875rem;
    background: var(--rz-base-100);
    color: var(--rz-text-color);
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden; text-overflow: ellipsis;
}
.cf-card-chip-more { font-weight: 600; }
.cf-card-remove {
    background: transparent; border: none;
    padding: 0 0.5rem; cursor: pointer;
    color: var(--rz-text-secondary-color);
    border-left: 1px solid var(--rz-base-200);
}
.cf-card-remove:hover { color: var(--rz-danger); background: var(--rz-danger-lighter); }

.cf-empty, .cf-empty-rules {
    display: flex; flex-direction: column; align-items: center; gap: 0.375rem;
    padding: 1.5rem 0.5rem;
    color: var(--rz-text-secondary-color);
    text-align: center;
}
.cf-empty-icon { font-size: 2rem; opacity: 0.4; }
.cf-empty-title { font-weight: 600; font-size: 0.875rem; }
.cf-empty-caption { font-size: 0.75rem; }

.cf-editor { display: flex; flex-direction: column; gap: 0.625rem; }
.cf-editor-head { display: flex; align-items: center; gap: 0.375rem; padding-bottom: 0.25rem; border-bottom: 1px solid var(--rz-base-200); }
.cf-editor-icon { font-size: 18px; color: var(--rz-primary); }
.cf-editor-title { font-weight: 600; }

.cf-rules { display: flex; flex-direction: column; gap: 0.5rem; }
.cf-rule-card {
    display: flex; flex-direction: column; gap: 0.375rem;
    padding: 0.5rem;
    border: 1px solid var(--rz-base-200);
    border-radius: var(--rz-border-radius);
    background: var(--rz-base-50);
}
.cf-rule-line { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; }
.cf-rule-and { font-size: 0.75rem; color: var(--rz-text-secondary-color); }
.cf-rule-style { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; }
.cf-rule-bold { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.8125rem; }

.cf-editor-footer { display: flex; justify-content: flex-end; gap: 0.5rem; padding-top: 0.375rem; border-top: 1px solid var(--rz-base-200); }

/* ── FiltersPanel ─────────────────────────────────────────────────── */
.filters-panel { display: flex; flex-direction: column; gap: 0.75rem; padding: 0.75rem; }

.filters-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.filters-list { display: flex; flex-direction: column; gap: 0.375rem; }

.filters-chip {
    display: flex; align-items: stretch; gap: 0.25rem;
    border: 1px solid var(--rz-base-200);
    border-radius: var(--rz-border-radius);
    background: var(--rz-base-50);
}
.filters-chip-body { flex: 1; padding: 0.5rem 0.625rem; cursor: pointer; min-width: 0; }
.filters-chip-body:hover { background: var(--rz-base-100); }
.filters-chip-head { display: flex; align-items: center; gap: 0.375rem; }
.filters-chip-icon { font-size: 16px; color: var(--rz-primary); }
.filters-chip-name { font-weight: 600; font-size: 0.875rem; color: var(--rz-text-color); }
.filters-chip-summary {
    margin-top: 0.125rem;
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.filters-chip-remove {
    background: transparent; border: none;
    padding: 0 0.5rem; cursor: pointer;
    color: var(--rz-text-secondary-color);
    border-left: 1px solid var(--rz-base-200);
}
.filters-chip-remove:hover { color: var(--rz-danger); background: var(--rz-danger-lighter); }

.filters-empty {
    display: flex; flex-direction: column; align-items: center; gap: 0.375rem;
    padding: 2rem 0.5rem; color: var(--rz-text-secondary-color); text-align: center;
}
.filters-empty-icon { font-size: 2rem; opacity: 0.4; }
.filters-empty-title { font-weight: 600; font-size: 0.875rem; }
.filters-empty-caption { font-size: 0.75rem; }

.filters-editor { display: flex; flex-direction: column; gap: 0.625rem; }
.filters-editor-header { display: flex; align-items: center; gap: 0.375rem; padding-bottom: 0.25rem; border-bottom: 1px solid var(--rz-base-200); }
.filters-editor-icon { font-size: 18px; color: var(--rz-primary); }
.filters-editor-title { font-weight: 600; }

.filters-editor-field { display: flex; flex-direction: column; gap: 0.25rem; }
.filters-label { font-size: 0.75rem; font-weight: 600; color: var(--rz-text-secondary-color); text-transform: uppercase; letter-spacing: 0.02em; }

.filters-values-actions { display: flex; gap: 0.5rem; }
.filters-values-list {
    display: flex; flex-direction: column;
    max-height: 220px; overflow-y: auto;
    border: 1px solid var(--rz-base-200);
    border-radius: var(--rz-border-radius);
    padding: 0.25rem;
}
.filters-value-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.375rem; cursor: pointer; border-radius: 4px; }
.filters-value-item:hover { background: var(--rz-base-100); }
.filters-value-text { font-size: 0.8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.filters-editor-footer { display: flex; justify-content: flex-end; gap: 0.5rem; padding-top: 0.375rem; border-top: 1px solid var(--rz-base-200); }

/* ── FormsPanel ───────────────────────────────────────────────────── */
.forms-panel { display: flex; flex-direction: column; gap: 0.75rem; padding: 0.75rem; }
.forms-toolbar { display: flex; justify-content: flex-end; }

.forms-list { display: flex; flex-direction: column; gap: 0.5rem; }
.forms-card {
    display: flex; flex-direction: column; gap: 0.375rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--rz-base-200);
    border-radius: var(--rz-border-radius);
    background: var(--rz-base-50);
}
.forms-card-head { display: flex; align-items: center; gap: 0.5rem; }
.forms-card-icon { font-size: 18px; color: var(--rz-primary); }
.forms-card-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.forms-card-title { font-weight: 600; font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forms-card-url { font-size: 0.6875rem; color: var(--rz-primary); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forms-card-url:hover { text-decoration: underline; }
.forms-card-meta { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.forms-card-actions { display: flex; gap: 0.125rem; justify-content: flex-end; }

.forms-empty { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; padding: 1.5rem 0.5rem; color: var(--rz-text-secondary-color); text-align: center; }
.forms-empty-icon { font-size: 2rem; opacity: 0.4; }
.forms-empty-title { font-weight: 600; font-size: 0.875rem; }
.forms-empty-caption { font-size: 0.75rem; }

.forms-editor { display: flex; flex-direction: column; gap: 0.625rem; }
.forms-editor-head { display: flex; align-items: center; gap: 0.375rem; padding-bottom: 0.25rem; border-bottom: 1px solid var(--rz-base-200); }
.forms-editor-icon { font-size: 18px; color: var(--rz-primary); }
.forms-editor-title { font-weight: 600; }
.forms-editor-tabs ::deep .rz-tabview-nav { font-size: 0.8125rem; }
.forms-editor-section { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.5rem 0; }

.forms-field-row {
    display: flex; flex-direction: column; gap: 0.375rem;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--rz-base-200);
    border-radius: var(--rz-border-radius);
}
.forms-field-row.selected { background: var(--rz-primary-lighter); }
.forms-field-head { display: flex; align-items: center; gap: 0.375rem; }
.forms-field-name { font-size: 0.8125rem; font-weight: 500; flex: 1; }
.forms-field-config { display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; padding-left: 1.25rem; }
.forms-field-required { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.8125rem; }

.forms-option-row { display: flex; align-items: center; gap: 0.5rem; }
.forms-help { font-size: 0.75rem; color: var(--rz-text-secondary-color); }

.forms-editor-footer { display: flex; justify-content: flex-end; gap: 0.5rem; padding-top: 0.375rem; border-top: 1px solid var(--rz-base-200); }