/* Structure Viewer 2.2 – Viewer Tab Layout */

/* ══════════════════════════════════════════════════════════════
   TOOLBAR
══════════════════════════════════════════════════════════════ */

/* Single height token – all three toolbar controls must match */
:root { --sv-toolbar-h: 40px; }

.sv-viewer-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

/* ── Type pills ─────────────────────────────────────────────── */
.sv-type-pills {
    display: flex;
    background: var(--sv-surface-2);
    border: 1px solid var(--sv-border-2);
    border-radius: var(--sv-radius-sm);
    padding: 3px;
    gap: 2px;
    flex-shrink: 0;
    height: var(--sv-toolbar-h);
    box-sizing: border-box;
    align-items: center;
}

.sv-type-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    height: calc(var(--sv-toolbar-h) - 8px); /* subtract 2×padding of parent */
    border-radius: 4px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    background: transparent;
    color: var(--sv-text-3);
    transition: all var(--sv-transition);
    white-space: nowrap;
}
.sv-type-pill:hover { color: var(--sv-text-2); background: var(--sv-surface-3); }
.sv-type-pill.active {
    background: var(--sv-accent);
    color: #fff;
    box-shadow: 0 2px 8px var(--sv-accent-glow);
}

/* ── Item picker ────────────────────────────────────────────── */
.sv-item-picker {
    position: relative;
    flex: 1;
    min-width: 200px;
    max-width: 340px;
}

.sv-item-picker-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    height: var(--sv-toolbar-h);
    box-sizing: border-box;
    background: var(--sv-surface-2);
    border: 1px solid var(--sv-border-2);
    border-radius: var(--sv-radius-sm);
    color: var(--sv-text);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--sv-transition);
    text-align: left;
}
.sv-item-picker-btn:hover {
    border-color: var(--sv-border-2);
    background: var(--sv-surface-3);
}
.sv-item-picker.sv-picker-open .sv-item-picker-btn {
    border-color: var(--sv-border-2);
    box-shadow: none;
}
.sv-item-picker-btn span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-picker-caret { flex-shrink: 0; color: var(--sv-text-3); transition: transform var(--sv-transition); }
.sv-item-picker.sv-picker-open .sv-picker-caret { transform: rotate(180deg); }

.sv-item-picker-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--sv-surface);
    border: 1px solid var(--sv-border-2);
    border-radius: var(--sv-radius);
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    z-index: 2000;
    overflow: hidden;
    display: none;
}
.sv-item-picker.sv-picker-open .sv-item-picker-dropdown { display: block; }

.sv-picker-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--sv-border);
    color: var(--sv-text-3);
}
#sv-picker-search {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--sv-text);
    font-size: 13px;
}
#sv-picker-search::placeholder { color: var(--sv-text-3); }

.sv-picker-list {
    max-height: 260px;
    overflow-y: auto;
}
.sv-picker-item {
    padding: 9px 14px;
    font-size: 13px;
    color: var(--sv-text-2);
    cursor: pointer;
    transition: background var(--sv-transition), color var(--sv-transition);
}
.sv-picker-item:hover { background: var(--sv-surface-2); color: var(--sv-text); }
.sv-picker-item.active {
    background: var(--sv-accent-dim);
    color: var(--sv-accent-text);
    font-weight: 600;
}
.sv-picker-loading { padding: 12px 14px; font-size: 13px; color: var(--sv-text-3); }

/* ── Live search ─────────────────────────────────────────────── */
.sv-viewer-search {
    flex: 1;
    min-width: 200px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--sv-surface-2);
    border: 1px solid var(--sv-border-2);
    border-radius: var(--sv-radius-sm);
    padding: 0 12px;
    height: var(--sv-toolbar-h);
    box-sizing: border-box;
    color: var(--sv-text-3);
    transition: border-color var(--sv-transition), box-shadow var(--sv-transition);
}
.sv-viewer-search:focus-within {
    border-color: var(--sv-border-2);
    box-shadow: none;
    color: var(--sv-text-2);
}
#sv-live-search {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--sv-text);
    font-size: 13px;
}
#sv-live-search::placeholder { color: var(--sv-text-3); }
.sv-search-clear {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--sv-text-3);
    font-size: 16px;
    line-height: 1;
    padding: 0 2px;
    transition: color var(--sv-transition);
}
.sv-search-clear:hover { color: var(--sv-text); }

/* ── Explorer refresh button ─────────────────────────────── */
.sv-refresh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex-shrink: 0;
    padding: 0 16px;
    height: var(--sv-toolbar-h);
    box-sizing: border-box;
    background: var(--sv-surface-2);
    border: 1px solid var(--sv-border-2);
    border-radius: var(--sv-radius-sm);
    color: var(--sv-text-2);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--sv-transition), background var(--sv-transition), border-color var(--sv-transition);
}
.sv-refresh-btn:hover {
    background: var(--sv-surface-hover);
    border-color: var(--sv-border-2);
    color: var(--sv-text);
}
.sv-refresh-btn.sv-refreshing {
    pointer-events: none;
    opacity: 0.7;
}
.sv-refresh-btn.sv-refreshing svg {
    animation: sv-spin-ccw 0.7s linear infinite;
}


/* ── Lazy-load states ────────────────────────────────────────── */
.sv-tree-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 12.5px;
    color: var(--sv-text-3);
}
.sv-tree-error {
    padding: 10px 16px;
    font-size: 12.5px;
    color: var(--sv-red, #ef4444);
    margin: 0;
}
.sv-spin {
    animation: sv-spin 0.8s linear infinite;
    flex-shrink: 0;
}
@keyframes sv-spin     { to { transform: rotate( 360deg); } }
@keyframes sv-spin-ccw { to { transform: rotate(-360deg); } }

.sv-lazy-tree {
    padding: 0 0 8px 16px;
}


/* ══════════════════════════════════════════════════════════════
   FILE TYPE TAGS
══════════════════════════════════════════════════════════════ */
.sv-filetype-tags {
    display: flex;
    column-gap: 6px;
    row-gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    align-items: center;
}

.sv-ft-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    border: 1px solid var(--sv-border-2);
    background: var(--sv-surface-2);
    color: var(--sv-text-3);
    transition: all var(--sv-transition);
    letter-spacing: 0.02em;
    user-select: none;
}
.sv-ft-tag:hover {
    background: var(--sv-surface-3);
    color: var(--sv-text-2);
    border-color: var(--sv-border-2);
}
.sv-ft-tag.active {
    background: color-mix(in srgb, var(--tag-color, var(--sv-accent)) 18%, transparent);
    border-color: var(--tag-color, var(--sv-accent));
    color: var(--tag-color, var(--sv-accent-text));
}

/* ══════════════════════════════════════════════════════════════
   TWO-PANEL BODY
══════════════════════════════════════════════════════════════ */
.sv-viewer-body {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 16px;
    align-items: start;
}

/* ── Duplicate scanner.php button row – always hidden in new layout ── */
/* scanner.php outputs .sv-plugin-heading > .sv-controls with Expand/Collapse/Copy/Export.
   Our new .sv-tree-actions row replaces it. Suppress entirely. */
.sv-tree-scroll .sv-plugin-heading .sv-controls,
.sv-tree-scroll .sv-plugin-heading .sv-button-group,
.sv-tree-scroll .sv-plugin-heading .sv-export-wrapper { display: none !important; }

/* When no item is selected (All mode) the tree action bar is hidden */
.sv-tree-actions.sv-hidden { display: none !important; }


.sv-tree-panel {
    background: var(--sv-surface);
    border: 1px solid var(--sv-border-2);
    border-radius: var(--sv-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Action bar inside tree panel */
.sv-tree-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--sv-border);
    background: var(--sv-surface-2);
    flex-shrink: 0;
    gap: 8px;
}
.sv-tree-action-group { display: flex; gap: 6px; align-items: center; }

/* All tree action buttons share the same height */
:root { --sv-btn-h: 32px; }

.sv-tree-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 12px;
    height: var(--sv-btn-h);
    box-sizing: border-box;
    border-radius: var(--sv-radius-sm);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--sv-border-2);
    background: var(--sv-surface-3);
    color: var(--sv-text-2);
    transition: all var(--sv-transition);
    white-space: nowrap;
}
.sv-tree-btn:hover {
    background: var(--sv-surface-hover);
    color: var(--sv-text);
}
.sv-tree-btn-accent {
    background: var(--sv-accent) !important;
    border-color: var(--sv-accent) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px var(--sv-accent-glow);
}
.sv-tree-btn-accent:hover {
    background: var(--sv-accent-hover) !important;
    border-color: var(--sv-accent-hover) !important;
}

/* Search status bar */
.sv-search-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: var(--sv-accent-dim);
    border-bottom: 1px solid var(--sv-accent-glow);
    font-size: 12px;
    color: var(--sv-accent-text);
    flex-shrink: 0;
}
.sv-nav-btn {
    background: none;
    border: 1px solid var(--sv-accent-glow);
    border-radius: 3px;
    color: var(--sv-accent-text);
    font-size: 14px;
    line-height: 1;
    padding: 1px 6px;
    cursor: pointer;
    transition: background var(--sv-transition);
}
.sv-nav-btn:hover { background: var(--sv-accent-dim); }

/* Tree scroll area */
.sv-tree-scroll {
    flex: 1;
    overflow-y: auto;
    max-height: calc(100vh - 280px);
    min-height: 200px;
    padding: 16px 0 16px 0;
}

/* Override sv-container inside tree scroll */
.sv-tree-scroll .sv-container {
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0 16px;
    box-shadow: none;
}

/* Search: matched files are simply visible (no highlight – rest are hidden) */
.sv-search-match .sv-file-name {
    /* nothing – visible files are the search result */
}
/* Current match: no colour change, navigator just scrolls to it */
.sv-match-current .sv-file-name {
    /* intentionally unstyled – position tracked by JS counter only */
}

/* No results state */
.sv-no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    gap: 12px;
    color: var(--sv-text-3);
    text-align: center;
}
.sv-no-results svg { opacity: 0.4; }
.sv-no-results p { margin: 0; font-size: 13px; }

/* ══════════════════════════════════════════════════════════════
   INFO PANEL
══════════════════════════════════════════════════════════════ */
.sv-info-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: sticky;
    top: 80px;
}

.sv-info-card {
    background: var(--sv-surface);
    border: 1px solid var(--sv-border-2);
    border-radius: var(--sv-radius);
    padding: 16px;
    overflow: hidden;
}

.sv-info-card-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sv-text-3);
    margin-bottom: 12px;
}

/* Plugin/theme info header */
.sv-info-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.sv-info-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--sv-accent-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--sv-accent-text);
}
.sv-info-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--sv-text);
    line-height: 1.3;
}
.sv-info-type {
    font-size: 11px;
    color: var(--sv-text-3);
    margin-top: 2px;
}
.sv-info-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    border-top: 1px solid var(--sv-border);
    font-size: 12px;
}
.sv-info-meta-key { color: var(--sv-text-3); }
.sv-info-meta-val { color: var(--sv-text-2); font-weight: 500; text-align: right; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-info-desc {
    font-size: 11.5px;
    color: var(--sv-text-3);
    line-height: 1.6;
    margin-top: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Stats rows */
.sv-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    border-top: 1px solid var(--sv-border);
    font-size: 12.5px;
}
.sv-stat-row:first-of-type { border-top: none; padding-top: 0; }
.sv-stat-row-label { color: var(--sv-text-3); }
.sv-stat-row-val   { color: var(--sv-text); font-weight: 700; font-variant-numeric: tabular-nums; }

/* File breakdown */
.sv-breakdown-row { margin-bottom: 8px; }
.sv-breakdown-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    font-size: 11.5px;
}
.sv-breakdown-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.sv-breakdown-ext  { color: var(--sv-text-2); font-weight: 600; flex: 1; }
.sv-breakdown-count { color: var(--sv-text-3); }
.sv-breakdown-bar-wrap {
    height: 4px;
    background: var(--sv-border);
    border-radius: 2px;
    overflow: hidden;
}
.sv-breakdown-bar {
    height: 100%;
    border-radius: 2px;
    min-width: 2px;
    transition: width 0.6s ease;
    opacity: 0.85;
}

/* Placeholder */
.sv-info-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px 16px;
    gap: 12px;
    color: var(--sv-text-3);
}
.sv-info-placeholder p { margin: 0; font-size: 12.5px; line-height: 1.6; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
    .sv-viewer-body { grid-template-columns: 1fr; }
    .sv-info-panel { position: static; flex-direction: row; flex-wrap: wrap; }
    .sv-info-card  { flex: 1; min-width: 200px; }
}

@media (max-width: 560px) {
    .sv-viewer-toolbar { flex-direction: column; align-items: stretch; }
    .sv-item-picker    { max-width: none; }
    .sv-viewer-search  { max-width: none; }
    .sv-type-pills     { align-self: flex-start; }
    .sv-tree-scroll    { max-height: 60vh; }
}

/* ── Explorer: info panel cards ─────────────────────────────── */
.sv-app.sv-light-mode .sv-info-card {
    background: #ffffff;
    border-color: #e2e8f0;
}
.sv-app.sv-light-mode .sv-info-name {
    color: #0f172a;
}
.sv-app.sv-light-mode .sv-info-card-title {
    color: #94a3b8;
}
.sv-app.sv-light-mode .sv-info-type,
.sv-app.sv-light-mode .sv-info-meta-key {
    color: #94a3b8;
}
.sv-app.sv-light-mode .sv-info-meta-val {
    color: #334155;
}
.sv-app.sv-light-mode .sv-info-desc {
    color: #64748b;
}
.sv-app.sv-light-mode .sv-stat-row-label {
    color: #64748b;
}
.sv-app.sv-light-mode .sv-stat-row-val {
    color: #0f172a;
}
.sv-app.sv-light-mode .sv-breakdown-ext {
    color: #334155;
}
.sv-app.sv-light-mode .sv-breakdown-count {
    color: #94a3b8;
}
.sv-app.sv-light-mode .sv-info-placeholder {
    color: #94a3b8;
}

/* ── Explorer: file-type tags ───────────────────────────────── */
.sv-app.sv-light-mode .sv-ft-tag:not(.active) {
    background: #ffffff;
    border-color: #e2e8f0;
    color: #64748b;
}

/* ── Explorer: search status bar ───────────────────────────── */
.sv-app.sv-light-mode .sv-search-status {
    background: rgba(139,92,246,0.08);
    border-bottom-color: rgba(139,92,246,0.15);
}

/* ── Explorer: no-results state ─────────────────────────────── */
.sv-app.sv-light-mode .sv-no-results {
    color: #94a3b8;
}

/* ── Explorer: file name links ──────────────────────────────── */
.sv-app.sv-light-mode .sv-file-name {
    color: #334155;
}
.sv-app.sv-light-mode .sv-file-name:hover {
    color: #0f172a;
    background: #f1f5f9;
}
.sv-app.sv-light-mode .sv-type-pills,
.sv-app.sv-light-mode .sv-item-picker-btn,
.sv-app.sv-light-mode .sv-viewer-search,
.sv-app.sv-light-mode .sv-refresh-btn {
    background: #ffffff;
    border-color: #e2e8f0;
    color: #475569;
}
.sv-app.sv-light-mode .sv-refresh-btn:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.sv-app.sv-light-mode .sv-item-picker-dropdown {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.sv-app.sv-light-mode .sv-picker-item:hover { background: #f8fafc; }
.sv-app.sv-light-mode .sv-picker-search-wrap { border-bottom-color: #e2e8f0; }

.sv-app.sv-light-mode .sv-ft-tag {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #64748b;
}

.sv-app.sv-light-mode .sv-tree-panel,
.sv-app.sv-light-mode .sv-info-card {
    background: #ffffff;
    border-color: #e2e8f0;
}

.sv-app.sv-light-mode .sv-tree-actions {
    background: #f8fafc;
    border-bottom-color: #e2e8f0;
}

.sv-app.sv-light-mode .sv-tree-btn {
    background: #ffffff;
    border-color: #e2e8f0;
    color: #475569;
}

.sv-app.sv-light-mode .sv-info-meta-row,
.sv-app.sv-light-mode .sv-stat-row {
    border-top-color: #f1f5f9;
}

.sv-app.sv-light-mode .sv-breakdown-bar-wrap {
    background: #e2e8f0;
}