/*
 * FM Desk front-end styles.
 * Everything is scoped under .fmd so host themes stay untouched.
 */

.fmd {
	--fmd-ink: #14202b;
	--fmd-slate: #33475a;
	--fmd-steel: #6e7f8c;
	--fmd-paper: #f1f3ef;
	--fmd-card: #fff;
	--fmd-line: #dce1dc;
	--fmd-hi: #e8951c;
	--fmd-hi-soft: #fdf3e0;
	--fmd-go: #1f7a5c;
	--fmd-go-soft: #e7f2ed;
	--fmd-stop: #b23a2b;
	--fmd-stop-soft: #fbeceb;
	--fmd-flow: #2c6e8f;
	--fmd-flow-soft: #e8f1f5;

	--fmd-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--fmd-mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
	--fmd-radius: 3px;
	--fmd-shadow: 0 1px 2px rgba(20, 32, 43, .06), 0 6px 18px rgba(20, 32, 43, .05);

	font-family: var(--fmd-sans);
	color: var(--fmd-ink);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

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

.fmd img { max-width: 100%; height: auto; }

/* ---------- Layout shells ---------- */

.fmd-shell { width: 100%; margin: 0 auto; padding: 24px 16px 48px; }
.fmd-shell--narrow { max-width: 560px; }

.fmd-card {
	background: var(--fmd-card);
	border: 1px solid var(--fmd-line);
	border-radius: var(--fmd-radius);
	box-shadow: var(--fmd-shadow);
}
.fmd-card--pad { padding: 28px; }

@media (max-width: 480px) {
	.fmd-card--pad { padding: 20px; }
}

.fmd-rule { border: 0; border-top: 1px solid var(--fmd-line); margin: 28px 0; }

/* ---------- Type ---------- */

.fmd-eyebrow {
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--fmd-steel);
	margin: 0 0 6px;
}
.fmd-eyebrow--go { color: var(--fmd-go); }

.fmd-h2 { font-size: 24px; line-height: 1.2; margin: 0 0 10px; font-weight: 700; letter-spacing: -.01em; }
.fmd-h3 { font-size: 17px; margin: 0; font-weight: 700; }
.fmd-h4 { font-size: 14px; margin: 0 0 6px; font-weight: 700; }
.fmd-muted { color: var(--fmd-steel); margin: 0 0 18px; }
.fmd-note { margin: -4px 0 16px; font-size: 13px; }
.fmd-hint { font-size: 12.5px; color: var(--fmd-steel); display: block; margin-top: 6px; }
.fmd-center { text-align: center; margin-top: 18px; }
.fmd-link { background: none; border: 0; padding: 0; color: var(--fmd-flow); font: inherit; font-size: 12px; cursor: pointer; text-decoration: underline; }

.fmd-code {
	display: block;
	font-family: var(--fmd-mono);
	font-size: 13px;
	background: var(--fmd-paper);
	border: 1px solid var(--fmd-line);
	padding: 10px 12px;
	border-radius: var(--fmd-radius);
	word-break: break-all;
}

/* The docket: a stamped reference number */
.fmd-docket {
	font-family: var(--fmd-mono);
	font-size: 22px;
	font-weight: 600;
	letter-spacing: .06em;
	display: inline-block;
	padding: 8px 14px;
	border: 1.5px solid var(--fmd-ink);
	border-radius: 2px;
	margin: 4px 0 14px;
}

/* ---------- Forms ---------- */

.fmd-form { margin: 20px 0 0; }
.fmd-field { margin-bottom: 16px; }
.fmd-field > label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }

.fmd-field input[type="text"],
.fmd-field input[type="email"],
.fmd-field input[type="tel"],
.fmd-field input[type="password"],
.fmd-field input[type="number"],
.fmd-field input[type="search"],
.fmd-field input[type="file"],
.fmd-field select,
.fmd-field textarea,
.fmd-search,
.fmd-toolbar select {
	width: 100%;
	font: inherit;
	font-size: 15px;
	color: var(--fmd-ink);
	background: #fff;
	border: 1px solid var(--fmd-line);
	border-radius: var(--fmd-radius);
	padding: 10px 12px;
	transition: border-color .12s ease, box-shadow .12s ease;
}
.fmd-field textarea { resize: vertical; min-height: 110px; }

.fmd-field input:focus,
.fmd-field select:focus,
.fmd-field textarea:focus,
.fmd-search:focus {
	outline: none;
	border-color: var(--fmd-ink);
	box-shadow: 0 0 0 3px rgba(232, 149, 28, .28);
}

.fmd-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 560px) { .fmd-grid-2 { grid-template-columns: 1fr; } }

.fmd-check { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; margin: 0 0 14px; cursor: pointer; }
.fmd-check input { margin-top: 3px; flex: 0 0 auto; }

.fmd-optional { font-weight: 400; color: var(--fmd-steel); font-size: 12px; }

/* Honeypot */
.fmd-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Buttons ---------- */

.fmd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	padding: 11px 20px;
	border-radius: var(--fmd-radius);
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.fmd-btn--primary { background: var(--fmd-ink); color: #fff; }
.fmd-btn--primary:hover { background: #0b1620; color: #fff; }
.fmd-btn--ghost { background: transparent; color: var(--fmd-ink); border-color: var(--fmd-line); }
.fmd-btn--ghost:hover { border-color: var(--fmd-ink); }
.fmd-btn--danger { background: var(--fmd-stop-soft); color: var(--fmd-stop); border-color: #eccfcb; }
.fmd-btn--block { width: 100%; }
.fmd-btn--tiny { font-size: 13px; padding: 7px 13px; }
.fmd-btn:focus-visible { outline: 2px solid var(--fmd-hi); outline-offset: 2px; }
.fmd-btn[disabled] { opacity: .55; cursor: progress; }

/* Loading state: the label stays put and a spinner joins it, so the button
   keeps its width and nobody wonders whether the click registered. */
.fmd-btn.is-loading { pointer-events: none; opacity: .8; }
.fmd-btn.is-loading::after {
	content: "";
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: fmd-spin .6s linear infinite;
}
@keyframes fmd-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
	.fmd-btn.is-loading::after { animation: none; border-right-color: currentColor; opacity: .4; }
}

.fmd-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* ---------- Alerts & toast ---------- */

.fmd-alert {
	padding: 11px 14px;
	border-radius: var(--fmd-radius);
	font-size: 14px;
	margin: 0 0 18px;
	border-left: 3px solid;
}
.fmd-alert--stop { background: var(--fmd-stop-soft); border-color: var(--fmd-stop); color: #7d2419; }
.fmd-alert--go { background: var(--fmd-go-soft); border-color: var(--fmd-go); color: #145340; }

.fmd-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	background: var(--fmd-ink);
	color: #fff;
	padding: 11px 18px;
	border-radius: var(--fmd-radius);
	font-size: 14px;
	z-index: 999;
	box-shadow: var(--fmd-shadow);
}

/* ---------- Tenant portal steps ---------- */

.fmd-portal__head { margin-bottom: 20px; }

.fmd-steps {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: flex;
	gap: 0;
	counter-reset: fmdstep;
}
.fmd-steps__item {
	counter-increment: fmdstep;
	flex: 1;
	position: relative;
	padding-top: 26px;
	font-size: 11.5px;
	letter-spacing: .04em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--fmd-steel);
	text-align: center;
}
.fmd-steps__item::before {
	content: counter(fmdstep);
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	border: 1.5px solid var(--fmd-line);
	font-family: var(--fmd-mono);
	font-size: 11px;
	line-height: 17px;
	color: var(--fmd-steel);
}
.fmd-steps__item::after {
	content: "";
	position: absolute;
	top: 10px;
	left: calc(-50% + 12px);
	width: calc(100% - 24px);
	border-top: 1.5px solid var(--fmd-line);
}
.fmd-steps__item:first-child::after { display: none; }
.fmd-steps__item.is-active { color: var(--fmd-ink); }
.fmd-steps__item.is-active::before { border-color: var(--fmd-ink); background: var(--fmd-hi); color: var(--fmd-ink); font-weight: 700; }
.fmd-steps__item.is-done::before { content: "\2713"; border-color: var(--fmd-go); background: var(--fmd-go); color: #fff; }

.fmd-datalist { margin: 6px 0 0; display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; font-size: 15px; }
.fmd-datalist dt { color: var(--fmd-steel); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; align-self: center; }
.fmd-datalist dd { margin: 0; font-weight: 600; }

.fmd-thumbs { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fmd-thumbs li {
	font-size: 12px;
	background: var(--fmd-paper);
	border: 1px solid var(--fmd-line);
	border-radius: var(--fmd-radius);
	padding: 5px 9px;
	font-family: var(--fmd-mono);
}

.fmd-done { text-align: center; }
.fmd-done .fmd-actions { justify-content: center; }

/* ---------- Dashboard shell ---------- */

.fmd-app { background: var(--fmd-paper); margin: 0 -20px; padding: 0; min-height: 70vh; }

.fmd-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	background: var(--fmd-ink);
	color: #fff;
	padding: 12px 20px;
}
.fmd-topbar__brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fmd-topbar__name { font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fmd-mark {
	width: 16px; height: 16px; flex: 0 0 auto;
	background: var(--fmd-hi);
	/* hi-vis chevron block */
	clip-path: polygon(0 0, 60% 0, 100% 50%, 60% 100%, 0 100%, 40% 50%);
}
.fmd-topbar__tools { display: flex; align-items: center; gap: 12px; }
.fmd-topbar .fmd-btn--ghost { color: #fff; border-color: rgba(255,255,255,.3); }
.fmd-topbar .fmd-btn--ghost:hover { border-color: #fff; }

.fmd-bell { position: relative; }
.fmd-bell__btn {
	background: transparent; border: 0; color: #fff; cursor: pointer;
	padding: 6px; display: flex; border-radius: var(--fmd-radius);
}
.fmd-bell__btn:hover { background: rgba(255,255,255,.1); }
.fmd-bell__count {
	position: absolute; top: 0; right: 0;
	background: var(--fmd-hi); color: var(--fmd-ink);
	font-size: 10px; font-weight: 700; line-height: 1;
	padding: 3px 5px; border-radius: 8px; min-width: 16px; text-align: center;
}
.fmd-bell__panel {
	position: absolute; right: 0; top: calc(100% + 10px);
	width: 320px; max-height: 380px; overflow-y: auto;
	background: #fff; color: var(--fmd-ink);
	border: 1px solid var(--fmd-line); border-radius: var(--fmd-radius);
	box-shadow: var(--fmd-shadow); z-index: 60;
}
.fmd-bell__head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--fmd-line); font-size: 13px; }
.fmd-bell__list { list-style: none; margin: 0; padding: 0; }
.fmd-bell__list li { padding: 11px 14px; border-bottom: 1px solid var(--fmd-line); font-size: 13px; }
.fmd-bell__list li:last-child { border-bottom: 0; }
.fmd-bell__list li.is-unread { background: var(--fmd-hi-soft); }
.fmd-bell__list time { display: block; color: var(--fmd-steel); font-size: 11.5px; margin-top: 3px; }
.fmd-bell__empty { padding: 22px 14px; text-align: center; color: var(--fmd-steel); font-size: 13px; }

.fmd-layout { display: flex; align-items: stretch; min-height: 60vh; }

.fmd-rail {
	flex: 0 0 190px;
	background: #fff;
	border-right: 1px solid var(--fmd-line);
	padding: 14px 10px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.fmd-rail__item {
	text-align: left;
	background: none;
	border: 0;
	border-left: 3px solid transparent;
	font: inherit;
	font-size: 14px;
	padding: 9px 12px;
	border-radius: 0 var(--fmd-radius) var(--fmd-radius) 0;
	cursor: pointer;
	color: var(--fmd-slate);
}
.fmd-rail__item:hover { background: var(--fmd-paper); }
.fmd-rail__item.is-active { background: var(--fmd-paper); border-left-color: var(--fmd-hi); color: var(--fmd-ink); font-weight: 700; }

.fmd-main { flex: 1 1 auto; padding: 20px; min-width: 0; }
.fmd-view { display: none; }
.fmd-view.is-active { display: block; }

@media (max-width: 782px) {
	.fmd-app { margin: 0; }
	.fmd-layout { flex-direction: column; }
	.fmd-rail { flex: none; flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--fmd-line); }
	.fmd-rail__item { white-space: nowrap; border-left: 0; border-bottom: 3px solid transparent; border-radius: 0; }
	.fmd-rail__item.is-active { border-left: 0; border-bottom-color: var(--fmd-hi); }
	.fmd-main { padding: 14px; }
}

/* ---------- Stats ---------- */

.fmd-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
@media (max-width: 640px) { .fmd-stats { grid-template-columns: repeat(2, 1fr); } }
.fmd-stat {
	background: #fff; border: 1px solid var(--fmd-line); border-radius: var(--fmd-radius);
	padding: 12px 14px;
}
.fmd-stat__n { font-family: var(--fmd-mono); font-size: 26px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.fmd-stat__l { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--fmd-steel); font-weight: 700; margin-top: 4px; }
.fmd-stat--alert .fmd-stat__n { color: var(--fmd-stop); }

/* ---------- Toolbar ---------- */

.fmd-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.fmd-toolbar .fmd-h3 { margin-right: auto; }
.fmd-search { max-width: 260px; }
.fmd-toolbar select { width: auto; min-width: 150px; font-size: 14px; padding: 8px 10px; }

/* ---------- Work board ---------- */

.fmd-board {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	overflow-x: auto;
	padding-bottom: 12px;
}
.fmd-col {
	flex: 0 0 268px;
	background: rgba(255,255,255,.6);
	border: 1px solid var(--fmd-line);
	border-radius: var(--fmd-radius);
	display: flex;
	flex-direction: column;
	/* Columns grow with their cards; the page scrolls, not the column. */
}
.fmd-col.is-target { border-color: var(--fmd-hi); background: var(--fmd-hi-soft); }
.fmd-col__head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 10px 12px;
	border-bottom: 1px solid var(--fmd-line);
	font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.fmd-col__count { font-family: var(--fmd-mono); background: var(--fmd-paper); border-radius: 10px; padding: 1px 8px; font-size: 11px; }
.fmd-col__body { padding: 10px; display: flex; flex-direction: column; gap: 9px; }
.fmd-col__empty { color: var(--fmd-steel); font-size: 12.5px; padding: 14px 4px; text-align: center; }

/* The signature: a status spine down the left edge of every ticket */
.fmd-ticket {
	position: relative;
	background: #fff;
	border: 1px solid var(--fmd-line);
	border-left: 4px solid var(--fmd-steel);
	border-radius: 2px;
	padding: 11px 12px 11px 13px;
	cursor: grab;
	text-align: left;
	width: 100%;
	font: inherit;
	display: block;
}
.fmd-ticket:hover {
	background: var(--fmd-ink);
	border-color: var(--fmd-ink);
	box-shadow: var(--fmd-shadow);
}
/* On the dark hover, lift every piece of card text to white so the muted greys
   — request number, tenant meta, footer — stay legible instead of fading out.
   The coloured left stripe and the status/priority tags keep their own colours. */
.fmd-ticket:hover .fmd-ticket__no,
.fmd-ticket:hover .fmd-ticket__title,
.fmd-ticket:hover .fmd-ticket__meta,
.fmd-ticket:hover .fmd-ticket__foot {
	color: #fff;
}
.fmd-ticket:hover .fmd-ticket__foot .fmd-tag { filter: brightness(1.08); }
/* These two tags are dark-on-dark or transparent, so they vanish on the dark
   hover card. Give them a visible treatment against it. */
.fmd-ticket:hover .fmd-tag--overdue {
	background: var(--fmd-hi);
	color: var(--fmd-ink);
	filter: none;
}
.fmd-ticket:hover .fmd-tag--unassigned {
	color: #fff;
	border-color: rgba(255,255,255,.45);
}
.fmd-ticket:hover .fmd-tag--clip {
	background: rgba(255,255,255,.15);
	color: #fff;
}
.fmd-ticket:focus-visible { outline: 2px solid var(--fmd-hi); outline-offset: 1px; }
.fmd-ticket.is-dragging { opacity: .4; }

.fmd-ticket[data-priority="critical"] { border-left-color: var(--fmd-stop); }
.fmd-ticket[data-priority="high"] { border-left-color: var(--fmd-hi); }
.fmd-ticket[data-priority="normal"] { border-left-color: var(--fmd-flow); }
.fmd-ticket[data-priority="low"] { border-left-color: var(--fmd-steel); }

/* Overdue work gets a hi-vis hatch across the top, like a marked-up docket */
.fmd-ticket.is-overdue::before {
	content: "";
	position: absolute; inset: 0 0 auto 0; height: 4px;
	background: repeating-linear-gradient(45deg, var(--fmd-hi) 0 6px, var(--fmd-ink) 6px 12px);
}
.fmd-ticket.is-overdue { padding-top: 15px; }

.fmd-ticket__head { display: flex; align-items: baseline; gap: 6px; text-align: left; margin-bottom: 3px; }
.fmd-ticket__no { font-family: var(--fmd-mono); font-size: 11px; color: var(--fmd-steel); letter-spacing: .04em; }
.fmd-ticket__sep { color: var(--fmd-line); }
.fmd-ticket__title { font-weight: 700; font-size: 14px; }
.fmd-ticket__meta { display: block; text-align: left; font-size: 12.5px; color: var(--fmd-slate); margin-bottom: 5px; }
.fmd-ticket__foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 11px; color: var(--fmd-steel); flex-wrap: wrap; }

.fmd-tag {
	font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
	padding: 2px 6px; border-radius: 2px;
}
.fmd-tag--critical { background: var(--fmd-stop-soft); color: var(--fmd-stop); }
.fmd-tag--high { background: var(--fmd-hi-soft); color: #8a5606; }
.fmd-tag--normal { background: var(--fmd-flow-soft); color: var(--fmd-flow); }
.fmd-tag--low { background: var(--fmd-paper); color: var(--fmd-steel); }
.fmd-tag--overdue { background: var(--fmd-ink); color: var(--fmd-hi); }
.fmd-tag--clip { background: var(--fmd-paper); color: var(--fmd-slate); }

/* ---------- Tables ---------- */

.fmd-tablewrap { overflow-x: auto; background: #fff; border: 1px solid var(--fmd-line); border-radius: var(--fmd-radius); }
.fmd-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.fmd-table th, .fmd-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--fmd-line); vertical-align: middle; }
.fmd-table th {
	font-size: 11px; text-transform: uppercase; letter-spacing: .09em;
	color: var(--fmd-steel); font-weight: 700; background: var(--fmd-paper);
	position: sticky; top: 0;
}
.fmd-table tbody tr:last-child td { border-bottom: 0; }
.fmd-table tbody tr:hover { background: #fbfcfa; }

/* On the All requests table, hovering a row lifts it onto a dark band with
   white text, so the muted greys (dashes, "locked", secondary text) stay
   legible instead of washing out against the pale hover. */
.fmd-table--requests tbody tr:hover {
	background: var(--fmd-ink);
}
.fmd-table--requests tbody tr:hover,
.fmd-table--requests tbody tr:hover td,
.fmd-table--requests tbody tr:hover a,
.fmd-table--requests tbody tr:hover .fmd-link,
.fmd-table--requests tbody tr:hover .fmd-hint {
	color: #fff;
}
/* Keep the selected-row tint from fighting the hover. */
.fmd-table--requests tbody tr.is-selected:hover { background: var(--fmd-ink); }
/* Status and priority tags carry their own backgrounds; keep them readable. */
.fmd-table--requests tbody tr:hover .fmd-tag { filter: brightness(1.08); }
/* The reference-number link is the obvious click target: keep it underlined
   and bright rather than letting the white rule flatten it into the row. */
.fmd-table--requests tbody tr:hover .fmd-link { color: #fff; text-decoration: underline; }
/* Delete button: solid red on the dark row so it stays unmistakably an action,
   not a washed-out pink chip. */
.fmd-table--requests tbody tr:hover .fmd-btn--danger {
	background: var(--fmd-stop);
	color: #fff;
	border-color: var(--fmd-stop);
}
.fmd-table td.fmd-num { font-family: var(--fmd-mono); font-variant-numeric: tabular-nums; }
.fmd-table .fmd-rowactions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: nowrap; }
.fmd-empty { padding: 30px 16px; text-align: center; color: var(--fmd-steel); font-size: 14px; }
.fmd-empty strong { display: block; color: var(--fmd-ink); margin-bottom: 4px; }

/* ---------- Drawer ---------- */

.fmd-drawer { position: fixed; inset: 0; z-index: 200; }
.fmd-drawer__scrim { position: absolute; inset: 0; background: rgba(20, 32, 43, .45); }
.fmd-drawer__panel {
	position: absolute; top: 0; right: 0; bottom: 0;
	width: min(520px, 94vw);
	background: #fff;
	display: flex; flex-direction: column;
	box-shadow: -8px 0 30px rgba(20,32,43,.16);
	animation: fmd-slide .18s ease-out;
}
@keyframes fmd-slide { from { transform: translateX(16px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
	.fmd-drawer__panel { animation: none; }
	.fmd-btn, .fmd-field input, .fmd-rail__item { transition: none; }
}
.fmd-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--fmd-line); }
.fmd-drawer__close { background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer; color: var(--fmd-steel); padding: 0 4px; }
.fmd-drawer__body { padding: 20px; overflow-y: auto; flex: 1 1 auto; }
.fmd-drawer__body .fmd-form { margin-top: 0; }

.fmd-detail-block { margin-bottom: 20px; }
.fmd-detail-block h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--fmd-steel); margin: 0 0 7px; }
.fmd-desc { background: var(--fmd-paper); border-left: 3px solid var(--fmd-ink); padding: 12px 14px; border-radius: 2px; font-size: 14px; white-space: pre-wrap; }
.fmd-shots { display: flex; flex-wrap: wrap; gap: 8px; }
.fmd-shots a { display: block; width: 88px; height: 88px; border: 1px solid var(--fmd-line); border-radius: 2px; overflow: hidden; }
.fmd-shots img { width: 100%; height: 100%; object-fit: cover; }
.fmd-shots .fmd-filelink { display: flex; align-items: center; justify-content: center; font-size: 11px; text-align: center; padding: 6px; background: var(--fmd-paper); }

.fmd-notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.fmd-notes li { border: 1px solid var(--fmd-line); border-radius: 2px; padding: 10px 12px; font-size: 13.5px; }
.fmd-notes li.is-tenant { border-left: 3px solid var(--fmd-go); background: var(--fmd-go-soft); }
.fmd-notes__meta { display: block; font-size: 11px; color: var(--fmd-steel); margin-top: 5px; }

/* ---------- Technicians ---------- */

/* Chips listing the types a technician covers */
.fmd-chip {
	display: inline-block;
	font-size: 11.5px;
	background: var(--fmd-paper);
	border: 1px solid var(--fmd-line);
	border-radius: 2px;
	padding: 2px 7px;
	margin: 2px 4px 2px 0;
	white-space: nowrap;
}
.fmd-chip--warn { background: var(--fmd-hi-soft); border-color: #f0dcb6; color: #8a5606; }

.fmd-table tr.is-inactive td { opacity: .55; }

.fmd-checklist {
	border: 1px solid var(--fmd-line);
	border-radius: var(--fmd-radius);
	padding: 12px 14px 4px;
	max-height: 240px;
	overflow-y: auto;
	background: #fff;
}
.fmd-checklist .fmd-check { margin-bottom: 10px; }

.fmd-tag--tech { background: var(--fmd-go-soft); color: var(--fmd-go); text-transform: none; letter-spacing: 0; font-weight: 600; }
.fmd-tag--unassigned { background: transparent; color: var(--fmd-steel); border: 1px dashed var(--fmd-line); text-transform: none; letter-spacing: 0; font-weight: 500; }

/* The tenant-facing "who is coming" card */
.fmd-tech-card {
	margin-top: 18px;
	text-align: left;
	border: 1px solid var(--fmd-line);
	border-left: 4px solid var(--fmd-go);
	border-radius: 2px;
	padding: 14px 16px;
	background: var(--fmd-go-soft);
}
.fmd-tech-card--pending { border-left-color: var(--fmd-steel); background: var(--fmd-paper); }
.fmd-tech-card__label {
	font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
	font-weight: 700; color: var(--fmd-steel);
}
.fmd-tech-card__name { font-size: 17px; font-weight: 700; margin: 5px 0 0; }
.fmd-tech-card__trade { font-size: 13px; color: var(--fmd-slate); margin: 2px 0 0; }
.fmd-tech-card__contact { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.fmd-tech-card__link {
	font-family: var(--fmd-mono);
	font-size: 13px;
	background: #fff;
	border: 1px solid var(--fmd-line);
	border-radius: 2px;
	padding: 7px 11px;
	text-decoration: none;
	color: var(--fmd-ink);
}
.fmd-tech-card__link:hover { border-color: var(--fmd-go); }

/* Filter feedback strip under the board toolbar */
.fmd-filterinfo {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: -4px 0 12px;
	font-size: 12.5px;
	color: var(--fmd-steel);
}
.fmd-filterinfo::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--fmd-hi);
	flex: 0 0 auto;
}

/* ---------- Building on-site contacts ---------- */
/* One line each: "Rajesh: +971 55 477 9652 (Security)" */

.fmd-contacts { list-style: none; margin: 0; padding: 0; }
.fmd-contacts li { font-size: 13px; line-height: 1.6; white-space: nowrap; }
.fmd-contacts__name { font-weight: 600; color: var(--fmd-ink); }
.fmd-contacts__tel {
	font-family: var(--fmd-mono);
	font-size: 13px;
	color: var(--fmd-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--fmd-line);
}
.fmd-contacts__tel:hover { border-bottom-color: var(--fmd-ink); }
.fmd-contacts__tel.is-empty {
	color: var(--fmd-steel);
	border-bottom: 0;
	font-style: italic;
	font-family: var(--fmd-sans);
}
.fmd-contacts__role { color: var(--fmd-steel); font-size: 12px; }

/* Give the tel links a real tap target on a phone, where dialling is the point. */
@media (max-width: 640px) {
	.fmd-contacts li { white-space: normal; line-height: 1.8; }
	.fmd-contacts__tel { display: inline-block; padding: 3px 0; }
}

/* ---------- Narrow action column ---------- */
/* width:1% collapses the column to its content, so the data columns get the room. */

.fmd-table th.fmd-actions-col,
.fmd-table td.fmd-actions-col {
	width: 1%;
	white-space: nowrap;
	padding-left: 8px;
	padding-right: 12px;
}
.fmd-rowactions .fmd-btn {
	padding: 5px 10px;
	font-size: 12px;
	flex: 0 0 auto;
	white-space: nowrap;
}

/* ---------- Usage against a limit ---------- */

.fmd-usage {
	font-size: 12px;
	color: var(--fmd-steel);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.fmd-usage.is-full {
	color: var(--fmd-stop);
	font-weight: 600;
}
.fmd-btn[disabled] { cursor: not-allowed; }

/* ---------- All requests view ---------- */

.fmd-filterbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 12px;
	margin-bottom: 12px;
	background: #fff;
	border: 1px solid var(--fmd-line);
	border-radius: var(--fmd-radius);
}
.fmd-filterbar select,
.fmd-filterbar .fmd-search { width: auto; min-width: 140px; font-size: 13px; padding: 7px 9px; }
.fmd-filterbar .fmd-search { min-width: 220px; }

.fmd-daterange { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fmd-steel); }
.fmd-daterange input {
	font: inherit;
	font-size: 13px;
	padding: 6px 8px;
	border: 1px solid var(--fmd-line);
	border-radius: var(--fmd-radius);
	background: #fff;
	color: var(--fmd-ink);
}

/* Bulk bar only appears once something is ticked, so it never wastes space. */
.fmd-bulkbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	margin-bottom: 12px;
	background: var(--fmd-ink);
	color: #fff;
	border-radius: var(--fmd-radius);
	font-size: 13px;
}
.fmd-bulkbar .fmd-link { color: #fff; }
.fmd-bulkbar .fmd-hint { color: rgba(255,255,255,.7); margin: 0; }
.fmd-bulkbar .fmd-btn--ghost { color: #fff; border-color: rgba(255,255,255,.35); }

.fmd-check-col {
	width: 44px;
	padding-left: 14px !important;
	padding-right: 14px !important;
	text-align: center;
	vertical-align: middle;
}
/* Size the box explicitly: themes often inflate checkboxes, which is what
   pushed it into the next column. */
.fmd-check-col input[type="checkbox"] {
	appearance: auto;
	-webkit-appearance: checkbox;
	width: 16px;
	height: 16px;
	min-width: 16px;
	min-height: 16px;
	max-width: 16px;
	max-height: 16px;
	margin: 0;
	padding: 0;
	display: inline-block;
	vertical-align: middle;
	box-sizing: border-box;
	cursor: pointer;
	flex: none;
}
.fmd-table tbody tr.is-selected { background: var(--fmd-hi-soft); }
.fmd-table--requests tbody tr.is-selected { background: var(--fmd-hi-soft); }
.fmd-table--requests td { white-space: nowrap; }
.fmd-table--requests .fmd-link { font-family: var(--fmd-mono); font-size: 12.5px; }

.fmd-pager {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
	font-size: 13px;
	color: var(--fmd-steel);
}
.fmd-pager span { margin-right: auto; font-variant-numeric: tabular-nums; }

/* ---------- Auto-assign sub-options ---------- */

.fmd-subsettings {
	margin: 4px 0 4px 30px;
	padding: 14px 16px;
	border-left: 2px solid var(--fmd-line);
	display: flex;
	flex-direction: column;
	gap: 12px;
	transition: opacity .15s ease;
}
.fmd-subsettings.is-disabled { opacity: .45; }
.fmd-subsettings .fmd-field { margin: 0; }
.fmd-subsettings select { max-width: 420px; }

/* ---------- Password show/hide ---------- */

.fmd-reveal { position: relative; display: block; }
.fmd-reveal input {
	/* Room for the button so the dots never slide under it. */
	padding-right: 44px;
	width: 100%;
	box-sizing: border-box;
}
.fmd-reveal__btn {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	color: var(--fmd-steel);
	cursor: pointer;
	border-radius: 0 var(--fmd-radius) var(--fmd-radius) 0;
}
.fmd-reveal__btn:hover { color: var(--fmd-ink); }
.fmd-reveal__btn:focus-visible {
	outline: 2px solid var(--fmd-hi);
	outline-offset: -2px;
}
.fmd-reveal__btn svg { display: block; }

/* ---------- Radio choice (staff password method) ---------- */

.fmd-radio {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 12px;
	margin-top: 8px;
	border: 1px solid var(--fmd-line);
	border-radius: var(--fmd-radius);
	cursor: pointer;
	font-size: 14px;
	transition: border-color .12s ease, background .12s ease;
}
.fmd-radio:hover { border-color: var(--fmd-slate); }
.fmd-radio input { margin-top: 2px; flex: 0 0 auto; }
.fmd-radio:has(input:checked) {
	border-color: var(--fmd-ink);
	background: var(--fmd-hi-soft);
}
.fmd-radio .fmd-hint { margin-top: 3px; }

/* Per-page selector in the requests pager */
.fmd-perpage {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	color: var(--fmd-steel);
}
.fmd-perpage select {
	width: auto;
	font-size: 13px;
	padding: 4px 6px;
	border: 1px solid var(--fmd-line);
	border-radius: var(--fmd-radius);
	background: #fff;
	color: var(--fmd-ink);
}

/* ---------- Request costs (owner / staff only) ---------- */

.fmd-costs {
	margin-top: 4px;
	padding: 12px;
	border: 1px solid var(--fmd-line);
	border-radius: var(--fmd-radius);
	background: var(--fmd-paper);
}
.fmd-money {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--fmd-line);
	border-radius: var(--fmd-radius);
	overflow: hidden;
	background: #fff;
}
.fmd-money__cur {
	display: inline-flex;
	align-items: center;
	padding: 0 10px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--fmd-steel);
	background: var(--fmd-paper);
	border-right: 1px solid var(--fmd-line);
}
.fmd-money input {
	border: 0;
	border-radius: 0;
	flex: 1;
	min-width: 0;
}
.fmd-money input:focus {
	outline: 2px solid var(--fmd-hi);
	outline-offset: -2px;
}
#d_cost_total {
	margin: 10px 0 0;
	font-weight: 600;
	color: var(--fmd-ink);
}
/* The Work block's Save sits after the costs box; give it clear separation so
   it never rides up over the running total on tighter viewports. */
#d_save {
	display: block;
	margin-top: 16px;
}
.fmd-costs .fmd-grid-2 { gap: 12px 16px; }
.fmd-costs .fmd-field { margin-bottom: 0; }

/* ---------- Finances table ---------- */

.fmd-table--finances tfoot td {
	border-top: 2px solid var(--fmd-ink);
	padding-top: 12px;
	font-size: 14px;
}
.fmd-grandtotal td { background: var(--fmd-hi-soft); }
.fmd-grandtotal .fmd-hint { font-weight: 400; margin-left: 6px; }
.fmd-table--finances tbody td.fmd-num,
.fmd-table--finances tfoot td.fmd-num {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Portal: choose which flat when a tenant holds several */
.fmd-flat-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.fmd-flat-option {
	display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
	width: 100%; text-align: left;
	padding: 12px 14px;
	border: 1px solid var(--fmd-line); border-radius: var(--fmd-radius);
	background: #fff; cursor: pointer;
	transition: border-color .12s ease, background .12s ease;
}
.fmd-flat-option:hover { border-color: var(--fmd-ink); background: var(--fmd-hi-soft); }
.fmd-flat-option strong { font-size: 14px; }
.fmd-flat-option span { font-size: 12.5px; color: var(--fmd-steel); }

/* Admin toggle in the team Position column */
.fmd-admincheck {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	cursor: pointer;
}
.fmd-admincheck input { flex: 0 0 auto; margin: 0; }

/* Board scroll arrows sit at the end of the filter row */
.fmd-scrollnav { display: inline-flex; gap: 4px; margin-left: auto; }
.fmd-scrollnav .fmd-btn { font-size: 15px; line-height: 1; padding: 5px 11px; }

/* Agreement tab: compact buttons, late-rent highlight, received chip */
.fmd-btn--micro { font-size: 11px; padding: 4px 8px; }
.fmd-row-late td { background: #fdf1ef; }
.fmd-paid { color: var(--fmd-go, #1a7f5a); font-weight: 600; font-size: 12px; }
.fmd-latedot { color: #b23a2b; font-size: 14px; vertical-align: -1px; }