@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700;800&display=swap");
@import url("https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.44.0/dist/tabler-icons.min.css");

.style1 {color: #e0a419}

/* CSS Document */

/* ---------------------------------------------------------------
   Palette based on lsp.io's brand (teal accent, DM Sans), lightened
   from the initial dark-navy pass and with red removed in favour of
   amber for warning/error states: page bg #141c30, card bg #212e4b,
   hairline borders at ~11% white, body copy #f4f8ff, accent teal
   #14b8a6, font DM Sans throughout.
------------------------------------------------------------------ */
:root {
	--navy-950:#141c30;
	--navy-900:#1b2540;
	--navy-800:#212e4b;
	--navy-700:#2c3c60;
	--brand-700:#0d9488;
	--brand-600:#14b8a6;
	--brand-500:#2dd4c2;
	--brand-100:rgba(20,184,166,0.14);
	--amber-500:#e0a419;
	--amber-100:rgba(224,164,25,0.14);
	--amber-600:#c7860f;
	--green-500:#34d399;
	--green-100:rgba(52,211,153,0.14);
	--text-primary:#f4f8ff;
	--text-secondary:rgba(244,248,255,0.66);
	--text-muted:rgba(244,248,255,0.44);
	--border-a:rgba(255,255,255,0.11);
	--border-a-strong:rgba(255,255,255,0.19);
	--gray-50:#182236;
	--gray-100:#212e4b;
	--gray-200:rgba(255,255,255,0.11);
	--gray-300:rgba(255,255,255,0.19);
	--gray-500:rgba(244,248,255,0.5);
	--gray-700:rgba(244,248,255,0.8);
	--gray-900:#f0f6ff;
	--radius:10px;
	--shadow:0 8px 24px rgba(0,0,0,0.35);
}

/* Whole-site sizing: scales layout, fonts, spacing, and icons together to
   90% of their previous values, uniformly, without needing to touch every
   hardcoded px value across site.css/login.css/jquery-ui.css and the inline
   <style> blocks in reports/*.php. `zoom` (rather than `transform: scale`)
   avoids leftover blank space and keeps click targets aligned with what's
   drawn. To go back to full size, remove this rule; to go smaller/larger,
   change the percentage. */
html { zoom: 70%; }

/* Un-classed links (mostly in the legacy report tables under reports/*.php,
   which predate this redesign) otherwise fall back to the browser's default
   blue/purple visited-link colors, which clash badly with the dark theme.
   :where() keeps this at zero specificity so it never fights any of our
   actual components (.a2, .btn, .ic-btn, .rep-card, etc), which all set
   their own link color via a real class and always win. */
:where(a) { color:var(--brand-500); text-decoration:none; }
:where(a:visited) { color:var(--brand-500); }
:where(a:hover), :where(a:active) { color:var(--brand-600); text-decoration:underline; }

body {
	margin:5;
	font-family: 'DM Sans', Arial, Verdana, Helvetica, sans-serif;
	font-size:19.5px;
	color: var(--text-primary);
	background: var(--navy-950);
}

/* zoom (above) doesn't rescale vw/vh -- they always measure the real
   browser window, unlike every other length unit. html,body need an
   explicit height so the % values below (used instead of vh) have
   something to resolve against and so containers keep filling the actual
   visible window at any zoom level, not just at 100%. */
html, body { height:100%; }

/* ---------------------------------------------------------------
   Shared shell (header / navigation) — applies to every page that
   includes includes/header.php or replicates the #banner markup.
   The original markup (banner_logo + menu_bar + system_text as
   siblings inside #banner) is unchanged; this turns the old
   three stacked bars into a single unified header purely with CSS.
------------------------------------------------------------------ */
#banner {
	display:flex;
	align-items:center;
	background: var(--navy-950);
	border-bottom:1px solid var(--border-a);
	height:96px;
	padding:0 24px;
	gap:24px;
}
#banner > div[style*="height:2px"] { display:none; }

.banner_logo {
	background:none;
	height:auto;
	display:flex;
	align-items:center;
	gap:12px;
	flex:none;
}
.banner_logo .support { display:none; }
.banner_logo .lsp_logo {
	display:block;
	order:-1;
	width:63px;
	height:50px;
	background-image:url("images/lsp-mark.png");
	background-repeat:no-repeat;
	background-position:left center;
	background-size:contain;
	flex:none;
}
.banner_logo .title {
	float:none;
	width:auto;
	height:auto;
	margin:0;
	font-family:'DM Sans', sans-serif;
	font-size:29px;
	font-weight:700;
	color:var(--text-primary);
	text-align:left;
	white-space:nowrap;
}
.banner_logo .title strong { margin-right:7px; }

.menu_bar {
	background:none;
	height:auto;
	margin:0;
	padding:0;
	display:flex;
	align-items:center;
	gap:2px;
	flex:1;
}
.menu_bar .menu { display:none; }
.a2 {
	color:var(--text-secondary);
	text-decoration:none;
	font-family:'DM Sans', Arial, sans-serif;
	font-size:22.5px;
	font-weight:500;
	padding:10px 14px;
	border-radius:7px;
}
.a2:hover { color:var(--text-primary); background:rgba(255,255,255,0.06); }
.a2.active { color:var(--brand-500); background:var(--brand-100); }
.a2 i { margin-right:12px; font-size:34px; vertical-align:-8px; }

.system_text {
	background:none;
	height:auto;
	margin:0;
	padding:0;
	display:flex;
	align-items:center;
	gap:14px;
	font-size:20.25px;
	color:var(--text-secondary);
	flex:none;
	margin-left:auto;
}
.system_date, .system_user {
	float:none;
	width:auto;
	color:inherit;
	font-family:'DM Sans', sans-serif;
	font-size:20.25px;
	font-weight:400;
}
.page_title {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 27px;
	font-style: normal;
	color: var(--text-primary);
}
.expired{
    background-color: var(--amber-100);
    color: var(--amber-600);
}

/* ---------------------------------------------------------------
   Report pages (reports/*.php) predate this redesign and ship with
   no DOCTYPE, so browsers render them in quirks mode. In quirks mode
   plain <td>/<th> cells don't reliably inherit body's text color, so
   they were falling back to black against the new dark background.
   This stylesheet is linked after each report's inline <style> block
   (same specificity, later in source order), so these rules win and
   force every un-classed table cell back to a readable color. The
   near-white "tr.header" row background used by every report is
   remapped to a dark surface for the same reason.
------------------------------------------------------------------ */
table, td, th { color: var(--text-primary); }
tr.header { background-color: var(--navy-700) !important; color: var(--text-primary) !important; }

/* Active Rooms / EoC Rooms / Room Audit reports (active-rooms.php and its
   siblings) carry their own local pastel palette — light grey/skyblue/
   turquoise row backgrounds with bright blue links — completely unrelated
   to the rest of the dark theme. Some of these files link site.css
   before their local <style> block instead of after (the opposite of
   every other report), so equal-specificity rules alone can't be trusted
   to win; !important guarantees these always resolve to the dark theme
   regardless of that per-file ordering quirk. */
.table_header, .table_header_col { background-color: var(--navy-700) !important; color: var(--text-primary) !important; }
.row, .b_row { background-color: var(--navy-800) !important; color: var(--text-primary) !important; font-weight: bold; }
.sub_row, .b_sub_row { background-color: var(--navy-900) !important; color: var(--text-primary) !important; }
.row a, .sub_row a, .b_row a, .b_sub_row a,
.row a:visited, .sub_row a:visited, .b_row a:visited, .b_sub_row a:visited { color: var(--brand-500) !important; }

/* ---------------------------------------------------------------
   Page layout + shared components
------------------------------------------------------------------ */
.page { max-width:min(1900px, 96%); margin:0 auto; padding:28px 24px 60px; }
.page-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:20px; }
.page-head h1 { font-size:30px; font-weight:700; margin:0; font-family:'DM Sans',sans-serif; color:var(--text-primary); }

.btn {
	display:inline-flex; align-items:center; justify-content:center; gap:6px;
	padding:13px 24px; border-radius:7px; font-size:20.25px; font-weight:700;
	border:1px solid transparent; cursor:pointer; font-family:'DM Sans',sans-serif;
	box-sizing:border-box;
}
.btn-primary { background:var(--brand-600); color:#03201c; }
.btn-primary:hover { background:var(--brand-500); }
.btn-secondary { background:var(--navy-800); border-color:var(--border-a); color:var(--text-primary); }
.btn-secondary:hover { border-color:var(--border-a-strong); }

/* Login card (login.php) */
.login-wrap {
	min-height:calc(100% - 96px);
	background: var(--navy-950);
	display:flex; align-items:center; justify-content:center;
	padding:40px 20px;
}
.login-card {
	width:380px; background:var(--navy-800); border-radius:14px;
	box-shadow:var(--shadow);
	padding:36px 32px 30px; border:1px solid var(--border-a);
}
.login-card .mark {
	width:75px; height:59px; margin-bottom:16px;
	background-image:url("images/lsp-mark.png"); background-repeat:no-repeat;
	background-position:left center; background-size:contain;
}
.login-card h2 { font-size:29px; margin:0 0 4px; font-weight:700; font-family:'DM Sans',sans-serif; color:var(--text-primary); }
.login-card p.sub { font-size:19.5px; color:var(--text-secondary); margin:0 0 24px; }
.field { margin-bottom:16px; }
.field label { display:block; font-size:19px; font-weight:500; color:var(--text-secondary); margin-bottom:6px; }
.field input, #login_box input[type="text"], #login_box input[type="password"] {
	width:100%; padding:10px 12px; border:1px solid var(--border-a); border-radius:8px;
	font-size:21px; font-family:'DM Sans',sans-serif; background:var(--navy-950); color:var(--text-primary); box-sizing:border-box;
}
.field input:focus { outline:2px solid var(--brand-600); outline-offset:1px; }
.login-card .btn-primary { width:100%; padding:16px; font-size:21px; }
.login-card .err { color:var(--amber-600) !important; font-weight:500; font-size:19.5px; margin:0 0 20px; }

/* Sites — icon buttons using the original vendor pngs */
.ic-row { display:flex; align-items:center; gap:2px; }
.ic-btn {
	width:68px; height:68px; border-radius:14px; display:inline-flex; align-items:center; justify-content:center;
	color:var(--text-secondary); font-size:36px; text-decoration:none; position:relative; vertical-align:middle;
}
.ic-btn img { width:58px; height:58px; object-fit:contain; display:block; opacity:0.85; }
.ic-btn:hover { background:rgba(255,255,255,0.07); }
.ic-btn:hover img { opacity:1; }
.ic-btn.muted img { opacity:0.28; }

/* Collapsible option groups — used when a site has more than one URL for the
   same tool (multiple switches, multiple WiFi APs, etc.) so the row doesn't
   stretch out with repeated icons. */
details.ic-dropdown { display:inline-block; position:relative; }
details.ic-dropdown > summary {
	list-style:none; cursor:pointer;
}
details.ic-dropdown > summary::-webkit-details-marker { display:none; }
details.ic-dropdown > summary::marker { content:""; }
details.ic-dropdown .ic-count {
	position:absolute; bottom:1px; right:1px; min-width:21px; height:21px; padding:0 3px;
	border-radius:7px; background:var(--brand-600); color:#03201c;
	font-size:12px; line-height:21px; text-align:center; font-weight:700; font-family:'DM Sans',sans-serif;
}
details.ic-dropdown .ic-menu {
	position:fixed; top:0; left:0; z-index:9999; min-width:220px; max-height:min(320px, 70vh);
	background:var(--navy-800); border:1px solid var(--border-a-strong); border-radius:10px;
	box-shadow:var(--shadow); padding:6px; display:flex; flex-direction:column; gap:1px;
	overflow-y:auto; visibility:hidden;
}
details.ic-dropdown[open] .ic-menu.ic-menu-positioned { visibility:visible; }
details.ic-dropdown .ic-menu a {
	display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:6px;
	font-size:19px; color:var(--text-secondary); text-decoration:none; white-space:nowrap;
}
details.ic-dropdown .ic-menu a span {
	font-family:'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
	font-variant-numeric:tabular-nums;
}
details.ic-dropdown .ic-menu a:hover { background:rgba(255,255,255,0.06); color:var(--text-primary); }
details.ic-dropdown .ic-menu img { width:38px; height:38px; object-fit:contain; flex:none; }

/* Site + generic tables */
table[style*="width:98%"] { border-collapse:collapse; width:100% !important; background:var(--navy-800); border:1px solid var(--border-a); border-radius:12px; overflow:hidden; }
.table_header_a {
	background:rgba(255,255,255,0.03) !important; color:var(--text-secondary); border:none !important;
	font-family:'DM Sans',sans-serif; font-size:17px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
	font-variant:normal; padding:10px 16px !important;
}
.table_row_a1, .table_row_a2 {
	background:var(--navy-800) !important; border-bottom:1px solid var(--border-a); color:var(--text-primary);
	font-family:'DM Sans',sans-serif; font-size:24px; padding:16px 20px !important;
}
.table_row_a1 td, .table_row_a2 td { padding:12px 16px; }
.table_header_a td { padding:10px 16px; }

.list_header_a {
	background:none; border:none; margin:24px 0 12px; padding:0 0 8px;
	border-bottom:1px solid var(--border-a);
	font-family:'DM Sans',sans-serif; font-size:17px; font-weight:700; color:var(--text-secondary);
	text-transform:uppercase; letter-spacing:.04em; font-variant:normal;
}

/* Spry tabbed panels reskin (used by sites.php, reports.php) */
.TabbedPanelsTabGroup { border:none !important; background:none !important; display:flex; gap:6px; margin-bottom:18px; }
.TabbedPanelsTab {
	border:1px solid var(--border-a) !important; background:var(--navy-800) !important; color:var(--text-secondary) !important;
	border-radius:24px !important; padding:10px 20px !important; font-size:19.5px; font-weight:500;
	font-family:'DM Sans',sans-serif; margin:0 !important;
}
.TabbedPanelsTabSelected, .TabbedPanelsTabHover {
	background:var(--brand-600) !important; border-color:var(--brand-600) !important; color:#03201c !important;
}
.TabbedPanelsContentGroup { border:none !important; background:none !important; }
.TabbedPanelsContent { padding:0 !important; }

/* Reports — report type cards + controls */
.rep-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:4px 0 4px; }
.rep-card {
	border:1.5px solid var(--border-a); border-radius:10px; padding:14px; cursor:pointer;
	display:flex; align-items:center; gap:10px; background:var(--navy-800); font-size:20.25px; font-weight:500;
	color:var(--text-primary); font-family:'DM Sans',sans-serif;
}
.rep-card i { font-size:36px; color:var(--brand-600); }
.rep-card input { position:absolute; opacity:0; width:0; height:0; }
.rep-card:has(input:checked) { border-color:var(--brand-600); background:var(--brand-100); }
.rep-controls { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
select.select {
	padding:12px 16px; border:1px solid var(--border-a); border-radius:8px; font-size:19.5px;
	font-family:'DM Sans',sans-serif; background:var(--navy-800); color:var(--text-primary);
}

/* Content page — reskin Bootstrap / jQuery UI controls to match shell */
#tabs.ui-tabs { border:none; background:none; }
#tabs .ui-tabs-nav {
	border:none; background:none; border-bottom:1px solid var(--border-a); border-radius:0; padding:0 0 0 0; margin-bottom:18px;
}
#tabs .ui-tabs-nav li { border:none; background:none; border-radius:0; margin:0 22px 0 0; top:0; }
#tabs .ui-tabs-nav .ui-tabs-anchor { padding:14px 6px; font-family:'DM Sans',sans-serif; font-size:20.25px; font-weight:500; color:var(--text-secondary); }
#tabs .ui-tabs-nav .ui-state-active { border-bottom:2px solid var(--brand-600); background:none; }
#tabs .ui-tabs-nav .ui-state-active .ui-tabs-anchor { color:var(--text-primary); }

.btn-success { background:var(--brand-600) !important; border-color:var(--brand-600) !important; color:#03201c !important; font-weight:700; }
.btn-success:hover { background:var(--brand-500) !important; border-color:var(--brand-500) !important; }
.btn-info { background:var(--brand-600) !important; border-color:var(--brand-600) !important; color:#03201c !important; font-weight:700; }
.btn-info:hover { background:var(--brand-500) !important; border-color:var(--brand-500) !important; }
#content-table.table { border:1px solid var(--border-a); border-radius:12px; font-family:'DM Sans',sans-serif; font-size:19.5px; background:var(--navy-800); color:var(--text-primary); }
#content-table.table thead th {
	background:rgba(255,255,255,0.03); color:var(--text-secondary); font-size:17px; font-weight:700;
	text-transform:uppercase; letter-spacing:.03em; border-bottom:1px solid var(--border-a) !important;
}
#content-table.table tbody td { border-top:1px solid var(--border-a) !important; color:var(--text-primary); }
/* Bootstrap's table-striped class (used on this table) paints its own
   light background (#f9f9f9) directly onto odd <tr>s, which sits behind
   our light td text with nothing to override it — white-on-white. #content-
   table gives these an ID, so they beat Bootstrap's classless-id rule
   regardless of load order. */
#content-table.table tbody tr:nth-of-type(odd) { background-color:var(--navy-900) !important; }
#content-table.table tbody tr:nth-of-type(even) { background-color:var(--navy-800) !important; }
#content-table.table tbody tr:hover { background-color:var(--navy-700) !important; }
/* DataTables' own CDN CSS sets .dataTables_wrapper .dataTables_info /
   .dataTables_filter / .dataTables_paginate to a near-black #333, at higher
   specificity than a plain .dataTables_wrapper rule, and it loads after
   site.css in content.php's <head> — so without an ID-scoped selector here
   it wins outright and the search/pagination/"Showing X of Y" text renders
   almost invisibly against the dark page. */
#content-table_wrapper { color:var(--text-primary); }
#content-table_wrapper .dataTables_length,
#content-table_wrapper .dataTables_filter,
#content-table_wrapper .dataTables_filter label,
#content-table_wrapper .dataTables_info,
#content-table_wrapper .dataTables_paginate { color:var(--text-primary); }
#content-table_wrapper .dataTables_paginate .paginate_button { color:var(--text-secondary) !important; }
#content-table_wrapper .dataTables_paginate .paginate_button.current,
#content-table_wrapper .dataTables_paginate .paginate_button.current:hover {
	background:var(--brand-600) !important; border-color:var(--brand-600) !important; color:#03201c !important;
}
#content-table_wrapper .dataTables_paginate .paginate_button.disabled,
#content-table_wrapper .dataTables_paginate .paginate_button.disabled:hover,
#content-table_wrapper .dataTables_paginate .paginate_button.disabled:active { color:var(--text-muted) !important; }
#content-table_wrapper .dataTables_filter input { background:var(--navy-950); border:1px solid var(--border-a); color:var(--text-primary); }
.modal-content { border-radius:12px; background:var(--navy-800); color:var(--text-primary); }
.modal-header { background:var(--navy-950); color:var(--text-primary); border-radius:12px 12px 0 0; border-bottom:1px solid var(--border-a); }
.modal-header .close { color:var(--text-primary); opacity:.8; }
.modal-footer { border-top:1px solid var(--border-a) !important; }
.form-control { background:var(--navy-950) !important; border:1px solid var(--border-a) !important; color:var(--text-primary) !important; }
.control-label { color:var(--text-secondary); }

/* ---------------------------------------------------------------
   Dashboard (dash/) — munin traffic graphs + the C3.js data-usage
   chart. The graphs themselves (pre-rendered munin PNGs, and C3.js's
   default axis/legend styling) are built for a light background, so
   rather than fight every library's internal text color, these sit
   in a plain white card against the dark page chrome around them —
   the same safe pattern used for the login card's contrast, just
   applied to graph containers instead of text.
------------------------------------------------------------------ */
.dash-subnav { display:flex; gap:10px; margin-bottom:20px; text-decoration:none; }
.dash-graphs { display:flex; flex-direction:column; gap:20px; }
.dash-graph-card { background:#ffffff; border:1px solid var(--border-a); border-radius:12px; padding:16px; }
.dash-graph-card img { max-width:100%; height:auto; display:block; border-radius:6px; margin:0 auto; }
.dash-chart-card { background:#ffffff; border-radius:12px; padding:24px; }
.dash-chart-card .chart { min-height:400px; }
.dash-chart-card #steps { margin-top:10px; text-align:center; }