/* ============================================================================
   VIZ CONFIG PANEL — Config-first flow for visualization pages
   ============================================================================

   Shown as an overlay covering the visualization area until the user
   confirms a scope with "عرض". Uses the design tokens from
   base/variables.css and is RTL-aware.

   ============================================================================ */

/* Overlay covering the visualization canvas area */
.viz-config-overlay {
    position: absolute;
    inset: 0;
    z-index: var(--z-panel);
    background: var(--color-surface-primary);
    overflow-y: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: var(--space-6);
    direction: rtl;
}

/* The panel itself */
.viz-config-panel {
    width: 100%;
    max-width: 900px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--card-shadow);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    height: fit-content;
    font-family: var(--font-ui);
    direction: rtl;
    text-align: right;
}

/* Header */
.viz-config-header h3 {
    font-family: var(--font-heading);
    font-size: var(--font-size-2xl);
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
}

.viz-config-subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

/* Sections */
.viz-config-section {
    background: var(--color-surface-secondary);
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.viz-config-section > h4 {
    font-family: var(--font-heading);
    font-size: var(--font-size-md);
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border-subtle);
}

/* Parameter rows (label + control) */
.viz-param-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
}

.viz-param-row:last-child {
    margin-bottom: 0;
}

.viz-param-row label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    min-width: 180px;
}

.viz-param-row select,
.viz-param-row input[type="number"],
.viz-number-input {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    background: var(--color-surface-secondary);
    color: var(--color-text-primary);
    font-family: var(--font-ui);
    font-size: var(--font-size-sm);
}

.viz-param-row input[type="number"],
.viz-number-input {
    width: 110px;
}

.viz-param-row input[type="range"],
.viz-range-input {
    flex: 1;
    min-width: 160px;
    accent-color: var(--color-primary);
}

.viz-param-row select:focus,
.viz-param-row input:focus {
    border-color: var(--color-primary);
}
/* Suppress the outline only for pointer focus; keyboard focus keeps the
   global :focus-visible ring (these rules would otherwise outrank it). */
.viz-param-row select:focus:not(:focus-visible),
.viz-param-row input:focus:not(:focus-visible) {
    outline: none;
}

/* Document picker inside a param row */
.viz-doc-picker {
    align-items: flex-start;
}

.viz-doc-picker .document-search-box {
    flex: 1;
    min-width: 240px;
}

/* ============================================================================
   BOUNDED SELECTOR LISTS
   ============================================================================

   The title/author/genre selectors are shared with the filter modal, where
   their height is managed by the modal itself. Inside the config panel an
   unbounded list (thousands of rows) pushes the estimate section and the
   "عرض" button off-screen — bound each option list and let it scroll
   internally instead. Scoped under .viz-config-panel so the filter-modal
   usage is unaffected. */

/* Books & authors lists: a direct max-height makes each list a fixed-height
   scroll area — the same mechanism that worked at 240px, just taller so the
   scroll bar fills the pane. (Relying on the grid/flex height chain was
   unreliable: the list ignored it and expanded to every item, stretching the
   whole panel.) ~440px fills the box without running the whole window. */
.viz-config-panel .title-list,
.viz-config-panel .author-list {
    max-height: 440px;
    overflow-y: auto;
}

/* Genre tree isn't a two-column transfer — keep it to a moderate scroll box. */
.viz-config-panel .genre-list {
    max-height: 240px;
    overflow-y: auto;
}

/* Keep the two-column selectors from stretching the panel horizontally. */
.viz-config-panel .selector-column {
    min-width: 0;
}

/* ============================================================================
   EXPORT (تنزيل) POPUP MENU — shared by the three viz footers
   ============================================================================ */

.viz-export-wrapper {
    position: relative;
    display: inline-block;
}

.viz-export-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    inset-inline-start: 0;
    min-width: 190px;
    background: var(--color-white, #fff);
    border: 1px solid var(--color-primary, #8B7355);
    border-radius: var(--radius-sm, 6px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    padding: 0.25rem 0;
    direction: rtl;
    /* Above the footer bar (--z-nav: 1000) */
    z-index: 1100;
}

.viz-export-menu button,
.viz-export-menu a {
    display: block;
    width: 100%;
    padding: 0.5rem 1rem;
    background: none;
    border: none;
    text-align: right;
    font-family: var(--font-primary, 'Amiri', serif);
    font-size: 0.95rem;
    color: var(--color-text-primary, #333);
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
}

.viz-export-menu button:hover,
.viz-export-menu a:hover {
    background: var(--color-primary-light, #f5f0e8);
}

/* Invisible click-away layer that closes the menu. Sits BELOW the footer
   bar (--z-nav: 1000): a fixed layer above it would also cover the menu,
   which lives inside the footer's stacking context. Footer buttons remain
   clickable while the menu is open — clicking them acts normally. */
.viz-export-backdrop {
    position: fixed;
    inset: 0;
    z-index: 900;
    background: transparent;
}

/* ============================================================================
   ESTIMATE READOUT
   ============================================================================ */

.viz-estimate-stats {
    display: flex;
    gap: var(--space-5);
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
}

.viz-estimate-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface-sunken);
    border-radius: var(--radius-md);
    min-width: 110px;
}

.viz-estimate-stat .stat-value {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    color: var(--color-text-primary);
    direction: ltr; /* keep separators readable for latin digits */
}

.viz-estimate-stat .stat-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.viz-estimate-loading {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    padding: var(--space-2) 0;
}

.viz-estimate-error {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    color: var(--color-danger);
    font-size: var(--font-size-sm);
}

.viz-retry-button {
    padding: var(--space-1) var(--space-3);
    background: var(--color-button-secondary);
    color: var(--color-text-inverse);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: var(--font-size-sm);
}

.viz-retry-button:hover {
    background: var(--color-button-secondary-hover);
}

/* Recommendation pill — ok / heavy / too-large */
.viz-recommendation {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-3);
}

.viz-recommendation.ok {
    background: var(--p-brown-100);
    color: var(--p-brown-800);
    border: 1px solid var(--p-brown-300);
}

.viz-recommendation.heavy {
    background: var(--p-amber-100);
    color: var(--p-amber-800);
    border: 1px solid var(--p-amber-300);
}

.viz-recommendation.too-large {
    background: var(--p-red-100);
    color: var(--p-red-800);
    border: 1px solid var(--p-red-300);
}

/* CSV export */
.viz-export-row {
    margin-top: var(--space-2);
}

.viz-export-button {
    display: inline-block;
    padding: var(--space-2) var(--space-5);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
    font-family: var(--font-ui);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.viz-export-button:hover {
    background: var(--color-primary-dark);
}

.viz-export-hint {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    margin-top: var(--space-2);
}

/* ============================================================================
   ACTIONS
   ============================================================================ */

.viz-config-actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.viz-render-button {
    padding: var(--space-3) var(--space-10);
    background: var(--color-button-primary);
    color: var(--color-text-inverse);
    border: none;
    border-radius: var(--radius-lg);
    font-family: var(--font-ui);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: var(--transition-bg);
}

.viz-render-button:hover:not(:disabled) {
    background: var(--color-button-primary-hover);
}

.viz-render-button:disabled {
    background: var(--p-gray-300);
    color: var(--p-gray-500);
    cursor: not-allowed;
}

.viz-blocked-hint {
    color: var(--p-amber-800);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 768px) {
    .viz-config-overlay {
        padding: var(--space-3);
    }

    .viz-config-panel {
        padding: var(--space-4);
    }

    .viz-param-row label {
        min-width: 100%;
    }

    .viz-estimate-stats {
        gap: var(--space-2);
    }
}

/* ---- Curated-books summary + workbench opener (config panel) ---- */
.viz-scope-summary {
    margin: 0 0 8px;
    font-family: var(--font-ui, sans-serif);
    font-size: 0.85rem;
    color: var(--color-text-primary, #333);
    background: var(--color-surface-sunken, #f3ecdd);
    border: 1px solid var(--color-border-subtle, #e6dcc8);
    border-radius: var(--radius-sm, 4px);
    padding: 6px 10px;
}
.viz-scope-button {
    padding: 8px 16px;
    background: var(--color-primary, #8B4513);
    color: var(--color-text-inverse, #fff);
    border: none;
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
    font-family: var(--font-ui, sans-serif);
    font-size: 0.9rem;
}
.viz-scope-button:hover { background: var(--color-primary-dark, #6B3410); }