/* =====================================================================
   modern.css  -  Xeams UI modernization layer
   ---------------------------------------------------------------------
   Loaded AFTER newStyleSheet.css and AFTER the active theme CSS, so it can
   add modern STRUCTURE (radius, spacing, shadow, typography) on top of the
   theme. All COLOR here comes from the per-theme design tokens
   (--xeams-* defined in each *theme*.css :root), so every color theme and
   custom-theme keep their identity. Do not hard-code brand colors here.
   ===================================================================== */

:root{
	/* Structural tokens (same for every theme) */
	--xeams-radius: 0.6rem;
	--xeams-radius-sm: 0.4rem;
	--xeams-shadow: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.08);
	--xeams-shadow-hover: 0 6px 18px rgba(0,0,0,.12);
	--xeams-border: rgba(0,0,0,.10);
	--xeams-muted: #6c757d;
	--xeams-transition: 0.15s ease;
	--xeams-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
	/* Derived hover shade of the theme primary (graceful no-op if unsupported) */
	--xeams-primary-hover: color-mix(in srgb, var(--xeams-primary) 82%, #000);
	--xeams-primary-tint: color-mix(in srgb, var(--xeams-primary) 10%, #fff);
}

/* ------------------------------------------------------------------ *
 * 1. Base / typography
 * ------------------------------------------------------------------ */
body{
	background-color: var(--xeams-body-bg, #eef1f5);
	font-family: var(--xeams-font-sans);
	font-size: 15px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6{
	font-family: var(--xeams-font-sans);
	letter-spacing: -0.01em;
}
h1{ font-weight: 600; }

a{ transition: color var(--xeams-transition); }

/* Keyboard focus visibility (accessibility) */
a:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible{
	outline: 2px solid var(--xeams-accent);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ *
 * 2. Legacy panel bridge: make .well-info-wrap look like a modern card.
 *    ~194 pages use this pattern, so this single block modernizes them
 *    without editing each page. Theme colors still drive the header.
 * ------------------------------------------------------------------ */
.well-info-wrap{
	background: var(--xeams-surface, #fff);
	border: 1px solid var(--xeams-border);
	border-radius: var(--xeams-radius);
	box-shadow: var(--xeams-shadow);
	overflow: hidden;
	margin-bottom: 1rem;
	transition: box-shadow var(--xeams-transition);
}
.well-info-wrap:hover{
	box-shadow: var(--xeams-shadow-hover);   /* replaces the heavy dark glow */
}

.well-info-header,
.well-info-footer{
	background: var(--xeams-primary);
	color: var(--xeams-on-primary, #fff);
	border: 0 !important;
	text-align: left;
	padding: 0.55rem 1rem;
	font-weight: 600;
	font-size: 0.95rem;
	letter-spacing: 0.01em;
}
.well-info-header a,
.well-info-footer a{ color: var(--xeams-on-primary, #fff); }

/* When .well-info-header is used on a table header row (<tr class="well-info-header">
   with <th>), Bootstrap sets the cell color directly, overriding the light color
   inherited from the row. Re-assert a readable light color on those cells. */
tr.well-info-header > th,
tr.well-info-header > td,
.well-info-header th,
.well-info-header td{
	color: var(--xeams-on-primary, #fff);
}

.well-info-body{
	background: var(--xeams-surface, #fff);
	border: 0 !important;
	padding: 1rem 1.1rem;
}
.well-info-additional{
	border: 0;
	border-bottom: 1px solid var(--xeams-border);
}

/* ------------------------------------------------------------------ *
 * 3. Bootstrap cards (pages already migrated) - subtle polish
 * ------------------------------------------------------------------ */
.card{
	border-color: var(--xeams-border);
	border-radius: var(--xeams-radius);
	box-shadow: var(--xeams-shadow);
}
.card > .card-header{
	background: var(--xeams-surface, #fff);
	border-bottom: 1px solid var(--xeams-border);
	font-weight: 600;
}

/* Optional dashboard KPI card + grid helpers (opt-in via classes) */
.stat-card{
	background: var(--xeams-surface, #fff);
	border: 1px solid var(--xeams-border);
	border-left: 4px solid var(--xeams-primary);
	border-radius: var(--xeams-radius);
	box-shadow: var(--xeams-shadow);
	padding: 1rem 1.1rem;
}
.stat-card .stat-value{ font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.stat-card .stat-label{ color: var(--xeams-muted); font-size: 0.85rem; }

/* Horizontal KPI tile: large tinted icon on the left, text (label/value) on the right,
   vertically centered. Matches the StatusPanels.png reference format. */
.kpi-card{
	display: flex;
	align-items: center;
	gap: 0.9rem;
	background: var(--xeams-surface, #fff);
	border: 1px solid var(--xeams-border);
	border-radius: var(--xeams-radius);
	box-shadow: var(--xeams-shadow);
	padding: 1rem 1.1rem;
}
.kpi-card .kpi-icon{
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
}
.kpi-card .kpi-text{ flex: 1 1 auto; min-width: 0; }
.kpi-card .kpi-label{ color: var(--xeams-muted); font-size: 0.85rem; }
.kpi-card .kpi-value{ font-size: 1.6rem; font-weight: 700; line-height: 1.15; }
.kpi-icon-success{ background: rgba(40,167,69,.14); color: #1e7e34; }
.kpi-icon-warning{ background: rgba(255,193,7,.20); color: #b8860b; }
.kpi-icon-danger{ background: rgba(220,53,69,.14); color: #c82333; }
.kpi-icon-info{ background: rgba(13,110,253,.12); color: #0d6efd; }

/* Server status cards on the dashboard (PanelXxxStatus.jsp) */
.status-card{ position: relative; }
.status-card .card-body{ padding: 1rem 1.1rem; }
.status-label{ color: var(--xeams-muted); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; }
.status-value{ font-size: 1.45rem; font-weight: 700; line-height: 1.15; color: #1f2733; margin-top: 0.1rem; }
.status-value .conn{ font-size: 1rem; font-weight: 600; color: var(--xeams-muted); }
.status-value.down{ color: #dc3545; }
.status-value.unknown{ color: #6c757d; }
.status-sub{ color: var(--xeams-muted); font-size: 0.82rem; margin-top: 0.4rem; }
.status-dot{ width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.status-up{ background: #28a745; box-shadow: 0 0 0 3px rgba(40,167,69,.18); }
.status-down{ background: #dc3545; box-shadow: 0 0 0 3px rgba(220,53,69,.18); }
.status-unknown{ background: #adb5bd; box-shadow: 0 0 0 3px rgba(173,181,189,.18); }
.status-card .cfg-link{ position: absolute; top: 0.55rem; right: 0.7rem; color: var(--xeams-muted); font-size: 0.95rem; z-index: 2; }
.status-card .cfg-link:hover{ color: var(--xeams-primary); }
.starttls-badge{ display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; padding: 0.05rem 0.45rem; border-radius: 1rem; vertical-align: middle; }
.starttls-badge.on{ background: rgba(40,167,69,.14); color: #1e7e34; }
.starttls-badge.off{ background: rgba(108,117,125,.15); color: #6c757d; }

/* Dashboard card headers: accent icon + clean title */
.card > .card-header .bi{ color: var(--xeams-primary); margin-right: 0.35rem; }
.card > .card-header a .bi{ color: var(--xeams-muted); }

/* Label/value rows replacing the small stat tables inside panels */
.stat-row{ display: flex; justify-content: space-between; align-items: center; padding: 0.45rem 0.15rem; border-top: 1px solid var(--xeams-border); }
.stat-row:first-child{ border-top: 0; }
.stat-row .stat-k{ color: var(--xeams-muted); }
.stat-row .stat-v{ font-weight: 600; }

/* ------------------------------------------------------------------ *
 * 4. Buttons - unify shape/spacing/focus; keep theme colors
 * ------------------------------------------------------------------ */
.btn{ border-radius: var(--xeams-radius-sm); }
.btn-submit,
.btn-menu,
.btn-wide,
.btn-wide-submit,
.btn-wide-menu{
	border: 0;
	border-radius: var(--xeams-radius-sm);
	padding: 0.45rem 1.1rem;
	font-weight: 500;
	transition: filter var(--xeams-transition), box-shadow var(--xeams-transition);
}
.btn-submit:hover,
.btn-menu:hover,
.btn-wide-submit:hover,
.btn-wide-menu:hover{
	filter: brightness(0.94);
}
.btn-submit:active,
.btn-menu:active{ filter: brightness(0.88); }

/* ------------------------------------------------------------------ *
 * 5. Tables - light modern header, subtle zebra, comfortable cells
 * ------------------------------------------------------------------ */
.table{
	--bs-table-bg: transparent;
	margin-bottom: 1rem;
	vertical-align: middle;
}
.table > :not(caption) > * > *{
	padding: 0.55rem 0.75rem;
}
.table > thead th,
.table > thead td{
	background: #f1f3f5;
	color: var(--xeams-primary);
	border-bottom: 2px solid var(--xeams-primary);
	font-weight: 600;
	white-space: nowrap;
}
.table > tbody > tr:nth-of-type(odd) > *{
	background-color: rgba(0,0,0,.02);
}
.table > tbody > tr:hover > *{
	background-color: rgba(0,0,0,.045);
}

/* Rounded, scrollable container for wide tables (opt-in) */
.table-card{
	background: var(--xeams-surface, #fff);
	border: 1px solid var(--xeams-border);
	border-radius: var(--xeams-radius);
	box-shadow: var(--xeams-shadow);
	overflow: hidden;
}

/* ------------------------------------------------------------------ *
 * 6. Forms - themed focus ring, consistent radius
 * ------------------------------------------------------------------ */
.form-control,
.form-select{
	border-radius: var(--xeams-radius-sm);
}
.form-control:focus,
.form-select:focus{
	border-color: var(--xeams-accent);
	box-shadow: 0 0 0 0.2rem rgba(13,110,253,.20);
	box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--xeams-accent) 25%, transparent);
}
.form-check-input:checked{
	background-color: var(--xeams-accent);
	border-color: var(--xeams-accent);
}

/* ------------------------------------------------------------------ *
 * 7. Alerts - flatter, accent stripe
 * ------------------------------------------------------------------ */
.alert{
	border: 0;
	border-left: 4px solid currentColor;
	border-radius: var(--xeams-radius-sm);
}

/* ------------------------------------------------------------------ *
 * 8. Page title helper (opt-in include target)
 * ------------------------------------------------------------------ */
.xeams-page-title{
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.25rem 0 1rem;
}
.xeams-page-title .subtitle{
	color: var(--xeams-muted);
	font-size: 0.9rem;
}

/* ------------------------------------------------------------------ *
 * 9. Footer - compact and lighter
 * ------------------------------------------------------------------ */
.footer{
	padding: 0.6rem 0;
	font-size: 0.82rem;
}
.red{
	padding: 0.4rem 0.85rem;
	font-size: 0.85rem;
}

/* ------------------------------------------------------------------ *
 * 10. Misc modern touches
 * ------------------------------------------------------------------ */
code, pre, kbd{ border-radius: var(--xeams-radius-sm); }
hr{ opacity: 0.12; }
.modal-content{ border: 0; border-radius: var(--xeams-radius); box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.dropdown-menu{ border-color: var(--xeams-border); border-radius: var(--xeams-radius-sm); box-shadow: var(--xeams-shadow); }