/* ============================================================================
   master.css — shared tokens + primitives for Analytic Company tools.
   Link this BEFORE any tool-specific stylesheet.
   ========================================================================== */

@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 300 700; 
	font-display: swap;
	src: url('../../app/fonts/SpaceGrotesk-VariableFont_wght.ttf') format('truetype');
}

@font-face {
	font-family: 'Libre Franklin';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../../app/fonts/LibreFranklin-VariableFont_wght.ttf') format('truetype');
}

/* ---- IBM Plex Mono (static, one @font-face per weight) -------------------- */
@font-face {
	font-family: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../../app/fonts/IBMPlexMono-Regular.ttf') format('truetype');
}

@font-face {
	font-family: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../../app/fonts/IBMPlexMono-Medium.ttf') format('truetype');
}

@font-face {
	font-family: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../../app/fonts/IBMPlexMono-SemiBold.ttf') format('truetype');
}

:root
{
	/* ---- Fonts ---------------------------------------------------------- */
	--ac-font-display: 'Space Grotesk', 'Libre Franklin', Arial, sans-serif;
	--ac-font-body:    'Libre Franklin', Arial, sans-serif;
	--ac-font-mono:    'IBM Plex Mono', monospace;

	/* ---- Grounds & surfaces (translucent navy stack) -------------------- */
	--ac-ground:       #0e1320;
	--ac-surface:      rgba(22, 28, 42, 0.98); /* menus, flyouts, panels     */
	--ac-surface-bar:  rgba(18, 24, 36, 0.98); /* sticky bar                 */
	--ac-surface-tile: rgba(15, 20, 32, 0.60); /* tile over imagery          */

	/* ---- Hairlines (2 steps) -------------------------------------------- */
	--ac-line:         rgba(255, 255, 255, 0.08);
	--ac-line-strong:  rgba(255, 255, 255, 0.12);

	/* ---- Fill / hover --------------------------------------------------- */
	--ac-fill:         rgba(255, 255, 255, 0.06); /* control background      */
	--ac-hover:        rgba(255, 255, 255, 0.06); /* row / item hover        */

	/* ---- Text (4 steps) ------------------------------------------------- */
	--ac-text:           #eef1f7;
	--ac-text-secondary: #c9d2e0;
	--ac-text-body:      #a3adbe;
	--ac-text-muted:     #8493a8;

	/* ---- Accent & semantic ---------------------------------------------- */
	--ac-accent:            #7c9cff;
	--ac-accent-text:       #a9c0ff;                  /* glyph on accent tint */
	--ac-accent-tint:       rgba(124, 156, 255, 0.20);
	--ac-accent-line:       rgba(124, 156, 255, 0.35);
	--ac-on-accent:         #0e1320;                  /* text on solid accent */
	--ac-accent-rgb: 124, 156, 255;

	--ac-danger:            #ff5a63;
	--ac-danger-tint:       rgba(255, 70, 85, 0.14);
	--ac-danger-line:       rgba(255, 70, 85, 0.40);
	--ac-danger-hover:      rgba(255, 70, 85, 0.26);
	--ac-danger-text-hover: #ffdcdf;
	--ac-danger-rgb: 255, 90, 99;
	
	--ac-warning:           #d9b46a;
	--ac-warning-tint:      rgba(217, 180, 106, 0.12);
	--ac-warning-line:      rgba(217, 180, 106, 0.30);

	/* ---- Radius (4 steps) ----------------------------------------------- */
	--ac-r-sm:     6px;
	--ac-r-md:     8px;
	--ac-r-lg:     12px;
	--ac-r-pill:   999px;
	--ac-r-circle: 50%;

	/* ---- Elevation & effects -------------------------------------------- */
	--ac-shadow:     0 18px 44px -14px rgba(0, 0, 0, 0.70);
	--ac-blur:       16px;
	--ac-transition: 0.15s ease;

	--ac-scrollbar:       rgba(255, 255, 255, 0.18);
	--ac-scrollbar-hover: rgba(255, 255, 255, 0.30);

	--ac-disabled-opacity: 0.55; /* locked tools            */
	--ac-muted-opacity:    0.40; /* no-access rows          */

	/* ---- Type scale (6 steps) ------------------------------------------- */
	--ac-fs-xs:   10.5px; /* eyebrows, labels, meta          */
	--ac-fs-sm:   11.5px; /* small links, descriptions       */
	--ac-fs-md:   12.5px; /* default UI text                 */
	--ac-fs-base: 14px;   /* emphasis / user name            */
	--ac-fs-lg:   18px;   /* logo wordmark                   */
	--ac-fs-xl:   22px;   /* tile / section titles           */

	--ac-tracking-label: 0.14em;

	/* ---- Category palette (read in JS via --cat-<id>) ------------------- */
	--cat-evaluation:   #d9b46a;
	--cat-market:       #4fb6e8;
	--cat-development:  #7c9cff;
	--cat-prognosis:    #a98bff;
	--cat-trade:        #34c79a;
	--cat-leasing:      #f2925c;
	--cat-tco:          #f07aa3;
	--cat-specialtools: #93a3bb;
}

:root[data-theme="light"]
{
	--ac-ground:       #e7e2d8;
	--ac-surface:      #f7f3ea;
	--ac-surface-bar:  #efe9dc;
	--ac-surface-tile: rgba(247, 243, 234, 0.90);
	--ac-fill:         #ece7d9;

	--ac-line:         rgba(42, 37, 29, 0.10);
	--ac-line-strong:  rgba(42, 37, 29, 0.16);
	--ac-hover:        rgba(42, 37, 29, 0.05);

	--ac-text:           #2a251d;
	--ac-text-secondary: #4c463a;
	--ac-text-body:      #6b6455;
	--ac-text-muted:     #706a58;

	--ac-shadow:          0 14px 34px -16px rgba(56, 44, 22, 0.22);
	--ac-scrollbar:       rgba(42, 37, 29, 0.22);
	--ac-scrollbar-hover: rgba(42, 37, 29, 0.34);
	
	--ac-accent:            #4c62d9;
	--ac-accent-text:       #3b4dbe;
	--ac-accent-tint:       rgba(76, 98, 217, 0.10);
	--ac-accent-line:       rgba(76, 98, 217, 0.28);
	--ac-on-accent:         #ffffff;

	--ac-danger:            #b32530;
	--ac-danger-tint:       rgba(179, 37, 48, 0.10);
	--ac-danger-line:       rgba(179, 37, 48, 0.30);
	--ac-danger-hover:      rgba(179, 37, 48, 0.16);
	--ac-danger-text-hover: #931822;

	--ac-warning:           #74530c;
	--ac-warning-tint:      rgba(116, 83, 12, 0.14);
	--ac-warning-line:      rgba(116, 83, 12, 0.32);

	--ac-success:           #0a7150;
	--ac-success-text:      #0a6449;
	--ac-success-tint:      rgba(10, 113, 80, 0.12);
	--ac-success-line:      rgba(10, 113, 80, 0.30);

	--ac-info:              #2183bd;
	--ac-info-text:         #145d84;
	--ac-info-tint:         rgba(33, 131, 189, 0.12);
	--ac-info-line:         rgba(33, 131, 189, 0.30);

	/* Bare-RGB channels consumed by rgba(var(--…), α) — e.g. the rate-grid value
	   heatmap and diff swatches. Override the dark defaults from add-to-master.css
	   so the heatmap uses the deep light accent/danger and keeps its contrast. */
	--ac-accent-rgb: 76, 98, 217;
	--ac-danger-rgb: 179, 37, 48;

	--cat-evaluation:   #7a5d12;
	--cat-market:       #186a94;
	--cat-development:  #4557c9;
	--cat-prognosis:    #6a4fca;
	--cat-trade:        #0c7150;
	--cat-leasing:      #9f4615;
	--cat-tco:          #b52c5c;
	--cat-specialtools: #57647a;
}

/* ============================================================================
   Layer 2 — reusable primitives (ac-)
   ========================================================================== */

*, *::before, *::after
{
/* 	box-sizing: border-box; */
}

body {
	padding-bottom: 25px;
}

#particles-js {
	display: none;
}

/* floating card: menus, dropdowns, flyouts. Set placement + padding per use. */
.ac-popover
{
	position: absolute;
	background: var(--ac-surface);
	border: 1px solid var(--ac-line-strong);
	border-radius: var(--ac-r-lg);
	box-shadow: var(--ac-shadow);
	backdrop-filter: blur(var(--ac-blur));
	-webkit-backdrop-filter: blur(var(--ac-blur));
	padding: 6px;
	z-index: 30;
}

/* themed thin scrollbar */
.ac-scroll
{
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--ac-scrollbar) transparent;
}

.ac-scroll::-webkit-scrollbar { width: 8px; }
.ac-scroll::-webkit-scrollbar-track { background: transparent; }
.ac-scroll::-webkit-scrollbar-thumb
{
	background: var(--ac-scrollbar);
	border-radius: var(--ac-r-pill);
	border: 2px solid transparent;
	background-clip: content-box;
}
.ac-scroll::-webkit-scrollbar-thumb:hover
{
	background: var(--ac-scrollbar-hover);
	background-clip: content-box;
}

/* clickable menu row */
.ac-menu-item
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	text-align: left;
	padding: 9px 12px;
	border-radius: var(--ac-r-md);
	font: 500 var(--ac-fs-md) var(--ac-font-body);
	color: var(--ac-text-secondary);
	white-space: nowrap;
	background: none;
	border: none;
	cursor: pointer;
	transition: background var(--ac-transition);
}
.ac-menu-item:hover { background: var(--ac-hover); }

.ac-menu-item--danger
{
	color: var(--ac-danger);
	font-weight: 600;
	background: var(--ac-danger-tint);
	border: 1px solid var(--ac-danger-line);
}
.ac-menu-item--danger:hover
{
	background: var(--ac-danger-hover);
	color: var(--ac-danger-text-hover);
}

/* input-like control surface (triggers, toggles, fields) */
.ac-control
{
	background: var(--ac-fill);
	color: var(--ac-text);
	border: 1px solid var(--ac-line-strong);
	border-radius: var(--ac-r-sm);
}

/* small muted lock/affordance glyph */
.ac-lock
{
	flex-shrink: 0;
	font-size: 10px;
	color: var(--ac-text-muted);
}

/* state utilities */
.ac-is-locked { opacity: var(--ac-disabled-opacity); }
.ac-is-muted  { opacity: var(--ac-muted-opacity); }

/* ---- Buttons ---- */
.ac-btn {
	font: 600 var(--ac-fs-md) var(--ac-font-body);
	border: 1px solid var(--ac-line-strong);
	background: var(--ac-fill);
	color: var(--ac-text);
	padding: 9px 16px;
	border-radius: var(--ac-r-sm);
	cursor: pointer;
	transition: border-color var(--ac-transition), background var(--ac-transition), transform 0.05s;
}

.ac-btn:hover {
	border-color: var(--ac-accent-line);
}

.ac-btn-primary {
	background: var(--ac-accent);
	color: var(--ac-on-accent);
	border-color: var(--ac-accent);
}

.ac-btn-primary:hover {
	filter: brightness(1.06);
}

.ac-btn-danger:hover {
	background: var(--ac-danger-tint);
	color: var(--ac-danger-text-hover);
}

.ac-btn:disabled {
	opacity: var(--ac-disabled-opacity);
	cursor: not-allowed;
	filter: none;
}

/* ---- Eyebrow / tag label ---- */
.ac-tag {
	font-size: var(--ac-fs-xs);
	font-weight: 700;
	letter-spacing: var(--ac-tracking-label);
	text-transform: uppercase;
	color: var(--ac-text-muted);
	background: var(--ac-fill);
	padding: 4px 8px;
	border-radius: var(--ac-r-sm);
	white-space: nowrap;
}

/* ---- Segmented control ---- */
.ac-seg {
	display: inline-flex;
	border: 1px solid var(--ac-line-strong);
	border-radius: var(--ac-r-sm);
	overflow: hidden;
}

.ac-seg-btn {
	font: 600 var(--ac-fs-sm) var(--ac-font-body);
	border: 0;
	border-left: 1px solid var(--ac-line-strong);
	background: var(--ac-fill);
	color: var(--ac-text-muted);
	padding: 7px 12px;
	cursor: pointer;
}

.ac-seg-btn:first-child {
	border-left: 0;
}

.ac-seg-btn-on {
	background: var(--ac-accent);
	color: var(--ac-on-accent);
}

/* ---- Ghost icon button ---- */
.ac-iconbtn {
	font: 600 var(--ac-fs-sm) var(--ac-font-body);
	border: 0;
	background: transparent;
	color: var(--ac-text-muted);
	padding: 7px 9px;
	border-radius: var(--ac-r-md);
	cursor: pointer;
	transition: background var(--ac-transition), color var(--ac-transition);
}

.ac-iconbtn:hover {
	background: var(--ac-hover);
	color: var(--ac-text);
}

.ac-iconbtn-danger:hover {
	background: var(--ac-danger-tint);
	color: var(--ac-danger-text-hover);
}

/* ---- Themed horizontal scrollbar (companion to master's vertical .ac-scroll) ---- */
.ac-scroll-x {
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: thin;
	scrollbar-color: var(--ac-scrollbar) transparent;
}

.ac-scroll-x::-webkit-scrollbar {
	height: 8px;
}

.ac-scroll-x::-webkit-scrollbar-track {
	background: transparent;
}

.ac-scroll-x::-webkit-scrollbar-thumb {
	background: var(--ac-scrollbar);
	border-radius: var(--ac-r-pill);
	border: 2px solid transparent;
	background-clip: content-box;
}

.ac-scroll-x::-webkit-scrollbar-thumb:hover {
	background: var(--ac-scrollbar-hover);
	background-clip: content-box;
}

/* ---- Styled <select> (pairs with .ac-control) ----
   FALLBACK (all browsers, incl. Firefox / Safari): appearance:none strips the
   native chrome and draws a caret over the .ac-control surface; color-scheme
   darkens the native option popup. The full drop-down theming is layered on
   below via @supports for browsers with the customizable-select feature. */
.ac-select {
	appearance: none;
	-webkit-appearance: none;
	color-scheme: dark;
	width: 100%;
	font: var(--ac-fs-md) var(--ac-font-body);
	color: var(--ac-text);
	padding: 6px 28px 6px 8px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%238493a8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-repeat: no-repeat;
	background-position: right 8px center;
	cursor: pointer;
}

.ac-select:hover {
	border-color: var(--ac-accent-line);
}

.ac-select:focus-visible {
	outline: 2px solid var(--ac-accent);
	outline-offset: 2px;
}

.ac-select:disabled {
	opacity: var(--ac-disabled-opacity);
	cursor: not-allowed;
}

/* Fallback option list — tinted dark where the browser honours it. */
.ac-select option {
	background: var(--ac-surface);
	color: var(--ac-text);
}

/* ENHANCEMENT (modern Chrome / Edge): fully theme the closed control, the
   drop-down picker, its options and its scrollbar via the customizable select.
   Firefox / Safari skip this block and keep the fallback above. */
@supports (appearance: base-select) {
	.ac-select,
	.ac-select::picker(select) {
		appearance: base-select;
	}

	.ac-select {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 6px 8px;
		background-image: none;
	}

	/* Native caret glyph, tinted + flipped when open. */
	.ac-select::picker-icon {
		margin-left: auto;
		color: var(--ac-text-muted);
		transition: transform var(--ac-transition);
	}

	.ac-select:open::picker-icon {
		transform: rotate(180deg);
	}

	/* The drop-down popup: the popover surface + a themed scrollbar. */
	.ac-select::picker(select) {
		background: var(--ac-surface);
		border: 1px solid var(--ac-line-strong);
		border-radius: var(--ac-r-md);
		box-shadow: var(--ac-shadow);
		backdrop-filter: blur(var(--ac-blur));
		-webkit-backdrop-filter: blur(var(--ac-blur));
		padding: 6px;
		max-height: min(60vh, 340px);
    	position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
    	scrollbar-width: thin;
		scrollbar-color: var(--ac-scrollbar) transparent;
	}

	.ac-select::picker(select)::-webkit-scrollbar {
		width: 8px;
	}

	.ac-select::picker(select)::-webkit-scrollbar-thumb {
		background: var(--ac-scrollbar);
		border-radius: var(--ac-r-pill);
		border: 2px solid transparent;
		background-clip: content-box;
	}

	.ac-select::picker(select)::-webkit-scrollbar-thumb:hover {
		background: var(--ac-scrollbar-hover);
		background-clip: content-box;
	}

	/* Option rows styled like .ac-menu-item. */
	.ac-select option {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 8px 10px;
		border-radius: var(--ac-r-sm);
		color: var(--ac-text-secondary);
		background: transparent;
		cursor: pointer;
		transition: background var(--ac-transition);
	}

	.ac-select option:hover,
	.ac-select option:focus {
		background: var(--ac-hover);
		color: var(--ac-text);
	}

	.ac-select option:checked {
		color: var(--ac-text);
	}

	/* Tick shown against the current option. */
	.ac-select option::checkmark {
		color: var(--ac-accent);
	}
}

/* checkbox / radio (native input, restyled) */
.ac-checkbox,
.ac-radio
{
	appearance: none;
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	margin: 0;
	flex-shrink: 0;
	background: var(--ac-fill);
	border: 1px solid var(--ac-line-strong);
	cursor: pointer;
	transition: background var(--ac-transition), border-color var(--ac-transition);
}
.ac-checkbox { border-radius: var(--ac-r-sm); }
.ac-radio    { border-radius: var(--ac-r-circle); }

.ac-checkbox:checked,
.ac-radio:checked
{
	background: var(--ac-accent);
	border-color: var(--ac-accent);
}
.ac-checkbox:checked
{
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2.5 6.3l2.4 2.3 4.6-4.9' fill='none' stroke='%230e1320' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
}
.ac-radio:checked
{
	background-image: radial-gradient(circle at center, var(--ac-on-accent) 0 2.5px, transparent 3px);
}
.ac-checkbox:focus-visible,
.ac-radio:focus-visible
{
	outline: 2px solid var(--ac-accent);
	outline-offset: 2px;
}

/* label row wrapping a checkbox / radio */
.ac-check
{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--ac-fs-md);
	color: var(--ac-text-secondary);
	cursor: pointer;
}

/* footer */
.ac-footer
{
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	display: flex;
	justify-content: space-between;
	padding: 5px 12px;
	background: var(--ac-surface-bar);
	border-top: 1px solid var(--ac-line);
	backdrop-filter: blur(var(--ac-blur));
	-webkit-backdrop-filter: blur(var(--ac-blur));
	font-family: var(--ac-font-body);
	font-size: var(--ac-fs-xs);
	color: var(--ac-text-muted);
}

.ac-footer a {
	text-decoration: none;
}

.ac-footer span,
.ac-footer a
{
	cursor: pointer;
	color: var(--ac-text-muted);
	transition: color var(--ac-transition);
}

.ac-footer span:hover,
.ac-footer a:hover
{
	color: var(--ac-text);
}

.ac-footer #ac-footer-left,
.ac-footer #ac-footer-right {
	display: flex;
	align-items: center;
	gap: 20px;
}

.ac-footer #ac-footer-dev-info {
	font-family: var(--ac-font-mono);
	font-size: var(--ac-fs-xs);
}

.ac-footer #clock {
	color: inherit;
	font-family: var(--ac-font-mono);
	font-size: var(--ac-fs-xs);
	font-weight: inherit;	
	position: static;
	padding: 0;
	height: auto;
	width: 250px;
	text-align: right;
}

.ac-bottom-blocker {
	height: 25px;
}

#informationDiv .info-card
{
	background: var(--ac-surface);
	border: 1px solid var(--ac-line-strong);
	border-radius: var(--ac-r-lg);
	box-shadow: var(--ac-shadow);
	backdrop-filter: blur(var(--ac-blur));
	-webkit-backdrop-filter: blur(var(--ac-blur));
	overflow: hidden;
	font-family: var(--ac-font-body);
	color: var(--ac-text);
}

#informationDiv .info-card-head
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 9px 12px;
	border-bottom: 1px solid var(--ac-line);
	font-size: var(--ac-fs-md);
	font-weight: 600;
}

#informationDiv .info-card-title
{
	display: flex;
	align-items: center;
	gap: 8px;
}
#informationDiv .info-card-title .fa
{
	color: var(--ac-danger);
}

#informationDiv .info-card-close
{
	background: none;
	border: none;
	cursor: pointer;
	padding: 2px;
	line-height: 1;
	color: var(--ac-text-muted);
	transition: color var(--ac-transition);
}
#informationDiv .info-card-close:hover
{
	color: var(--ac-text);
}

#informationDiv .info-card-body
{
	padding: 10px 12px;
	font-size: var(--ac-fs-md);
	line-height: 1.45;
	color: var(--ac-text-body);
}
#informationDiv .info-card-body p
{
	margin: 0 0 8px;
}
#informationDiv .info-card-body p:last-child
{
	margin: 0;
}