/* ==========================================================================
   Naeron RestBI V2 API Explorer — v6
   Full-width sidebar · Fetch stats · Paging · Sort · Column toggle
   ========================================================================== */

:root {
  --bg-canvas: #F3F3F1;
  --bg-surface: #FFFFFF;
  --bg-muted: #ECEAE6;
  --bg-input: #F5F5F3;
  --bg-hover: #E5E3DF;
  --bg-overlay: rgba(0,0,0,0.45);
  --text-primary: #1a1a1a;
  --text-secondary: #4a4a48;
  --text-tertiary: #7a7a77;
  --accent: #D96B0C;
  --accent-hover: #BF5C06;
  --accent-bg: #FFF3E0;
  --accent-text: #8B4513;
  --ok-bg: #DEF2DE; --ok-text: #176217;
  --err-bg: #FCE4E4; --err-text: #8B1A1A;
  --warn-bg: #FDF3D8; --warn-text: #6B4F00;
  --info-bg: #E0EFFE; --info-text: #1A527A;
  --border: #D5D5D2;
  --border-strong: #B5B5B2;
  --font-sans: 'SF Pro Display','Helvetica Neue','Geist Sans',system-ui,sans-serif;
  --font-mono: 'SF Mono','Geist Mono','JetBrains Mono','Consolas',monospace;
  --radius: 8px;
  --topbar-h: 42px;
}

[data-theme="dark"] {
  --bg-canvas: #161616; --bg-surface: #1e1e1e; --bg-muted: #282828;
  --bg-input: #1a1a1a; --bg-hover: #333; --bg-overlay: rgba(0,0,0,0.7);
  --text-primary: #ECECEB; --text-secondary: #A8A8A5; --text-tertiary: #6E6E6B;
  --accent: #E8840F; --accent-hover: #F09520; --accent-bg: #3D2E1A; --accent-text: #F0C080;
  --ok-bg: #1C3420; --ok-text: #6DD06D;
  --err-bg: #3D1C1C; --err-text: #F08080;
  --warn-bg: #3D3418; --warn-text: #E0C060;
  --info-bg: #1A2D3D; --info-text: #70B8E8;
  --border: #333; --border-strong: #4a4a4a;
}

*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg-canvas);color:var(--text-primary);font-family:var(--font-sans);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased}
code{font-family:var(--font-mono);font-size:.82em;background:var(--bg-muted);padding:2px 6px;border-radius:4px;border:1px solid var(--border)}

/* ---- ONBOARDING ---- */
.onboarding-overlay{position:fixed;inset:0;background:var(--bg-overlay);display:flex;align-items:center;justify-content:center;z-index:2000;padding:20px}
.onboarding-overlay.hidden{display:none}
.onboarding-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);padding:36px;width:100%;max-width:440px;display:flex;flex-direction:column;gap:18px}
.onboarding-card h2{font-size:1.15rem;font-weight:700;letter-spacing:-.02em}
.onboarding-card p{font-size:.88rem;color:var(--text-secondary);line-height:1.6}
.health-indicator{display:flex;align-items:center;gap:8px;font-size:.8rem;font-weight:600;padding:8px 12px;border-radius:6px;border:1px solid var(--border);background:var(--bg-muted);color:var(--text-secondary)}
.health-dot{width:8px;height:8px;border-radius:50%;background:var(--text-tertiary);flex-shrink:0}
.health-dot.online{background:#22C55E}.health-dot.offline{background:#EF4444}
.health-dot.checking{background:var(--accent);animation:pulsedot 1s infinite}
@keyframes pulsedot{0%,100%{opacity:1}50%{opacity:.3}}

/* ---- SHELL ---- */
.app-shell{display:flex;flex-direction:column;min-height:100vh}
.app-shell.hidden{display:none}
.top-bar{display:flex;justify-content:space-between;align-items:center;padding:8px 20px;border-bottom:1px solid var(--border);background:var(--bg-surface);height:var(--topbar-h);flex-shrink:0}
.top-bar-brand{display:flex;align-items:baseline;gap:10px}
.top-bar-title{font-size:.95rem;font-weight:700;letter-spacing:-.02em}
.top-bar-actions{display:flex;align-items:center;gap:8px}
.version-tag{font-size:.65rem;font-weight:700;color:var(--info-text);background:var(--info-bg);padding:2px 8px;border-radius:9999px}
.theme-toggle{width:28px;height:28px;border-radius:6px;border:1px solid var(--border);background:var(--bg-muted);color:var(--text-secondary);font-size:.85rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s}
.theme-toggle:hover{background:var(--bg-hover);color:var(--text-primary)}
.docs-link{font-size:.76rem;font-weight:600;color:var(--text-secondary);text-decoration:none;padding:5px 10px;border:1px solid var(--border);border-radius:6px;transition:all .12s}
.docs-link:hover{color:var(--text-primary);background:var(--bg-muted)}

.app-body-grid{display:grid;grid-template-columns:310px 1fr;flex:1}
@media(max-width:900px){.app-body-grid{grid-template-columns:1fr}.sidebar{position:static!important;height:auto!important}}

/* ---- SIDEBAR ---- */
.sidebar{border-right:1px solid var(--border);background:var(--bg-surface);padding:14px;position:sticky;top:var(--topbar-h);height:calc(100vh - var(--topbar-h));overflow-y:auto;display:flex;flex-direction:column;gap:12px}
.card{border:1px solid var(--border);border-radius:var(--radius);padding:14px;background:var(--bg-surface);display:flex;flex-direction:column;gap:10px}
.card-title{font-size:.8rem;font-weight:700;padding-bottom:6px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:6px}

/* ---- MAIN ---- */
.main-area{padding:16px 20px;display:flex;flex-direction:column;gap:14px;min-width:0;min-height:calc(100vh - var(--topbar-h))}

/* ---- FORM ---- */
.form-group{display:flex;flex-direction:column;gap:4px}
.label-row{display:flex;align-items:center;gap:6px}
.field-label{font-size:.76rem;font-weight:700;color:var(--text-secondary)}
.info-trigger{width:16px;height:16px;border-radius:50%;border:1px solid var(--border);background:var(--bg-muted);color:var(--text-tertiary);font-size:.58rem;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .12s;font-family:var(--font-sans);flex-shrink:0}
.info-trigger:hover{background:var(--accent-bg);border-color:var(--accent);color:var(--accent)}
input[type="text"],input[type="number"],input[type="date"],select{width:100%;padding:7px 10px;background:var(--bg-input);border:1px solid var(--border);border-radius:6px;color:var(--text-primary);font-family:var(--font-sans);font-size:.86rem;outline:none;transition:border-color .12s}
input:focus,select:focus{border-color:var(--accent)}
input::placeholder{color:var(--text-tertiary)}
.row-2col{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.shortcut-hint{text-align:center;font-size:.68rem;color:var(--text-tertiary)}
.shortcut-hint kbd{font-family:var(--font-mono);font-size:.66rem;background:var(--bg-muted);border:1px solid var(--border);padding:1px 4px;border-radius:3px}

/* ---- BUTTONS ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 14px;border-radius:6px;font-weight:700;font-size:.82rem;cursor:pointer;border:none;transition:all .12s;width:100%;font-family:var(--font-sans)}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--accent);color:#FFF}
.btn-primary:hover{background:var(--accent-hover)}
.btn-outline{background:var(--bg-surface);color:var(--text-primary);border:1px solid var(--border)}
.btn-outline:hover{background:var(--bg-muted);border-color:var(--border-strong)}
.btn-sm{padding:4px 10px;font-size:.74rem;width:auto}
.btn-back{background:none;border:1px solid var(--border);color:var(--text-secondary);padding:4px 10px;border-radius:6px;font-size:.74rem;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:4px;transition:all .12s;font-family:var(--font-sans)}
.btn-back:hover{background:var(--bg-muted);color:var(--text-primary)}
.btn-inspect-row{background:var(--accent);color:#FFF;border:none;padding:4px 10px;border-radius:6px;font-size:.7rem;font-weight:700;cursor:pointer;transition:all .12s;font-family:var(--font-sans);white-space:nowrap}
.btn-inspect-row:hover{background:var(--accent-hover)}
.copy-btn{background:var(--bg-muted);border:1px solid var(--border);color:var(--text-secondary);padding:3px 8px;border-radius:4px;font-size:.66rem;font-weight:700;cursor:pointer;font-family:var(--font-sans);transition:all .12s;white-space:nowrap}
.copy-btn:hover{background:var(--accent-bg);border-color:var(--accent);color:var(--accent)}
.copy-btn.copied{background:var(--ok-bg);border-color:transparent;color:var(--ok-text)}

/* ---- BADGES ---- */
.status-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:6px;font-size:.74rem;font-weight:700;white-space:nowrap}
.badge-idle{background:var(--bg-muted);color:var(--text-tertiary)}
.badge-loading{background:var(--warn-bg);color:var(--warn-text)}
.badge-success{background:var(--ok-bg);color:var(--ok-text)}
.badge-error{background:var(--err-bg);color:var(--err-text)}
.badge-info{background:var(--info-bg);color:var(--info-text)}
.badge-accent{background:var(--accent-bg);color:var(--accent-text)}

.url-row{display:flex;align-items:center;gap:8px}
.url-preview{flex:1;font-family:var(--font-mono);font-size:.74rem;color:var(--text-secondary);background:var(--bg-muted);padding:7px 12px;border-radius:6px;border:1px solid var(--border);word-break:break-all;overflow:hidden}
.url-preview .m-label{font-weight:800;color:var(--ok-text)}

/* ---- TABS ---- */
.tabs-row{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);padding-bottom:6px;gap:8px;flex-wrap:wrap}
.tabs-group{display:flex;gap:2px}
.tab-btn{background:none;border:none;color:var(--text-tertiary);padding:4px 10px;font-size:.76rem;font-weight:700;cursor:pointer;border-radius:6px;transition:all .12s;font-family:var(--font-sans)}
.tab-btn.active{background:var(--text-primary);color:var(--bg-surface)}
.tab-btn:hover:not(.active){color:var(--text-primary);background:var(--bg-muted)}
.tabs-actions{display:flex;align-items:center;gap:8px}
.context-tag{font-size:.7rem;font-weight:700;color:var(--accent-text);background:var(--accent-bg);padding:2px 10px;border-radius:9999px}
.tab-content{display:none;padding-top:10px;flex:1}
.tab-content.active{display:flex;flex-direction:column}

/* ---- TABLE TAB GRID: Stats + Table ---- */
.table-tab-grid{display:grid;grid-template-columns:200px 1fr;gap:14px;flex:1;min-height:0}
@media(max-width:900px){.table-tab-grid{grid-template-columns:1fr}.fetch-stats-panel{max-height:180px}}

.fetch-stats-panel{background:var(--bg-muted);border:1px solid var(--border);border-radius:var(--radius);padding:12px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;font-size:.76rem;max-height:calc(100vh - 220px)}
.fetch-stats-title{font-weight:700;font-size:.78rem;padding-bottom:6px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:4px}
.fetch-stat-value{font-size:1.1rem;font-weight:800;color:var(--accent);line-height:1.2}
.fetch-stat-label{font-size:.68rem;color:var(--text-tertiary)}
.fetch-stat-row{display:flex;flex-direction:column;gap:1px;padding:4px 0;border-bottom:1px solid var(--border)}
.fetch-stat-row:last-child{border-bottom:none}
.fetch-timeline{display:flex;flex-direction:column;gap:4px;margin-top:4px}
.fetch-entry{display:flex;flex-direction:column;gap:1px;padding:5px 8px;background:var(--bg-surface);border:1px solid var(--border);border-radius:4px;font-size:.7rem}
.fetch-entry-num{font-weight:700;color:var(--accent)}
.fetch-entry-detail{color:var(--text-tertiary)}

.table-content-area{display:flex;flex-direction:column;gap:8px;min-width:0;min-height:0}

/* ---- TABLE TOOLBAR ---- */
.table-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.table-toolbar .search-box{flex:1;min-width:160px}
.table-toolbar .search-box input{font-size:.82rem;padding:6px 10px 6px 30px}
.table-toolbar .search-box::before{width:10px;height:10px;left:9px}
.table-toolbar .search-box::after{left:17px;top:calc(50% + 4px);height:4px}

.col-toggle-wrapper{position:relative}
.col-toggle-menu{position:absolute;top:100%;right:0;background:var(--bg-surface);border:1px solid var(--border);border-radius:6px;padding:8px;z-index:50;min-width:180px;max-height:260px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.col-toggle-menu label{display:flex;align-items:center;gap:6px;font-size:.74rem;color:var(--text-secondary);padding:3px 4px;border-radius:4px;cursor:pointer}
.col-toggle-menu label:hover{background:var(--bg-hover)}
.col-toggle-menu input[type="checkbox"]{width:14px;height:14px;accent-color:var(--accent)}

/* ---- DATA TABLE ---- */
.table-scroll{flex:1;overflow:auto;border:1px solid var(--border);border-radius:var(--radius);max-height:calc(100vh - 280px)}
table{width:100%;border-collapse:collapse;font-size:.8rem;text-align:left}
th{background:var(--bg-muted);color:var(--text-secondary);padding:7px 10px;position:sticky;top:0;border-bottom:2px solid var(--border);font-weight:700;font-size:.7rem;letter-spacing:.02em;z-index:5;cursor:pointer;user-select:none;white-space:nowrap}
th:hover{background:var(--bg-hover)}
th .sort-icon{font-size:.6rem;margin-left:3px;opacity:.5}
th.sorted .sort-icon{opacity:1;color:var(--accent)}
td{padding:7px 10px;border-bottom:1px solid var(--border);white-space:nowrap}
tr:hover td{background:var(--bg-hover)}
.cell-name{font-weight:700}
.pill{display:inline-block;padding:2px 8px;border-radius:9999px;font-size:.66rem;font-weight:700}
.pill-yes{background:var(--ok-bg);color:var(--ok-text)}.pill-no{background:var(--bg-muted);color:var(--text-tertiary)}
.empty-state{padding:36px 20px;text-align:center;color:var(--text-tertiary);font-size:.86rem}

/* ---- PAGINATION ---- */
.pagination-bar{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 0;border-top:1px solid var(--border);flex-wrap:wrap}
.page-btn{background:var(--bg-muted);border:1px solid var(--border);color:var(--text-secondary);padding:3px 9px;border-radius:4px;font-size:.72rem;font-weight:700;cursor:pointer;font-family:var(--font-sans);transition:all .12s}
.page-btn:hover{background:var(--bg-hover);border-color:var(--border-strong)}
.page-btn.active{background:var(--accent);color:#FFF;border-color:var(--accent)}
.page-btn:disabled{opacity:.4;cursor:default}
.page-info{font-size:.72rem;color:var(--text-tertiary);font-weight:600}

/* Auto-fetch progress bar */
.auto-fetch-bar{background:var(--info-bg);border:1px solid var(--border);border-radius:6px;padding:8px 12px;display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--info-text);font-weight:600}
.auto-fetch-bar .spinner{width:14px;height:14px;border:2px solid var(--info-text);border-top-color:transparent;border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.error-guidance{background:var(--err-bg);border:1px solid var(--border);border-radius:6px;padding:12px 14px;margin-top:8px;display:flex;flex-direction:column;gap:4px}
.error-guidance strong{font-size:.82rem;color:var(--err-text)}
.error-guidance p{font-size:.82rem;color:var(--text-secondary);line-height:1.5}

/* History */
.history-list{display:flex;flex-direction:column;gap:4px}
.history-item{display:flex;flex-direction:column;gap:4px;padding:8px 10px;border:1px solid var(--border);border-radius:6px;background:var(--bg-muted);font-size:.76rem}
.history-item-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.history-item-details{display:flex;gap:6px;flex-wrap:wrap;font-size:.7rem;color:var(--text-tertiary)}
.history-url{font-family:var(--font-mono);font-size:.68rem;color:var(--text-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.history-meta{display:flex;align-items:center;gap:6px;flex-shrink:0}
.history-time{color:var(--text-tertiary);font-size:.68rem}

/* Schema Tooltip */
.schema-tooltip{position:fixed;background:var(--bg-surface);border:1px solid var(--border-strong);border-radius:6px;padding:10px 14px;font-size:.76rem;z-index:100;pointer-events:none;max-width:260px;line-height:1.5;opacity:0;transition:opacity .12s}
.schema-tooltip.visible{opacity:1}
.schema-tooltip .tt-title{font-weight:700;margin-bottom:3px;color:var(--accent)}
.schema-tooltip .tt-row{color:var(--text-secondary)}

/* ---- MODAL ---- */
.modal-backdrop{position:fixed;inset:0;background:var(--bg-overlay);display:flex;justify-content:center;align-items:center;z-index:1000;opacity:0;pointer-events:none;transition:opacity .12s}
.modal-backdrop.open{opacity:1;pointer-events:auto}
.modal-box{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);width:90%;max-width:480px;padding:22px;display:flex;flex-direction:column;gap:12px}
.modal-box-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);padding-bottom:10px}
.modal-box-title{font-size:.92rem;font-weight:700}
.modal-close-btn{width:24px;height:24px;border-radius:6px;border:1px solid var(--border);background:var(--bg-muted);color:var(--text-secondary);font-size:.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s}
.modal-close-btn:hover{background:var(--err-bg);color:var(--err-text);border-color:transparent}
.modal-box-body{font-size:.86rem;color:var(--text-primary);line-height:1.6;display:flex;flex-direction:column;gap:10px}
.modal-label{font-size:.68rem;font-weight:700;color:var(--text-tertiary);letter-spacing:.04em;margin-bottom:2px}
.modal-snippet{background:var(--bg-muted);padding:8px 12px;border-radius:6px;font-family:var(--font-mono);font-size:.76rem;border:1px solid var(--border)}

/* Discovery search */
.disc-search{position:relative}
.disc-search input{padding-left:32px;font-size:.82rem}
.disc-search::before{content:'';position:absolute;left:10px;top:50%;transform:translateY(-50%);width:12px;height:12px;border:2px solid var(--text-tertiary);border-radius:50%}
.disc-search::after{content:'';position:absolute;left:20px;top:calc(50% + 5px);width:2px;height:5px;background:var(--text-tertiary);transform:rotate(-45deg);transform-origin:top left}