/* ==========================================================================
   KISNetManager theme (2026 redesign, "Option B")
   Loaded after kisnet.css. Restyles the existing markup only - every id and
   class the scripts rely on is unchanged. Light + dark themes are driven by
   <html data-theme="light|dark|auto"> (saved per user in Users.UserConfig).
   ========================================================================== */

/* ---------- Colour tokens ---------- */
:root {
	--font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

	--bg: #F1F5F9;
	--surface: #FFFFFF;
	--surface-2: #F8FAFC;
	--surface-3: #EEF2F6;
	--border: #E2E8F0;
	--border-strong: #CBD5E1;
	--row-line: #EEF2F6;
	--row-alt: #F8FAFC;
	--row-hover: #EEF6F8;
	--text: #0F172A;
	--text-2: #334155;
	--muted: #64748B;
	--accent: #D5160C;
	--accent-hover: #B3120A;
	--accent-active: #8F0E08;
	--on-accent: #FFFFFF;
	--accent-border: transparent;
	--live-flash: #FEF3C7;
	--loading-backdrop: rgba(8, 10, 11, .72);
	--loading-dot: #FFFFFF;
	--loading-sand: #F5B841;
	--warning-bg: #FFFBEB;
	--warning-text: #78350F;
	--warning-border: #F59E0B;
	--link: #0B7A94;
	--link-hover: #075A6E;
	--focus-ring: rgba(11, 122, 148, .55);
	--select-bg: #0B7A94;
	--select-text: #FFFFFF;
	--select-soft: #E0F2F6;
	--input-bg: #FFFFFF;
	--input-disabled: #F1F5F9;
	--success: #15803D;
	--danger: #B91C1C;
	--tab-active: #D5160C;
	--port-assigned: #2563EB;
	--port-selected: #15803D;
	--port-selected-assigned: #0D98BA;
	--overlay: #0F172A;
	--overlay-opacity: .45;
	--shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
	--shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 6px 20px rgba(15, 23, 42, .06);
	--shadow-lg: 0 12px 40px rgba(15, 23, 42, .22);
	--icon-filter: none;
	--icon-blend: multiply;

	--header-bg: #0F172A;
	--header-text: #F8FAFC;
	--header-nav: #CBD5E1;
	--header-muted: #94A3B8;
	--header-border: #334155;
	--header-hover: rgba(255, 255, 255, .08);
	--header-active: rgba(255, 255, 255, .12);

	color-scheme: light;
}

/* Dark palette - written twice: for an explicit "dark" choice, and for "auto"
   when the device is in dark mode. Keep the two blocks identical. */
:root[data-theme="dark"] {
	--bg: #0B1120;
	--surface: #0F172A;
	--surface-2: #111A2B;
	--surface-3: #1A2436;
	--border: #1E293B;
	--border-strong: #334155;
	--row-line: #1A2436;
	--row-alt: #131D2E;
	--row-hover: #17283B;
	--text: #E2E8F0;
	--text-2: #CBD5E1;
	--muted: #94A3B8;
	--accent: #3F1A18;
	--accent-hover: #4E211E;
	--accent-active: #5E2824;
	--on-accent: #FECACA;
	--sort-arrow: #F87171;
	--accent-border: #7A2C26;
	--live-flash: #3B3415;
	--loading-backdrop: rgba(8, 10, 11, .72);
	--warning-bg: #2A2110;
	--warning-text: #FDE68A;
	--warning-border: #B45309;
	--link: #4CC3DE;
	--link-hover: #8ADBEC;
	--focus-ring: rgba(76, 195, 222, .6);
	--select-bg: #0E7490;
	--select-text: #FFFFFF;
	--select-soft: #0E3440;
	--input-bg: #0B1120;
	--input-disabled: #131D2E;
	--success: #4ADE80;
	--danger: #F87171;
	--tab-active: #E0645B;
	--port-assigned: #2563EB;
	--port-selected: #15803D;
	--port-selected-assigned: #0D98BA;
	--overlay: #000000;
	--overlay-opacity: .6;
	--shadow-sm: none;
	--shadow: 0 1px 2px rgba(0, 0, 0, .4);
	--shadow-lg: 0 16px 48px rgba(0, 0, 0, .6);
	--icon-filter: invert(1) hue-rotate(180deg) brightness(1.1);
	--icon-blend: screen;
	--header-bg: #020617;
	--header-border: #1E293B;
	color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
	:root[data-theme="auto"] {
		--bg: #0B1120;
		--surface: #0F172A;
		--surface-2: #111A2B;
		--surface-3: #1A2436;
		--border: #1E293B;
		--border-strong: #334155;
		--row-line: #1A2436;
		--row-alt: #131D2E;
		--row-hover: #17283B;
		--text: #E2E8F0;
		--text-2: #CBD5E1;
		--muted: #94A3B8;
		--accent: #3F1A18;
		--accent-hover: #4E211E;
		--accent-active: #5E2824;
		--on-accent: #FECACA;
		--sort-arrow: #F87171;
		--accent-border: #7A2C26;
		--live-flash: #3B3415;
		--loading-backdrop: rgba(8, 10, 11, .72);
		--warning-bg: #2A2110;
		--warning-text: #FDE68A;
		--warning-border: #B45309;
		--link: #4CC3DE;
		--link-hover: #8ADBEC;
		--focus-ring: rgba(76, 195, 222, .6);
		--select-bg: #0E7490;
		--select-text: #FFFFFF;
		--select-soft: #0E3440;
		--input-bg: #0B1120;
		--input-disabled: #131D2E;
		--success: #4ADE80;
		--danger: #F87171;
		--tab-active: #E0645B;
		--port-assigned: #2563EB;
		--port-selected: #15803D;
		--port-selected-assigned: #0D98BA;
		--overlay: #000000;
		--overlay-opacity: .6;
		--shadow-sm: none;
		--shadow: 0 1px 2px rgba(0, 0, 0, .4);
		--shadow-lg: 0 16px 48px rgba(0, 0, 0, .6);
		--icon-filter: invert(1) hue-rotate(180deg) brightness(1.1);
	--icon-blend: screen;
		--header-bg: #020617;
		--header-border: #1E293B;
		color-scheme: dark;
	}
}

/* ---------- Base ---------- */
body {
	background-color: var(--bg);
	color: var(--text);
	font-family: var(--font);
	font-size: 14px;
	-webkit-font-smoothing: antialiased;
}
a { color: var(--link); }
a:hover { color: var(--link-hover); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible, input[type="image"]:focus-visible {
	outline: 3px solid var(--focus-ring);
	outline-offset: 2px;
}
.visuallyhidden {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.skiplink {
	position: absolute; left: 12px; top: -60px; z-index: 1000;
	background: var(--surface); color: var(--text); padding: 10px 14px; border-radius: 8px;
	box-shadow: var(--shadow-lg); font-weight: 600; text-decoration: none;
}
.skiplink:focus { top: 12px; }
.label { color: var(--text-2); }
.greytext { color: var(--muted); }
.editable { color: var(--text); }
#errordiv { color: var(--danger); }
#errordiv.errorsuccess { color: var(--success); }

/* ---------- Header (dark top bar) ---------- */
#siteheader {
	position: relative;
	top: 0;
	width: 100%;
	margin: 0;
	padding: 0;
	float: none;
	text-align: left;
	background: var(--header-bg);
	color: var(--header-text);
	border: none;
	border-bottom: 1px solid var(--header-border);
	border-radius: 0;
	box-shadow: none;
	font-family: var(--font);
}
.topbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	padding: 10px 24px;
	box-sizing: border-box;
	min-height: 60px;
}
.brand {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--header-text);
	text-decoration: none;
	margin-right: 8px;
}
.brand:hover { color: var(--header-text); }
.brandlogo {
	display: flex;
	background: #FFFFFF;
	border-radius: 8px;
	padding: 4px 8px;
}
#siteheader .brandlogo img {
	display: block;
	width: auto;
	height: 26px;
}
#sitetitle {
	position: static;
	width: auto;
	margin: 0;
	float: none;
	text-align: left;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .01em;
	white-space: nowrap;
}
#mainnav {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	flex: 1 1 auto;
}
#mainnav .topnav {
	display: inline-flex;
	align-items: center;
	height: 38px;
	padding: 0 12px;
	border-radius: 8px;
	color: var(--header-nav);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	background: transparent;
}
#mainnav .topnav:hover { background: var(--header-hover); color: #FFFFFF; }
#mainnav .topnav.menuselected { background: var(--header-active); color: #FFFFFF; }
.topbar-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}
#siteheader button,
#siteheader .iconbutton {
	box-shadow: none;
	margin: 0;
	font-family: var(--font);
}
#siteheader .iconbutton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border-radius: 8px;
	border: 1px solid var(--header-border);
	background: transparent;
	color: var(--header-nav);
	cursor: pointer;
}
#siteheader .iconbutton:hover:not(:disabled) { background: var(--header-hover); color: #FFFFFF; }
#siteheader .iconbutton:active:hover:not(:disabled) { background: var(--header-active); }
#tablerefresh { width: 36px; height: 36px; padding: 0; }
#tablerefresh.spinning svg { animation: kis-spin 1s linear infinite; }
@keyframes kis-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #tablerefresh.spinning svg { animation: none; } }

/* Theme toggle shows a moon in light mode and a sun in dark mode */
#themetoggle .icon-sun { display: none; color: #FCD34D; }
#themetoggle .icon-moon, #themetoggle .icon-sun { display: inline-flex; }
#themetoggle .icon-sun { display: none; }
:root[data-theme="dark"] #themetoggle .icon-sun { display: inline-flex; }
:root[data-theme="dark"] #themetoggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
	:root[data-theme="auto"] #themetoggle .icon-sun { display: inline-flex; }
	:root[data-theme="auto"] #themetoggle .icon-moon { display: none; }
}

#info {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 0 4px;
	padding-left: 12px;
	border-left: 1px solid var(--header-border);
	float: none;
	position: static;
	font-size: 13px;
}
#headerusername {
	display: flex;
	flex-direction: column;
	text-align: right;
	line-height: 1.25;
}
#usernamelink {
	color: var(--header-text);
	font-weight: 600;
	cursor: pointer;
	border-bottom: 1px solid transparent;
}
#usernamelink:hover { color: #FFFFFF; border-bottom: 1px solid var(--header-muted); }
.headerclient { color: var(--header-muted); font-size: 12px; }
#info .logoutlink {
	margin: 0;
	font-size: 13px;
	color: inherit;
}
#info .logoutlink:hover { text-decoration: none; }
#siteheader .ghostbutton {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 36px;
	padding: 0 12px;
	border-radius: 8px;
	border: 1px solid var(--header-border);
	background: transparent;
	color: #E2E8F0;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}
#siteheader .ghostbutton:hover:not(:disabled) { background: var(--header-hover); color: #FFFFFF; }
.logouticon { display: none; }
.avatar {
	display: none;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #334155;
	color: #FFFFFF;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}
.avatar:hover { color: #FFFFFF; background: #475569; }

/* ---------- Section tabs (second bar) ---------- */
#menu {
	position: relative;
	width: 100%;
	height: auto;
	margin: 0;
	float: none;
	background: var(--surface);
	border: none;
	border-bottom: 1px solid var(--border);
	border-radius: 0;
	box-shadow: none;
	font-family: var(--font);
}
#sectiontabs {
	display: flex;
	overflow-x: auto;
	padding: 0 24px;
	scrollbar-width: none;
}
#sectiontabs::-webkit-scrollbar { display: none; }
#menu .sectiontab,
#menu .sectiontab:hover {
	display: inline-flex;
	align-items: center;
	height: 46px;
	padding: 0 4px;
	margin-right: 22px;
	box-sizing: border-box;
	color: var(--muted);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	background: transparent;
	border-bottom: 3px solid transparent;
	border-top: 3px solid transparent;
}
#menu .sectiontab:hover { color: var(--text); }
#menu .sectiontab.menuselected,
#menu .sectiontab.menuselected:hover {
	color: var(--text);
	background: transparent;
	border-bottom-color: var(--tab-active);
}

/* ---------- Bottom navigation (phones only) ---------- */
#mobilenav { display: none; }

/* ---------- Content card ---------- */
#contentdiv {
	width: calc(100% - 48px);
	max-width: 1440px;
	margin: 16px auto 0;
	float: none;
	background: var(--surface);
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: 12px;
	box-shadow: var(--shadow);
	overflow: hidden;
}
.infobox { padding-top: 0; }

#pagetitle, .pagetitle {
	box-sizing: border-box;
	padding: 14px 18px;
	margin-bottom: 8px;
	border-bottom: 1px solid var(--border);
	text-align: left;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--text);
	white-space: normal;
}
#pagetitlewithsearch {
	box-sizing: border-box;
	padding: 10px 14px 10px 18px;
	margin-bottom: 8px;
	border-bottom: 1px solid var(--border);
	text-align: left;
	font-size: 20px;
	font-weight: 700;
	color: var(--text);
}
#pagetitlewithsearch table { width: 100%; border-collapse: collapse; }
#pagetitlewithsearch td { width: auto; padding: 0; }
#pagetitlewithsearch td:first-child { display: none; }
#pagetitlewithsearch td:last-child { text-align: right; width: 1%; white-space: nowrap; }
#pagetitleforsearch { white-space: normal; }
#pagetitlesearchbox {
	float: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 400;
}
#searchbox { width: 220px; }
#searchicon, #clearicon { height: 20px; filter: var(--icon-filter); mix-blend-mode: var(--icon-blend); opacity: .75; }
#searchicon:hover, #clearicon:hover { opacity: 1; }
#displayclientselect, #networkselector, #switchselect {
	font-size: 15px;
	font-weight: 600;
	vertical-align: middle;
}
.header {
	border-bottom: 1px solid var(--border);
	font-size: 17px;
	font-weight: 700;
	padding: 10px 0;
	color: var(--text);
}

/* ---------- Form controls ---------- */
input, select, textarea {
	background-color: var(--input-bg);
	border: 1px solid var(--border-strong);
	color: var(--text);
	border-radius: 8px;
	padding: 6px 10px;
	font-family: var(--font);
	font-size: 14px;
	box-sizing: border-box;
	min-height: 34px;
}
select {
	padding-right: 28px;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--muted) 50%),
		linear-gradient(135deg, var(--muted) 50%, transparent 50%);
	background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%, 100% 0;
	background-size: 5px 5px, 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input:focus, select:focus, textarea:focus { background-color: var(--input-bg); border-color: var(--link); }
input:disabled, select:disabled, textarea:disabled { background-color: var(--input-disabled); color: var(--muted); }
input[type="image"] { min-height: 0; padding: 0; border: none; }
input[type="checkbox"], input[type="radio"] {
	min-height: 0;
	width: auto;
	padding: 0;
	accent-color: var(--link);
}

/* Custom image checkboxes (bettercheckbox.js) drawn in CSS so they suit both themes */
span.betterCheckbox {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	cursor: pointer;
}
span.betterCheckbox:has(img) {
	width: 18px;
	height: 18px;
	box-sizing: border-box;
	border: 2px solid var(--border-strong);
	border-radius: 5px;
	background: var(--input-bg);
}
span.betterCheckbox:has(img) img { display: none; }
span.betterCheckbox:has(img[src*="checkbox-checked"]) {
	background-color: var(--link);
	border-color: var(--link);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
	background-size: 14px 14px;
	background-position: center;
	background-repeat: no-repeat;
}
span.betterCheckbox:hover { filter: brightness(1.08); }

/* ---------- Buttons ---------- */
button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 36px;
	padding: 0 16px;
	border: 1px solid var(--accent-border);
	border-radius: 8px;
	background: var(--accent);
	color: var(--on-accent);
	font-family: var(--font);
	font-size: 14px;
	font-weight: 600;
	box-shadow: none;
	cursor: pointer;
	white-space: nowrap;
}
button:hover:not(:disabled) { background: var(--accent-hover); }
button:active:hover:not(:disabled) { background: var(--accent-active); }
button:disabled { opacity: .45; cursor: default; }
/* Secondary actions: delete, export, cancel and similar */
button[id^="delete"], button[id^="export"], button[id$="cancelbutton"], button[id$="CancelButton"],
#forgotpwbutton, #clearselectionbutton, #viewticketbutton, #closeticketbutton, #switcheditbutton,
#smpreview, #smtest, #smclear, #smpreviewclose, .smtool {
	background: var(--surface);
	color: var(--text);
	border-color: var(--border-strong);
}
button[id^="delete"]:hover:not(:disabled), button[id^="export"]:hover:not(:disabled),
button[id$="cancelbutton"]:hover:not(:disabled), button[id$="CancelButton"]:hover:not(:disabled),
#forgotpwbutton:hover:not(:disabled), #clearselectionbutton:hover:not(:disabled),
#viewticketbutton:hover:not(:disabled), #closeticketbutton:hover:not(:disabled), #switcheditbutton:hover:not(:disabled),
#smpreview:hover:not(:disabled), #smtest:hover:not(:disabled), #smclear:hover:not(:disabled), #smpreviewclose:hover:not(:disabled), .smtool:hover:not(:disabled) {
	background: var(--surface-3);
}
button[id^="delete"]:active:hover:not(:disabled), button[id^="export"]:active:hover:not(:disabled) { background: var(--border); }

#buttondiv, .buttondiv, .buttondiv2 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	box-sizing: border-box;
	height: auto;
	min-height: 58px;
	margin: 0;
	padding: 10px 18px;
	border-top: 1px solid var(--border);
	background: var(--surface);
}
#buttondiv button, .buttondiv button, .buttondiv2 button {
	width: auto;
	min-width: 0;
	margin: 0;
}
#buttondiv > table { width: 100%; }

/* ---------- Tables ---------- */
.tableheader, .standardtable, .defaulttable { color: var(--text); }
.standardtable, .defaulttable { border-color: transparent; }
.tableheadermid, .tableheaderfirst, .tableheaderlast,
.standardtable th {
	background: var(--surface-2);
	color: var(--muted);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .02em;
	border-color: transparent;
	border-top-color: var(--border);
	border-bottom-color: var(--border-strong);
	border-left-color: transparent;
	border-right-color: transparent;
	text-align: left;
	padding: 0 8px;
	height: 34px;
}
.tableheaderfirst.centered, .tableheadermid.centered, .standardtable th.centered { text-align: center; }

/* Sortable column headers (same arrows as breadcompany.site):
   \25BC = A to Z / lowest first, \25B2 = Z to A / highest first */
.sortHandle { display: inline-block; cursor: pointer; user-select: none; white-space: nowrap; }
.sortHandle:hover { color: var(--text); }
.sortHandle.sort-asc, .sortHandle.sort-desc { color: var(--text); }
.sort-asc::after, .sort-desc::after { display: inline-block; margin-left: 5px; font-size: 10px; color: var(--sort-arrow, var(--accent)); }
.sort-asc::after { content: "\25B2"; }
.sort-desc::after { content: "\25BC"; }
.standardtable td {
	border: 1px solid transparent;
	border-bottom-color: var(--row-line);
	padding: 0 8px;
	height: 36px;
}
.standardtable tr { height: 36px; }
.standardtable tr:nth-child(even) { background: var(--row-alt); }
.selectabletable tr:hover { background: var(--row-hover); }
.markselected {
	background-color: var(--select-bg);
	color: var(--select-text);
	border-top-color: var(--select-bg);
	border-bottom-color: var(--select-bg);
}
.tablewrapper { color: var(--text); }
/* host names in monospace, like the mockup */
#hostlisttable td:nth-child(3), #ipassigntable td:nth-child(odd) { font-family: var(--font-mono); font-size: 13.5px; }
/* Tables whose data is centred keep centred headings */
#ipassignheader th, html #ticketlistheader th { text-align: center; }
/* Small row-level buttons inside tables (e.g. certificate Assignments) */
.standardtable button, .tablewrapper button {
	min-height: 28px;
	padding: 0 10px;
	font-size: 12.5px;
	background: var(--surface);
	color: var(--text);
	border-color: var(--border-strong);
}
.standardtable button:hover:not(:disabled), .tablewrapper button:hover:not(:disabled) { background: var(--surface-3); }
hr { border: none; border-top: 1px solid var(--border); margin: 8px 0; }

/* Paging (IP assignments) */
.pagechangelink { background-color: var(--surface-3); color: var(--text); border-radius: 6px; font-size: 14px; line-height: 22px; }
.pagechangelink:hover { background-color: var(--border-strong); }
.pagecurrentlink { background-color: var(--accent); color: var(--on-accent); border-radius: 6px; font-size: 14px; line-height: 22px; }
.navbutton { background: var(--surface-3); border-radius: 6px; }
.navbutton:hover:not(:disabled) { background: var(--border-strong); }

/* ---------- Popups and dialogs ---------- */
#greyout, #greyout2, #greyout3 {
	background-color: var(--overlay);
	opacity: var(--overlay-opacity);
}
#userinputbox, #forgotpwbox, #infopopup, .infopopup, #certassignpopup, #iphostassignbox, #networkassignbox,
#superselectboxcontainer, #uploadprogress, #hostportpopup, #portassigndiv, #switchadddiv,
#hostportlistpopup, #spncpopup, #mfadialog {
	background: var(--surface);
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: 12px;
	box-shadow: var(--shadow-lg);
	max-width: calc(100vw - 24px);
	box-sizing: border-box;
}
#hostinfopopuptable td, #hostportpopuptable td, #hostportlistpopuptable td { border-color: var(--border); }
#hostportpopuptablethead th, .boxtitle, #switchname2, .searchdiv, #bottominfodiv, #switchsamplecontainer,
.menuline1 { border-bottom-color: var(--border); border-top-color: var(--border); }
.menuline2 { border-top-color: var(--border); }
#superselectbox, #fieldentry, #hostselectdiv, #portselectdiv, #untaggedselectdiv, #taggedselectdiv,
#highlightlegend td, .highlightcolor { border-color: var(--border-strong); }
.superselect { border-top-color: transparent; border-bottom-color: transparent; }
.switchhostselect:hover, .hostportselect:hover, .taggedselect:hover, .untaggedselect:hover { background: var(--surface-3); }
.switchhostselected, .hostportselected, .taggedselect.selected, .untaggedselect.selected {
	background: var(--select-bg);
	color: var(--select-text);
}
.popupmenu, .submenu {
	background-color: var(--surface);
	color: var(--text);
	border: 1px solid var(--border-strong);
	border-radius: 0 0 8px 8px;
	box-shadow: var(--shadow-lg);
}
.popupmenuitem:hover, .submenuitem:hover { color: var(--link); background-color: var(--surface-3); }
.submenuitem { color: var(--text); }
.hoverdiv { background-color: var(--surface-3); color: var(--text); border-color: var(--border-strong); border-radius: 6px; }
.moreinfomark, #passwordhelp { color: var(--link); border-color: var(--link); }
.moreinfomark:hover { color: var(--link-hover); }
#uploadprogressbar { background-color: var(--link); }

/* ---------- Switch ports ---------- */
#switch, #switchsample { border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface-2); }
.switchport, .switchsampleport { border-color: var(--border-strong); background: var(--surface); color: var(--text); }
.spselected { background-color: var(--port-selected); color: #FFFFFF; }
div[assignedhostname], div[assignedhostport], div[tagged], div[untagged] { background: var(--port-assigned); color: #FFFFFF; }
div[assignedhostname].spselected, div[assignedhostport].spselected,
div[tagged].spselected, div[untagged].spselected { background: var(--port-selected-assigned); color: #000000; }
#switchdiv { padding: 4px 0 8px; }

/* ---------- Icons drawn as dark images: lighten them in dark mode ---------- */
img[src*="caret"], img[src*="clearicon"], img[src*="searchicon"], .pwtoggle { filter: var(--icon-filter); mix-blend-mode: var(--icon-blend); }

/* ---------- Page-specific touch-ups ---------- */
/* Support pages define their own black borders in the page; soften them */
html #ticketlistheader th, html #ticketlistcontent td, html #supportentrytable,
html #supportentrytable td, html #supportentrytable th, html #supportentries, html #ticketlistdiv {
	border-color: var(--border);
}
html #supportentrytable { max-width: 100%; }
/* Mass import help tables use inline black borders */
.fieldlisttable th, .fieldlisttable td { border-color: var(--border-strong) !important; padding: 2px 6px; }
.samplefile { font-family: var(--font-mono); font-size: 13px; }
.importnote { display: inline-block; padding: 6px 10px; border-radius: 8px; background: var(--warning-bg); color: var(--warning-text); border: 1px solid var(--warning-border); white-space: normal; }

/* Login page */
body.page-login #contentdiv, body.page-pwreset #contentdiv {
	max-width: 460px;
	margin-top: 48px;
	padding: 8px 0 0;
}
body.page-login #loginbox { width: 100%; margin: 0 0 72px; }
body.page-login #errordiv { padding: 4px 18px 0; min-height: 0; font-size: 14px; line-height: 1.3; text-align: left; }
.logintitle { margin: 8px 18px 2px; font-size: 22px; font-weight: 700; color: var(--text); text-align: left; }
.loginsubtitle { margin: 0 18px 10px; color: var(--muted); font-size: 14px; text-align: left; }
body.page-login #logintable td { padding: 8px 18px; }
body.page-login #logintable td.label { width: 34%; }
body.page-login input#email, body.page-login .pwfieldbox input { width: 100%; }
body.page-login .pwfieldbox .pwtoggle { top: 10px; right: 10px; left: auto; }

/* MFA (sign-in page steps and My Settings) */
body.page-login.mfawide #contentdiv { max-width: 560px; }
.mfabody { padding: 4px 18px 16px; color: var(--text-2); font-size: 14px; }
.mfasteps { display: flex; gap: 18px; align-items: flex-start; }
.mfaqr { flex: 0 0 168px; width: 168px; height: 168px; background: #FFFFFF; border-radius: 8px; overflow: hidden; }
.mfaqr svg { display: block; width: 100%; height: 100%; }
.mfalist { margin: 0; padding-left: 18px; line-height: 1.55; }
.mfalist li { margin-bottom: 8px; }
.mfalist li.mfaapplink { display: none; list-style: none; margin-left: -18px; }
.mfalist li.mfaapplink a { color: var(--link); }
.mfakey { display: inline-block; margin-top: 4px; padding: 4px 8px; font-family: var(--font-mono); letter-spacing: .06em;
	background: var(--input-bg); border: 1px solid var(--border-strong); border-radius: 6px; color: var(--text); user-select: all; }
.mfarow { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.mfarow label { color: var(--text-2); }
input.mfacode { width: 190px; height: 44px; padding: 0 0 0 .4em; font-family: var(--font-mono); font-size: 22px; letter-spacing: .4em;
	text-align: center; border-radius: 8px; }
input.mfacode.mfarecovery { width: 220px; font-size: 19px; letter-spacing: .14em; text-transform: uppercase; }
.mfacheck { display: flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--text-2); cursor: pointer; }
.mfaalts { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 16px; font-size: 13.5px; }
.mfaalts a { color: var(--link); text-decoration: none; }
.mfaalts a:hover { text-decoration: underline; }
.mfacodes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 18px; margin: 4px 0 8px; padding: 14px 18px;
	background: var(--input-bg); border: 1px solid var(--border-strong); border-radius: 8px; }
.mfacodes code { font-family: var(--font-mono); font-size: 15px; letter-spacing: .08em; color: var(--text); }
.mfanote { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.mfapill { display: inline-block; padding: 1px 8px; border-radius: 999px; border: 1px solid; font-size: 12px; white-space: nowrap; }
.mfapill.on { color: var(--success); border-color: currentColor; }
.mfapill.off { color: var(--warning-text); background: var(--warning-bg); border-color: var(--warning-border); }
button.btn2 { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
button.btn2:hover:not(:disabled) { background: var(--surface-3); }
.mfacell { display: flex; align-items: center; gap: 10px; }
.mfastatus { margin: 10px 0 12px; color: var(--text-2); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mfabuttons { display: flex; flex-wrap: wrap; gap: 10px; }
#mfadialog { position: relative; top: 8%; margin: auto; width: 580px; overflow: hidden; }
#mfadialog .logintitle { margin-top: 18px; }
#mfadialog .mfadialogerror { padding: 0 18px; min-height: 20px; color: var(--danger); font-size: 14px; }
#mfadialog .buttondiv { position: static; margin: 0; display: flex; gap: 10px; flex-wrap: wrap; padding: 11px 18px; border-top: 1px solid var(--border); }
#mfadialog input.mfapassword { width: 260px; }
button.mfareset { min-height: 26px; padding: 0 10px; font-size: 12.5px; }
@media (max-width: 560px) {
	.mfasteps { flex-direction: column; align-items: center; }
	.mfacodes { grid-template-columns: 1fr; }
	.mfalist li.mfaapplink { display: list-item; }
}

/* Automatic sign-out warning */
#idlewarning { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 16px; }
#idlewarning .idlebackdrop { position: absolute; inset: 0; background: var(--loading-backdrop); }
#idlewarning .idlebox { position: relative; max-width: 440px; width: 100%; box-sizing: border-box; padding: 22px 24px 20px; border-radius: 12px;
	background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow-lg); white-space: normal; text-align: left; }
#idlewarning h2 { margin: 0 0 8px; font-size: 19px; color: var(--text); }
#idlewarning p { margin: 0 0 18px; line-height: 1.55; color: var(--text-2); }
#idlewarning b { font-family: var(--font-mono); color: var(--text); }
#idlewarning .idlebuttons { display: flex; flex-wrap: wrap; gap: 10px; }

/* Home page */
body.page-home #contentdiv { overflow-y: auto; }
.homepage { max-width: 1180px; margin: 0 auto; padding: 28px 24px 64px; display: flex; flex-direction: column; gap: 24px; box-sizing: border-box; white-space: normal; text-align: left; }
.homeintro { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.homeintrotext { max-width: 720px; }
.hometitle { margin: 0 0 6px; font-size: 28px; line-height: 1.2; color: var(--text); }
.homelead { margin: 0; line-height: 1.6; color: var(--muted); font-size: 14.5px; }
.homelead b { color: var(--text-2); }
.homeclientpick { display: flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 600; }
.homeclientpick select { min-width: 220px; }
.hometiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.hometile { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border);
	color: var(--text); text-decoration: none; box-shadow: var(--shadow-sm); }
a.hometile:hover { border-color: var(--border-strong); background: var(--surface-2); text-decoration: none; }
a.hometile:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.hometilelabel { color: var(--muted); font-weight: 600; font-size: 13px; }
.hometilevalue { font-family: var(--font-mono); font-weight: 600; font-size: 30px; line-height: 1.2; color: var(--text); }
.hometilenote { font-size: 13px; color: var(--muted); }
.hometilenote.homewarn { color: var(--warning-text); font-weight: 600; }
.homebar { display: block; height: 6px; border-radius: 3px; background: var(--surface-3); margin: 4px 0 2px; overflow: hidden; }
.homebar span { display: block; height: 6px; width: 0; border-radius: 3px; background: var(--link); transition: width .4s ease; }
.homecolumns { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.homepanel { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-sm); }
.homepanel h2 { margin: 0; font-size: 16px; color: var(--text); }
.homepad { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.homeupcoming { flex: 999 1 560px; min-width: 0; overflow: hidden; }
.homepanelhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.homepanelhead a, .homemore, .homeshortcuts a, .homeupcomingtable a { color: var(--link); font-weight: 600; text-decoration: none; }
.homepanelhead a:hover, .homemore:hover, .homeshortcuts a:hover, .homeupcomingtable a:hover { color: var(--link-hover); text-decoration: underline; }
.homeupcomingwrap { overflow-x: auto; }
.homeupcomingtable { width: 100%; border-collapse: collapse; font-size: 14px; }
.homeupcomingtable th { text-align: left; padding: 10px 20px; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--surface-2); }
.homeupcomingtable td { padding: 11px 20px; border-top: 1px solid var(--border); color: var(--text); }
.homeupcomingtable th + th, .homeupcomingtable td + td { padding-left: 8px; }
.homemuted { color: var(--muted) !important; }
.homemono { font-family: var(--font-mono); font-size: 13px; white-space: nowrap; }
.homesmall { font-size: 12px; }
.homedue1 { color: var(--danger); font-weight: 600; white-space: nowrap; }
.homedue2 { color: var(--warning-text); font-weight: 600; white-space: nowrap; }
.homedue3 { color: var(--text-2); white-space: nowrap; }
.homeempty { color: var(--muted); padding: 16px 20px !important; list-style: none; }
.homepanelfoot { padding: 10px 20px 14px; color: var(--muted); font-size: 13px; border-top: 1px solid var(--border); }
.homeside { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.homerecent, .homeshortcuts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.homerecent li { display: flex; flex-direction: column; gap: 2px; color: var(--text); line-height: 1.4; }
.homerecent .homeempty, .homeshortcuts .homeempty { padding: 0 !important; }
.homeshortcuts { gap: 10px; }
@media (max-width: 900px) { .hometiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
	.homepage { padding: 18px 12px 96px; }
	.hometitle { font-size: 23px; }
	.hometiles { gap: 10px; }
	.hometile { padding: 14px; }
	.hometilevalue { font-size: 24px; }
	.homeclientpick, .homeclientpick select { width: 100%; }
}

/* Settings page */
#userconfigbox { max-width: 760px; margin: 0 auto; padding: 0 18px 80px; white-space: normal; }
#userconfigbox .header { text-align: left; font-size: 16px; margin-top: 18px; }
#themechoices { border: none; margin: 12px 0 4px; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.themechoice {
	flex: 1 1 160px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 12px;
	border: 2px solid var(--border);
	border-radius: 12px;
	cursor: pointer;
	background: var(--surface);
	font-weight: 600;
}
.themechoice:hover { border-color: var(--border-strong); }
.themechoice:has(input:checked) { border-color: var(--link); background: var(--select-soft); }
.themechoicelabel { display: flex; align-items: center; gap: 8px; }
.themechoicelabel input { width: 18px; height: 18px; margin: 0; }
.themepreview { display: flex; flex-direction: column; height: 64px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border-strong); }
.themepreview span:first-child { height: 14px; }
.themepreview span:last-child { flex: 1; margin: 8px; border-radius: 4px; }
.themepreview-light { background: #F1F5F9; }
.themepreview-light span:first-child { background: #0F172A; }
.themepreview-light span:last-child { background: #FFFFFF; border: 1px solid #E2E8F0; }
.themepreview-dark { background: #0B1120; }
.themepreview-dark span:first-child { background: #020617; }
.themepreview-dark span:last-child { background: #0F172A; border: 1px solid #1E293B; }
.themepreview-auto { background: linear-gradient(90deg, #F1F5F9 50%, #0B1120 50%); }
.themepreview-auto span:first-child { background: linear-gradient(90deg, #0F172A 50%, #020617 50%); }
.themepreview-auto span:last-child { background: linear-gradient(90deg, #FFFFFF 50%, #0F172A 50%); }
.themenote { color: var(--muted); font-size: 13px; margin-top: 6px; }
#configtable, #pwchangetable { margin: 8px 0; }
#configtable td { padding: 4px 6px 4px 0; }
#pwchangetable td { padding: 4px 8px 4px 0; }
#pwchangetable td.label { text-align: left; min-width: 150px; }

/* ---------- Live updates ---------- */
/* Cells that someone else just changed get a soft colour wash that fades out */
/* holds for 10 seconds, then fades out over 2 seconds */
#ipassigntable td.liveupdated { animation: kis-liveflash 12s ease-out; }
@keyframes kis-liveflash {
	0%, 83.3% { background-color: var(--live-flash); }
	/* fade to the row's own (striped) colour, not to transparent: some browsers don't repaint
	   the row colour under a cell that was animated */
	100% { background-color: inherit; }
}
#livenotice {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 60;
	max-width: min(420px, calc(100vw - 32px));
	padding: 12px 16px;
	border-radius: 10px;
	background: var(--text);
	color: var(--surface);
	font-size: 14px;
	line-height: 1.4;
	box-shadow: var(--shadow-lg);
	white-space: normal;
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
	transition: opacity .2s, transform .2s;
}
#livenotice.visible { opacity: 1; transform: none; }
#livenotice.warning { background: var(--warning-bg); color: var(--warning-text); border: 1px solid var(--warning-border); }
@media (prefers-reduced-motion: reduce) {
	#livenotice { transition: none; }
}

/* ---------- "Please wait" overlay (showLoadingDialog / closeLoadingDialog) ----------
   Dark blurred backdrop (as on breadcompany.site) with an animated hourglass. */
#loadingboundingbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	cursor: progress;
}
#loadinggreyout {
	position: absolute;
	inset: 0;
	background: var(--loading-backdrop);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	animation: kis-fadein .2s ease-out;
}
#loading.drawing {
	position: absolute;
	inset: 0;
	color: var(--loading-dot);
	animation: kis-fadein .2s ease-out;
}
/* Hourglass (built in kisnetmanager.js hourglassSVG): sand drains top to bottom over
   most of the cycle, then the glass turns over and it starts again. */
#loading .hourglass {
	position: absolute;
	inset: 0;
	margin: auto;
	overflow: visible;
	filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .45));
	animation: kis-hourglass-flip 2.4s cubic-bezier(.65, 0, .35, 1) infinite;
}
.hourglass .hg-glass { fill: rgba(255, 255, 255, .08); stroke: var(--loading-dot); stroke-width: 2.5; stroke-linejoin: round; }
.hourglass .hg-cap { fill: var(--loading-dot); }
.hourglass .hg-sand { fill: var(--loading-sand); transform-box: fill-box; }
.hourglass .hg-top { transform-origin: 50% 100%; animation: kis-sand-top 2.4s linear infinite; }
.hourglass .hg-bottom { transform-origin: 50% 100%; animation: kis-sand-bottom 2.4s linear infinite; }
.hourglass .hg-stream { animation: kis-sand-stream 2.4s linear infinite; }
@keyframes kis-hourglass-flip {
	0%, 78% { transform: rotate(0deg); }
	100% { transform: rotate(180deg); }
}
@keyframes kis-sand-top {
	0% { transform: scaleY(1); }
	75%, 100% { transform: scaleY(0); }
}
@keyframes kis-sand-bottom {
	0% { transform: scaleY(0); }
	75%, 100% { transform: scaleY(1); }
}
@keyframes kis-sand-stream {
	0%, 72% { opacity: 1; }
	76%, 100% { opacity: 0; }
}
@keyframes kis-fadein { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
	#loading .hourglass { animation: kis-pulse 1.6s ease-in-out infinite; }
	.hourglass .hg-top, .hourglass .hg-bottom, .hourglass .hg-stream { animation: none; }
	#loadinggreyout, #loading.drawing { animation: none; }
}
@keyframes kis-pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* ==========================================================================
   Phones and small tablets
   ========================================================================== */
@media (max-width: 760px) {
	.topbar { padding: 8px 12px; gap: 8px; min-height: 56px; }
	#sitetitle { font-size: 14px; }
	#mainnav { display: none; }
	.topbar-actions { gap: 4px; }
	#siteheader .iconbutton { width: 40px; height: 40px; border-color: transparent; }
	#info { border-left: none; padding-left: 0; gap: 4px; margin: 0; }
	#headerusername { display: none; }
	.avatar { display: inline-flex; }
	.logouttext { display: none; }
	.logouticon { display: inline-flex; }
	#siteheader .ghostbutton { width: 40px; height: 40px; padding: 0; justify-content: center; border-color: transparent; }

	#sectiontabs { padding: 0 12px; }
	#menu .sectiontab, #menu .sectiontab:hover { margin-right: 18px; height: 44px; }

	#mobilenav {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 40;
		background: var(--surface);
		border-top: 1px solid var(--border);
		padding: 2px 4px calc(4px + env(safe-area-inset-bottom));
		box-shadow: 0 -2px 12px rgba(15, 23, 42, .08);
	}
	.mobilenavitem {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		min-height: 54px;
		color: var(--muted);
		text-decoration: none;
		font-size: 11px;
		font-weight: 600;
		border-radius: 10px;
	}
	.mobilenavitem:hover { color: var(--text); }
	.mobilenavitem.menuselected { color: var(--text); }
	.mobilenavitem.menuselected svg { color: var(--tab-active); }

	#contentdiv { width: calc(100% - 16px); margin-top: 8px; border-radius: 10px; }
	#pagetitle, .pagetitle, #pagetitlewithsearch { font-size: 17px; padding: 10px 12px; }
	#pagetitlewithsearch table, #pagetitlewithsearch tbody, #pagetitlewithsearch tr { display: block; }
	#pagetitlewithsearch td { display: block; width: auto; }
	#pagetitlewithsearch td:first-child { display: none; }
	#pagetitlewithsearch td:last-child { text-align: left; width: auto; margin-top: 8px; }
	#pagetitlesearchbox { display: flex; }
	#searchbox { flex: 1; width: auto; }
	#displayclientselect, #networkselector { max-width: 100%; }

	/* Wide tables scroll sideways inside the card (header and rows together) */
	.infobox.noscroll { overflow-x: auto; overflow-y: hidden; }
	.tableheaderwrapper, .tablewrapper { min-width: 620px; }
	#ticketlistheaderdiv, #ticketlistcontentdiv { min-width: 780px; }
	#ipassignheader, #ipassigntable { min-width: 0; }
	.page-ipassign .tableheaderwrapper, .page-ipassign .tablewrapper { min-width: 0; }

	#buttondiv, .buttondiv, .buttondiv2 { padding: 8px 10px; gap: 8px; min-height: 54px; }
	#buttondiv button { padding: 0 10px; font-size: 12.5px; }
	body.page-login #contentdiv { margin-top: 16px; }
	body.page-login #logintable td { display: block; width: auto; padding: 4px 16px; }
	body.page-login #logintable td.label { width: auto; text-align: left; padding-top: 12px; }
	#userconfigbox { padding: 0 12px 80px; }
	#pwchangetable td.label { min-width: 0; }
	#userinputbox, #infopopup { width: calc(100vw - 24px); }
	#livenotice { right: 16px; left: 16px; bottom: calc(76px + env(safe-area-inset-bottom)); max-width: none; }
}
@media (max-width: 480px) {
	#sitetitle { display: none; }
}

/* ---------- Management > E-mail (site status emails) ---------- */
#statusmailform { max-width: 820px; margin: 0 auto; padding: 4px 18px 24px; white-space: normal; text-align: left; }
.smlabel { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin: 18px 0 6px; padding: 0; }
#smrecipients { border: 0; margin: 0; padding: 0; min-width: 0; }
.smchoice {
	display: flex; align-items: flex-start; gap: 10px;
	padding: 10px 12px; margin-bottom: 6px;
	border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
	cursor: pointer;
}
.smchoice:hover { border-color: var(--border-strong); }
.smchoice:has(input:checked) { border-color: var(--link); background: var(--select-soft); }
.smchoice input[type="radio"] { width: 17px; height: 17px; margin: 2px 0 0; flex: none; }
.smchoicetext { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.smchoicetext b { font-weight: 600; color: var(--text); }
.smhint { font-size: 12.5px; color: var(--muted); }
.smpicker { max-width: 100%; width: 360px; margin-top: 2px; }
.smpicker:disabled { display: none; }
#smcount { font-size: 13px; color: var(--text-2); margin: 8px 2px 0; }
#smcount a { color: var(--link); cursor: pointer; margin-left: 6px; }
#smnames { margin: 6px 0 0; padding: 8px 12px 8px 28px; max-height: 160px; overflow: auto; font-size: 12.5px; color: var(--text-2);
	border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
#smnames li { margin: 1px 0; }
#smnames .smemail { color: var(--muted); }
#smsubject { width: 100%; box-sizing: border-box; }
#smeditor { border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); overflow: hidden; }
#smeditor:focus-within { border-color: var(--link); box-shadow: 0 0 0 3px var(--focus-ring); }
#smtoolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.smtool { min-width: 32px; height: 30px; padding: 0 9px; font-size: 13px; line-height: 1; border-radius: 6px; margin: 0; width: auto; }
.smtool.smactive { border-color: var(--link); color: var(--link); }
.smsep { width: 1px; height: 20px; background: var(--border-strong); margin: 0 3px; }
#smbody { min-height: 220px; padding: 12px 14px; outline: none; color: var(--text); font-size: 14.5px; line-height: 1.55; overflow-wrap: anywhere; cursor: text; }
#smbody:empty::before { content: "Write your message here..."; color: var(--muted); }
#smbody p, #smbody div { margin: 0 0 10px; }
#smbody h3 { font-size: 15.5px; margin: 4px 0 8px; }
#smbody ul, #smbody ol { margin: 0 0 10px; padding-left: 24px; }
#smbody a { color: var(--link); }
.smfoot { margin-top: 6px; }
#smstatus { margin-top: 12px; font-size: 13.5px; min-height: 20px; }
#smstatus.smok { color: #15803D; }
#smstatus.smerr { color: var(--accent); }
:root[data-theme="dark"] #smstatus.smok { color: #4ADE80; }
:root[data-theme="dark"] #smstatus.smerr { color: #F87171; }
@media (prefers-color-scheme: dark) {
	:root[data-theme="auto"] #smstatus.smok { color: #4ADE80; }
	:root[data-theme="auto"] #smstatus.smerr { color: #F87171; }
}
#infopopup.smpreview { width: min(720px, calc(100vw - 24px)); max-height: calc(100vh - 40px); display: flex; flex-direction: column; }
#smpreviewframe { width: 100%; height: min(70vh, 640px); border: 1px solid var(--border); border-radius: 8px; background: #0B1120; }
@media (max-width: 760px) {
	#statusmailform { padding: 4px 12px 24px; }
	.smpicker { width: 100%; }
}

/* ---------- Management > Export ---------- */
#exportbox { max-width: 760px; margin: 0 auto; padding: 8px 18px 24px; white-space: normal; text-align: left; }
.exportintro { font-size: 14.5px; color: var(--text); margin: 6px 0 14px; }
#exportsheets { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
#exportsheets li { display: flex; gap: 14px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--surface); }
#exportsheets li:last-child { border-bottom: 0; }
#exportsheets b { flex: 0 0 140px; font-weight: 600; color: var(--text); }
#exportsheets span { color: var(--text-2); font-size: 13.5px; }
.exportnote { font-size: 12.5px; color: var(--muted); margin-top: 12px; }
#exportstatus { margin-top: 10px; font-size: 13.5px; color: var(--text-2); min-height: 20px; }
@media (max-width: 760px) {
	#exportbox { padding: 8px 12px 24px; }
	#exportsheets li { flex-direction: column; gap: 2px; }
	#exportsheets b { flex: none; }
}

/* ---------- Hosts: details ("i") button ---------- */
.infotd { width: 40px; padding: 0 4px; }
button.infoicon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 28px; height: 28px; min-width: 0; padding: 0; margin: 0;
	border: 1px solid transparent; border-radius: 8px;
	background: transparent; color: var(--link); cursor: pointer;
	transition: background-color .15s, border-color .15s, color .15s;
}
button.infoicon:hover:not(:disabled) { background: var(--select-soft); border-color: var(--link); color: var(--link-hover); }
button.infoicon:active:hover:not(:disabled) { background: var(--select-soft); }
button.infoicon:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
button.infoicon svg { display: block; }

/* ---------- Management > Activity ---------- */
#activitysearch { width: 220px; max-width: 40vw; }
#activityclient { max-width: 260px; }
#activityheader { width: 99.4%; table-layout: fixed; }
#activitytable td { vertical-align: top; padding-top: 6px; padding-bottom: 6px; }
#activitytable .mono { font-family: var(--mono, "IBM Plex Mono", Consolas, monospace); font-size: 12.5px; }
.activitydetails { color: var(--text-2); font-size: 12.5px; overflow-wrap: anywhere; white-space: normal; }
.activityok { color: #15803D; }
.activitybad { color: var(--accent); font-weight: 600; }
:root[data-theme="dark"] .activityok { color: #4ADE80; }
:root[data-theme="dark"] .activitybad { color: #F87171; }
@media (prefers-color-scheme: dark) {
	:root[data-theme="auto"] .activityok { color: #4ADE80; }
	:root[data-theme="auto"] .activitybad { color: #F87171; }
}
.activitycount { font-size: 12.5px; color: var(--muted); align-self: center; }