/* =========================================================================
   refined.css  —  Shared component and polish layer.
   Loaded after the vendor kit, palettes.css and main.css.

   Design intent: keep the warm neumorphic identity in both palettes.
   Text is a neutral grey hierarchy; copper is an ACCENT used sparingly
   (active state, key numbers, links, primary actions), not the color of all
   text. Teal = positive, rose = negative/danger, blue = informational.
   ========================================================================= */
/* ---- Base ---------------------------------------------------------------- */
body {
	min-height: 100vh;              /* was 200vh — killed the dead scroll space */
	background-color: var(--bg);
	color: var(--text-secondary);
	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	letter-spacing: 0.1px;
	/* Sticky footer: header / main / footer stack, main grows to fill. */
	display: flex;
	flex-direction: column;
}
body > main { flex: 1 0 auto; }

/* Shared controls consume the palette even when the vendor kit has literal
   light colors. Theme changes do not alter their geometry or behavior. */
.alert { background: var(--surface-raised); color: var(--text-secondary); border-color: var(--border); }
.alert-warning { background: var(--warning-dim); color: var(--warning); }
.alert-success { background: var(--success-dim); color: var(--success); }
.alert-danger { background: var(--danger-dim); color: var(--danger); }
.alert-info { background: var(--info-dim); color: var(--info); }
.alert .alert-link { color: inherit; text-decoration: underline; }
.form-control, .form-select { background-color: var(--surface); border-color: var(--border); }
.form-control:focus, .form-select:focus { background-color: var(--surface); border-color: var(--accent); }
.form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--surface-sunken); }
.close { color: var(--text-secondary); text-shadow: none; }
.close:hover { color: var(--text-primary); }
:root[data-theme="light"] .flash-container .btn-close { filter: none; }
.navbar-toggler-icon { filter: grayscale(1) brightness(0) invert(0.75); }
:root[data-theme="light"] .navbar-toggler-icon { filter: brightness(0.35); }
:root[data-theme="light"] input[type="time"]::-webkit-calendar-picker-indicator { filter: none; }

/* ---- Footer -------------------------------------------------------------- */
.site-footer {
	flex-shrink: 0;
	margin-top: 3rem;
	padding: 1.6rem 0;
	border-top: 1px solid var(--border);
	background-color: var(--bg);
}
.site-footer .footer-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
}
.footer-brand {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--text-secondary);
	font-weight: 700;
	font-size: 0.92rem;
}
.footer-brand i { color: var(--accent); }
.footer-links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer-links a { color: var(--text-muted); font-size: 0.86rem; }
.footer-links a:hover { color: var(--accent); }
.footer-copy { color: var(--text-faint); font-size: 0.82rem; }

/* ---- Responsive refinements --------------------------------------------- */
@media (max-width: 991.98px) {
	/* Company detail: space the stacked aside + timeline apart */
	.company-detail .col-lg-8 { margin-top: 1.25rem; }
	/* the container's vertical centering isn't wanted once columns stack */
	.company-detail.d-flex { align-items: flex-start !important; }
}
@media (max-width: 768px) {
	/* Trim heavy paddings so content breathes on small screens */
	.section-card { padding: 1.15rem 1.15rem; }
	.footer-inner { justify-content: center; text-align: center; }
	/* Timeline header wraps; keep the filter chips comfortable */
	.company-detail .timeline-filters { width: 100%; }
}

/* Neutral text hierarchy — overrides main.css's copper-for-everything rule. */
h1, h2, h3, h4, h5, h6 {
	color: var(--text-primary);
	font-weight: 700;
	letter-spacing: -0.01em;
}
p, label, span, td, th, li, dd, dt, div {
	/* only sets a sane default; explicit color utilities still win */
}
p { color: var(--text-secondary); }

small, .text-secondary { color: var(--text-secondary) !important; }
.text-muted { color: var(--text-muted) !important; }
/* Soften Bootstrap's harsh red everywhere to our on-brand dusty rose. */
.text-danger { color: var(--danger) !important; }
/* Legacy mint classes decorate ordinary controls, not success states. */
.text-mint-green { color: var(--text-primary) !important; }
.btn-neu.text-mint-green { color: var(--accent) !important; }
.btn-neu.text-mint-green:hover { color: var(--accent-hover) !important; }
.task-status-btn.btn-neu-inset.text-mint-green { color: var(--success) !important; }

a {
	color: var(--accent);
	text-decoration: none;
	transition: color 0.15s ease;
}
a:hover { color: var(--accent-hover); }

/* ---- Accent / semantic utilities ---------------------------------------- */
.text-accent, .text-bronze, .text-main { color: var(--accent) !important; }
.text-success-c { color: var(--success) !important; }
.text-danger-c  { color: var(--danger) !important; }
.text-info-c    { color: var(--info) !important; }
.text-primary-c { color: var(--text-primary) !important; }
.text-muted-c   { color: var(--text-muted) !important; }

/* ---- Forms --------------------------------------------------------------- */
.form-control,
.neu-input,
.neu-input-shallow,
.custom-select,
textarea {
	color: var(--text-primary) !important;
}
.form-control::placeholder,
.neu-input::placeholder,
.neu-input-shallow::placeholder,
textarea::placeholder {
	color: var(--text-faint) !important;
	opacity: 1;
}

/* Native <select> option popups default to white — make them match the theme. */
select option,
select optgroup {
	background-color: var(--surface-raised);
	color: var(--text-primary);
}

/* Form labels — the bundled light-theme kit colours these dark (invisible on
   our dark background). Make them a readable muted label everywhere. */
.form-label,
label.form-label {
	color: var(--text-muted) !important;
	font-weight: 600;
	font-size: 0.85rem;
	margin-bottom: 0.4rem;
}

/* Pill tabs — the kit renders the active tab text dark (invisible). */
.nav-pills .nav-link { color: var(--text-muted) !important; font-weight: 600; }
.nav-pills .nav-link:hover { color: var(--text-primary) !important; }
.nav-pills .nav-link.active { color: var(--accent) !important; background-color: transparent !important; }
.nav-pills .nav-link.active .badge,
.nav-pills .nav-link .badge { background-color: var(--accent-dim) !important; color: var(--accent) !important; }

/* Checkboxes — custom dark neumorphic box (the raw white default clashed
   badly with the dark theme; accent-color alone can't restyle the box). */
input[type="checkbox"]:not(.form-check-input) {
	-webkit-appearance: none;
	appearance: none;
	width: 1.15rem;
	height: 1.15rem;
	border-radius: 0.35rem;
	background: var(--surface);
	box-shadow: inset 2px 2px 4px var(--neu-dark), inset -2px -2px 4px var(--neu-light);
	cursor: pointer;
	position: relative;
	vertical-align: middle;
	transition: background 0.15s ease, box-shadow 0.15s ease;
	flex-shrink: 0;
}
input[type="checkbox"]:not(.form-check-input):hover {
	box-shadow: inset 1px 1px 3px var(--neu-dark), inset -1px -1px 3px var(--neu-light);
}
input[type="checkbox"]:not(.form-check-input):checked {
	background: var(--accent-fill);
	box-shadow: 2px 2px 4px var(--neu-dark), -2px -2px 4px var(--neu-light);
}
input[type="checkbox"]:not(.form-check-input):checked::after {
	content: '';
	position: absolute;
	left: 6px;
	top: 2px;
	width: 4px;
	height: 8px;
	border: solid #201a13;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
input[type="checkbox"]:not(.form-check-input):indeterminate {
	background: var(--accent-fill);
}
input[type="checkbox"]:not(.form-check-input):indeterminate::after {
	content: '';
	position: absolute;
	left: 3px;
	top: 7px;
	width: 10px;
	height: 2px;
	background: #201a13;
}
input[type="radio"] { accent-color: var(--accent); cursor: pointer; }

/* ---- Tables -------------------------------------------------------------- */
.table {
	--bs-table-color: var(--text-secondary);
	color: var(--text-secondary);
}
.table > thead th,
.table th {
	color: var(--text-muted) !important;
	font-weight: 600;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-color: var(--border) !important;
}
.table > tbody td {
	color: var(--text-secondary) !important;
	border-color: var(--border-soft) !important;
	vertical-align: middle;
}
/* Row hover for list tables */
.table.table-hover > tbody > tr:hover > * {
	background-color: var(--wash-faint) !important;
}

/* ---- Buttons ------------------------------------------------------------- */
.btn-neu { color: var(--text-secondary); }
.btn-neu:hover, .btn-neu:focus { color: var(--text-primary); }

/* A real primary action button (copper) for key CTAs. */
.btn-accent {
	background: linear-gradient(145deg, #ffb877, #f0a058);
	color: #201a13 !important;
	font-weight: 700;
	border: none;
	box-shadow: 4px 4px 10px var(--neu-dark), -4px -4px 10px var(--neu-light);
}
.btn-accent:hover { background: var(--accent-grad-strong); color: #201a13 !important; }

/* ---- Badges / pills ------------------------------------------------------ */
.pill {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.2rem 0.65rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}
.pill-accent  { background: var(--accent-dim);  color: var(--accent);  }
.pill-success { background: var(--success-dim); color: var(--success); }
.pill-danger  { background: var(--danger-dim);  color: var(--danger);  }
.pill-info    { background: var(--info-dim);    color: var(--info);    }
.pill-muted   { background: var(--wash); color: var(--text-muted); }

/* Pipeline stage pills — semantic, low-saturation. Global so lists and the
   company detail header share one vocabulary. */
.stage-new-lead       { background: var(--wash);   color: var(--text-muted); }
.stage-contacted      { background: var(--info-dim);          color: var(--info); }
.stage-call-scheduled { background: var(--accent-dim);        color: var(--accent); }
.stage-proposal-sent  { background: var(--warning-dim);   color: var(--warning); }
.stage-closed-won     { background: var(--success-dim);       color: var(--success); }
.stage-closed-lost    { background: var(--danger-dim);        color: var(--danger); }

/* ---- Navbar -------------------------------------------------------------- */
.navbar-bg { background-color: var(--bg); border-bottom: 1px solid var(--border); }
.navbar-nav .nav-link { color: var(--text-muted) !important; font-weight: 600; }
.navbar-nav .nav-link:hover { color: var(--text-primary) !important; }
.navbar-nav .nav-link.active { color: var(--accent) !important; }

/* ---- Scrollbar ----------------------------------------------------------- */
::-webkit-scrollbar { width: 0.5rem; height: 0.5rem; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
	background: var(--scrollbar);
	border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); }

/* ---- Misc ---------------------------------------------------------------- */
hr { border-color: var(--border); opacity: 1; }
.modal-content { background-color: var(--surface); color: var(--text-secondary); }
.modal-header, .modal-footer { border-color: var(--border); }
/* Dark elevation shadow — overrides the bundled BS4 neumorphism white/light
   dropdown shadow that otherwise bleeds through. */
.dropdown-menu {
	background-color: var(--surface-raised);
	border: 1px solid var(--border);
	box-shadow: 6px 8px 20px var(--shadow-menu), -2px -2px 8px var(--wash-faint) !important;
}
.dropdown-item { color: var(--text-secondary); }
.dropdown-item:hover { background-color: var(--wash); color: var(--text-primary); }

/* ---- Neumorphism — retuned shadows ---------------------------------------
   Softer, tighter, and balanced around the #2c2b2b surface. Everything routes
   through --neu-dark / --neu-light so the whole system tweaks from one place.
   -------------------------------------------------------------------------- */
.neu {
	box-shadow: 7px 7px 14px var(--neu-dark), -7px -7px 14px var(--neu-light);
}
.neu-shallow {
	box-shadow: 5px 5px 11px var(--neu-dark), -5px -5px 11px var(--neu-light);
}
.btn-neu,
.btn-group > .btn:not(:first-child),
.btn-group > .btn-group:not(:first-child) {
	box-shadow: 4px 4px 8px var(--neu-dark), -4px -4px 8px var(--neu-light) !important;
}
/* Pressed / active / hover — a shallow inset using the same stops */
.btn-neu:hover, .btn-neu:focus, .btn-neu:active, .btn-neu-inset,
.btn-group > .btn:not(:first-child):hover,
.btn-group > .btn:not(:first-child):focus,
.btn-group > .btn:not(:first-child):active {
	box-shadow: inset 2px 2px 5px var(--neu-dark), inset -2px -2px 5px var(--neu-light) !important;
}

/* Inset elements (inputs, sunken wells) */
.neu-inset {
	box-shadow: inset 5px 5px 9px var(--neu-dark), inset -5px -5px 9px var(--neu-light) !important;
}
.neu-inset-shallow {
	box-shadow: inset 4px 4px 8px var(--neu-dark), inset -4px -4px 8px var(--neu-light) !important;
}
.neu-input {
	box-shadow: inset 3px 3px 6px var(--neu-dark), inset -3px -3px 6px var(--neu-light) !important;
}
.neu-input-shallow,
.datepicker {
	box-shadow: inset 4px 4px 6px var(--neu-dark), inset -3px -3px 6px var(--neu-light) !important;
}
.neu-input:focus, .neu-input:active {
	box-shadow: inset 2px 2px 5px var(--neu-dark), inset -2px -2px 6px var(--neu-light) !important;
}

/* =========================================================================
   Component kit — the vocabulary the redesign is built from.
   Warm (copper) is the hero; teal/blue/rose are status only.
   ========================================================================= */

/* ---- Avatars / monograms ------------------------------------------------- */
.avatar {
	--sz: 2.5rem;
	width: var(--sz);
	height: var(--sz);
	border-radius: 32%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	letter-spacing: 0.01em;
	font-size: calc(var(--sz) * 0.38);
	text-transform: uppercase;
	color: var(--accent-ink);
	background: var(--accent-grad);
	box-shadow: 3px 3px 8px var(--neu-dark), -3px -3px 8px var(--neu-light);
	flex-shrink: 0;
	overflow: hidden;
}
.avatar-lg { --sz: 4rem; border-radius: 1.3rem; }
.avatar-sm { --sz: 2.1rem; border-radius: 0.7rem; }
/* soft variant: neu well with copper initials (used for contacts) */
.avatar-soft {
	background: var(--surface);
	color: var(--accent);
	box-shadow: inset 2px 2px 5px var(--neu-dark), inset -2px -2px 5px var(--neu-light);
}

/* ---- Icon tiles (reusable colored chip) ---------------------------------- */
.icon-tile {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 0.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.95rem;
	flex-shrink: 0;
	box-shadow: inset 3px 3px 6px var(--neu-dark), inset -3px -3px 6px var(--neu-light);
}
.icon-tile-accent { color: var(--accent); }
.icon-tile-teal   { color: var(--success); }
.icon-tile-rose   { color: var(--danger); }
.icon-tile-info   { color: var(--info); }
.icon-tile-warn   { color: var(--warning); }

/* ---- Section card (clean card with an uppercase header) ------------------ */
.section-card { border-radius: var(--r-lg); padding: 1.35rem 1.4rem; margin-bottom: 1.5rem; }
.section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 1.1rem;
}
.section-title {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin: 0;
}
.section-title i { color: var(--accent); font-size: 0.9rem; }

/* ---- Inline-editable property rows --------------------------------------- */
.prop-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.15rem 0;
	border-bottom: 1px solid var(--border-soft);
}
.prop-row:last-child { border-bottom: 0; }
.prop-label {
	flex: 0 0 38%;
	color: var(--text-muted);
	font-size: 0.82rem;
	font-weight: 600;
}
.prop-value { flex: 1; min-width: 0; }
.prop-value input,
.prop-value select {
	width: 100%;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	color: var(--text-primary) !important;
	font-size: 0.9rem;
	font-weight: 500;
	padding: 0.4rem 0.55rem;
	border-radius: 0.5rem;
	transition: background 0.15s ease, box-shadow 0.15s ease;
}
.prop-value input::placeholder { color: var(--text-faint) !important; }
.prop-value input:hover,
.prop-value select:hover { background: var(--wash-soft) !important; cursor: text; }
.prop-value input:focus,
.prop-value select:focus {
	background: var(--surface) !important;
	box-shadow: inset 2px 2px 5px var(--neu-dark), inset -2px -2px 5px var(--neu-light) !important;
	outline: none;
}

/* ---- Quick-stat chips ---------------------------------------------------- */
.quick-stats { display: flex; gap: 0.55rem; }
.qstat {
	flex: 1;
	text-align: center;
	padding: 0.65rem 0.3rem;
	border-radius: 0.8rem;
	box-shadow: inset 2px 2px 5px var(--neu-dark), inset -2px -2px 5px var(--neu-light);
}
.qstat-num {
	display: block;
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--text-primary);
	font-variant-numeric: tabular-nums;
}
.qstat-label {
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--text-muted);
}

/* ---- Timeline rail ------------------------------------------------------- */
.timeline-feed { position: relative; padding-left: 2.5rem; }
.timeline-feed::before {
	content: '';
	position: absolute;
	left: 0.92rem;
	top: 0.4rem;
	bottom: 0.4rem;
	width: 2px;
	background: linear-gradient(var(--border), transparent);
	background-color: var(--border);
}
.tl-dot {
	position: absolute;
	left: -2.5rem;
	top: 0;
	width: 1.85rem;
	height: 1.85rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.78rem;
	background: var(--surface);
	box-shadow: 2px 2px 6px var(--neu-dark), -2px -2px 6px var(--neu-light);
	z-index: 1;
}

/* ---- Filter chips -------------------------------------------------------- */
.chip-row { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.filter-chip {
	padding: 0.3rem 0.85rem;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--text-muted);
	background: transparent;
	border: none;
	box-shadow: 3px 3px 7px var(--neu-dark), -3px -3px 7px var(--neu-light);
	cursor: pointer;
	transition: color 0.15s ease, box-shadow 0.15s ease;
}
.filter-chip:hover { color: var(--text-primary); }
.filter-chip.active {
	color: var(--accent);
	box-shadow: inset 2px 2px 5px var(--neu-dark), inset -2px -2px 5px var(--neu-light);
}

/* ---- Live recording meter (AudioMeter, js/audio-meter.js) ----------------
   One inset well that opens smoothly when a recording starts, so no surface
   jumps when the meter appears. .am-block opens downward (its own row);
   .am-inline opens sideways (inside an existing control row). */
.audio-meter-slot {
	overflow: hidden;
	opacity: 0;
	transition: opacity 0.2s ease, max-height 0.22s ease, max-width 0.22s ease, margin 0.22s ease;
}
.audio-meter-slot.am-block { max-height: 0; width: 100%; margin-top: 0; }
.audio-meter-slot.am-block.is-live { max-height: 3rem; margin-top: 0.65rem; opacity: 1; }
.audio-meter-slot.am-inline { max-width: 0; flex: 0 0 auto; align-self: center; }
.audio-meter-slot.am-inline.is-live { max-width: 7rem; opacity: 1; }
.audio-meter {
	display: block;
	height: 2.1rem;
	border-radius: 0.55rem;
	background: var(--surface-sunken);
	box-shadow: inset 2px 2px 4px var(--neu-dark), inset -2px -2px 4px var(--neu-light);
}
.am-block .audio-meter { width: 100%; }
.am-inline .audio-meter { width: 7rem; }

/* ---- Loom video players (js/loom-embed.js) ------------------------------
   Appended under any message body that mentions a loom.com share link, on the
   company timeline and in the Messages thread. Classic padding-top 16:9 box so
   the player keeps its shape inside a narrow SMS bubble and a wide email card
   alike; the iframe itself is lazy, so a long timeline does not load twenty
   players at once. */
.loom-embed {
	position: relative;
	width: 100%;
	max-width: 34rem;
	margin-top: 0.7rem;
	padding-top: 0;
	border-radius: var(--r-md);
	overflow: hidden;
	background: var(--surface-sunken);
	box-shadow: inset 2px 2px 5px var(--neu-dark), inset -2px -2px 5px var(--neu-light);
}
.loom-embed::before { content: ""; display: block; padding-top: 56.25%; }
.loom-embed iframe {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	border: 0;
}

/* The email composer watches its body for a pasted Loom link
   (company-interactions.js loomPasteHandler); there is no field and, at the
   owner's request (2026-09-02), no hint either. */