/*
 * Softens the parts of HortusFox that read as a database rather than a record.
 *
 * Deliberately CSS only, and deliberately loaded after the app's own stylesheet:
 * restyling by selector means there is nothing for an upstream release to break,
 * and nothing to reconcile on the next `docker compose build --pull`. Colours are
 * taken from the app's own palette (rgb(200,200,200) text, rgba(90,90,90,.5)
 * panels, rgb(100,100,100) borders) so it reads as the same product.
 */

/* ---------------------------------------------------------------
 * The plant attribute table.
 * Was a full 1px grid with an "Attribute | Value" header — a spreadsheet.
 * Now a card with quiet row separators, which is what a record looks like.
 * --------------------------------------------------------------- */

.plant-column table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background-color: rgba(90, 90, 90, 0.35);
	border: 1px solid rgb(100, 100, 100);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

/* "Attribute | Value" tells a person nothing they cannot see. */
.plant-column thead {
	display: none;
}

.plant-column table td {
	border: 0;
	border-bottom: 1px solid rgba(200, 200, 200, 0.12);
	padding: 13px 16px;
	vertical-align: middle;
}

.plant-column table tr:last-child td {
	border-bottom: 0;
}

.plant-column table tbody tr:hover {
	background-color: rgba(255, 255, 255, 0.035);
}

/* The label column reads as a caption, not as data of equal weight. */
.plant-column table td:first-child {
	width: 38%;
	color: rgba(200, 200, 200, 0.6);
}

.plant-column table td:first-child strong {
	font-weight: 500;
	color: inherit;
}

/* An empty field should recede, and "N/A" is jargon. */
.plant-column table .is-not-available {
	font-size: 0;
	font-style: normal;
	color: rgba(200, 200, 200, 0.3);
}

.plant-column table .is-not-available::after {
	content: "Not set";
	font-size: 0.95rem;
}

/* Red reads as an error. "Hardy: no" is a fact about a plant, not a problem. */
.plant-column table .is-color-no {
	color: rgba(200, 200, 200, 0.8);
}

.plant-column table .is-color-yes {
	color: rgb(72, 199, 142);
}

/* Edit affordances: visible enough to find on a phone, quiet enough to ignore. */
.plant-column table .fa-edit,
.plant-column table .fa-microscope {
	opacity: 0.55;
	transition: opacity 0.15s ease;
}

.plant-column table tr:hover .fa-edit,
.plant-column table tr:hover .fa-microscope {
	opacity: 1;
}

/* ---------------------------------------------------------------
 * Care notes were rendered in a monospace <pre>, which looks like
 * terminal output. It is prose, so set it as prose.
 * --------------------------------------------------------------- */

.plant-notes-content pre {
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.65;
}

.plant-notes {
	padding: 16px 18px;
}

.plant-notes-content ul {
	list-style: disc;
	margin-left: 1.2rem;
}

/* ---------------------------------------------------------------
 * The assistant panel. Bulma's .box is white, which on this dark
 * theme looked like a different application had been pasted in.
 * --------------------------------------------------------------- */

#ai-assistant.box {
	background-color: rgba(90, 90, 90, 0.5);
	color: rgb(200, 200, 200);
	border: 1px solid rgb(100, 100, 100);
	border-left: 3px solid rgb(0, 209, 178);
	border-radius: 6px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	padding: 18px 20px;
}

#ai-assistant .subtitle,
#ai-assistant .label {
	color: rgb(220, 220, 220);
}

#ai-assistant .help {
	color: rgba(200, 200, 200, 0.65);
}

#ai-assistant hr {
	background-color: rgba(200, 200, 200, 0.15);
	height: 1px;
}

#ai-assistant .input {
	background-color: rgba(40, 40, 40, 0.6);
	border-color: rgb(100, 100, 100);
	color: rgb(220, 220, 220);
}

#ai-assistant .input::placeholder {
	color: rgba(200, 200, 200, 0.4);
}

/* Suggestion chips: quiet by default, obvious on contact. */
#ai-assistant .button.is-light,
#ai-camera-modal .button.is-light {
	background-color: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(200, 200, 200, 0.2);
	color: rgb(215, 215, 215);
}

#ai-assistant .button.is-light:hover,
#ai-camera-modal .button.is-light:hover {
	background-color: rgba(255, 255, 255, 0.16);
	color: #fff;
}

/* Answers: a readable panel rather than a bright alert. */
#ai-assistant .message.is-info .message-body,
#ai-assistant .message.is-warning .message-body {
	background-color: rgba(40, 40, 40, 0.55);
	color: rgb(215, 215, 215);
	border-left-width: 3px;
	line-height: 1.6;
}

#ai-assistant .message.is-info .message-body {
	border-left-color: rgb(0, 209, 178);
}

#ai-assistant .message.is-warning .message-body {
	border-left-color: rgb(224, 168, 66);
}

/* The suggestion table inside the panel gets the same quiet treatment. */
#ai-assistant .table {
	background-color: transparent;
	color: rgb(210, 210, 210);
}

#ai-assistant .table td {
	border: 0;
	border-bottom: 1px solid rgba(200, 200, 200, 0.12);
	color: inherit;
	vertical-align: middle;
}

#ai-assistant .table tr:last-child td {
	border-bottom: 0;
}

/* ---------------------------------------------------------------
 * The assistant page and the camera share the panel's palette.
 * --------------------------------------------------------------- */

#assistant-thread .message-body {
	background-color: rgba(90, 90, 90, 0.35);
	color: rgb(215, 215, 215);
	line-height: 1.6;
}

#assistant-thread .message-header {
	background-color: rgba(255, 255, 255, 0.08);
	color: rgb(225, 225, 225);
}

#ai-camera-modal .modal-card-head,
#ai-camera-modal .modal-card-foot {
	background-color: rgb(45, 45, 45);
	border-color: rgba(200, 200, 200, 0.15);
}

#ai-camera-modal .modal-card-body {
	background-color: rgb(38, 38, 38);
}

#ai-camera-modal .modal-card-title {
	color: rgb(225, 225, 225);
}

/* On a phone the shutter should be the obvious thing to press. */
@media screen and (max-width: 768px) {
	#ai-camera-modal .modal-card-foot {
		flex-wrap: wrap;
		gap: 0.5rem;
	}

	#ai-camera-shutter {
		flex: 1 1 100%;
	}
}