/* ==========================================================================
   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 {   /* the KIS mark (transparent PNG) on a white tile */
	display: flex;
	align-items: center;
	background: #FFFFFF;
	border-radius: 8px;
	padding: 5px 10px;
}
#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;
}
#pagetitle .ptsep { color: var(--muted); font-weight: 400; margin: 0 6px; 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, .tableheaderlast.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), .ipghost 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; }
body.page-login #errordiv.timeoutmsg { margin: 12px 18px 0; padding: 10px 12px; border-radius: 8px; color: var(--warning-text); background: var(--warning-bg); border: 1px solid var(--warning-border); }
.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%; }
.mfakeycopy { margin: 4px 0 0 6px; min-height: 32px; padding: 0 12px; vertical-align: top; }
.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; }
/* Support pop-ups (create a ticket, view a ticket, respond): the buttons sit under the content
   instead of over its bottom edge */
#modalpopup { padding-bottom: 0 !important; }
#modalpopup .buttondiv { position: static; margin: 0; display: flex; gap: 10px; flex-wrap: wrap; padding: 11px 14px; border-top: 1px solid var(--border); }
#modalpopup textarea { max-width: 100%; box-sizing: border-box; }
#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; }
}

/* Add / Edit Switch dialog: never taller than the screen. The fields scroll; the title and the
   Save / Cancel buttons always stay in view (on phones it fills the screen). */
#switchadddiv { display: flex; flex-direction: column; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); top: 50%; transform: translateY(-50%); padding: 0; box-sizing: border-box; overflow: hidden; }
#switchadddiv #addswitchheader { flex-shrink: 0; }
#switchadddiv #addswitchtablediv { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 10px; box-sizing: border-box; width: 100%; }
#switchadddiv #switchsamplecontainer { flex-shrink: 0; max-height: 34vh; overflow: auto; }
#switchadddiv .buttondiv2 { position: static; width: auto; flex-shrink: 0; margin: 0; padding: 10px 12px; border-top: 1px solid var(--border); background: var(--surface); }
@media (max-width: 640px) {
	#switchadddiv { position: fixed; top: 8px; left: 8px; right: 8px; transform: none; width: auto; max-width: none; margin: 0; max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
	#switchadddiv #addswitchtablediv table, #switchadddiv #addswitchtablediv tbody, #switchadddiv #addswitchtablediv tr { display: block; }
	#switchadddiv #addswitchtablediv tr[hidden] { display: none; }
	#switchadddiv #addswitchtablediv td { display: block; padding: 2px 0; }
	#switchadddiv #addswitchtablediv td:first-child { padding-top: 10px; font-weight: 600; font-size: 13px; color: var(--text-2); text-align: left; }
	#switchadddiv #addswitchtablediv input:not([type="checkbox"]), #switchadddiv #addswitchtablediv select { width: 100%; box-sizing: border-box; }
	#switchadddiv #switchsamplecontainer { max-height: 26vh; }
	#switchadddiv .buttondiv2 button { flex: 1; }
}

/* Hosts on phones (hosts.php #hostsmobile): a list, and a details screen per host */
.hostsmobile { display: none; }
@media (max-width: 640px) {
	.page-hosts #contentdiv > .infobox { display: none; }
	.page-hosts #contentdiv { overflow: visible; background: transparent; border: 0; box-shadow: none; height: auto !important; }
	.hostsmobile { display: block; padding: 4px 4px 96px; text-align: left; white-space: normal; color: var(--text); }
	.hmview[hidden] { display: none !important; }
	.hmhead { display: flex; flex-direction: column; gap: 10px; padding: 8px 4px 10px; }
	.hmtitle { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
	.hmtitle h1 { margin: 0; font-size: 20px; color: var(--text); }
	.hmcount { font-size: 13px; color: var(--muted); white-space: nowrap; }
	.hmclient { width: 100%; height: 40px; }
	.hmsearchrow { display: flex; gap: 8px; }
	.hmsearch { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--input-bg); color: var(--muted); }
	.hmsearch input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0; height: 40px; color: var(--text); font-size: 15px; }
	.hmsearchrow button { min-height: 42px; }
	.hmlist { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; }
	.hmlist li + li { border-top: 1px solid var(--border); }
	.hmrow, .hmrowpick { width: 100%; min-height: 58px; display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 14px; box-sizing: border-box;
		background: transparent; border: 0; border-radius: 0; color: var(--text-2); text-align: left; font: inherit; font-weight: 400; cursor: pointer; white-space: normal; justify-content: flex-start; }
	.hmrow:hover:not(:disabled), .hmrow:active { background: var(--surface-3); }
	.hmrowpick input { width: 20px; height: 20px; margin: 0; flex-shrink: 0; }
	.hmrowpick:has(input:checked) { background: var(--select-soft); }
	.hmtext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
	.hmname { font-weight: 600; font-size: 15.5px; color: var(--text); overflow-wrap: anywhere; }
	.hmdesc { font-size: 13.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.hmtag { display: inline-block; margin-left: 6px; padding: 0 7px; border: 1px solid var(--link); border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--link); vertical-align: 2px; }
	.hmrow svg { flex-shrink: 0; color: var(--muted); }
	.hmempty { padding: 22px 14px; color: var(--muted); text-align: center; }
	.hmmuted { color: var(--muted); }
	.hmfoot { display: flex; gap: 8px; padding: 12px 0 0; }
	.hmfoot button { flex: 1; min-height: 44px; }
	.hmselectonly { display: none !important; }
	.hmselecting .hmselectonly { display: inline-flex !important; }
	.hmselecting #hmadd, .hmselecting #hmexport, .hmselecting #hmselect { display: none !important; }
	#hmdelete { background: var(--danger); }
	.hmback { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 12px 0 4px; margin: 2px 0 4px; background: transparent !important; border: 0; color: var(--link); font-weight: 600; }
	.hmdetailname { margin: 2px 4px 2px; font-size: 22px; color: var(--text); overflow-wrap: anywhere; }
	.hmdetaildesc { margin: 0 4px 12px; color: var(--text-2); }
	.hmcard { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; margin-bottom: 12px; }
	.hmpad { padding: 12px 14px; }
	.hmcard h2 { margin: 0 0 6px; font-size: 15px; color: var(--text); }
	.hmfield, .hmswitchrow { width: 100%; min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 8px 14px; box-sizing: border-box;
		background: transparent; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; color: var(--text); text-align: left; font: inherit; font-weight: 400; justify-content: flex-start; white-space: normal; }
	.hmfield:hover:not(:disabled), .hmfield:active { background: var(--surface-3); }
	.hmfield:disabled { opacity: 1; cursor: default; }
	.hmswitchrow { border-bottom: 0; justify-content: space-between; }
	.hmswitchrow input { width: 20px; height: 20px; margin: 0; }
	.hmlabel { width: 104px; flex-shrink: 0; font-size: 13px; color: var(--muted); }
	.hmswitchrow .hmlabel { width: auto; }
	.hmvalue { flex: 1; min-width: 0; overflow-wrap: anywhere; }
	.hmfield svg { flex-shrink: 0; color: var(--muted); }
	.hmip { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
	.hmmono { font-family: var(--font-mono); font-size: 13.5px; text-align: right; overflow-wrap: anywhere; }
	.hmactions { display: flex; flex-direction: column; gap: 8px; }
	.hmactions button { min-height: 44px; }
	.hmactions .hmdanger { color: var(--danger); }
	.hmloading { padding: 16px 4px; }
}
#hmeditbox { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: flex-end; justify-content: center; }
#hmeditbox .hmeditbackdrop { position: absolute; inset: 0; background: var(--loading-backdrop); }
#hmeditbox .hmeditsheet { position: relative; width: 100%; max-width: 520px; box-sizing: border-box; padding: 18px 16px calc(16px + env(safe-area-inset-bottom));
	background: var(--surface); color: var(--text); border-radius: 14px 14px 0 0; border: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
#hmeditbox label { font-weight: 600; color: var(--text); }
#hmeditbox input { width: 100%; box-sizing: border-box; height: 46px; font-size: 16px; }
.hmediterror { margin: 0; min-height: 18px; color: var(--danger); font-size: 13px; }
.hmeditbuttons { display: flex; gap: 8px; }
.hmeditbuttons button { flex: 1; min-height: 44px; }

/* Phones and small tablets: the header and the section tabs under it stay at the top while the
   page scrolls (--siteheader-h is set by kisnetmanager.js) */
@media (max-width: 760px) {
	/* the page grows with its content, so the header stays pinned however far a list scrolls
	   (sticky items only stay put inside their container, which was one screen tall) */
	#pagediv { height: auto; min-height: 100%; }
	#siteheader { position: sticky; top: 0; z-index: 45; }
	#menu { position: sticky; top: var(--siteheader-h, 57px); z-index: 44; box-shadow: 0 -6px 0 var(--surface); }
}

/* Phones: the buttons under a list (Add, Export, Delete...) stay in view just above the bottom
   menu while the list scrolls behind them (--mobilenav-h is set by kisnetmanager.js) */
@media (max-width: 640px) {
	.hostsmobile { padding-bottom: var(--mobilenav-h, 60px) !important; }
	.hostsmobile .hmfoot { position: sticky; bottom: var(--mobilenav-h, 60px); z-index: 6; margin: 12px -4px 0; padding: 10px 4px;
		background: var(--bg); border-top: 1px solid var(--border);
		box-shadow: 0 6px 0 var(--bg); }   /* fills any sub-pixel gap down to the menu bar (which sits on top) */
}

/* Other pages on phones (js/dev/phone.js): the same list and details screens as Hosts. */
.kpview, .kponly { display: none; }
@media (max-width: 640px) {
	body.kp-on #contentdiv > .infobox, body.kp-on #contentdiv > .kpdesktop { display: none !important; }
	body.kp-on #contentdiv { overflow: visible; background: transparent; border: 0; box-shadow: none; height: auto !important; }
	.kpview { display: block; }
	.kponly { display: block; }
	.hmselecting .kpadd, .hmselecting .kpexport, .hmselecting .kpselect { display: none !important; }
	.kpfilters { display: flex; gap: 6px; flex-wrap: wrap; }
	.kpfilter { min-height: 36px; padding: 0 12px; border-radius: 999px !important; border: 1px solid var(--border-strong); background: var(--surface) !important; color: var(--text-2); font-weight: 600; }
	.kpfilter span { color: var(--muted); font-weight: 500; margin-left: 2px; }
	.kpfilter[aria-pressed="true"] { border-color: var(--link); background: var(--select-soft) !important; color: var(--text); }
	.hmtag.kpwarn { border-color: var(--warning-border); color: var(--warning-text); }
	.hmtag.kpquiet { border-color: var(--border-strong); color: var(--muted); }
	.hmtag.kpbad { border-color: var(--danger); color: var(--danger); }
	.hmtag.kpgood { border-color: var(--success); color: var(--success); }
	.kpnote { margin: 0 4px 12px; font-size: 13px; color: var(--muted); }
	.kpfull { width: 100%; min-height: 46px; }
	/* Support conversation */
	.kpticket .kpmeta { margin: 0 4px 12px; font-size: 13px; color: var(--muted); }
	.kpmsgs { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
	.kpmsg { max-width: 86%; display: flex; flex-direction: column; gap: 3px; align-self: flex-start; }
	.kpmsg.kpmine { align-self: flex-end; }
	.kpbubble { padding: 10px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); color: var(--text); line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
	.kpmine .kpbubble { background: var(--select-soft); border-color: var(--link); }
	.kpwho { font-size: 11.5px; color: var(--muted); }
	.kpmine .kpwho { align-self: flex-end; }
	.kpreply { display: flex; flex-direction: column; gap: 8px; }
	.kpreply textarea { width: 100%; box-sizing: border-box; font-size: 16px; min-height: 84px; }
}
@media (max-width: 640px) {
	#certassignpopup { width: auto !important; max-width: calc(100vw - 16px); left: 8px !important; right: 8px !important; margin: 0 auto; box-sizing: border-box; }
	#certassignpopup .header { white-space: normal; overflow-wrap: anywhere; }
}
/* Switch Ports and Switch VLANs on phones (phone.js kisSwitchPhone) */
@media (max-width: 640px) {
	body.kp-on #contentdiv > #buttondiv { display: none !important; }
	.swinfo { margin: -4px 2px 0; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
	.swinfo:empty { display: none; }
	.swtoggle { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--border-strong); border-radius: 10px; overflow: hidden; }
	.swtoggle[hidden], .swpick[hidden] { display: none; }
	.swtoggle button { min-height: 40px; border: 0 !important; border-radius: 0 !important; background: var(--surface) !important; color: var(--text-2); font-weight: 600; }
	.swtoggle button + button { border-left: 1px solid var(--border-strong) !important; }
	.swtoggle button[aria-pressed="true"] { background: var(--select-soft) !important; color: var(--text); box-shadow: inset 0 -2px 0 var(--link); }
	.swface { display: flex; flex-direction: column; gap: 12px; padding: 4px 2px; }
	.swblocklabel { font-size: 12px; color: var(--muted); margin: 0 0 4px 2px; }
	.swgrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
	.swport { min-width: 0; height: 44px; padding: 0; border-radius: 8px !important; border: 1px solid var(--border-strong) !important; background: var(--input-bg) !important;
		color: var(--text-2); font-family: var(--font-mono); font-size: 14px; font-weight: 600; }
	.swport.on { background: #2563EB !important; border-color: #2563EB !important; color: #FFFFFF; }
	.swport.sel { outline: 3px solid var(--link); outline-offset: 1px; }
	.swlegend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 2px 0; font-size: 12.5px; color: var(--muted); }
	.swlegend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
	.swlegend i.on { background: #2563EB; }
	.swlegend i.sel { border: 2px solid var(--link); box-sizing: border-box; }
	.swbar { position: sticky; bottom: calc(var(--mobilenav-h, 60px) + 10px); z-index: 5; box-shadow: 0 -6px 18px rgba(0,0,0,.25); margin-top: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); display: flex; flex-direction: column; gap: 10px; }
	.swbar p { margin: 0; }
	.swbartitle { display: flex; flex-direction: column; gap: 2px; }
	.swbartitle span { color: var(--text-2); font-size: 13.5px; overflow-wrap: anywhere; }
	.swlist { margin-top: 10px; }
	.swnum { flex-shrink: 0; width: 38px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--border-strong);
		font-family: var(--font-mono); font-weight: 600; font-size: 13.5px; color: var(--text-2); }
	.swnum.on { background: #2563EB; border-color: #2563EB; color: #FFFFFF; }
	.swrow:disabled { cursor: default; opacity: 1; }
}
#hmeditbox .swhostlist { max-height: 34vh; overflow: auto; }
#hmeditbox .swhost[aria-selected="true"] { background: var(--select-soft); }
#hmeditbox .swtags { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; max-height: 30vh; overflow: auto; }
#hmeditbox .swtags legend { font-weight: 600; padding: 0 4px; }
#hmeditbox .swcheck { display: flex; align-items: center; gap: 8px; min-height: 36px; font-weight: 500; }
#hmeditbox .swcheck input { width: 20px; height: 20px; margin: 0; }
#hmeditbox .hmdanger { color: var(--danger); min-height: 44px; }
/* Activity on phones (activity.js): a timeline grouped by day */
@media (max-width: 640px) {
	.actbar { display: flex; gap: 8px; }
	.actbar .actclient { flex: 1; min-width: 0; height: 42px; }
	.actbar .hmsearch { flex: 1; min-width: 0; }
	.actday { margin: 14px 4px 6px; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
	.actrow { width: 100%; display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; box-sizing: border-box; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
		color: var(--text); text-align: left; font: inherit; font-weight: 400; white-space: normal; justify-content: flex-start; cursor: pointer; }
	.actrow:hover, .actrow:active { background: var(--surface-3) !important; }
	.actrow[aria-expanded="true"] { background: var(--select-soft) !important; }
	.acttime { width: 62px; flex-shrink: 0; padding-top: 1px; font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); }
	.actwho { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
	.actmore { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
	.actmore[hidden] { display: none; }
	.actdetails { font-family: var(--font-mono); font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; }
	.actshowmore { margin-top: 12px; }
}
#hmeditbox select, #hmeditbox textarea { width: 100%; box-sizing: border-box; font-size: 16px; }
#hmeditbox select { height: 46px; }
#hmeditbox .hmeditsheet { max-height: 92vh; overflow: auto; }
.hmeditnote { margin: 0; font-size: 13px; color: var(--muted); }

/* Phones and small tablets: pop-up windows sit above the bottom menu bar and fill the screen
   area, so their buttons are never hidden behind it. */
@media (max-width: 760px) {
	#greyoutboundingbox, #greyoutboundingbox2, #greyoutboundingbox3, #superselectboundingbox { position: fixed; inset: 0; width: auto; height: auto; z-index: 60; }
}

/* IP Assignments on phones: the page buttons wrap under the list and Export List goes below them,
   so nothing is wider than the screen. */
@media (max-width: 640px) {
	.page-ipassign #buttondiv { display: block; padding: 8px 10px; }
	.page-ipassign #buttondiv > table, .page-ipassign #buttondiv > table > tbody, .page-ipassign #buttondiv > table > tbody > tr { display: block; width: 100% !important; }
	.page-ipassign #buttondiv > table > tbody > tr > td { display: block; width: auto !important; }
	.page-ipassign #buttondiv > table > tbody > tr > td:first-child { display: none; }
	.page-ipassign #buttondiv > table > tbody > tr > td:last-child { padding-top: 8px; }
	.page-ipassign #buttondiv table table { margin: 0 auto !important; }
	.page-ipassign #exportips { width: 100%; }
	.page-ipassign .pageblanklink { display: none !important; }
	.page-ipassign #pageselector div { margin-left: 1px !important; margin-right: 1px !important; }
	.page-ipassign .pagenavicons { white-space: nowrap; }
	/* first and last page are always in the number list on phones, so the jump-to-end arrows go */
	.page-ipassign #button-first, .page-ipassign #button-last { display: none; }
	#networkselector { max-width: 100%; }
}

/* 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 */
.vlanpill { display: inline-block; margin-left: 6px; padding: 0 7px; border: 1px solid var(--link); border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 16px; color: var(--link); vertical-align: 1px; white-space: nowrap; }
#ipassigntable td.liveupdated { animation: kis-liveflash 12s ease-out; }
#ipassigntable.ipswipe-next { animation: kis-ipswipe-next .22s ease-out; }
#ipassigntable.ipswipe-prev { animation: kis-ipswipe-prev .22s ease-out; }
@keyframes kis-ipswipe-next { from { transform: translateX(24px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes kis-ipswipe-prev { from { transform: translateX(-24px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #ipassigntable.ipswipe-next, #ipassigntable.ipswipe-prev { animation: none; } }
@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; }
}

/* SSL Certificates: the Hosts column (server icon and how many hosts use the certificate) */
.infobutton.certhosts { width: auto; min-width: 52px; height: 30px; min-height: 0; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	background: transparent; border: 1px solid transparent; color: var(--link); font-size: 13px; font-weight: 600; box-shadow: none; }
.infobutton.certhosts:hover { background: var(--surface-3); border-color: var(--border); }
.infobutton.certhosts.none { color: var(--muted); }

/* ---------- "Please wait" overlay (showLoadingDialog / closeLoadingDialog) ----------
   A light dark backdrop (no blur) with an animated hourglass. */
#loadingboundingbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	cursor: progress;
}
#loadinggreyout {
	position: absolute;
	inset: 0;
	background: rgba(8, 10, 11, .45);   /* darkens the page a little; no blur */
	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; } }

/* Development server with MFA turned off (includes/functions.php kisMfaRequired) */

/* ---------- Help panel ---------- */
#helppanel {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 50;   /* over the page, its header and the phone menu bar */
	width: min(440px, 100vw);
	display: flex;
	flex-direction: column;
	background: var(--surface);
	color: var(--text);
	border-left: 1px solid var(--border);
	box-shadow: var(--shadow-lg);
	white-space: normal;
	animation: kis-helpin .2s ease-out;
}
#helppanel[hidden] { display: none; }
@keyframes kis-helpin { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.helpheader {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px 14px 22px;
	border-bottom: 1px solid var(--border);
	background: var(--surface-2);
}
#helptitle { margin: 0; flex: 1; font-size: 18px; font-weight: 700; outline: none; }
#helppanel .helpclosebutton {
	min-height: 0;
	width: 38px;
	height: 38px;
	padding: 0;
	background: transparent;
	color: var(--muted);
	border: 1px solid transparent;
}
#helppanel .helpclosebutton:hover:not(:disabled) { background: var(--surface-3); color: var(--text); }
.helpbody { overflow-y: auto; padding: 6px 22px 28px; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.helpbody h3 { margin: 18px 0 6px; font-size: 14.5px; font-weight: 700; color: var(--text); }
.helpbody p { margin: 6px 0; }
.helpbody ul { margin: 6px 0; padding-left: 20px; }
.helpbody li { margin: 4px 0; }
.helpbody b { color: var(--text); font-weight: 600; }
.helpbody kbd {
	font-family: var(--font-mono);
	font-size: 12px;
	padding: 1px 6px;
	border: 1px solid var(--border-strong);
	border-bottom-width: 2px;
	border-radius: 5px;
	background: var(--surface-2);
	color: var(--text);
}
.helpbody h3:last-of-type { padding-top: 14px; border-top: 1px solid var(--border); }
@media (prefers-reduced-motion: reduce) { #helppanel { animation: none; } }

/* ==========================================================================
   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, .ipghost { min-width: 0; }
	.page-ipassign .tableheaderwrapper, .page-ipassign .tablewrapper { min-width: 0; }
	/* IP Assignments: the list fits the screen exactly (no sideways wobble), and a sideways swipe
	   goes to the next or previous page instead (ipassign.js) */
	.page-ipassign .tableheaderwrapper, .page-ipassign .tablewrapper { width: calc(100% - 10px); }
	.page-ipassign #contentdiv > .infobox { overflow-x: hidden; }
	.page-ipassign .tablewrapper { touch-action: pan-y; }

	#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; }

/* ---------- Support requests on desktop (js/dev/supportdesk.js) ----------
   The list fills the card until a request is picked; then it narrows to the left and the
   conversation opens beside it in chat bubbles (the same look as on phones). */
.sdeskbox { padding: 0; }
.sdesk { display: flex; min-height: 0; height: 100%; white-space: normal; }   /* the card around it doesn't wrap text */
.sdesk .sdhidden { position: absolute; left: -9999px; }
.sdlist { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.sdesk.sdopen .sdlist { flex: 0 0 380px; border-right: 1px solid var(--border); }
.sdlisthead { padding: 14px 18px 12px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.sdtitle { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sdtitle h1 { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--text); }
.sdcount { font-size: 13px; color: var(--muted); white-space: nowrap; }
.sdtools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sdfilters { display: flex; gap: 6px; }
button.sdfilter { min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2); font-size: 13px; }
button.sdfilter:hover:not(:disabled) { background: var(--surface-3); }
button.sdfilter span { color: var(--muted); font-weight: 500; }
button.sdfilter[aria-pressed="true"] { border-color: var(--link); background: var(--select-soft); color: var(--text); }
.sdsearch { margin-left: auto; width: 220px; max-width: 100%; }
.sdesk.sdopen .sdsearch { margin-left: 0; width: 100%; }
.sdrows { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.sdempty { margin: 0; padding: 18px; color: var(--muted); }

/* A request in the list: in columns across the full width, stacked when the list is narrow */
button.sdrow { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: grid;
	grid-template-columns: minmax(180px, 1.2fr) minmax(160px, 1fr) minmax(260px, 1.8fr) auto; gap: 4px 16px; align-items: center;
	padding: 11px 18px; border-bottom: 1px solid var(--row-line); color: var(--text); font-family: var(--font); font-size: 14px; }
button.sdrow:hover { background: var(--row-hover); }
button.sdrow:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
button.sdrow.sdcurrent { background: var(--select-soft); box-shadow: inset 3px 0 0 var(--link); }
.sdsubject { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.sdsubject b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sdid { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.sdwho { color: var(--text-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sddates { color: var(--muted); font-size: 12.5px; white-space: normal; min-width: 0; }
.sddates b, .sdconvtitle b { font-weight: 600; color: var(--text-2); }
.sddates b.sdkis, .sdconvtitle b.sdkis { color: var(--link); }
.sdwaiting { color: var(--warning-text); }
.sdstatus { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.sdesk.sdopen button.sdrow { grid-template-columns: minmax(0, 1fr) auto; padding: 11px 16px; }
.sdesk.sdopen .sdsubject { grid-column: 1; }
.sdesk.sdopen .sdstatus { grid-column: 2; grid-row: 1; }
.sdesk.sdopen .sdwho, .sdesk.sdopen .sddates { grid-column: 1 / -1; }
.sdpill { display: inline-block; padding: 0 9px; border: 1px solid var(--border-strong); border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 20px; color: var(--muted); white-space: nowrap; }
.sdpill.sdnewpill { border-color: var(--warning-border); color: var(--warning-text); }
.sdpill.sddonepill { border-color: var(--success); color: var(--success); }
.sdlistfoot { padding: 12px 18px; border-top: 1px solid var(--border); }
.sdesk.sdopen .sdlistfoot button { width: 100%; }

/* The conversation */
.sdconv { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background: var(--surface-2); }
.sdconv[hidden] { display: none; }
.sdconvhead { display: flex; align-items: flex-start; gap: 10px; padding: 14px 14px 12px 20px; border-bottom: 1px solid var(--border); background: var(--surface); }
.sdconvtitle { flex: 1; min-width: 0; }
.sdconvtitle h2 { margin: 0 0 2px; font-size: 18px; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.sdconvtitle p { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
button.sdx { min-height: 36px; width: 36px; padding: 0; background: transparent; color: var(--muted); border-color: transparent; }
button.sdx:hover:not(:disabled) { background: var(--surface-3); color: var(--text); }
.sdmsgs { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; }
.sdmsg { max-width: 68%; display: flex; flex-direction: column; gap: 3px; align-self: flex-start; }
.sdmsg.sdmine { align-self: flex-end; }
.sdbubble { padding: 10px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); color: var(--text); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.sdmine .sdbubble { background: var(--select-soft); border-color: var(--link); }
.sdmeta { font-size: 12px; color: var(--muted); }
.sdmine .sdmeta { align-self: flex-end; }
.sdreply { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding: 12px 18px; border-top: 1px solid var(--border); background: var(--surface); }
.sdreply textarea { flex: 1; min-width: 0; min-height: 44px; max-height: 40vh; resize: vertical; box-sizing: border-box; }
.sdreply button { min-height: 44px; }
.sdreply .sderror { flex-basis: 100%; margin: 0; color: var(--danger); font-size: 13px; }
.sdreply .sderror:empty { display: none; }
.sdclosednote { margin: 0; padding: 14px 20px; border-top: 1px solid var(--border); background: var(--surface); color: var(--muted); }
/* Narrower windows: the conversation takes the whole card; the ✕ goes back to the list */
@media (max-width: 1000px) {
	.sdesk.sdopen .sdlist { display: none; }
	.sdmsg { max-width: 85%; }
	button.sdrow { grid-template-columns: minmax(0, 1fr) auto; }
	.sdsubject { grid-column: 1; }
	.sdstatus { grid-column: 2; grid-row: 1; }
	.sdwho, .sddates { grid-column: 1 / -1; }
}

/* ---------- Development server (any machine not listed as production in $_servers) ----------
   The header (and the bottom menu on phones) turns purple with an amber edge, and a DEV SERVER
   badge sits beside the logo, so a test copy can't be mistaken for the real site. */
body.devserver {
	--header-bg: #4C1D95;
	--header-border: #6D28D9;
	--header-muted: #C4B5FD;
	--header-nav: #DDD6FE;
	--header-hover: #5B21B6;
	--header-active: #6D28D9;
}
body.devserver #siteheader { border-bottom: 3px solid #F59E0B; }
/* an amber frame around the whole window (drawn over everything, never catches clicks) */
body.devserver::after { content: ""; position: fixed; inset: 0; border: 5px solid #F59E0B; pointer-events: none; z-index: 2147483000; }
@media (max-width: 640px) { body.devserver::after { border-width: 4px; } }
.devbadgelong { margin-left: .4em; }
.devbadge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 6px; background: #F59E0B; color: #111827; font-size: 12px; font-weight: 800; letter-spacing: .08em; line-height: 1.2; white-space: nowrap; }
@media (max-width: 760px) {
	body.devserver #mobilenav { background: var(--header-bg); border-top: 3px solid #F59E0B; }
	body.devserver .mobilenavitem { color: #DDD6FE; }
	body.devserver .mobilenavitem:hover, body.devserver .mobilenavitem.menuselected { color: #FFFFFF; }
	body.devserver .mobilenavitem.menuselected svg { color: #FCD34D; }
}
@media (max-width: 1400px) { .devbadgelong { display: none; } }   /* just "DEV" where the menu is tight */
@media (max-width: 480px) {
	.devbadgelong { display: none; }
	.devbadge { font-size: 11px; padding: 2px 7px; }
}

/* Support: messages that just arrived get a short highlight; new requests pop up in the corner
   (Support admin) until opened or dismissed. */
@keyframes sd-arrive { from { box-shadow: 0 0 0 3px var(--warning-border); } to { box-shadow: 0 0 0 3px transparent; } }
.sdnewmsg .sdbubble, .sdnewmsg .kpbubble { animation: sd-arrive 2.5s ease-out; }
#sdalerts { position: fixed; right: 20px; bottom: 20px; z-index: 65; display: flex; flex-direction: column; gap: 10px; width: min(380px, calc(100vw - 32px)); }
.sdalert { display: flex; gap: 12px; align-items: flex-start; padding: 12px 12px 12px 16px; border-radius: 12px; background: var(--surface); color: var(--text);
	border: 1px solid var(--border-strong); border-left: 4px solid var(--warning-border); box-shadow: var(--shadow-lg);
	opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; }
.sdalert.sdalertshown { opacity: 1; transform: none; }
.sdalerttext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.35; }
.sdalerttext b { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--warning-text); }
.sdalertsubject { font-weight: 600; overflow-wrap: anywhere; }
.sdalertwho { font-size: 13px; color: var(--muted); }
.sdalertbuttons { display: flex; gap: 4px; align-items: center; }
.sdalertbuttons .sdalertopen { min-height: 34px; padding: 0 14px; }
button.sdalertx { min-height: 34px; width: 34px; padding: 0; background: transparent; color: var(--muted); border-color: transparent; }
button.sdalertx:hover:not(:disabled) { background: var(--surface-3); color: var(--text); }
@media (max-width: 760px) {
	#sdalerts { left: 16px; right: 16px; width: auto; bottom: calc(76px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
	.sdalert { transition: none; }
	.sdnewmsg .sdbubble, .sdnewmsg .kpbubble { animation: none; }
}

/* Support read / unread */
.sdpill.sdunreadpill, .sdreadmark.sdunreadpill, .hmtag.kpunread { border-color: var(--select-bg); background: var(--select-bg); color: var(--select-text); }
.sdpill.sdreadpill { border-color: var(--border-strong); color: var(--muted); }
.sdreadmark { display: inline-block; margin-left: 6px; padding: 0 7px; border: 1px solid var(--border-strong); border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 17px; color: var(--muted); white-space: nowrap; vertical-align: 1px; }
.sdreadmark.sdreadpill:not(.sdnotyet)[title] { border-color: var(--success); color: var(--success); }
.sdmeta, .kpwho { display: flex; align-items: center; flex-wrap: wrap; row-gap: 3px; }
.sdmine .sdmeta, .kpmine .kpwho { justify-content: flex-end; }
button.sdrow.sdunread .sdsubject b { font-weight: 800; }
button.sdrow.sdunread .sdwho { color: var(--text); font-weight: 600; }
button.sdfilter span.sdcountbadge { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--select-bg); color: var(--select-text); font-weight: 700; line-height: 18px; text-align: center; }
.kpbold .hmname { font-weight: 800; }

/* Drop-downs inside table cells (Users: Client, User Level) fit their column instead of the
   fixed 220px every select gets, which cut off their right edge in narrower columns */
td .tablefield select, td > select { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }

/* ---------- DHCP range exclusions (dhcp.js, ipassign.js) ---------- */
button.dhcpexbtn { min-height: 30px; padding: 0 10px; gap: 6px; background: transparent; color: var(--text); border: 1px solid var(--border-strong); font-size: 13px; }
button.dhcpexbtn:hover:not(:disabled) { background: var(--surface-3); }
button.dhcpexbtn.none { color: var(--muted); }
button.dhcpexbtn.open { border-color: var(--link); background: var(--select-soft); }
.dhcpexcell { white-space: nowrap; }
tr.dhcpexrow > td { padding: 0 10px 10px 48px !important; background: var(--surface) !important; cursor: default; }
.dhcpexpanel { white-space: normal; text-align: left; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface-2); display: flex; flex-direction: column; gap: 8px; }
.dhcpexhelp { margin: 0; font-size: 12.5px; color: var(--muted); }
.dhcpexlist, .dhcpexphone { list-style: none; margin: 0; padding: 0; }
.dhcpexlist li, .dhcpexphone li { display: flex; align-items: center; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--row-line); }
.dhcpexphone li { min-height: 48px; padding: 0 8px 0 14px; }
.dhcpexip { flex: 1; font-family: var(--font-mono); font-size: 13px; }
.dhcpexn { font-family: var(--font); color: var(--muted); font-size: 12.5px; }
.dhcpexlist button, .dhcpexform button { min-height: 30px; padding: 0 12px; font-size: 13px; }
.dhcpexform { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px; }
.dhcpexform label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.dhcpexform input { width: 160px; font-family: var(--font-mono); }
.dhcpexerror { flex-basis: 100%; margin: 0; color: var(--danger); font-size: 13px; }
.dhcpexerror:empty { display: none; }
.dhcpexlist li.dhcpexediting .dhcpexform { flex: 1; padding: 4px 0; }
.dhcpexhead { margin: 16px 4px 4px; font-size: 15px; color: var(--text); }
.dhcpexhead span { font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 6px; }
/* IP Assignments: an address excluded from DHCP */
td.dhcpexcluded > div { display: flex !important; align-items: center; justify-content: center; gap: 8px; }
td.dhcpexcluded > div::after { content: "Excluded from DHCP"; padding: 0 8px; border: 1px solid var(--warning-border); border-radius: 999px; color: var(--warning-text); font-family: var(--font); font-size: 11px; font-weight: 600; line-height: 17px; white-space: nowrap; }

/* ---------- Typing an IP address (jquery.ipinput.js) ----------
   In a table cell (Networks, DHCP Ranges): one box that fills the cell. A bad address turns red. */
input.ipedit { box-sizing: border-box; width: 100%; max-width: 100%; height: 32px; min-height: 0; margin: 0; padding: 0 8px;
	font-family: var(--font-mono); font-size: 13.5px; border-color: var(--link); box-shadow: 0 0 0 3px var(--focus-ring); }
input.ipinvalid, input.ipinvalid:focus { border-color: var(--danger) !important; box-shadow: 0 0 0 3px rgba(185, 28, 28, .25) !important; }

/* ---------- New rows (kisStartDraft, kisnetmanager.js) ----------
   A row being added (not saved yet) is tinted; once saved, the row is highlighted for 10 seconds. */
tr.kisdraftrow > td { background: var(--select-soft) !important; }
@keyframes kis-newrow { 0%, 80% { background-color: var(--live-flash); } 100% { background-color: transparent; } }
tr.kisnewrow > td { animation: kis-newrow 10s ease-out forwards; }
@media (prefers-reduced-motion: reduce) { tr.kisnewrow > td { animation: none; background: var(--live-flash); } }

/* ---------- Editing a table cell in place (makeeditable, kisnetmanager.js) ----------
   One box that fills its own cell - no Save/Cancel buttons (Enter or clicking away saves, Esc
   cancels, Tab moves on). */
#editbox { display: block; width: 100%; margin: 0; padding: 0; }
input.cellinput { box-sizing: border-box; width: 100% !important; max-width: 100%; height: 32px !important; min-height: 0; margin: 0;
	padding: 0 8px; font-size: 14px; border-color: var(--link); box-shadow: 0 0 0 3px var(--focus-ring); }

/* ---- Network scanners (Management > Network Scanners, and the Clients page panel) ---- */
.scpill { display: inline-block; padding: 0 9px; border: 1px solid var(--border-strong); border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 20px; color: var(--muted); white-space: nowrap; }
.scpill.ok { border-color: var(--success); color: var(--success); }
.scpill.late, .scpill.disabled, .scpill.expired { border-color: var(--warning-border); color: var(--warning-text); background: var(--warning-bg); }
.hmtag.scpill { font-size: 11px; line-height: 17px; }
.sckey { font-family: var(--font-mono); font-size: 13px; letter-spacing: .5px; white-space: nowrap; }
.sckey.used { color: var(--muted); }
.sckeyends { font-size: 11.5px; color: var(--muted); }
button.scsmall { min-height: 26px; padding: 0 9px; font-size: 12.5px; }
button.sccopy { margin-left: 8px; }
.scnowrap { white-space: nowrap; }
.scright { text-align: right !important; }
.scmuted { color: var(--muted); }
.schelp { margin: 0; font-size: 12.5px; color: var(--muted); }
.scsummary { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; padding: 10px 16px 12px; font-size: 14px; }
.scsummary .scbig { font-size: 22px; font-weight: 700; }
.scoverwarn { margin: 0; padding: 8px 12px; border: 1px solid var(--warning-border); border-radius: 8px; background: var(--warning-bg); color: var(--warning-text); font-size: 13.5px; }
.sclimit { margin-left: 12px; font-size: 13px; color: var(--muted); align-self: center; }
#scannerlisttable td { vertical-align: middle; }
button.scclientbtn { min-height: 30px; padding: 0 10px; gap: 6px; background: transparent; color: var(--text); border: 1px solid var(--border-strong); font-size: 13px; white-space: nowrap; }
button.scclientbtn:hover:not(:disabled) { background: var(--surface-3); }
button.scclientbtn.off { color: var(--muted); }
button.scclientbtn.over { border-color: var(--warning-border); color: var(--warning-text); background: var(--warning-bg); }
button.scclientbtn.open { border-color: var(--link); background: var(--select-soft); }
.scclientcell { white-space: nowrap; }
tr.scpanelrow > td { padding: 0 10px 10px 48px !important; background: var(--surface) !important; cursor: default; }
.scpanel { white-space: normal; text-align: left; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface-2); display: flex; flex-direction: column; gap: 8px; }
.sclicform { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.sclicform label { font-size: 13px; color: var(--muted); }
.sclicform input { width: 70px; }
.scerror { margin: 0; color: var(--danger); font-size: 13px; }
.scerror:empty { display: none; }
.sctable { width: 100%; border-collapse: collapse; }
.sctable th { font-size: 12px; color: var(--muted); text-align: left; font-weight: 600; padding: 4px 8px; border-bottom: 1px solid var(--row-line); }
.sctable td { padding: 6px 8px; border-bottom: 1px solid var(--row-line); font-size: 13.5px; text-align: left; vertical-align: middle; }
.scphonelimit { margin: 8px 4px 0; }

/* Scan settings box (scanners.js scanSettingsShow) */
.kisdialogbox.scsetbox { width: 720px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: hidden; gap: 0; }
.scsetbox > * { flex: none; }
.scsetbox > .scsetnets { flex: 0 1 auto; min-height: 120px; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }   /* only the list scrolls: Save stays in view */
.scsetbox > .scsetsum { max-height: 28vh; overflow-y: auto; }
.scsetrange { white-space: nowrap; }
.scpill.pending { border-color: var(--link); color: var(--link); }
.scsetshort { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scsetline2 { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; margin: 2px 0 4px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.scsetline2 .scpill { font-size: 11px; line-height: 17px; }
.hmcard .scsetshort { white-space: normal; }
.scsetbox h2 { margin-bottom: 4px; }
.scsetsec { margin: 14px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.scsetseg { align-self: flex-start; display: inline-grid; grid-template-columns: repeat(var(--scsetn, 5), minmax(0, 1fr)); border: 1px solid var(--border-strong); border-radius: 8px; overflow: hidden; }
button.scsetint { min-height: 34px; padding: 0 16px; border: 0; border-right: 1px solid var(--border-strong); border-radius: 0; background: transparent; color: var(--text); font-size: 13.5px; font-weight: 400; text-align: center; justify-content: center; white-space: nowrap; }
button.scsetint:last-child { border-right: 0; }
button.scsetint:hover:not(.on) { background: var(--surface-3); }
button.scsetint.on { background: var(--accent); color: #fff; font-weight: 600; }
.scsetnet { display: grid; grid-template-columns: 22px 1fr; gap: 2px 10px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 6px; align-items: start; cursor: pointer; }
.scsetnet.off { opacity: .55; cursor: default; }
.scsetnet.scsetsnmp { margin-bottom: 0; }
.scsetnet b { font-size: 14px; }
.scsetnet input { margin: 3px 0 0; width: 16px; height: 16px; }
.scsetsub { grid-column: 2; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.scsetmono { font-family: var(--font-mono); font-size: 12.5px; }
.scsetsum { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.scsetnote { margin-top: 4px; color: var(--muted); }
.scsetbox .scerror { margin-top: 8px; }
.scsetbox .kisdialogbuttons { margin-top: 14px; }
@media (max-width: 600px) {
	.scsetseg { align-self: stretch; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; border: 0; border-radius: 0; overflow: visible; }
	button.scsetint, button.scsetint:last-child { border: 1px solid var(--border-strong); border-radius: 8px; padding: 0 6px; }
}

/* Scan settings: what happens to results, and who gets e-mails */
.scsetseg2 { align-self: flex-start; display: inline-grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--border-strong); border-radius: 8px; overflow: hidden; }
.scsetseg2 button.scsetmode { min-height: 34px; padding: 0 16px; border: 0; border-right: 1px solid var(--border-strong); border-radius: 0; background: transparent; color: var(--text); font-size: 13.5px; font-weight: 400; justify-content: center; white-space: nowrap; }
.scsetseg2 button.scsetmode:last-child { border-right: 0; }
.scsetseg2 button.scsetmode:hover:not(.on) { background: var(--surface-3); }
.scsetseg2 button.scsetmode.on { background: var(--accent); color: #fff; font-weight: 600; }
.scsethelp { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
select.scsetcontact { align-self: flex-start; min-width: 320px; max-width: 100%; }

/* Management > Scan Results (scanresults.js) */
.schoverable { cursor: default; text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-color: var(--muted); }
.schoverable:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 3px; }
.srbadge { display: inline-block; min-width: 18px; margin-left: 6px; padding: 0 6px; border: 1px solid var(--link); border-radius: 999px; color: var(--link); font-size: 11.5px; font-weight: 600; line-height: 17px; text-align: center; vertical-align: 1px; }
.srbadge[hidden] { display: none; }
.srwrap { padding: 0 16px; overflow: auto; box-sizing: border-box; width: auto !important; white-space: normal; }
#srsummary { white-space: normal; }
/* network picker row above the findings table */
.srpick { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 12px 16px; border-bottom: 1px solid var(--border); white-space: normal; }
.srpick[hidden] { display: none; }
.srpick > label { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
#srnetwork { min-width: 280px; max-width: 60vw; font-size: 15px; font-weight: 600; }
.srnetnote { font-size: 13px; color: var(--muted); }
.srnetnote .srmono { font-family: var(--font-mono); font-size: 12px; }
.srtable { width: 100%; border-collapse: collapse; }
.srtable thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); font-size: 12.5px; color: var(--muted); text-align: left; font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--border-strong); white-space: nowrap; }
.srtable td { padding: 7px 10px; border-bottom: 1px solid var(--row-line); font-size: 13.5px; vertical-align: middle; }
.srtable tr.srnet td { background: var(--surface); font-weight: 600; padding-top: 12px; }
.srtable .srmono { font-family: var(--font-mono); font-size: 12.5px; }
.srtable tr.srnet .srmono { font-weight: 400; color: var(--muted); }
.srtable .srcheck { width: 74px; text-align: center; }
.srtable th.srcheck label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.srtable input[type=checkbox] { width: 16px; height: 16px; }
.srtable select.srhost { min-width: 190px; max-width: 260px; }
.srtable tr.ign td:not(.srcheck) { opacity: .5; }
.srnone { color: var(--muted); font-style: italic; }
.srnow { font-size: 12px; color: var(--warning-text); }
.srnow:empty { display: none; }
.srprev { font-size: 12px; color: var(--muted); }
.srprev:empty { display: none; }
.srsrc { font-size: 11.5px; color: var(--muted); }
#buttondiv button.sriglist { margin-left: auto; }
#buttondiv button.sriglist[hidden] { display: none; }
.kisdialogbox.sriglistbox { width: 980px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); }
.sriglistbox > * { flex: none; }
.sriglistbox > .srigwrap { flex: 0 1 auto; min-height: 80px; overflow: auto; }
.sriglistbox .schelp { font-size: 13.5px; }
.srigtable thead th { background: var(--surface-2); }
.srempty { padding: 28px 10px !important; color: var(--muted); white-space: normal !important; }
.srvisuallyhidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 760px) {
	/* phones: each change is a card */
	.srwrap { padding: 0 10px; }
	.srtable thead { display: none; }
	.srtable, .srtable tbody, .srtable tr, .srtable td { display: block; width: auto; }
	.srtable tr.srnet td { padding: 14px 4px 6px; border: 0; background: transparent; }
	.srtable tr.srrow { margin: 0 0 10px; padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface-2); }
	.srtable tr.srrow td { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0; border: 0; text-align: right; }
	.srtable tr.srrow td::before { content: attr(data-label); color: var(--muted); font-size: 12.5px; text-align: left; }
	.srtable tr.srrow td.srcheck { width: auto; }
	.srtable select.srhost { max-width: 60vw; }
	.srtable tr.srrow td .srnow { margin-left: 8px; }
}

/* A question in the site's own style (kisConfirmDialog in kisnetmanager.js) */
.kisdialog { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .55); }
.kisdialogbox { width: 480px; max-width: 100%; padding: 20px 22px; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--surface-2); color: var(--text); display: flex; flex-direction: column; gap: 12px; box-shadow: 0 20px 50px rgba(0, 0, 0, .4); }
.kisdialogbox h2 { margin: 0; font-size: 18px; }
.kisdialogbox p { margin: 0; font-size: 14px; line-height: 1.45; }
.kisdialogwarn { padding: 10px 12px; border: 1px solid var(--warning-border); background: var(--warning-bg); color: var(--warning-text); border-radius: 8px; font-size: 13.5px; line-height: 1.4; }
.kisdialogbuttons { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
button.kisdialogdanger { border-color: var(--danger); color: var(--danger); background: transparent; }
button.kisdialogdanger:hover:not(:disabled) { background: var(--danger); color: #fff; }

/* ---- MAC addresses (Hosts page, host ports, IP Assignments) ---- */
button.hmacbtn { min-height: 28px; padding: 0 10px; background: transparent; color: var(--text); border: 1px solid var(--border-strong); font-size: 13px; white-space: nowrap; }
button.hmacbtn:hover:not(:disabled) { background: var(--surface-3); }
button.hmacbtn.none { color: var(--muted); }
.hmaccell { white-space: nowrap; width: 130px; }
.kisdialogbox.hmacbox { width: 860px; }
.hmactable .hmacmac, .hmacmac { font-family: var(--font-mono); font-size: 13px; letter-spacing: .3px; white-space: nowrap; }
.hmacsrc { display: inline-block; padding: 0 8px; border: 1px solid var(--border-strong); border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 18px; color: var(--muted); white-space: nowrap; }
.hmacsrc.scan { border-color: var(--link); color: var(--link); }
.hmacby { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }   /* who: under the Source label */
.hmacform { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px; }
.hmacform label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.hmacform input, .hmacedit input { font-family: var(--font-mono); width: 200px; }
.hmacedit { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.hmacedit .scerror { flex-basis: 100%; }
.hmacform .scerror { flex-basis: 100%; }
#hostportpopup.withmacs { width: 690px; }
#hostportpopup.withmacs #hostportpopuptable, #hostportpopup.withmacs #hostportpopuptablehead, #hostportpopup.withmacs #hostportpopuptablethead,
#hostportpopup.withmacs .hostportpopuptabletbody { width: 680px; }
#hostportpopup.withmacs .hmacth, #hostportpopup.withmacs .hmacporttd { width: 320px; }
#hostportpopup.withmacs .hmacportsel { width: 100%; font-family: var(--font-mono); font-size: 13px; }
.hmacportnote { padding: 4px 8px 0; }
/* Show Ports: one table, so the headings line up with the columns */
#hostportlistpopupcontent { box-sizing: border-box; width: auto; margin: 0 8px 54px; }
#hostportlistpopuptable { width: 100%; table-layout: fixed; }
#hostportlistpopuptable thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); padding: 6px 8px; font-weight: 600; border-bottom: 1px solid var(--border-strong); }
#hostportlistpopuptable td { padding: 4px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#hostportlistpopuptable tr td:first-child, #hostportlistpopuptable tr td:last-child { width: auto; }
#hostportlistpopuptable col.hplport { width: 26%; }
#hostportlistpopuptable col.hplhost { width: 46%; }
#hostportlistpopuptable col.hplswport { width: 28%; }
#hostportlistpopup.withmacs { width: 760px; }
#hostportlistpopup.withmacs .buttondiv2 { width: 760px; }
#hostportlistpopup.withmacs col.hplport { width: 22%; }
#hostportlistpopup.withmacs col.hplmac { width: 24%; }
#hostportlistpopup.withmacs col.hplhost { width: 34%; }
#hostportlistpopup.withmacs col.hplswport { width: 20%; }
.ipportchip { display: inline-block; margin-left: 8px; padding: 0 8px; border: 1px solid var(--border-strong); border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 18px; color: var(--muted); white-space: nowrap; vertical-align: 1px; }
.ipportopts { display: flex; flex-direction: column; gap: 6px; }
.ipportopt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: 8px; font-size: 14px; cursor: pointer; }
.ipportopt.sel { border-color: var(--link); background: var(--select-soft); }
.ipportmac { margin-left: auto; font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); }

/* ---- Domains (Inventory > Domains, host details) ---- */
.domainhelp { padding: 8px 16px 0; }
#domainlisttable td { vertical-align: middle; }
.hostfqdn { font-family: var(--font-mono); font-size: 13.5px; color: var(--link); word-break: break-all; }
.hostdomainsel { width: 100%; }
.hmdomainrow { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.hmdomainrow select { min-height: 44px; }

/* Show Ports on phones (hostPortsPhoneSheet in hosts.js) */
.hppsheet { position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column; justify-content: flex-end; background: rgba(0, 0, 0, .55); }
.hppbox { max-height: 88vh; overflow: auto; box-sizing: border-box; padding: 16px 14px calc(14px + var(--mobilenav-h, 60px)); display: flex; flex-direction: column; gap: 10px;
	background: var(--surface-2); color: var(--text); border: 1px solid var(--border-strong); border-bottom: 0; border-radius: 16px 16px 0 0; }
.hppbox h2 { margin: 0; font-size: 18px; }
.hppsub { margin: -4px 0 0; color: var(--muted); font-size: 13px; }
.hpplist { display: flex; flex-direction: column; gap: 10px; }
.hppcard { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); }
.hpptop { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.hppname { font-weight: 700; font-size: 15.5px; }
.hppmac { font-family: var(--font-mono); font-size: 13px; color: var(--muted); white-space: nowrap; }
.hppconn { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.hppconn svg { flex: none; color: var(--muted); }
.hppnone { color: var(--muted); font-size: 13.5px; font-style: italic; }
.hppbox button.hppclose { min-height: 46px; }

/* ---- Host info window (Hosts page, info button): wide enough for a full name, and the details
   scroll between the title and the buttons instead of running under the buttons ---- */
#infopopup.hostinfo { width: min(620px, calc(100vw - 24px)); top: 50%; transform: translateY(-50%); max-height: calc(100vh - 40px);
	display: flex; flex-direction: column; overflow: hidden; }
#infopopup.hostinfo .header { flex: none; }
#infopopup.hostinfo #infopopupcontent { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin-bottom: 0; padding: 0 8px; }
#infopopup.hostinfo .buttondiv2 { position: static; flex: none; width: auto; }
#infopopup.hostinfo #hostinfopopuptable { width: 100%; }
#infopopup.hostinfo #hostinfopopuptable .tdfirst { width: 130px; }
.hostfqdn { word-break: normal; overflow-wrap: normal; }
.hostfqdn .fqdnpart { white-space: nowrap; }
#infopopup.hostinfo .hostfqdnname .fqdnpart { white-space: nowrap; }

/* Page footer (includes/footer.php): one line, always at the bottom of the window. Pages leave
   room for it: resizeContent() for the fitted pages, a spacer at the end of #pagediv for the rest,
   and on phones it sits just above the menu bar (--kisfooter-h, --mobilenav-h: kisnetmanager.js). */
#kisfooter { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; gap: 4px 16px;
	padding: 4px max(24px, calc((100% - 1440px) / 2)); box-sizing: border-box; background: var(--bg); border-top: 1px solid var(--border);
	font-size: 12px; line-height: 18px; color: var(--muted); white-space: nowrap; }
#pagediv::after { content: ""; display: block; height: var(--kisfooter-h, 27px); }   /* pages longer than the window can scroll clear of it */
#kisfooter a { color: var(--muted); text-decoration: none; }
#kisfooter a:hover, #kisfooter a:focus-visible { color: var(--link); text-decoration: underline; }
#kisfooter .footright { margin-left: auto; display: flex; align-items: center; gap: 4px 14px; min-width: 0; }
#kisfooter .footlinks { display: inline-flex; align-items: center; gap: 8px; }
#kisfooter .footdot { opacity: .5; }
#kisfooter .footshort { display: none; }
@media (max-width: 760px) {
	/* narrow windows and phones: still one line - shorter labels, no "All rights reserved." */
	#kisfooter { padding: 4px 10px; font-size: 11.5px; justify-content: center; gap: 4px 10px; }
	#kisfooter .footrights, #kisfooter .footlong { display: none; }
	#kisfooter .footshort { display: inline; }
	#kisfooter .footright { margin-left: 0; gap: 4px 10px; }
	#kisfooter .footcopy { overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 640px) {
	#kisfooter { bottom: var(--navonly-h, 0px); }   /* just above the phone menu bar */
	#pagediv::after { display: none; }   /* the phone pages already leave room for the menu bar (--mobilenav-h includes the footer) */
}

/* Privacy Policy and Terms of Service (privacy.php, terms.php) */
.legalbox { overflow-y: auto; }
.legalpage { max-width: 760px; margin: 0 auto; padding: 28px 24px 40px; box-sizing: border-box; white-space: normal; text-align: left; color: var(--text-2); font-size: 14.5px; line-height: 1.65; }
.legalpage .legaltitle { margin: 0 0 4px; font-size: 26px; line-height: 1.25; color: var(--text); }
.legalpage .legalupdated { margin: 0 0 18px; color: var(--muted); font-size: 13px; }
.legalpage .legaldraft { margin: 0 0 20px; padding: 10px 12px; border-radius: 8px; background: var(--warning-bg); color: var(--warning-text); border: 1px solid var(--warning-border); font-size: 13.5px; }
.legalpage h2 { margin: 26px 0 8px; font-size: 17px; line-height: 1.35; color: var(--text); }
.legalpage p { margin: 0 0 12px; }
.legalpage ul { margin: 0 0 12px; padding-left: 22px; }
.legalpage li { margin: 0 0 6px; }
.legalpage b { color: var(--text); }
.legalpage a { color: var(--link); }
.legalpage .legalcontact { padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); display: inline-block; }
/* signed out: the page sits in the middle like the sign-in box, not full width */
body.page-privacy:not(.signedin) #contentdiv, body.page-terms:not(.signedin) #contentdiv { max-width: 860px; }
@media (max-width: 640px) {
	.legalbox { height: auto !important; overflow: visible; }
	body.page-privacy #contentdiv, body.page-terms #contentdiv { height: auto !important; overflow: visible; }
	.legalpage { padding: 20px 16px calc(var(--mobilenav-h, 0px) + 20px); font-size: 15px; }   /* the end clears the footer and menu bar */
}

/* Header: a little tighter in mid-size windows so "KIS Network Manager" and the menu still fit on one row */
@media (min-width: 761px) and (max-width: 1340px) {
	.topbar { gap: 8px 12px; }
	.brand { margin-right: 0; }
	#mainnav .topnav { padding: 0 9px; }
}

/* Hosts: hover card on a host name (hosts.js, hostHoverShow) */
#hosthover { position: fixed; z-index: 55; min-width: 260px; max-width: 380px; padding: 12px 14px; box-sizing: border-box;
	background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: 10px;
	box-shadow: 0 12px 32px rgba(0,0,0,.35); font-size: 13px; line-height: 1.45; text-align: left; white-space: normal; pointer-events: none; }
#hosthover:before { content: ""; position: absolute; left: var(--hh-arrow, 22px); top: -7px; width: 12px; height: 12px; background: inherit;
	border-left: 1px solid var(--border-strong); border-top: 1px solid var(--border-strong); transform: rotate(45deg); }
#hosthover.above:before { top: auto; bottom: -7px; transform: rotate(225deg); }
#hosthover .hhhead { padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--border); }
#hosthover .hhname { font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
#hosthover .hhfqdn { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); }
#hosthover .hhfqdn .fqdnpart { white-space: nowrap; }
#hosthover .hhlabel { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 4px; }
#hosthover .hhips { border-collapse: collapse; width: 100%; }
#hosthover .hhips td { padding: 2px 0; border: 0 !important; vertical-align: top; background: transparent; }
#hosthover .hhnet { color: var(--muted); padding-right: 14px !important; white-space: nowrap; }
#hosthover .hhaddr { font-family: var(--font-mono); }
#hosthover .hhnone { color: var(--muted); }
#hostlisttable td.hosthovered > div { text-decoration: underline dotted; text-underline-offset: 3px; }

/* Forgot Password box (login.js): the buttons sit under the content instead of over it; fits a phone */
#forgotpwbox { max-width: calc(100vw - 24px); box-sizing: border-box; overflow: hidden; }
#forgotpwbox .buttondiv, #forgotpwbox #buttondiv { position: static; width: auto; }
#forgotpwbox .paddeddiv { margin: 0; padding: 14px 18px; width: auto; box-sizing: border-box; }
#forgotpwbox #pwresettable { margin: 0; }
#forgotpwbox #forgotpwresponse { padding: 14px 18px; width: auto; box-sizing: border-box; }
#forgotpwbox #inputforgotemail { width: 100%; box-sizing: border-box; }

/* Clients page: Expiry Email column */
.clexpcol { width: 120px; }
@media (max-width: 760px) { .kpnote.clexpnote { margin-top: -4px; } }

/* Add Software License dialog */
/* Shared "Add ..." dialog form, used by Add Certificate, Add Software License, Add User and the
   per-page add dialogs (Hosts, Networks, DHCP, Domains, Clients). Labels in the right-aligned left
   column; every field in the right column is the same fixed width so inputs and selects line up. */
.licaddtable td.textright { padding: 7px 10px; white-space: nowrap; color: var(--muted); text-align: right; vertical-align: middle; }
.licaddtable td.textleft { padding: 7px 10px; }
.licaddtable td.textleft input, .licaddtable td.textleft select, .licaddtable td.textleft textarea { width: 240px; max-width: 60vw; box-sizing: border-box; }
.licinputerror { color: var(--danger); font-size: 13px; min-height: 18px; margin: 10px 2px 0; padding: 0 2px; }
/* Add DHCP Range: an IP field whose network-fixed octets are shown locked, with only the variable part typed */
.dhcpipfield { display: inline-flex; align-items: stretch; width: 240px; max-width: 60vw; box-sizing: border-box; overflow: hidden;
	background: var(--input-bg); border: 1px solid var(--border-strong); border-radius: 8px; min-height: 34px; }
.dhcpipfield:focus-within { border-color: var(--link); }
/* the locked, mask-fixed octets: a distinct chip so it's clear this part can't be edited and only the rest is typed */
.dhcpfix { display: inline-flex; align-items: center; padding: 6px 8px 6px 10px; background: var(--surface-3); border-right: 1px solid var(--border-strong);
	color: var(--text-2); font-family: var(--font-mono); font-size: 13px; white-space: nowrap; user-select: none; }
.dhcpfix:empty { display: none; }
.licaddtable td.textleft .dhcpipfield input.dhcpvar { width: auto; flex: 1 1 auto; min-width: 0; border: none; background: transparent;
	border-radius: 0; padding: 6px 10px 6px 0; min-height: 0; font-family: var(--font-mono); font-size: 13px; }
.licaddtable td.textleft .dhcpipfield input.dhcpvar:focus { border: none; background: transparent; }
/* ranges already defined on the chosen network, shown under the fields in the Add dialog */
.dhcpexisting { font-size: 13px; margin: 8px 2px 0; padding: 0 2px; line-height: 1.5; }
.dhcpexlabel { color: var(--muted); }
.dhcpexrange { font-family: var(--font-mono); font-size: 12px; color: var(--text-2); background: var(--surface-3); border-radius: 6px; padding: 1px 6px; white-space: nowrap; }
.dhcpexnone { color: var(--muted); font-style: italic; }

/* Map the reusable KIS date picker (jquery.kisdatepick.css) onto the site theme so it follows
   light / dark automatically. Only the variables are overridden; the picker's own rules stand. */
.aiad {
	--aiad-bg: var(--surface-2);
	--aiad-fg: var(--text);
	--aiad-muted: var(--muted);
	--aiad-border: var(--border);
	--aiad-shadow: var(--shadow-lg);
	--aiad-hover: var(--surface-3);
	--aiad-head-fg: var(--text-2);
	--aiad-accent: var(--select-bg);
	--aiad-accent-fg: var(--select-text);
	--aiad-today: var(--accent);
	--aiad-font: var(--font);
}