.bold-link {
	font-weight: bold !important;
	text-decoration: none !important;
}

body{
font-family: Arial;
background:#f4f6f9;
margin:0;
}

/* Brand icon used in topbar */
.brand-icon{
	width:32px;
	height:32px;
	object-fit:contain;
	vertical-align:middle;
	margin-right:10px;
}

/* brand layout */
.brand{ display:flex; align-items:center; gap:10px; }
.brand-text{ line-height:1; }
.brand-title{ font-size:18px; font-weight:700; }
.brand-subtitle{ font-size:12px; color:#666; margin-top:2px; }

body.dark .brand-subtitle{ color:#ccc; }

.topbar{
background:white;
padding:15px;
border-bottom:1px solid #ddd;
}

.topbar .top-controls{
	position: absolute;
	right: 20px;
	top: 14px;
	display: flex;
	gap:8px;
	align-items: center;
}

/* Topbar control unified sizing and select styling */
.topbar .top-controls select,
.topbar .top-controls .btn{
	height:36px;
	display:inline-flex;
	align-items:center;
}

/* Make select look like text inputs */
.topbar .top-controls select{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding:6px 36px 6px 10px; /* room for arrow on the right */
	font-size:14px;
	border:1px solid #ccc;
	border-radius:6px;
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 12px;
	cursor: pointer;
}

/* Custom arrow (light theme) - SVG data URI */
.topbar .top-controls select{
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path fill='%23333' d='M0 0l5 6 5-6z'/></svg>");
}

/* Dark theme variant for select */
body.dark .topbar .top-controls select{
	background-color: #2a2a2a;
	color: #e6e6e6;
	border:1px solid #444;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path fill='%23ddd' d='M0 0l5 6 5-6z'/></svg>");
}

/* Ensure small variant inside top-controls matches height/padding */
.topbar .top-controls .btn.small{ padding:6px 10px; font-size:14px; }

/* Remove default arrow on IE */
.topbar .top-controls select::-ms-expand{ display:none; }

.container{
padding:15px;
}

.panel{
background:white;
padding:15px;
border-radius:10px;
margin-bottom:15px;
}

.row input{
margin-right:15px;
padding:8px;
border:1px solid #ccc;
border-radius:5px;
}

.btn{
background:#1976d2;
color:white;
padding:8px 15px;
border:none;
border-radius:5px;
cursor:pointer;
margin-top:10px;
}

.workspace{
display:flex;
gap:10px;
}

.sidebar{
width:250px;
background:white;
padding:10px;
border-radius:10px;
height:70vh;
overflow:auto;
}

.vsep{
	width:1px;
	height:70vh;
	background:#ddd;
	border:none;
	margin:0 8px;
}

.table-item{
padding:8px;
cursor:pointer;
border-bottom:1px solid #eee;
}

.table-item:hover{
background:#f0f0f0;
}

.content{
flex:1;
background:white;
padding:10px;
border-radius:10px;
}

.actions button{
margin-right:10px;
padding:8px;
border:none;
border-radius:5px;
cursor:pointer;
}

#sql{
width:100%;
height:600px;
margin-top:10px;
font-family: monospace;
font-size:13px;
white-space:pre;
overflow:auto;
}

/* Ace editor container styles (replace textarea styling) */
#editor{
	width:100%;
	height:600px;
	margin-top:10px;
	font-family: monospace;
	font-size:13px;
}

/* Tables styling for detail panels */
.section table{
	border-collapse: collapse;
	width: 100%;
}
.section table th{
	background: #e9ecef;
	padding: 6px 8px;
	border: 1px solid #555555;
	text-align: left;
}
.section table td{
	padding: 3px;
	border: 1px solid #555555;
}
.section table tr:nth-child(odd){
	background: #ffffff;
}
.section table tr:nth-child(even){
	background: #f8f9fa;
}

.small{
	font-size:12px;
	padding:4px 6px;
	margin-left:8px;
}

/* Dark theme overrides */
body.dark{
	background:#1e1e1e;
	color:#e6e6e6;
}
body.dark .topbar,
body.dark .panel,
body.dark .sidebar,
body.dark .content{
	background:#2a2a2a;
	border-color:#444;
}
body.dark .table-item:hover{background:#333333}
body.dark .section table th{background:#3a3a3a}
body.dark .section table td{ background: #111111; }

.section-block h3{ color: #000080; margin:6px 0 8px 0; }

/* category title color in dark theme */
body.dark .section-block h3{ color: #ffff00; }

.category-sep{ border:none; height:1px; background:#e0e0e0; margin:10px 0; }

.section-hr{ border:none; height:1px; background:#d0d0d0; margin:8px 0; }

/* hr before editor top actions */
.editor-top-hr{ border:none; height:1px; background:#d0d0d0; margin:0 0 12px 0; }

/* dark theme: slightly darker HRs for better contrast */
body.dark .section-hr{ background:#444444; }
body.dark .editor-top-hr{ background:#444444; }