:root { --bg:#ffffff; --fg:#1a1a1a; --accent:#00a499; --accent-hover:#008c83; --accent-orange:#ff6b35; --muted:#6b7280; --chart-min-height: 4in; --chart-min-height-compact: 2in; --sidebar-bg:#0f172a; --sidebar-text:#e5e7eb; --sidebar-width: 240px; }
* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--fg); font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Arial,sans-serif; }
.layout { display:flex; min-height:100vh; }
.sidebar { flex: 0 0 var(--sidebar-width); width:var(--sidebar-width); background:var(--sidebar-bg); color:var(--sidebar-text); padding:1.5rem 1rem; display:flex; flex-direction:column; gap:1.5rem; box-shadow: 4px 0 12px rgba(0,0,0,0.25); position:sticky; top:0; height:100vh; transition: transform 0.25s ease, width 0.25s ease, padding 0.25s ease; z-index:950; }
.sidebar.collapsed { flex-basis:0; width:0; padding:0; transform: translateX(-100%); overflow:hidden; box-shadow:none; }
.sidebar-header { display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.05rem; letter-spacing:0.3px; }
.sidebar-logo { width:32px; height:32px; }
.sidebar-menu { display:flex; flex-direction:column; gap:8px; }
.menu-item { color:var(--sidebar-text); text-decoration:none; padding:10px 12px; border-radius:10px; font-weight:600; display:flex; align-items:center; gap:10px; transition: background 0.2s ease, color 0.2s ease; }
.menu-item:hover { background:rgba(255,255,255,0.08); color:#fff; }
.menu-item.active { background:rgba(0,164,153,0.15); color:#fff; border:1px solid rgba(0,164,153,0.35); }
.sidebar-actions { margin-top: auto; display:flex; flex-direction:column; gap:10px; }
.sidebar-actions button { width:100%; background: linear-gradient(180deg, #00a499, #008c83); border:none; padding:10px 12px; border-radius:10px; font-weight:700; box-shadow: 0 4px 10px rgba(0,0,0,0.18); }
.sidebar-actions button:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0,0,0,0.24); }
.content { flex:1; display:flex; flex-direction:column; min-width:0; }

header { padding:1.35rem 2rem; background: linear-gradient(135deg, #00a499 0%, #008c83 100%); border-bottom:2px solid #00a499; box-shadow: 0 4px 6px rgba(0,0,0,0.1); position: relative; display:flex; align-items:center; gap:16px; }
.header-left { display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.header-brand { display:flex; align-items:center; }
	.header-brand .logo { height:32px; width:auto; }
.header-title { position:absolute; left:50%; transform: translateX(-50%); display:flex; justify-content:center; width:100%; pointer-events:none; }
header h1 { margin:0; font-size:1.35rem; font-weight:700; color:#fff; text-align:center; display:flex; flex-direction:column; align-items:center; gap:4px; }
header h1 .logo { display:none; }
header h1 .title-main { font-size:1.6rem; font-weight:700; }
#sidebarToggle { background:rgba(0,0,0,0.15); border:1px solid rgba(255,255,255,0.2); color:#fff; padding:8px 10px; border-radius:8px; box-shadow:none; }
#sidebarToggle:hover { background:rgba(0,0,0,0.25); }
#controls select, #controls input, #dbControls select, #dbControls input { padding: .35rem .55rem; font-size:0.92rem; border-radius:6px; border:1px solid #cbd5e1; }
#dbControls { padding:.65rem 2rem; gap:.65rem; }
.header-actions { position:absolute; top:12px; right:16px; display:flex; gap:8px; align-items:center; }
#shutdownBtn { background:#0f172a; padding:6px 10px; border-radius:50%; min-width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; font-size:16px; }
#logoutBtn { background:var(--accent-orange); color:#fff; border-radius:50%; width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; font-size:16px; padding:0; box-shadow:0 2px 6px rgba(0,0,0,0.2); }
#logoutBtn:hover { background:#e65f2f; }
#controls { padding:.6rem 2rem; display:flex; align-items:center; gap:.65rem; flex-wrap:wrap; }
button { background: linear-gradient(180deg, #00a499, #008c83); color:#fff; border:none; padding:.45rem .9rem; border-radius:7px; cursor:pointer; font-weight:600; box-shadow: 0 2px 4px rgba(0,164,153,0.2); transition: all 0.2s ease; font-size:0.95rem; }
button:hover { transform:translateY(-1px); box-shadow: 0 4px 8px rgba(0,164,153,0.3); background: linear-gradient(180deg, #008c83, #007770); }
button:active { transform:translateY(0); }
#status { color:var(--muted); }
section { padding:1rem 2rem; }
table { width:100%; border-collapse:collapse; margin-top:.5rem; }
th, td { border-bottom:1px solid #e5e7eb; padding:.5rem .4rem; text-align:left; }
th { color:var(--muted); font-weight:500; }
#charts .grid { display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); align-items:start; }
@media (max-width:900px){ #charts .grid { grid-template-columns:1fr; } }
.chart-card { min-height: var(--chart-min-height); }
.chart-card canvas { background: #f6f8fb; padding:8px; border-radius:8px; border:1px solid #e1e6ef; height:100% !important; width:100% !important; min-height: var(--chart-min-height) !important; display:block; }
/* Monitor cards grid for many small charts */
#monitorCards.cards { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap:32px; }
#monitorCards.cards.few { grid-template-columns: repeat(2, 1fr); }
.db-row { background:#ffffff; color:#1a1a1a; border-radius:12px; padding:16px; border:1px solid #e5e7eb; display:flex; flex-direction:column; gap:16px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); transition: all 0.2s ease; margin-bottom: 16px; }
.db-row:hover { box-shadow: 0 4px 16px rgba(0,164,153,0.12); border-color:#00a499; }
.db-row.large { min-height: var(--chart-min-height); }
.db-row .meta { font-size:14px; color:#475569; margin-bottom:0; font-weight:600; display:flex; justify-content:space-between; align-items:center; }
.db-row .meta .badges { display:flex; gap:8px; align-items:center; }

/* Reorder controls */
.reorder-controls { display:flex; flex-direction:column; gap:2px; }
.reorder-btn { background:var(--accent); color:#fff; border:none; padding:2px 8px; border-radius:4px; cursor:pointer; font-size:11px; line-height:1; transition: all 0.2s ease; }
.reorder-btn:hover { background:var(--accent-hover); transform:scale(1.1); }

.badge { background:#fff; color:#222; border:1px solid #e1e6ef; padding:6px 8px; border-radius:6px; font-size:12px; display:inline-flex; gap:6px; align-items:center; }
.badge .val { font-weight:700; }
.badge .lbl { color:#475569; font-size:11px; }

.db-row .charts-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; align-items:start; }
.db-row .charts-grid canvas { width:100% !important; height: var(--chart-min-height) !important; display:block; border-radius:6px; box-shadow: 0 1px 2px rgba(16,24,40,0.03); }

/* Strong colored borders to visually differentiate charts */
.db-row .charts-grid .cpu-canvas { border: 2px solid #00a499; }
.db-row .charts-grid .dl-canvas { border: 2px solid #ff6b35; }
.db-row .charts-grid .size-canvas { border: 2px solid #00a499; }

/* Also color-code the larger detail charts */
.db-details .big-chart canvas.cpu-canvas { border: 2px solid #00a499; }
.db-details .big-chart canvas.dl-canvas { border: 2px solid #ff6b35; }
.db-details .big-chart canvas.size-canvas { border: 2px solid #00a499; }

.db-row.compact .charts-grid canvas { height: var(--chart-min-height-compact) !important; }
.db-row .chart-title { font-size:12px; color:#475569; margin-bottom:6px; }

/* CPU Stats under chart */
.cpu-stats { display: flex; gap: 12px; justify-content: center; margin-top: 8px; padding: 8px; background: linear-gradient(135deg, #f0fdfa, #ffffff); border-radius: 8px; border: 1px solid #ccf3ef; }
.cpu-stats .stat-item { display: flex; align-items: center; gap: 4px; font-size: 13px; }
.cpu-stats .stat-label { color: #64748b; font-weight: 500; }
.cpu-stats .stat-value { font-weight: 700; color: #1e293b; font-size: 14px; }
.cpu-stats .stat-item.good .stat-value { color: #10b981; }
.cpu-stats .stat-item.warn .stat-value { color: #f59e0b; }
.cpu-stats .stat-item.bad .stat-value { color: #ef4444; }

/* Also add borders to detail large charts */
/* visually-hidden utility for accessibility */
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Badge status styles */
.badge { background:#fff; color:#222; border:1px solid #e1e6ef; padding:6px 8px; border-radius:6px; font-size:12px; display:inline-flex; gap:6px; align-items:center; cursor:pointer; }
.badge:hover { transform:translateY(-1px); box-shadow:0 2px 8px rgba(0,0,0,0.08); }
.badge .val { font-weight:700; }
.badge .lbl { color:#475569; font-size:11px; }
.badge.good { border-color:#10b981; background:linear-gradient(135deg, #d1fae5, #ffffff); color:#065f46; }
.badge.good .val { color:#10b981; }
.badge.warn { border-color:#f59e0b; background:linear-gradient(135deg, #fef3c7, #ffffff); color:#92400e; }
.badge.warn .val { color:#f59e0b; }
.badge.bad { border-color:#ef4444; background:linear-gradient(135deg, #fee2e2, #ffffff); color:#991b1b; }
.badge.bad .val { color:#ef4444; }

#dbCheckboxes { max-height:240px; overflow:auto; border:1px solid #e5e7eb; padding:8px; border-radius:6px; background:#fafafa; }
.db-item { display:flex; gap:8px; align-items:center; padding:.15rem .25rem; }
.db-item input { margin:0; }
#monitorBtn, #saveDashboardBtn, #loadDashBtn, #deleteDashBtn, #refreshMetricsBtn { background:var(--accent); color:#fff; border:none; padding:.35rem .6rem; border-radius:6px; cursor:pointer; transition: background 0.2s ease; }
#monitorBtn:hover:not([disabled]), #saveDashboardBtn:hover, #loadDashBtn:hover, #deleteDashBtn:hover, #refreshMetricsBtn:hover { background:var(--accent-hover); }
#monitorBtn[disabled] { opacity:0.5; cursor:default; }

footer { padding:1.5rem 2rem; color:#6b7280; border-top:1px solid #e5e7eb; background:#f9fafb; text-align:center; font-size:0.875rem; }
footer::before { content:'⚡ '; }
footer::after { content:' ⚡'; }

@media (max-width: 960px) {
	.sidebar { position:fixed; left:0; top:0; height:100vh; transform: translateX(calc(-1 * var(--sidebar-width))); }
	.sidebar.open { transform: translateX(0); }
	.content { margin-left:0; }
	#sidebarToggle { display:inline-flex; }
}

/* Modal for enlarged charts */
.modal { position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; }
.modal-backdrop { position:absolute; inset:0; background:rgba(15,23,42,0.45); backdrop-filter: blur(2px); }
.modal-content { position:relative; background:#fff; border-radius:12px; padding:16px; width:min(960px, 94vw); height:min(640px, 80vh); box-shadow:0 20px 60px rgba(0,0,0,0.25); display:flex; flex-direction:column; gap:12px; z-index:1001; }
.modal-content h3 { margin:0; font-size:1.05rem; color:#0f172a; }
.modal-close { position:absolute; top:10px; right:10px; background:#ef4444; color:#fff; border:none; border-radius:50%; width:32px; height:32px; font-size:18px; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,0.2); }
.modal-close:hover { background:#dc2626; }
.modal canvas { flex:1; border:1px solid #e2e8f0; border-radius:8px; padding:8px; background:#f8fafc; }
.modal-stats { display:flex; flex-wrap:wrap; gap:12px; font-size:13px; color:#0f172a; padding:8px; border:1px solid #e2e8f0; border-radius:8px; background:#f8fafc; }
.modal-stats .stat { display:flex; align-items:center; gap:6px; padding:4px 8px; border-radius:6px; background:#eef2ff; color:#312e81; font-weight:600; }
.modal-stats .label { color:#475569; font-weight:600; }

/* DB Size widget labels */
.dbsize-labels {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin-top: 12px;
}
.dbsize-item { padding: 10px 12px; border-radius: 10px; background: linear-gradient(135deg, #f0fdfa, #ffffff); border: 1px solid #ccf3ef; box-shadow: 0 1px 3px rgba(0,0,0,0.04); transition: all 0.2s ease; }
.dbsize-item:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,164,153,0.15); border-color: #00a499; }
.dbsize-label { font-weight: 600; color: #475569; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.dbsize-value { font-weight: 700; color: #00a499; font-size: 16px; }

@media (max-width: 900px) {
	.dbsize-labels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
	.dbsize-labels { grid-template-columns: 1fr; }
}