/* HomeLink - property telemetry UI for app.homelink.fi

   Loaded immediately after boatlink.css, which is where the component set for
   both products lives: cards, status pills, sensor tiles, alert rows, the
   phone shell. Those components are not about boats - only their class prefix
   is - and giving HomeLink its own 4,000-line copy of them would mean every
   fix to a sensor tile had to be made twice, and would stop being made twice
   about a fortnight in.

   So this file is only what is genuinely different: the palette, and the
   handful of places where a house needs a shape a boat did not.

   Theme attribute is data-hl-theme rather than data-bl-theme, so the two apps
   remember their own room even in the same browser. */

/* ---- Classic: hearth ------------------------------------------------------
   Warm near-black with a lamp-amber accent. BoatLink's default is cold navy
   on purpose - it is a foredeck at night - and a house wants the opposite of
   that. */
:root {
	--color-primary: #e5883c;
	--color-primary-hover: #f2a25f;

	--bg-primary: #14110f;
	--bg-secondary: #1d1916;
	--bg-tertiary: #272119;
	--bg-card: #1d1916;

	--text-primary: #f6f0e9;
	--text-secondary: #c0af9e;
	--text-muted: #8b7a6c;

	--border-color: #332a23;
	--border-focus: #e5883c;

	--status-online: #3fbf7f;
	--status-late: #e0a33d;
	--status-silent: #ef6f62;
	--status-unknown: #8b7a6c;

	/* The accent at low opacity - hovered icon buttons, focus rings - and the
	   phone shell's two fixed bars. boatlink.css writes these as tokens for
	   exactly this reason: without them a HomeLink phone wore a navy app bar
	   and cyan hovers over its own amber. */
	--accent-soft: rgba(229, 136, 60, 0.14);
	--accent-ring: rgba(229, 136, 60, 0.28);
	--shell-appbar: rgba(20, 17, 15, 0.92);
	--shell-tabbar: rgba(29, 25, 22, 0.96);
}

/* ---- Fancy: garden --------------------------------------------------------
   The other room: cool deep green, fresh accent. Same tokens, so every
   component follows without knowing a second theme exists. */
:root[data-hl-theme="fancy"] {
	--color-primary: #4ade80;
	--color-primary-hover: #86efac;

	--bg-primary: #0a1310;
	--bg-secondary: #10201a;
	--bg-tertiary: #172d24;
	--bg-card: #10201a;

	--text-primary: #eaf5ee;
	--text-secondary: #9dbdaa;
	--text-muted: #6d8a78;

	--border-color: #1c3529;
	--border-focus: #4ade80;

	--status-online: #4ade80;
	--status-late: #e0a33d;
	--status-silent: #f87171;
	--status-unknown: #6d8a78;

	--accent-soft: rgba(74, 222, 128, 0.14);
	--accent-ring: rgba(74, 222, 128, 0.28);
	--shell-appbar: rgba(10, 19, 16, 0.92);
	--shell-tabbar: rgba(16, 32, 26, 0.96);
}

/* The ground wash follows the accent in both rooms: a lamp in a window, then
   light through leaves. Overrides boatlink.css's cyan-over-navy, which would
   otherwise still be painting a sea behind a house. */
body {
	background-image:
		radial-gradient(1100px 500px at 15% -10%, rgba(229, 136, 60, 0.10), transparent 60%),
		radial-gradient(900px 500px at 100% 0%, rgba(229, 136, 60, 0.05), transparent 55%);
	background-attachment: fixed;
}

:root[data-hl-theme="fancy"] body {
	background-image:
		radial-gradient(1100px 500px at 70% -10%, rgba(74, 222, 128, 0.08), transparent 60%),
		radial-gradient(900px 500px at 0% 0%, rgba(74, 222, 128, 0.04), transparent 55%);
}

/* ---- A property card ------------------------------------------------------
   Shares bl-boat-card's shape. What differs is the second line: a boat says
   where it is right now, because that changes; a house says what it is - the
   address, the number of rooms - because that is the thing an owner uses to
   tell two properties apart. */
.hl-place-line {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	color: var(--text-secondary);
	font-size: var(--font-size-sm);
	margin-bottom: var(--spacing-md);
	min-height: 20px;
}

.hl-place-line svg {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	color: var(--text-muted);
}

.hl-place-line span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Set on the card when no address has been given. Italic rather than absent:
   the row keeps its height so a grid of cards does not step up and down. */
.hl-place-line.is-unset {
	color: var(--text-muted);
	font-style: italic;
}

/* ---- Address, edited in place ------------------------------------------- */
.hl-address-edit {
	display: flex;
	gap: var(--spacing-sm);
	align-items: center;
	flex-wrap: wrap;
	margin-top: var(--spacing-sm);
}

.hl-address-edit .form-input {
	flex: 1 1 220px;
	min-width: 0;
}

/* ---- Rooms by floor -------------------------------------------------------
   A boat's compartments are a flat list; a house has storeys, and grouping by
   them is the whole difference between a list of eleven rooms and a house you
   can read. The heading is quiet - it is a divider, not a title.

   display:contents on the group, so a floor's rooms stay siblings of every
   other room in the page's flow. Wrapping them in a real box would put a
   container between a room card and the page it is laid out in, and the room
   cards would stop lining up with the ones on the floor above. */
.hl-floor {
	display: contents;
}

.hl-floor-head {
	display: flex;
	align-items: baseline;
	gap: var(--spacing-md);
	margin: var(--spacing-lg) 0 calc(-1 * var(--spacing-xs));
	color: var(--text-muted);
	font-size: var(--font-size-sm);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.hl-floor-head::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--border-color);
}

/* ---- The one thing a house has that a boat does not ----------------------
   Somebody is in, or nobody is. Every alarm threshold in the app can already
   differ by mode; this is just the mode picker given the words a house uses
   and put where an owner will actually find it. */
.hl-presence {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	flex-wrap: wrap;
	padding: var(--spacing-md) var(--spacing-lg);
	margin-bottom: var(--spacing-xl);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-lg);
	background: var(--bg-card);
}

.hl-presence-label {
	color: var(--text-secondary);
	font-size: var(--font-size-sm);
}

.hl-presence-modes {
	display: flex;
	gap: var(--spacing-xs);
	flex-wrap: wrap;
}

.hl-presence-modes button {
	padding: 6px 14px;
	border-radius: var(--radius-full, 999px);
	border: 1px solid var(--border-color);
	background: transparent;
	color: var(--text-secondary);
	font-size: var(--font-size-sm);
	font-family: inherit;
	cursor: pointer;
	transition: all 0.15s ease;
}

.hl-presence-modes button:hover:not(:disabled) {
	color: var(--text-primary);
	border-color: var(--color-primary);
}

.hl-presence-modes button.active {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #14110f;
	font-weight: 600;
}

.hl-presence-modes button:disabled {
	cursor: default;
	opacity: 0.6;
}

/* Fancy's accent is light too, so the same dark ink reads on it. */
:root[data-hl-theme="fancy"] .hl-presence-modes button.active {
	color: #0a1310;
}

/* ---- The house mark -------------------------------------------------------
   bl-logo-accent is the second half of the wordmark in both apps; the shape
   beside it is the only part that has to change. */
.hl-logo-mark {
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	color: var(--color-primary);
}