:root {
  /* brand */
  --ctm-blue:  #2caed9;
  --ctm-gray:  #555555;
  --ctm-green: #3e8e41;
  /* light theme defaults */
  --ctm-page-bg:    #ffffff;
  --ctm-border:     #2caed9;
  --ctm-btn-border: #2caed9;
  --ctm-text:       #111111;
  --ctm-input-bg:   #dddddd;
  --ctm-row-hover:  #eeeeee;
  --ctm-odd-list:   #e0e0e0;
  --ctm-chart-bg:   #ffffff;
  --ctm-chart-grid: #cccccc;
}

[data-theme="dark"] {
  --ctm-page-bg:    #111111;
  --ctm-border:     #444444;
  --ctm-btn-border: #888888;
  --ctm-text:       #bbbbbb;
  --ctm-input-bg:   #444444;
  --ctm-row-hover:  #111111;
  --ctm-odd-list:   #333333;
  --ctm-chart-bg:   #222222;
  --ctm-chart-grid: #444444;
}

.submit{
	font-family: 'Open Sans', sans-serif;
	color: #ffffff;
    background-color: var(--ctm-gray);
	border: 2px solid;
    border-color: var(--ctm-blue);
	border-radius: 5px;
	margin-top: 16px;
	font-size: 16px;
	margin-bottom: 20px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.submit:hover {
	background-color: var(--ctm-green);
}

.modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
	justify-content: center;
	align-items: center;
}

.modal_content {
	background-color: white;
	padding: 30px;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.3);
	text-align: center;
	font-family: 'Open Sans', sans-serif;
}

.modal_buttons {
	display: flex;
	gap: 10px;
	justify-content: center;
}

.modal-text {
	margin-bottom: 20px;
	font-size: 18px;
	color: #333;
}

.modal-btn {
	padding: 10px 30px;
	margin: 30px;
	font-size: 16px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
}

.modal-btn-yes {
	background-color: green;
}

.modal-btn-no {
	background-color: red;
}

/* ── Navigation bar ──────────────────────────────────────────────────────── */
ul.portal-nav {
	list-style-type: none;
	margin: 0;
	padding: 0;
	min-height: 40px;
	overflow: hidden;
	background-color: var(--ctm-gray);
}
ul.portal-nav li {
	float: left;
}
ul.portal-nav li a {
	display: block;
	color: #ffffff;
	text-align: center;
	padding: 8px 16px;
	text-decoration: none;
	font-family: 'Open Sans', sans-serif;
	font-size: 11pt;
}
ul.portal-nav li a:hover:not(.active) {
	background-color: var(--ctm-blue);
}
ul.portal-nav .active {
	background-color: var(--ctm-green);
}

/* ── Page base ───────────────────────────────────────────────────────────── */
body {
	background-color: var(--ctm-page-bg);
	color: var(--ctm-text);
}

a {
	text-decoration: none;
	color: inherit;
}

canvas {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

/* ── Shared components ───────────────────────────────────────────────────── */
.console_heading {
	color: var(--ctm-text);
	margin-top: 10px;
	font-family: 'Open Sans', sans-serif;
	font-size: 20px;
	text-align: center;
}

.ecgnav {
	color: var(--ctm-blue);
	text-decoration: none;
	cursor: pointer;
}

.status-ok  { color: var(--ctm-green); font-weight: bold; }
.status-err { color: #cc0000;          font-weight: bold; }

tr.odd-row { background-color: var(--ctm-odd-list); }

/* ── Button base ─────────────────────────────────────────────────────────── */
button {
	color: #ffffff;
	background-color: var(--ctm-gray);
	border: 2px solid;
	border-color: var(--ctm-btn-border);
	border-radius: 5px;
	font-family: 'Open Sans', sans-serif;
	cursor: pointer;
}
button:hover {
	background-color: var(--ctm-green);
}


/* ── Input base ──────────────────────────────────────────────────────────── */
input[type=text],
input[type=email],
input[type=password],
input[type=date] {
	background-color: #ffffff;
	color: #000000;
	border-radius: 5px;
	border: 1px solid var(--ctm-border);
	font-family: 'Open Sans', sans-serif;
}

/* ── SweetAlert theming ──────────────────────────────────────────────────── */
.swal-modal {
	background-color: var(--ctm-page-bg);
	border: 3px solid #666666;
}
.swal-title,
.swal-text,
.swal-content {
	font-family: 'Open Sans', sans-serif;
	color: var(--ctm-text);
}
.swal-button {
	font-family: 'Open Sans', sans-serif;
	font-size: 8pt;
	min-width: 100px;
	height: 40px;
	background-color: var(--ctm-gray);
	border-color: var(--ctm-btn-border);
	color: var(--ctm-text);
}

/* ── Alert delivery fieldset (editalerts.php + user edit pages) ─────────── */
fieldset.alert-delivery {
	border: 1px solid var(--ctm-border);
	border-radius: 4px;
	padding: 4px 20px 8px 20px;
	width: fit-content;
	margin: 6px auto;
}
fieldset.alert-delivery legend {
	font-size: 0.9em;
	color: var(--ctm-text);
	padding: 0 6px;
}
fieldset.alert-delivery label {
	cursor: pointer;
	margin-right: 20px;
}

/* ── Per-page alert mute bar (viewactivesessions.php) ────────────────────── */
.alert-mute-bar {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border-bottom: 1px solid var(--ctm-gray);
	margin-bottom: 4px;
	font-family: 'Open Sans', sans-serif;
	font-size: 0.9vw;
	color: var(--ctm-text);
}
/* ── Vitals card: alert frame (viewsession + viewactivesessions) ─────────── */
.alerts-frame {
	display: inline-block;
	border: 1px solid #888888;
	border-radius: 4px;
	padding: 2px 8px;
	text-align: center;
}
.alerts-frame-label {
	font-size: 0.65em;
	color: #aaaaaa;
	margin-bottom: 2px;
}