/* Project database explorer. Shell, library, chat and dialogs use replit-*.css. */
.workspace-body .workspace[data-stage=database] :is(.stage-toolbar,.stage-footer) { display:none; }
.database-explorer { display:flex; flex:1; min-height:0; flex-direction:column; overflow:auto; padding:24px; gap:16px; color:var(--repl-text); background:var(--repl-panel); }
.database-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.database-heading h2 { display:flex; align-items:center; gap:10px; font-size:22px; font-weight:500; letter-spacing:-.3px; margin:8px 0; }
.database-heading h2 svg { width:22px; height:22px; color:var(--repl-blue-text); }
.database-heading p,.database-environment-note { font-size:12px; color:var(--repl-muted); margin:0; line-height:1.6; }
.database-readonly { flex-shrink:0; display:flex; gap:5px; align-items:center; color:var(--repl-blue-text); font-size:10px; background:var(--client-blue-soft); padding:6px 8px; border-radius:7px; }
.database-readonly svg,.database-footer svg { width:13px; height:13px; }
.database-controls { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; }
.database-controls label { display:grid; gap:7px; color:var(--repl-secondary); font-size:11px; min-width:0; }
.database-controls select { background:var(--repl-control); color:var(--repl-text); border:1px solid var(--repl-border-strong); height:36px; border-radius:8px; font:inherit; padding:0 10px; max-width:100%; }
.database-file-label { flex:1; min-width:140px!important; }
.database-explorer :is(.secondary,.primary,.subtle) { min-height:36px; padding:7px 10px; border-radius:8px; font-size:11px; gap:6px; }
.database-environment-note { padding:10px 12px; border:1px solid var(--repl-border); border-radius:8px; }
.database-workspace { display:flex; border:1px solid var(--repl-border); border-radius:8px; min-height:340px; flex:1; overflow:hidden; background:var(--repl-panel); }
.database-tables { width:150px; flex-shrink:0; border-right:1px solid var(--repl-border); padding:10px 6px; overflow:auto; }
.database-search { display:flex; align-items:center; gap:5px; border:1px solid var(--repl-border); border-radius:7px; background:var(--repl-panel); padding:6px; margin-bottom:12px; }
.database-search svg { width:13px; height:13px; color:var(--repl-muted); flex-shrink:0; }
.database-search input { width:100%; min-width:0; background:transparent; color:var(--repl-text); border:0; font:inherit; font-size:11px; }
.database-table-list button { display:flex; width:100%; align-items:center; gap:7px; border:1px solid transparent; border-radius:6px; padding:9px 7px; background:transparent; color:var(--repl-secondary); text-align:left; font-size:11px; }
.database-table-list button[hidden] { display:none; }
.database-table-list button[aria-pressed=true] { background:var(--repl-selected); color:var(--repl-text); border-color:var(--repl-border-strong); }
.database-table-list button:hover { background:var(--repl-hover); }
.database-table-list svg { width:13px; height:13px; flex-shrink:0; }
.database-table-list span { overflow:hidden; text-overflow:ellipsis; }
.database-table-list small { margin-left:auto; color:var(--repl-muted); }
.database-table-list p { padding:8px; color:var(--repl-muted); font-size:11px; line-height:1.5; }
.database-detail { flex:1; min-width:0; display:flex; flex-direction:column; }
.database-detail-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:14px; font-size:12px; }
.database-detail-head strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
.database-detail-head span { font-size:10px; color:var(--repl-muted); white-space:nowrap; }
.database-tabs { display:flex; border-bottom:1px solid var(--repl-border); padding:0 10px; gap:4px; }
.database-tabs button { font-size:11px; padding:10px 8px; border:0; border-bottom:2px solid transparent; background:transparent; color:var(--repl-secondary); white-space:nowrap; }
.database-tabs button[aria-selected=true] { color:var(--repl-blue-text); border-bottom-color:var(--repl-blue-text); }
.database-result-toolbar { display:flex; align-items:center; justify-content:space-between; gap:6px; padding:6px 10px; font-size:10px; color:var(--repl-muted); }
.database-result-scroll { overflow:auto; flex:1; min-height:130px; max-height:500px; }
.database-explorer table { border-collapse:collapse; width:100%; font-size:11px; white-space:nowrap; }
.database-explorer :is(th,td) { border-bottom:1px solid var(--repl-border); border-right:1px solid var(--repl-border); padding:10px 12px; text-align:left; max-width:260px; overflow:hidden; text-overflow:ellipsis; }
.database-explorer th { font-weight:500; position:sticky; top:0; background:var(--repl-control); color:var(--repl-secondary); z-index:1; }
.database-explorer th button { background:transparent; border:0; color:inherit; font:inherit; padding:0; }
.database-explorer tbody tr:hover { background:var(--repl-hover); }
.database-null { color:var(--repl-muted); font:10px ui-monospace,monospace; }
.database-pagination { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:10px; border-top:1px solid var(--repl-border); }
.database-pagination span,.database-limit-note { font-size:10px; color:var(--repl-muted); line-height:1.5; }
.database-limit-note { padding:8px 12px; margin:0; background:var(--repl-panel); }
.database-ddl { border-top:1px solid var(--repl-border); padding:14px; font-size:11px; }
.database-ddl summary { cursor:pointer; color:var(--repl-blue-text); }
.database-ddl pre { white-space:pre-wrap; overflow-wrap:anywhere; max-height:240px; overflow:auto; font:11px/1.7 ui-monospace,monospace; }
#databaseQueryForm { padding:14px; border-bottom:1px solid var(--repl-border); }
#databaseQueryForm label { display:block; color:var(--repl-secondary); font-size:11px; margin-bottom:8px; }
#databaseQueryForm textarea { width:100%; min-height:120px; resize:vertical; padding:12px; background:var(--repl-panel); color:var(--repl-text); border:1px solid var(--repl-border-strong); border-radius:8px; font:12px/1.8 ui-monospace,monospace; }
#databaseQueryForm>div { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:8px; }
#databaseQueryForm>div>span { font-size:10px; line-height:1.5; color:var(--repl-muted); }
.database-footer { display:flex; align-items:center; gap:6px; font-size:10px; line-height:1.5; color:var(--repl-muted); }
.database-alert { border:1px solid #704047; border-radius:8px; background:var(--client-error-soft); color:var(--repl-error); padding:12px; font-size:12px; line-height:1.5; }
.database-alert[hidden] { display:none; }
.database-loading { color:var(--repl-blue-text); font-size:12px; margin:0; }
.database-placeholder { padding:24px 16px; color:var(--repl-muted); font-size:12px; line-height:1.7; }
.database-empty { margin:auto; text-align:center; padding:32px 18px; max-width:430px; }
.database-empty>svg { width:32px; height:32px; color:var(--repl-blue-text); }
.database-empty h3 { font-size:17px; font-weight:500; margin:18px 0 10px; }
.database-empty p { color:var(--repl-muted); font-size:12px; line-height:1.8; margin-bottom:20px; }
.database-explorer :is(button,select,textarea,input):focus-visible { outline:2px solid var(--repl-blue-text); outline-offset:3px; }
.database-explorer button:disabled { opacity:.45; cursor:not-allowed; }
@media(max-width:1150px) {
 .database-explorer { padding:16px; gap:12px; }
 .database-heading { flex-wrap:wrap; }
 .database-tables { width:120px; }
 .database-result-toolbar { flex-wrap:wrap; }
}
@media(max-width:600px) {
 .database-heading { flex-wrap:nowrap; }
 .database-heading>div { flex:1; min-width:0; }
 .database-heading .studio-eyebrow { display:none; }
 .database-heading h2 { font-size:19px; margin:0 0 8px; }
 .database-heading p { font-size:11px; }
 .database-readonly { font-size:9px; }
 .database-workspace { flex-direction:column; flex:none; }
 .database-tables { width:100%; border-right:0; border-bottom:1px solid var(--repl-border); max-height:165px; }
 .database-table-list { display:flex; overflow:auto; gap:6px; }
 .database-table-list button { width:auto; flex-shrink:0; }
 .database-file-label { min-width:150px!important; }
 .database-controls select { font-size:12px; }
 .database-pagination span { max-width:85px; text-align:center; }
 .database-result-scroll { max-height:360px; }
}

.ops-body .home-nav .auth-nav .secondary { background:var(--repl-control); color:var(--repl-text); border-color:var(--repl-border); }