/* ==========================================================================
   Fresh Live Leads — "LIVE TERMINAL"
   Acid lime on near-black. Monospace everything. Square corners, hairline
   borders, no shadows, no gradients-as-decoration.

   Every colour in this portal comes from the tokens below. Do NOT reintroduce
   hex literals in page-level <style> blocks — reference the custom properties.
   ========================================================================== */

:root {
	--fll-bg:          #07090C;
	--fll-panel:       #0C1014;
	--fll-panel-2:     #11161B;
	--fll-line:        #232A22;
	--fll-line-accent: rgba(198, 242, 78, .22);
	--fll-accent:      #C6F24E;
	--fll-accent-dim:  #9FC43C;
	--fll-text:        #E8EDE6;
	--fll-text-2:      #7E8A79;
	--fll-text-3:      #4E564B;   /* decorative only — fails AA, never for meaningful text */
	--fll-danger:      #FF5C5C;

	--fll-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* native scrollbars, date pickers and form controls render dark */
	color-scheme: dark;
}

* {
	margin: 0;
	padding: 0;
}

html {
	height: 100%;
	color-scheme: dark;
	background: var(--fll-bg);
}

body {
	min-height: 100%;
	background-color: var(--fll-bg);
	/* faint technical grid on the canvas */
	background-image:
		linear-gradient(rgba(198, 242, 78, .045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(198, 242, 78, .045) 1px, transparent 1px);
	background-size: 44px 44px;
	color: var(--fll-text);
	font-family: var(--fll-mono);
	font-size: 14px;
	-webkit-font-smoothing: antialiased;
}

/* ---- shared primitives -------------------------------------------------- */

.fll-eyebrow {
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--fll-text-2);
	font-weight: 700;
}

.fll-rule {
	height: 1px;
	border: 0;
	background: var(--fll-line-accent);
}

/* Visible focus is mandatory on a dark canvas. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--fll-accent);
	outline-offset: 2px;
}

/* Chrome paints autofilled inputs white — pin them back to the panel colour. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	-webkit-text-fill-color: var(--fll-text);
	-webkit-box-shadow: 0 0 0 1000px var(--fll-panel-2) inset;
	box-shadow: 0 0 0 1000px var(--fll-panel-2) inset;
	caret-color: var(--fll-text);
	font-family: var(--fll-mono);
}

/* Native date picker: show the calendar glyph in lime instead of black-on-black. */
input[type="date"] {
	color-scheme: dark;
}
input[type="date"]::-webkit-calendar-picker-indicator {
	filter: invert(86%) sepia(44%) saturate(718%) hue-rotate(21deg) brightness(104%) contrast(92%);
	cursor: pointer;
	opacity: 1;
}

/* legacy decorative blobs — the terminal canvas replaces them */
#bg, .circle, #aor, #aof {
	display: none !important;
}

/* ---- slide-out nav ------------------------------------------------------ */

#naop {
	height: 50px;
	width: 50px;
	border: 0;
	background: none;
	color: var(--fll-accent);
	font-size: 15px;
	z-index: 2;
	position: fixed;
	transform: rotatez(90deg);
	margin-left: 253px;
	border-radius: 0;
	cursor: pointer;
}

#nacl {
	height: 50px;
	width: 50px;
	border: 0;
	background: none;
	color: var(--fll-accent);
	font-size: 15px;
	z-index: 2;
	position: fixed;
	transform: rotatez(0deg);
	cursor: pointer;
}

.ni {
	height: 4px;
	width: 32px;
	background: var(--fll-accent);
	margin: 5px 4px;
	border-radius: 0;
	transition: transform .18s ease, opacity .18s ease;
}
#n2 { width: 20px; }
#nc1 { transform: rotateZ(45deg); }
#nc2 { display: none; }
#nc3 {
	transform: rotateZ(-45deg);
	margin-top: -13px;
}

#navo {
	height: 100%;
	width: 300px;
	background: var(--fll-panel);
	border: 0;
	border-right: 2px solid var(--fll-accent);
	z-index: 1;
	position: fixed;
	top: 0;
	overflow: hidden;
	border-radius: 0;
}

#navc {
	height: 0;
	width: 0;
	background: var(--fll-panel);
	border: 0;
	z-index: 1;
	position: fixed;
	top: 0;
	overflow: hidden;
}

#navIco {
	height: 100px;
	width: 250px;
	margin-left: 0;
}
#navIco img {
	height: 70px;
	margin-top: 20px;
}

#navBut a {
	margin: 0;
	text-decoration: none;
	color: var(--fll-text);
	background: transparent;
	padding: 14px 18px;
	display: block;
	width: auto;
	text-align: left;
	border-radius: 0;
	min-height: 44px;
	box-sizing: border-box;
}

#navSoc {
	position: absolute;
	bottom: 0;
	width: 100%;
}
#navSoc h1 {
	font-size: 10px;
	margin-left: 18px;
	margin-bottom: 14px;
	color: var(--fll-text-3);
	font-weight: 400;
	letter-spacing: .2em;
	text-transform: uppercase;
}

/* ---- page scaffolding --------------------------------------------------- */

#fre { height: 86px; }

#ho {
	height: auto;
	width: 300px;
	background: var(--fll-panel);
	border: 1px solid var(--fll-line);
	border-left: 2px solid var(--fll-accent);
	padding: 18px;
	border-radius: 0;
}
#ho h1 {
	font-size: 22px;
	margin: 0;
	color: var(--fll-text);
	font-family: var(--fll-mono);
	font-weight: 800;
	letter-spacing: -.035em;
	text-transform: uppercase;
	text-align: center;
}

/* ---- add-user form ------------------------------------------------------ */

#adu {
	width: 320px;
	height: auto;
}
#adu input {
	width: 100%;
	box-sizing: border-box;
	padding: 13px 14px;
	margin-top: 12px;
	border: 1px solid var(--fll-line);
	background: var(--fll-panel-2);
	border-radius: 0;
	font-size: 13px;
	font-family: var(--fll-mono);
	color: var(--fll-text);
	min-height: 44px;
}
#adu input::placeholder {
	color: var(--fll-text-2);
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: 11px;
}
#adu input:focus {
	border-color: var(--fll-accent);
}
#adu select {
	width: 100%;
	font-size: 13px;
	padding: 10px;
	font-family: var(--fll-mono);
	border: 1px solid var(--fll-line);
	background: var(--fll-panel-2);
	color: var(--fll-text);
	border-radius: 0;
}
#adu img { height: 65px; }

#ado {
	height: auto;
	width: 300px;
	margin-top: 0;
	background: var(--fll-panel);
	border: 1px solid var(--fll-line);
	border-radius: 0;
	padding: 18px;
}
#ado h1 {
	font-size: 16px;
	text-align: left;
	color: var(--fll-accent);
	text-transform: uppercase;
	letter-spacing: -.035em;
}

#ads {
	width: fit-content;
	float: left;
}
#ads h1 { float: left; }
#ads select {
	float: left;
	margin: 0 10px;
	border: 1px solid var(--fll-line);
	padding: 6px;
	width: 90px;
	color: var(--fll-text);
	background: var(--fll-panel-2);
	border-radius: 0;
	font-family: var(--fll-mono);
}

/* ---- tables (terminal readout) ------------------------------------------
   The legacy rule here used to be `th, td { background:#eee }`, which painted
   grey blocks across the whole table on a black canvas. Tokens only now. */

table {
	border-collapse: collapse;
	width: 100%;
	font-family: var(--fll-mono);
}

th, td {
	background: transparent;
	padding: 13px 16px;
	border-radius: 0;
	font-size: 12px;
	height: auto;
	text-align: left;
}

th {
	background: transparent;
	color: var(--fll-accent);
	text-transform: uppercase;
	letter-spacing: .14em;
	font-size: 10px;
	font-weight: 700;
	border-bottom: 1px solid var(--fll-accent);
	cursor: pointer;
	white-space: nowrap;
}

td {
	color: var(--fll-text);
	border-bottom: 1px solid var(--fll-line);
}

#tabl tbody tr:nth-child(even) { background: transparent; }
#tabl tbody tr:hover td { background: var(--fll-panel-2); }

.ord {
	color: var(--fll-accent);
	cursor: pointer;
}

@media only screen and (max-width: 400px) {
	th { font-size: 9px; padding: 11px 9px; }
	td { font-size: 11px; padding: 11px 9px; }
}
@media only screen and (min-width: 600px) {
	th { font-size: 10px; }
	td { font-size: 13px; }
}
@media (max-width: 720px) {
	#navo { width: 100vw; border-radius: 0; }
	#naop { margin-left: calc(100vw - 56px); }
}

/* ---- order widgets ------------------------------------------------------ */

#orderD {
	width: 320px;
	text-align: left;
	font-size: 11px;
	padding: 10px;
}
#orderD h1 { margin: 10px; }

#orderIn { width: 300px; height: fit-content; }
#orderIn input {
	width: 100%;
	box-sizing: border-box;
	padding: 12px;
	margin-top: 12px;
	border: 1px solid var(--fll-line);
	background: var(--fll-panel-2);
	border-radius: 0;
	font-size: 13px;
	font-family: var(--fll-mono);
	color: var(--fll-text);
}

#aorc {
	border: 0;
	padding: 11px;
	text-align: right;
	width: 100%;
	background: var(--fll-accent);
	color: var(--fll-bg);
	font-family: var(--fll-mono);
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .2em;
	cursor: pointer;
}
#aorc:hover { background: var(--fll-accent-dim); }

#orf { height: 50px; }
#dd { color: var(--fll-accent); font-size: 18px; }

/* The pager is row-based now; the old 420px pixel window must not clip it.
   overflow-x lets the readout scroll sideways on phones instead of widening
   the whole page; height:auto means nothing is clipped vertically. */
#tdata {
	height: auto;
	overflow-x: auto;
	overflow-y: hidden;
}

#Sr {
	margin: 0;
	padding: 10px 12px;
	width: 200px;
	color: var(--fll-text);
	background: var(--fll-panel-2);
	border: 1px solid var(--fll-line);
	border-radius: 0;
	font-family: var(--fll-mono);
	font-size: 13px;
	min-height: 44px;
	box-sizing: border-box;
}
#Sr:focus { border-color: var(--fll-accent); }

#tablebutt {
	height: auto;
	width: auto;
}
#tablBU {
	float: none;
	margin: 0;
	border: 0;
	padding: 11px 20px;
	width: auto;
	min-width: 118px;
	min-height: 44px;
	background: var(--fll-accent);
	color: var(--fll-bg);
	font-family: var(--fll-mono);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .2em;
	text-transform: uppercase;
	cursor: pointer;
	border-radius: 0;
}
#tablBU:hover { background: var(--fll-accent-dim); }

#pnum {
	float: none;
	margin: 0;
	color: var(--fll-text-2);
	font-size: 12px;
	letter-spacing: .14em;
	font-weight: 400;
}

#ordR {
	width: 100%;
	font-size: 13px;
	padding: 10px;
	font-family: var(--fll-mono);
	background: var(--fll-panel-2);
	color: var(--fll-text);
	border: 1px solid var(--fll-line);
	border-radius: 0;
	margin-top: 24px;
}

/* ---- shared sky-announce.js widgets -------------------------------------
   That file is shared across every portal and must not be edited here, so its
   inline styles are re-skinned from CSS. Author `!important` outranks inline
   declarations, which is the only lever available. */

div[data-sky-announce] {
	background: rgba(7, 9, 12, .72) !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}
div[data-sky-announce] > div,
#sky-notif-banner {
	background: var(--fll-panel) !important;
	border: 1px solid var(--fll-line) !important;
	border-left: 2px solid var(--fll-accent) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--fll-text) !important;
	font-family: var(--fll-mono) !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}
div[data-sky-announce] > div div,
#sky-notif-banner span {
	color: var(--fll-text) !important;
}
div[data-sky-announce] button,
#sky-notif-banner button[data-act="enable"] {
	background: var(--fll-accent) !important;
	color: var(--fll-bg) !important;
	border-radius: 0 !important;
	font-family: var(--fll-mono) !important;
	font-weight: 800 !important;
	letter-spacing: .2em !important;
	text-transform: uppercase !important;
	min-height: 44px !important;
}
div[data-sky-announce] button:hover,
#sky-notif-banner button[data-act="enable"]:hover {
	background: var(--fll-accent-dim) !important;
}
#sky-notif-banner button[data-act="dismiss"] {
	color: var(--fll-text-2) !important;
	background: transparent !important;
}