@charset "utf-8";

/* ---- Content area override ---- */
.content {
	float: none;          /* style2.css's .content floats left (TBA pages); the portals centre it */
	padding: 20px;
	max-width: 1100px;
	margin: 0 auto;
}

/* ---- Portal name at the left of the nav bar (the header carries the TBA logos, like TBA itself) ---- */
.nav { position: sticky; }
.nav_portal {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	color: var(--theme-text-on-dark);
	font-size: 13px;
	font-weight: bold;
	padding: 2px 12px;
	z-index: 1;           /* above .nav_tabs, which is positioned and comes later in the markup */
}
@media (max-width: 899px) { .nav_portal { display: none; } }

/* ---- Nav user display ---- */
.nav_tabs { position: relative; }
.nav_user {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	color: var(--theme-text-on-dark);
	font-size: 13px;
	padding: 2px 12px;
}

/* ---- Forms ---- */
.form-row {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
	gap: 8px;
	clear: both;
}
.form-row label {
	min-width: 160px;
	font-weight: bold;
	text-align: right;
}
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="password"],
.form-row input[type="number"],
.form-row input[type="date"],
.form-row select {
	padding: 5px 8px;
	border: 1px solid var(--theme-border-strong);
	border-radius: 3px;
	font-size: 14px;
	min-width: 200px;
	background: var(--theme-card-bg);
	color: var(--theme-text-primary);
}
.form-row input[type="checkbox"] {
	width: 18px;
	height: 18px;
}
.hint {
	color: var(--theme-text-muted);
	font-size: 12px;
}

/* ---- Buttons ---- */
button, a.btn {
	display: inline-block;
	padding: 6px 14px;
	background: var(--theme-brand);
	color: var(--theme-text-on-dark);
	border: none;
	border-radius: 3px;
	cursor: pointer;
	font-size: 14px;
	text-decoration: none;
}
button:hover, a.btn:hover { filter: brightness(0.88); }

.btn-danger { background: var(--theme-danger-text); }


.btn-sm {
	padding: 3px 8px;
	font-size: 12px;
}
button:disabled {
	background: var(--theme-border-strong);
	cursor: not-allowed;
}

/* ---- Tables ---- */
.data-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 10px;
	background: var(--theme-card-bg);
}
.data-table th,
.data-table td {
	border: 1px solid var(--theme-border-muted);
	padding: 6px 10px;
	text-align: left;
	vertical-align: top;
}
.data-table th {
	background: var(--theme-brand);
	color: var(--theme-text-on-dark);
	font-weight: bold;
}
.data-table tr:nth-child(even) { background: var(--theme-panel-bg-alt); }
.data-table tr:hover { background: var(--theme-hover-bg); }
.data-table td a { color: var(--theme-accent-strong); }

.detail-table {
	border-collapse: collapse;
	background: var(--theme-card-bg);
}
.detail-table th,
.detail-table td {
	border: 1px solid var(--theme-border-muted);
	padding: 6px 12px;
	text-align: left;
	vertical-align: top;
}
.detail-table th {
	background: var(--theme-panel-bg);
	font-weight: bold;
	width: 170px;
	white-space: nowrap;
}

/* ---- Messages ---- */
.msg {
	display: none;
	padding: 8px 14px;
	margin: 10px 0;
	border-radius: 3px;
	font-weight: bold;
	clear: both;
}
.msg-ok    { background: var(--theme-success-bg); color: var(--theme-success); border: 1px solid var(--theme-success); }
.msg-error { background: color-mix(in srgb, var(--theme-danger-text) 14%, var(--theme-card-bg)); color: var(--theme-danger-text); border: 1px solid color-mix(in srgb, var(--theme-danger-text) 40%, var(--theme-card-bg)); }

/* ---- Toolbar ---- */
.list-toolbar {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
	clear: both;
}

/* ---- Edit panel ---- */
.edit-panel {
	background: var(--theme-card-bg);
	border: 1px solid var(--theme-border-muted);
	border-radius: 4px;
	padding: 20px;
	margin-top: 20px;
	max-width: 520px;
}
.edit-panel h3 { margin-top: 0; color: var(--theme-accent-strong); }

/* ---- Home menu grid ---- */
.menu-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 20px;
	margin-top: 10px;
	clear: both;
}
.menu-section {
	background: var(--theme-card-bg);
	border: 1px solid var(--theme-border-muted);
	border-radius: 4px;
	padding: 16px 20px;
}
.menu-section h3 {
	margin: 0 0 8px;
	font-size: 16px;
	color: var(--theme-accent-strong);
	padding: 0;
}
.menu-section p {
	margin: 0 0 14px;
	color: var(--theme-text-muted);
	font-size: 13px;
	padding: 0;
}

/* ---- Server health cards ---- */
.srv-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
	margin-top: 10px;
	clear: both;
}
.srv-card {
	background: var(--theme-card-bg);
	border: 2px solid var(--theme-border-muted);
	border-radius: 6px;
	padding: 14px 16px;
}
.srv-card.srv-ok  { border-color: var(--theme-brand); }
.srv-card.srv-err { border-color: var(--theme-danger-text); background: color-mix(in srgb, var(--theme-danger-text) 14%, var(--theme-card-bg)); }
.srv-card-title {
	font-size: 17px;
	font-weight: bold;
	color: var(--theme-accent-strong);
	margin-bottom: 10px;
}
.srv-card.srv-err .srv-card-title { color: var(--theme-danger-text); }
.srv-status-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
}
.srv-label {
	min-width: 52px;
	font-size: 12px;
	color: var(--theme-text-muted);
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: .03em;
}
.srv-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: bold;
}
.badge-ok     { background: var(--theme-success-bg); color: var(--theme-success); }
.badge-leader { background: color-mix(in srgb, var(--theme-accent-strong) 18%, var(--theme-card-bg)); color: var(--theme-accent-strong); }
.badge-warn   { background: var(--theme-warning-bg); color: var(--theme-warning); }
.badge-err    { background: color-mix(in srgb, var(--theme-danger-text) 14%, var(--theme-card-bg)); color: var(--theme-danger-text); }
.srv-card-loading { color: var(--theme-text-muted); font-style: italic; padding: 10px 0; }

/* ---- Replication role badge (cluster table) ---- */
.role-badge {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 10px;
	font-size: 12px;
	font-weight: bold;
}
.role-leader  { background: color-mix(in srgb, var(--theme-accent-strong) 18%, var(--theme-card-bg)); color: var(--theme-accent-strong); }
.role-replica { background: var(--theme-panel-bg-alt); color: var(--theme-text-muted); }

/* ---- Misc ---- */
.pre-wrap {
	white-space: pre-wrap;
	word-break: break-all;
	margin: 0;
	font-family: monospace;
	font-size: 13px;
}
.msg-cell {
	min-width: 280px;
	max-width: 520px;
	white-space: pre-wrap;
	word-break: break-word;
}
.current-row td { background: var(--theme-warning-bg); }

h2 { color: var(--theme-accent-strong); margin-top: 12px; padding-left: 0; }
h3 { color: var(--theme-accent-strong); padding-left: 0; }
h4 { color: var(--theme-accent-strong); padding-left: 0; }

/* ---- Color Themes page (portal_theme.js) ---- */
.pt_sw { display: inline-flex; border: 1px solid var(--theme-border-strong); border-radius: 3px; overflow: hidden; vertical-align: middle; }
.pt_sw span { display: inline-block; width: 24px; height: 16px; }