/* ==========================================================================
   HAVN Prospect Notes — the side panel.  v2.2.201, rebuilt v2.2.203
   Loaded after havn-prospecting.css; reuses .havn-pr-field for the add form so
   the two forms on this screen cannot drift apart.

   Same three-class rule as havn-prospecting.css: the wp_head priority-99 block
   paints div/span/p/li/strong/small at !important in both themes, and in light
   it does so at (0,3,0). Every coloured rule here is prefixed
   `body.havn-dashboard-page .havn-mc` so it wins.
   ========================================================================== */

/* ──────────────────────────────────────────────────────────────────────────
   WHY EVERY COLOURED RULE BELOW SAYS
   `:is(.havn-mc, .havn-pr-modal, .havn-pn-drawer)` AND NOT JUST `.havn-mc`

   The dialogs and the log drawer are relocated to document.body on boot — they
   have to be, or they inherit display:none from a hidden view and the view's
   entry transform becomes their containing block (v2.2.197). But `.havn-mc` is
   the app shell, so the moment a panel lands on body it is OUTSIDE it, and
   every `.havn-mc`-scoped rule silently stops applying. What is left is the
   wp_head priority-99 cascade painting div/span/p/li/strong/small a single
   colour at !important, which is why this was invisible: the panel still
   looked dark and legible while its priority pills, status colours and muted
   second lines had all quietly become body text.

   `:is()` takes the specificity of its most specific argument — one class — so
   the counter is still (0,3,x) and still beats the light-mode override at
   (0,3,0). Measured, not assumed: previews/probe-preview.py reads the computed
   colour of each of these out of the rendered page.
   ────────────────────────────────────────────────────────────────────────── */

/* ---- the drawer ---- */
/* The width is set in the MARKUP, on data-mc-drawer-default-w — see
   havn-prospect-notes.php. A CSS default for --mc-drawer-w does not survive:
   the resize module writes that property inline on boot, so the stylesheet
   loses to an inline style every time the panel opens. */
.havn-pn-drawer .havn-mc-drawer-body { display: grid; gap: 20px; align-content: start; }

.havn-pn-add {
	padding: 16px;
	background: var(--mc-bg-3);
	border: 1px solid var(--mc-border);
	border-radius: var(--mc-radius);
}
.havn-pn-add-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
/* Every control is width:100% of its flex item, so the item needs a real basis
   — `flex: 0 0 auto` asks it to size to a child that is sizing to it, and the
   browser settles that circularity by overflowing. That is what put Subject on
   top of Priority. Basis here, and min-width:0 so it may shrink below its
   content instead of pushing out of the panel.

   (flex-basis on a child of a COLUMN container becomes a height instead —
   v2.2.196 — which is why only this row hands one out.) */
.havn-pn-add-row > .havn-pr-field { flex: 0 1 165px; min-width: 0; }
.havn-pn-add-row > .havn-pn-grow  { flex: 1 1 260px; min-width: 0; }

.havn-pn-hint {
	display: flex; align-items: flex-start; gap: 8px;
	margin: 4px 0 12px; font-size: 11.5px; line-height: 1.55;
}
.havn-pn-hint > svg { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 2px; }
body.havn-dashboard-page :is(.havn-mc, .havn-pr-modal, .havn-pn-drawer) .havn-pn-hint > svg  { color: var(--mc-text-3) !important; }
body.havn-dashboard-page :is(.havn-mc, .havn-pr-modal, .havn-pn-drawer) .havn-pn-hint > span { color: var(--mc-text-3) !important; }

/* ---- the log table ---- */
.havn-pn-tablewrap { overflow-x: auto; }
.havn-pn-table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 680px; }
.havn-pn-table th {
	text-align: left; padding: 8px 10px; white-space: nowrap;
	font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	border-bottom: 1px solid var(--mc-border);
}
body.havn-dashboard-page :is(.havn-mc, .havn-pr-modal, .havn-pn-drawer) .havn-pn-table th { color: var(--mc-text-3) !important; }
.havn-pn-table td { padding: 10px; border-bottom: 1px solid var(--mc-border); vertical-align: top; }
.havn-pn-table tbody tr:last-child td { border-bottom: 0; }

/* A system row is the app's own record, and reads as one: a quieter ground and
   a left edge, so the agent's own sentences stand out of the history. */
.havn-pn-table tr.is-system td { background: var(--mc-surface); }
.havn-pn-table tr.is-system td:first-child { box-shadow: inset 2px 0 0 var(--mc-border-2); }

body.havn-dashboard-page :is(.havn-mc, .havn-pr-modal, .havn-pn-drawer) .havn-pn-subject { font-weight: 620; color: var(--mc-text) !important; }
body.havn-dashboard-page :is(.havn-mc, .havn-pr-modal, .havn-pn-drawer) .havn-pn-body    { color: var(--mc-text-2) !important; line-height: 1.55; }
body.havn-dashboard-page :is(.havn-mc, .havn-pr-modal, .havn-pn-drawer) .havn-pn-when    { color: var(--mc-text-3) !important; white-space: nowrap; }
body.havn-dashboard-page :is(.havn-mc, .havn-pr-modal, .havn-pn-drawer) .havn-pn-who     { display: block; color: var(--mc-text-3) !important; font-size: 11.5px; }
.havn-pn-notes-cell { min-width: 220px; max-width: 420px; }

.havn-pn-pill {
	display: inline-block; padding: 2px 8px; border-radius: 999px;
	font-size: 11px; font-weight: 650; white-space: nowrap;
	border: 1px solid var(--pill, var(--mc-border-2));
}
body.havn-dashboard-page :is(.havn-mc, .havn-pr-modal, .havn-pn-drawer) .havn-pn-pill { color: var(--pill, var(--mc-text-2)) !important; }
/* Status and the "Recorded" marker are text, not pills — three pills in a row
   at this size reads as decoration rather than information. */
body.havn-dashboard-page :is(.havn-mc, .havn-pr-modal, .havn-pn-drawer) .havn-pn-status       { font-weight: 650; }
body.havn-dashboard-page :is(.havn-mc, .havn-pr-modal, .havn-pn-drawer) .havn-pn-status-active { color: #E0857B !important; }
body.havn-dashboard-page :is(.havn-mc, .havn-pr-modal, .havn-pn-drawer) .havn-pn-status-done   { color: #6FCF97 !important; }
body.havn-dashboard-page :is(.havn-mc, .havn-pr-modal, .havn-pn-drawer) .havn-pn-status-system { color: var(--mc-text-3) !important; font-weight: 500; }

.havn-pn-rowacts { display: flex; gap: 4px; justify-content: flex-end; }
.havn-pn-iconbtn {
	appearance: none; background: transparent; border: 1px solid transparent;
	border-radius: 7px; padding: 5px; line-height: 0; cursor: pointer;
}
.havn-pn-iconbtn > svg { width: 15px; height: 15px; }
body.havn-dashboard-page :is(.havn-mc, .havn-pr-modal, .havn-pn-drawer) .havn-pn-iconbtn > svg { color: var(--mc-text-3) !important; }
.havn-pn-iconbtn:hover { border-color: var(--mc-border-2); background: var(--mc-surface); }
body.havn-dashboard-page :is(.havn-mc, .havn-pr-modal, .havn-pn-drawer) .havn-pn-iconbtn:hover > svg { color: var(--mc-text) !important; }
body.havn-dashboard-page :is(.havn-mc, .havn-pr-modal, .havn-pn-drawer) .havn-pn-iconbtn.is-danger:hover > svg { color: #E0857B !important; }
/* The locked cell on a system row. Not a disabled button: a control that looks
   pressable and refuses is worse than no control. */
.havn-pn-locked { display: inline-flex; padding: 5px; line-height: 0; opacity: .4; }
.havn-pn-locked > svg { width: 15px; height: 15px; }

.havn-pn-foot {
	display: flex; align-items: flex-start; gap: 8px;
	margin: 14px 0 0; padding: 11px 13px;
	background: var(--mc-bg-3); border: 1px solid var(--mc-border); border-radius: 10px;
	font-size: 11.5px; line-height: 1.55;
}
.havn-pn-foot > svg { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 2px; }
body.havn-dashboard-page :is(.havn-mc, .havn-pr-modal, .havn-pn-drawer) .havn-pn-foot > svg    { color: var(--mc-text-3) !important; }
body.havn-dashboard-page :is(.havn-mc, .havn-pr-modal, .havn-pn-drawer) .havn-pn-foot > span   { color: var(--mc-text-3) !important; }
body.havn-dashboard-page :is(.havn-mc, .havn-pr-modal, .havn-pn-drawer) .havn-pn-foot strong   { color: var(--mc-text-2) !important; }

body.havn-dashboard-page :is(.havn-mc, .havn-pr-modal, .havn-pn-drawer) .havn-pn-empty { padding: 22px 10px; text-align: center; color: var(--mc-text-3) !important; }

/* ──────────────────────────────────────────────────────────────────────────
   v2.2.203 — THE PANEL IS THE WHOLE PERSON
   Head: avatar, name, contact line, temperature and its reason, quick actions,
   tabs. Overview / Cadences / Property & deals are cards; the history tab is
   the v2.2.201 table above, unchanged.
   ────────────────────────────────────────────────────────────────────────── */
.havn-pn-drawer .havn-mc-drawer-body { gap: 16px; }
.havn-pn-panel { display: grid; gap: 14px; align-content: start; }
.havn-pn-panel[hidden] { display: none !important; }

.havn-pn-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.havn-pn-id-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.havn-pn-drawer .havn-pn-avatar { width: 44px; height: 44px; font-size: 15px; }
.havn-pn-drawer .havn-mc-drawer-pillrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
body.havn-dashboard-page .havn-pn-drawer .havn-pn-why { font-size: 12px; color: var(--mc-text-3) !important; }

/* The panel lives on document.body, outside .havn-mc, so Astra's
   `button { padding: 15px 45px }` reaches the full-screen and close buttons:
   a 92px box with its 16px icon squeezed to zero width. Measured in the
   preview, which carries the live theme's stylesheet. */
body.havn-dashboard-page .havn-pn-drawer .havn-mc-drawer-head-actions .havn-mc-iconbtn {
	box-sizing: border-box !important; width: 32px !important; min-width: 0 !important; height: 32px !important;
	padding: 0 !important; margin: 0 !important; line-height: 0 !important; transform: none;
}
.havn-pn-drawer .havn-mc-drawer-head-actions .havn-mc-iconbtn svg { flex: none; width: 16px; height: 16px; }

.havn-pn-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.havn-pn-quick .havn-mc-btn svg { width: 14px; height: 14px; }
.havn-pn-quick [hidden] { display: none !important; }

.havn-pn-tabs { display: flex; gap: 2px; margin: 14px -4px -1px; overflow-x: auto; }
body.havn-dashboard-page .havn-pn-drawer .havn-pn-tab,
body.havn-dashboard-page .havn-pn-drawer .havn-pn-tab:hover,
body.havn-dashboard-page .havn-pn-drawer .havn-pn-tab:focus {
	-webkit-appearance: none; appearance: none; margin: 0; padding: 10px 12px; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
	background: transparent; box-shadow: none; transform: none; cursor: pointer; white-space: nowrap;
	font: 620 13px/1 "Inter", system-ui, sans-serif; letter-spacing: 0; text-transform: none; color: var(--mc-text-3) !important;
}
body.havn-dashboard-page .havn-pn-drawer .havn-pn-tab:hover { color: var(--mc-text) !important; }
body.havn-dashboard-page .havn-pn-drawer .havn-pn-tab.is-on { border-bottom-color: var(--mc-accent); color: var(--mc-text) !important; }
body.havn-dashboard-page .havn-pn-drawer .havn-pn-tab span { margin-left: 4px; font-size: 11px; color: var(--mc-text-3) !important; }

.havn-pn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.havn-pn-card { padding: 14px 16px; border-radius: var(--mc-radius); border: 1px solid var(--mc-border); background: var(--mc-bg-3); min-width: 0; }
body.havn-dashboard-page .havn-pn-drawer .havn-pn-card h4 {
	margin: 0 0 10px; font: 650 11px/1.2 "Inter", system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--mc-text-3) !important;
}
.havn-pn-card .havn-pr-field { margin-bottom: 8px; }
body.havn-dashboard-page .havn-pn-drawer .havn-pn-reason { margin: -2px 0 10px; font-size: 12px; line-height: 1.5; color: var(--mc-text-3) !important; }
.havn-pn-fact { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-top: 1px solid var(--mc-border); font-size: 13px; }
.havn-pn-fact:first-of-type { border-top: 0; }
body.havn-dashboard-page .havn-pn-drawer .havn-pn-fact span { color: var(--mc-text-3) !important; flex: none; }
body.havn-dashboard-page .havn-pn-drawer .havn-pn-fact strong { font-weight: 550; text-align: right; overflow-wrap: anywhere; color: var(--mc-text) !important; }
body.havn-dashboard-page .havn-pn-drawer .havn-pn-fact strong a { color: var(--mc-accent) !important; text-decoration: none; }
body.havn-dashboard-page .havn-pn-drawer .havn-pn-fact .is-up { color: #6FCF97 !important; }
body.havn-dashboard-page .havn-pn-drawer .havn-pn-fact .is-down { color: #E0857B !important; }
.havn-pn-consent { margin-top: 10px; }

.havn-pn-nextlist, .havn-pn-routes, .havn-pn-cadlist, .havn-pn-deals { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.havn-pn-next, .havn-pn-cad, .havn-pn-deal { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--mc-border); }
.havn-pn-next:first-child, .havn-pn-cad:first-child, .havn-pn-deal:first-child { border-top: 0; }
.havn-pn-next > div, .havn-pn-cad > div, .havn-pn-deal > div { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.havn-pn-next-ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--mc-border-2); }
.havn-pn-next-ic svg { width: 14px; height: 14px; }
body.havn-dashboard-page .havn-pn-drawer :is(.havn-pn-next, .havn-pn-cad, .havn-pn-deal) strong { font: 620 13px/1.3 "Inter", system-ui, sans-serif; color: var(--mc-text) !important; }
body.havn-dashboard-page .havn-pn-drawer :is(.havn-pn-next, .havn-pn-deal) > div > span { font-size: 12px; color: var(--mc-text-3) !important; }
body.havn-dashboard-page .havn-pn-drawer .havn-pn-deal em { font-style: normal; font-weight: 600; font-size: 12.5px; color: var(--mc-text-2) !important; }
.havn-pn-deal.is-open { box-shadow: inset 3px 0 0 #6FCF97; padding-left: 10px; }
.havn-pn-cad.is-blocked { opacity: .65; }

.havn-pn-routes li { display: flex; flex-direction: column; gap: 2px; padding: 8px 0 8px 14px; border-top: 1px solid var(--mc-border); position: relative; }
.havn-pn-routes li:first-child { border-top: 0; }
.havn-pn-routes li::before { content: ""; position: absolute; left: 0; top: 14px; width: 7px; height: 7px; border-radius: 50%; background: #E0857B; }
.havn-pn-routes li.is-ok::before { background: #6FCF97; }
body.havn-dashboard-page .havn-pn-drawer .havn-pn-routes strong { font-size: 13px; color: var(--mc-text) !important; }
body.havn-dashboard-page .havn-pn-drawer .havn-pn-routes span { font-size: 12px; line-height: 1.45; color: var(--mc-text-3) !important; }

.havn-pn-script > div { font-size: 13px; line-height: 1.65; padding-left: 12px; border-left: 3px solid var(--mc-accent); }
body.havn-dashboard-page .havn-pn-drawer .havn-pn-script > div { color: var(--mc-text-2) !important; }

.havn-pn-steps { list-style: none; margin: 6px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.havn-pn-steps li { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--mc-border); font-size: 11.5px; }
.havn-pn-steps li svg { width: 12px; height: 12px; }
body.havn-dashboard-page .havn-pn-drawer .havn-pn-steps li, body.havn-dashboard-page .havn-pn-drawer .havn-pn-steps li span { color: var(--mc-text-3) !important; }
.havn-pn-steps li.is-done { opacity: .55; text-decoration: line-through; }
.havn-pn-steps li.is-next { border-color: var(--mc-accent); background: var(--mc-accent-soft); }
body.havn-dashboard-page .havn-pn-drawer .havn-pn-steps li.is-next, body.havn-dashboard-page .havn-pn-drawer .havn-pn-steps li.is-next span { color: var(--mc-text) !important; }

@media (max-width: 861px) {
	.havn-pn-add, .havn-pn-foot, .havn-pn-add-row > .havn-pr-field, .havn-pn-card { border-radius: 0; }
	.havn-pn-add-row > .havn-pr-field, .havn-pn-add-row > .havn-pn-grow { flex: 1 1 100%; }
	.havn-pn-grid { grid-template-columns: minmax(0, 1fr); }
}