/* DemandFlow mobile skeleton — loaded only on phone-class devices (see index.php). */

html,
body {
	margin: 0;
	padding: 0;
	height: 100%;
	background: #f4f5f7;
	overscroll-behavior: none;
	-webkit-tap-highlight-color: transparent;
}

#body {
	height: 100%;
}

.mob-shell {
	display: flex;
	flex-direction: column;
	height: 100vh;
	height: 100dvh;
}

/* ---- Top bar ---- */
.mob-topbar {
	display: flex;
	align-items: center;
	height: 52px;
	padding-top: env(safe-area-inset-top);
	background: var(--mob-brand-bg, #3041b0);
	color: var(--mob-brand-fg, #ffffff);
	flex-shrink: 0;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
	position: relative;
	z-index: 100;
}

.mob-hamburger,
.mob-topbar-spacer {
	width: 52px;
	height: 52px;
	flex-shrink: 0;
}

.mob-hamburger {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	color: var(--mob-brand-fg, #ffffff);
	font-size: 20px;
	padding: 0;
	cursor: pointer;
}

.mob-hamburger:active {
	opacity: 0.55;
}

.mob-title {
	flex: 1;
	text-align: center;
	font-size: 17px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---- Content ---- */
.mob-content {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding-bottom: env(safe-area-inset-bottom);
}

.mob-screen {
	padding: 12px;
}

/* ---- Drawer ---- */
.mob-drawer {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: 280px;
	max-width: 84vw;
	background: #fff;
	box-shadow: 2px 0 16px rgba(0, 0, 0, 0.25);
	transform: translateX(-100%);
	transition: transform 0.25s ease;
	z-index: 9000;
	display: flex;
	flex-direction: column;
}

.mob-drawer.open {
	transform: translateX(0);
}

.mob-drawer-head {
	background: var(--mob-brand-bg, #3041b0);
	color: var(--mob-brand-fg, #ffffff);
	padding: 16px;
	padding-top: calc(16px + env(safe-area-inset-top));
	flex-shrink: 0;
}

.mob-drawer-name {
	font-size: 16px;
	font-weight: 600;
}

.mob-drawer-sub {
	font-size: 12px;
	opacity: 0.7;
	margin-top: 2px;
}

.mob-nav {
	list-style: none;
	margin: 0;
	padding: 8px 0;
	flex: 1;
	min-height: 0;
	overflow-y: auto;
}

.mob-nav-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	font-size: 15px;
	color: #1a1a2e;
	cursor: pointer;
}

.mob-nav-item i {
	width: 20px;
	text-align: center;
	font-size: 17px;
	color: #3041b0;
}

.mob-nav-item:active {
	background: #eef0f8;
}

.mob-nav-item.active {
	background: #eef0f8;
	font-weight: 600;
}

.mob-drawer-foot {
	flex-shrink: 0;
	border-top: 1px solid #e4e6ec;
	padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
}

.mob-logout {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 12px 10px;
	background: none;
	border: none;
	border-radius: 8px;
	font-size: 15px;
	color: #c0392b;
	cursor: pointer;
}

.mob-logout i {
	width: 20px;
	text-align: center;
	font-size: 17px;
}

.mob-logout:active {
	background: #f7eceb;
}

/* ---- Scrim ---- */
.mob-scrim {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.45);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
	z-index: 8999;
}

.mob-scrim.open {
	opacity: 1;
	pointer-events: auto;
}

/* ---- List + cards ---- */
.mob-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.mob-card {
	background: #fff;
	border: 1px solid #e4e6ec;
	border-radius: 10px;
	padding: 14px;
}

.mob-card-title {
	font-size: 15px;
	font-weight: 600;
	color: #1a1a2e;
}

.mob-card-meta {
	font-size: 13px;
	color: #8a8f9c;
	margin-top: 4px;
}

/* ---- Empty / placeholder state ---- */
.mob-empty {
	text-align: center;
	padding: 60px 24px;
}

.mob-empty i {
	display: block;
	font-size: 40px;
	margin-bottom: 14px;
	color: #c2c6d2;
}

.mob-empty p {
	margin: 4px 0;
	font-size: 16px;
	color: #5a6072;
}

.mob-empty-sub {
	font-size: 13px;
	color: #9aa0ad;
}

/* ---- Tasks screen ---- */
.mob-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 50px 20px;
	color: #8a8f9c;
	font-size: 14px;
}

.mob-stat-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-bottom: 12px;
}

.mob-stat {
	background: #fff;
	border: 1px solid #e4e6ec;
	border-top: 3px solid #9ca3af;
	border-radius: 10px;
	padding: 10px 12px;
}

.mob-stat-value {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.1;
}

.mob-stat-label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #8a8f9c;
	margin-top: 2px;
}

.mob-quickadd {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	border: 1px solid #e4e6ec;
	border-radius: 10px;
	padding: 0 14px;
	margin-bottom: 10px;
}

.mob-quickadd i {
	color: #9ca3af;
	font-size: 17px;
}

.mob-quickadd input {
	flex: 1;
	min-width: 0;
	border: none;
	outline: none;
	background: transparent;
	font-size: 15px;
	padding: 13px 0;
	color: #1a1a2e;
}

.mob-tasks-tools {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 10px;
}

.mob-toggle {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: #6b7280;
}

.mob-group {
	margin-bottom: 16px;
}

.mob-group-head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 2px;
}

.mob-group-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

.mob-group-title {
	font-size: 13px;
	font-weight: 600;
	color: #1a1a2e;
}

.mob-group-count {
	font-size: 12px;
	color: #9ca3af;
}

.mob-task {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #fff;
	border: 1px solid #e4e6ec;
	border-radius: 10px;
	padding: 12px;
	margin-bottom: 8px;
}

.mob-task:active {
	background: #f7f8fa;
}

.mob-task.done {
	opacity: 0.55;
}

.mob-task-check {
	width: 24px;
	height: 24px;
	border: 2px solid #d1d5db;
	border-radius: 50%;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 11px;
}

.mob-task-check.checked {
	background: #22c55e;
	border-color: #22c55e;
}

.mob-task-body {
	flex: 1;
	min-width: 0;
}

.mob-task-text {
	font-size: 15px;
	color: #1a1a2e;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mob-task.done .mob-task-text {
	text-decoration: line-through;
}

.mob-task-high {
	color: #ef4444;
	font-size: 12px;
}

.mob-task-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 5px;
	font-size: 12px;
}

.mob-task-due {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
}

.mob-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
}

.mob-task-badge {
	color: #6b7280;
	background: #f1f2f5;
	border-radius: 8px;
	padding: 1px 7px;
	font-size: 11px;
}

.mob-tag {
	background: #eef2ff;
	color: #4f46e5;
	border-radius: 10px;
	padding: 1px 8px;
	font-size: 11px;
	white-space: nowrap;
}

.mob-task-chev {
	color: #c2c6d2;
	font-size: 14px;
	flex-shrink: 0;
}

/* ---- Object editor panel ---- */
.mob-obj-panel {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #f4f5f7;
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 0.3s ease;
}

.mob-obj-panel.open {
	transform: translateX(0);
}

.mob-obj-header {
	display: flex;
	align-items: center;
	height: 52px;
	padding-top: env(safe-area-inset-top);
	background: var(--mob-brand-bg, #3041b0);
	color: var(--mob-brand-fg, #ffffff);
	flex-shrink: 0;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.mob-obj-back {
	width: 52px;
	height: 52px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	color: var(--mob-brand-fg, #ffffff);
	font-size: 20px;
	padding: 0;
	cursor: pointer;
}

.mob-obj-back:active {
	opacity: 0.55;
}

.mob-obj-title {
	flex: 1;
	text-align: center;
	font-size: 17px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 0 4px;
}

.mob-obj-save {
	flex-shrink: 0;
	min-width: 52px;
	height: 52px;
	background: none;
	border: none;
	color: var(--mob-brand-fg, #ffffff);
	font-size: 15px;
	font-weight: 600;
	padding: 0 14px;
	cursor: pointer;
}

.mob-obj-save:disabled {
	opacity: 0.5;
}

.mob-obj-header-spacer {
	width: 52px;
	flex-shrink: 0;
}

.mob-obj-body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 12px;
	padding-bottom: calc(24px + env(safe-area-inset-bottom));
}

.mob-obj-loading {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	color: #c2c6d2;
}

.mob-obj-section {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #8a8f9c;
	margin: 14px 4px 6px;
}

/* ---- Form cards + fields ---- */
.mob-form-card {
	background: #fff;
	border: 1px solid #e4e6ec;
	border-radius: 10px;
	padding: 4px 14px 14px;
	margin-bottom: 12px;
}

.mob-form-card-head {
	font-size: 13px;
	font-weight: 600;
	color: #1a1a2e;
	padding: 12px 0 4px;
	border-bottom: 1px solid #f0f1f4;
	margin-bottom: 6px;
}

.mob-form-unsupported {
	font-size: 13px;
	color: #9aa0ad;
	padding: 10px 0;
	font-style: italic;
}

.mob-field {
	padding: 10px 0;
	border-bottom: 1px solid #f4f5f7;
}

.mob-field:last-child {
	border-bottom: none;
}

.mob-field-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #5a6072;
	margin-bottom: 6px;
}

.mob-field-switchrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.mob-field-switchrow .mob-field-label {
	margin-bottom: 0;
}

.mob-req {
	color: #ef4444;
}

.mob-field-help {
	font-size: 12px;
	color: #9aa0ad;
	margin-top: 5px;
}

.mob-input {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #d8dae2;
	border-radius: 8px;
	padding: 11px 12px;
	font-size: 15px;
	color: #1a1a2e;
	background: #fff;
	outline: none;
	font-family: inherit;
}

.mob-input:focus {
	border-color: var(--mob-brand-bg, #3041b0);
}

.mob-textarea {
	min-height: 90px;
	resize: vertical;
	line-height: 1.4;
}

/* ---- Toggle switch ---- */
.mob-switch {
	position: relative;
	display: inline-block;
	width: 46px;
	height: 28px;
	flex-shrink: 0;
}

.mob-switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.mob-switch-track {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #d1d5db;
	border-radius: 28px;
	transition: background 0.2s;
}

.mob-switch-track::before {
	content: '';
	position: absolute;
	width: 22px;
	height: 22px;
	left: 3px;
	top: 3px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	transition: transform 0.2s;
}

.mob-switch input:checked + .mob-switch-track {
	background: #22c55e;
}

.mob-switch input:checked + .mob-switch-track::before {
	transform: translateX(18px);
}

/* ---- Checklist field ---- */
.mob-cl-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 0;
}

.mob-cl-check {
	width: 20px;
	height: 20px;
	border: 2px solid #d1d5db;
	border-radius: 5px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 9px;
	cursor: pointer;
}

.mob-cl-check.checked {
	background: #22c55e;
	border-color: #22c55e;
}

.mob-cl-text {
	flex: 1;
	min-width: 0;
	border: none;
	outline: none;
	background: transparent;
	font-size: 14px;
	color: #1a1a2e;
	font-family: inherit;
}

.mob-cl-del {
	color: #d1d5db;
	font-size: 14px;
	flex-shrink: 0;
	cursor: pointer;
}

.mob-cl-add i {
	width: 20px;
	text-align: center;
	color: #c2c6d2;
	font-size: 12px;
}

/* ---- Tags field ---- */
.mob-tags-editor {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}

.mob-tag-edit {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.mob-tag-edit i {
	cursor: pointer;
	font-size: 11px;
}

.mob-tag-input {
	flex: 1;
	min-width: 90px;
	border: none;
	outline: none;
	background: transparent;
	font-size: 14px;
	color: #1a1a2e;
	padding: 4px 0;
	font-family: inherit;
}

/* ---- Image gallery (imagesEditor) ---- */
.mob-images {
	padding: 4px 0;
}

.mob-img-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

.mob-img-cell {
	position: relative;
	aspect-ratio: 1;
	border-radius: 8px;
	overflow: hidden;
	background: #f1f2f5;
}

.mob-img-cell img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mob-img-del {
	position: absolute;
	top: 3px;
	right: 3px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	cursor: pointer;
}

.mob-img-add {
	aspect-ratio: 1;
	border: 1.5px dashed #c2c6d2;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	color: #8a8f9c;
	font-size: 12px;
	cursor: pointer;
}

.mob-img-add i {
	font-size: 20px;
}

.mob-img-add.busy {
	opacity: 0.5;
}

/* ---- Network Audit screen ---- */
.mob-audit-head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 2px 2px 12px;
}

.mob-audit-head [data-audit-back] {
	font-size: 18px;
	color: var(--mob-brand-bg, #3041b0);
	padding: 4px;
	cursor: pointer;
}

.mob-audit-head-pad {
	width: 4px;
}

.mob-audit-head-label {
	font-size: 15px;
	font-weight: 600;
	color: #1a1a2e;
}

.mob-audit-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.mob-audit-row-main {
	flex: 1;
	min-width: 0;
}

.mob-audit-badge {
	font-size: 11px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 10px;
	white-space: nowrap;
	flex-shrink: 0;
}

.mob-audit-badge.grey {
	background: #f1f2f5;
	color: #8a8f9c;
}

.mob-audit-badge.green {
	background: #e7f7ec;
	color: #1a8a44;
}

.mob-audit-badge.amber {
	background: #fdf1dd;
	color: #b9770e;
}

.mob-audit-badge.red {
	background: #fae9e8;
	color: #c0392b;
}

.mob-pillgroup {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.mob-pill {
	border: 1px solid #d8dae2;
	background: #fff;
	color: #5a6072;
	border-radius: 16px;
	padding: 7px 12px;
	font-size: 13px;
	cursor: pointer;
	font-family: inherit;
}

.mob-pill.active {
	background: var(--mob-brand-bg, #3041b0);
	border-color: var(--mob-brand-bg, #3041b0);
	color: var(--mob-brand-fg, #ffffff);
	font-weight: 600;
}

.mob-audit-info {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid #f4f5f7;
	font-size: 14px;
}

.mob-audit-info:last-child {
	border-bottom: none;
}

.mob-audit-info span {
	color: #8a8f9c;
}

.mob-audit-info strong {
	color: #1a1a2e;
	font-weight: 600;
	text-align: right;
}

.mob-audit-equip {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid #f4f5f7;
	cursor: pointer;
}

.mob-audit-equip:last-child {
	border-bottom: none;
}

.mob-audit-equip:active {
	background: #f7f8fa;
}

.mob-audit-u {
	flex-shrink: 0;
	width: 42px;
	text-align: center;
	font-size: 12px;
	font-weight: 700;
	color: #5a6072;
	background: #f1f2f5;
	border-radius: 6px;
	padding: 6px 0;
}

.mob-audit-equip-main {
	flex: 1;
	min-width: 0;
}

.mob-audit-done {
	color: #22c55e;
	font-size: 14px;
	flex-shrink: 0;
}

/* ---- Search bar ---- */
.mob-search {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	border: 1px solid #e4e6ec;
	border-radius: 10px;
	padding: 0 14px;
	margin-bottom: 12px;
}

.mob-search i {
	color: #9ca3af;
	font-size: 15px;
}

.mob-search input {
	flex: 1;
	min-width: 0;
	border: none;
	outline: none;
	background: transparent;
	font-size: 15px;
	padding: 12px 0;
	color: #1a1a2e;
}

/* ---- Knowledge Base browse ---- */
.mob-kb-cat {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 2px 6px;
}

.mob-kb-cat-icon {
	width: 30px;
	height: 30px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	flex-shrink: 0;
}

.mob-kb-cat-label {
	flex: 1;
	font-size: 14px;
	font-weight: 600;
	color: #1a1a2e;
}

.mob-kb-cat-count {
	font-size: 12px;
	color: #9ca3af;
}

.mob-kb-article {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	border: 1px solid #e4e6ec;
	border-radius: 10px;
	padding: 12px;
	margin-bottom: 8px;
}

.mob-kb-article:active {
	background: #f7f8fa;
}

.mob-kb-article-main {
	flex: 1;
	min-width: 0;
}

.mob-kb-article-title {
	font-size: 15px;
	font-weight: 600;
	color: #1a1a2e;
}

.mob-kb-article-summary {
	font-size: 13px;
	color: #8a8f9c;
	margin-top: 3px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.mob-kb-type {
	display: inline-block;
	margin-top: 6px;
	font-size: 11px;
	color: #5a6072;
	background: #f1f2f5;
	border-radius: 8px;
	padding: 2px 8px;
}

/* ---- Knowledge Base article view ---- */
.mob-kb-h1 {
	font-size: 20px;
	font-weight: 700;
	color: #1a1a2e;
	line-height: 1.3;
	margin: 4px 0 10px;
}

.mob-kb-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 12px;
}

.mob-kb-chip {
	font-size: 12px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 10px;
	background: #f1f2f5;
	color: #5a6072;
}

.mob-kb-summary {
	font-size: 14px;
	color: #5a6072;
	line-height: 1.5;
	background: #f4f5f7;
	border-radius: 8px;
	padding: 12px;
	margin-bottom: 14px;
}

.mob-kb-content {
	font-size: 15px;
	line-height: 1.6;
	color: #2a2f3a;
	overflow-wrap: break-word;
}

.mob-kb-content img {
	max-width: 100%;
	height: auto;
	border-radius: 6px;
}

.mob-kb-content h1,
.mob-kb-content h2,
.mob-kb-content h3 {
	line-height: 1.3;
	margin: 18px 0 8px;
}

.mob-kb-content h1 {
	font-size: 19px;
}

.mob-kb-content h2 {
	font-size: 17px;
}

.mob-kb-content h3 {
	font-size: 15px;
}

.mob-kb-content p {
	margin: 0 0 12px;
}

.mob-kb-content ul,
.mob-kb-content ol {
	padding-left: 22px;
	margin: 0 0 12px;
}

.mob-kb-content li {
	margin-bottom: 4px;
}

.mob-kb-content a {
	color: var(--mob-brand-bg, #3041b0);
}

.mob-kb-content pre {
	background: #f4f5f7;
	border-radius: 6px;
	padding: 10px;
	overflow-x: auto;
	font-size: 13px;
}

.mob-kb-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 12px;
}

.mob-kb-content td,
.mob-kb-content th {
	border: 1px solid #e4e6ec;
	padding: 6px 8px;
	font-size: 13px;
	text-align: left;
}

.mob-kb-empty-content {
	color: #9aa0ad;
	font-style: italic;
	text-align: center;
	padding: 20px 0;
}

/* ---- Service Catalog ---- */
.mob-svc-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 6px;
}

.mob-svc-meta-chip {
	font-size: 11px;
	color: #5a6072;
	background: #f1f2f5;
	border-radius: 8px;
	padding: 2px 8px;
	white-space: nowrap;
}

.mob-svc-approval {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13px;
	color: #b9770e;
	background: #fdf1dd;
	border-radius: 8px;
	padding: 10px 12px;
	margin-bottom: 12px;
}

.mob-svc-submit {
	width: 100%;
	box-sizing: border-box;
	border: none;
	border-radius: 10px;
	background: var(--mob-brand-bg, #3041b0);
	color: var(--mob-brand-fg, #ffffff);
	font-size: 16px;
	font-weight: 600;
	padding: 14px;
	margin-top: 4px;
	cursor: pointer;
	font-family: inherit;
}

.mob-svc-submit:active {
	opacity: 0.85;
}

.mob-svc-submit:disabled {
	opacity: 0.6;
}

/* ---- Support Tickets ---- */
/* Own scroll container so pull-to-refresh is scoped to this screen. */
.mob-ptr-scroll {
	height: 100%;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	position: relative;
}

.mob-ptr {
	height: 0;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #9ca3af;
	transition: height 0.2s ease;
}

.mob-ptr.dragging {
	transition: none;
}

.mob-ptr i {
	font-size: 18px;
	transition: transform 0.2s ease;
}

.mob-ptr.ready i {
	transform: rotate(180deg);
	color: var(--mob-brand-bg, #3041b0);
}

.mob-fab {
	position: fixed;
	right: 16px;
	bottom: calc(16px + env(safe-area-inset-bottom));
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: none;
	background: var(--mob-brand-bg, #3041b0);
	color: var(--mob-brand-fg, #fff);
	font-size: 22px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 60;
	cursor: pointer;
}

.mob-fab:active {
	filter: brightness(0.92);
}

.mob-sup-badge {
	font-size: 11px;
	font-weight: 600;
	color: #fff;
	padding: 2px 8px;
	border-radius: 10px;
	white-space: nowrap;
}

.mob-sup-desc {
	padding: 12px;
	white-space: pre-wrap;
	color: #1a1a2e;
	font-size: 14px;
	line-height: 1.5;
}

.mob-sup-info {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-top: 1px solid #eef0f4;
	font-size: 14px;
}

.mob-sup-info-label {
	color: #6b7280;
}

.mob-sup-info-val {
	color: #1a1a2e;
	text-align: right;
	font-weight: 500;
}

.mob-act-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	padding: 12px;
}

.mob-act-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	background: #fff;
	font-size: 14px;
	font-weight: 500;
	color: #1a1a2e;
	font-family: inherit;
	cursor: pointer;
}

.mob-act-btn i {
	font-size: 16px;
	color: var(--mob-brand-bg, #3041b0);
	width: 18px;
	text-align: center;
}

.mob-act-btn:active {
	background: #f3f4f6;
}

.mob-act-btn.primary {
	background: var(--mob-brand-bg, #3041b0);
	border-color: transparent;
	color: var(--mob-brand-fg, #fff);
}

.mob-act-btn.primary i {
	color: inherit;
}

/* ================= Create / lookup / scan / scanner ================= */

/* Input paired with a barcode-scan button */
.mob-input-scanwrap {
	display: flex;
	gap: 8px;
	align-items: stretch;
}
.mob-input-scanwrap .mob-input {
	flex: 1 1 auto;
}
.mob-scan-btn {
	flex: 0 0 auto;
	width: 46px;
	border: 1px solid var(--mob-brand-bg, #3041b0);
	border-radius: 8px;
	background: var(--mob-brand-bg, #3041b0);
	color: var(--mob-brand-fg, #fff);
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.mob-scan-btn:active { opacity: 0.8; }

/* objectLookup button (looks like an input, opens a picker) */
.mob-lookup-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	text-align: left;
	gap: 8px;
	cursor: pointer;
}
.mob-lookup-btn.locked,
.mob-lookup-btn[disabled] {
	opacity: 0.6;
	pointer-events: none;
}
.mob-lookup-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mob-lookup-label.placeholder { color: #9098aa; }

/* Lookup picker chrome */
.mob-lookup-search {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 4px 10px;
	color: #9098aa;
}
.mob-lookup-search .mob-input { flex: 1 1 auto; }
.mob-lookup-new,
.mob-lookup-clear {
	width: 100%;
	box-sizing: border-box;
	border: 1px dashed #c4c8d4;
	border-radius: 8px;
	background: #fff;
	padding: 12px;
	font-size: 15px;
	font-family: inherit;
	color: var(--mob-brand-bg, #3041b0);
	margin-bottom: 10px;
	cursor: pointer;
}
.mob-lookup-clear { color: #b23; border-color: #e6c4c8; }

/* "+ New …" create card at the top of audit lists */
.mob-audit-add {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--mob-brand-bg, #3041b0);
	font-weight: 600;
	border: 1px dashed var(--mob-brand-bg, #3041b0);
	background: #f7f8fd;
	cursor: pointer;
}
.mob-audit-add i { font-size: 16px; }

/* ---- Full-screen barcode scanner overlay ---- */
.mob-scanner {
	position: fixed;
	inset: 0;
	z-index: 20000;
	background: #000;
	display: flex;
	flex-direction: column;
}
.mob-scanner-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	color: #fff;
	background: rgba(0, 0, 0, 0.55);
	font-size: 16px;
}
.mob-scanner-close,
.mob-scanner-manual {
	background: transparent;
	border: none;
	color: #fff;
	font-size: 16px;
	font-family: inherit;
	cursor: pointer;
	padding: 4px 6px;
}
.mob-scanner-close { font-size: 22px; }
.mob-scanner-region {
	flex: 1 1 auto;
	overflow: hidden;
}
.mob-scanner-region video { width: 100%; height: 100%; object-fit: cover; }
.mob-scanner-hint {
	padding: 16px;
	color: #cfd3e0;
	text-align: center;
	font-size: 14px;
	background: rgba(0, 0, 0, 0.55);
}

/* Per-assessment photo strip (reuses .mob-img-grid; sits inside an assessment card) */
.mob-photostrip {
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px dashed #e2e4ec;
}

/* ---- Rubric control: tappable option cards showing the full definition ---- */
.mob-rubric {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.mob-rubric-opt {
	display: block;
	width: 100%;
	text-align: left;
	box-sizing: border-box;
	border: 1px solid #d8dae2;
	border-radius: 10px;
	background: #fff;
	padding: 12px 12px 12px 12px;
	font-family: inherit;
	cursor: pointer;
}
.mob-rubric-opt.active {
	border-color: var(--mob-brand-bg, #3041b0);
	background: #f5f6fd;
	box-shadow: inset 0 0 0 1px var(--mob-brand-bg, #3041b0);
}
.mob-rubric-head {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 600;
	color: #1a1a2e;
}
.mob-rubric-tick {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1px solid #c4c8d4;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	color: transparent;
}
.mob-rubric-opt.active .mob-rubric-tick {
	background: var(--mob-brand-bg, #3041b0);
	border-color: var(--mob-brand-bg, #3041b0);
	color: #fff;
}
.mob-rubric-desc {
	margin-top: 6px;
	padding-left: 28px;
	font-size: 13px;
	line-height: 1.4;
	color: #565b6e;
}

/* ================= Full-width bottom toasts (alertify) ================= */
/* Scoped to body.df-mobile: mobile.css loads on desktop too, and .alertify-notifier
   is a global class, so an unscoped override would move desktop toasts as well. */
body.df-mobile .alertify-notifier {
	left: 0 !important;
	right: 0 !important;
	top: auto !important;
	bottom: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	transform: none !important;
	z-index: 40000 !important;
}
body.df-mobile .alertify-notifier .ajs-message {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	border-radius: 0 !important;
	box-sizing: border-box !important;
	padding: 16px 18px !important;
	text-align: center;
	font-size: 15px;
	box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.18);
}
body.df-mobile .alertify-notifier .ajs-message.ajs-visible {
	transform: translateX(0) !important;
}

/* ---- OCR button (sits beside the barcode-scan button) ---- */
.mob-ocr-btn {
	flex: 0 0 auto;
	width: 46px;
	border: 1px solid var(--mob-brand-bg, #3041b0);
	border-radius: 8px;
	background: #fff;
	color: var(--mob-brand-bg, #3041b0);
	font-size: 17px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.mob-ocr-btn:active { opacity: 0.7; }

/* ---- OCR full-screen overlay: status while reading, then line picker ---- */
.mob-ocr {
	position: fixed;
	inset: 0;
	z-index: 20100;
	background: rgba(17, 20, 32, 0.97);
	color: #fff;
	display: flex;
	flex-direction: column;
}
.mob-ocr-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 18px;
	font-size: 16px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.mob-ocr-close {
	background: transparent;
	border: none;
	color: #fff;
	font-size: 22px;
	cursor: pointer;
}
.mob-ocr-status {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-size: 15px;
	color: #cfd3e0;
}
.mob-ocr-lines {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.mob-ocr-line {
	width: 100%;
	box-sizing: border-box;
	text-align: left;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
	padding: 14px 14px;
	font-size: 16px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	letter-spacing: 0.02em;
	cursor: pointer;
}
.mob-ocr-line:active { background: rgba(255, 255, 255, 0.16); }
.mob-ocr-empty { color: #aab; text-align: center; padding: 40px 20px; font-size: 14px; }
.mob-ocr-manual {
	margin: 8px 12px 16px;
	padding: 14px;
	border: 1px dashed rgba(255, 255, 255, 0.35);
	border-radius: 10px;
	background: transparent;
	color: #fff;
	font-size: 15px;
	font-family: inherit;
	cursor: pointer;
}

/* ---- Agile boards: one column at a time ---- */
.mob-ag { display: flex; flex-direction: column; gap: 10px; }
.mob-ag-head { display: flex; align-items: center; gap: 8px; }
.mob-ag-board {
	flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left;
	font: inherit; font-size: 15px; font-weight: 600; color: #1a1a2e;
	border: 1px solid #d8dae2; border-radius: 10px; padding: 9px 12px; background: #fff; min-width: 0;
}
.mob-ag-board span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mob-ag-board i { color: #8a8f9c; font-size: 13px; flex-shrink: 0; }
.mob-ag-sheet-tall { height: 70vh; max-height: 70vh; }
.mob-ag-sheet-tall .mob-search { margin-bottom: 4px; }
.mob-ag-sheet-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; -webkit-overflow-scrolling: touch; }
.mob-ag-boardname { flex: 1; font-size: 16px; font-weight: 600; color: #1a1a2e; padding: 6px 2px; }
.mob-ag-iconbtn {
	border: 1px solid #d8dae2; background: #fff; color: #5a6072; border-radius: 10px;
	width: 40px; height: 40px; font-size: 16px; flex-shrink: 0;
}
.mob-ag-chips {
	display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 6px; margin: 0 -2px;
	scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.mob-ag-chips::-webkit-scrollbar { display: none; }
.mob-ag-chip {
	flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
	border: 1px solid #d8dae2; background: #fff; color: #5a6072; border-radius: 16px;
	padding: 7px 12px; font: inherit; font-size: 13px; white-space: nowrap;
}
.mob-ag-chip-n {
	background: #eef0f5; color: #5a6072; border-radius: 10px; padding: 1px 7px; font-size: 12px; font-weight: 600;
}
.mob-ag-chip.active {
	background: var(--mob-brand-bg, #3041b0); border-color: var(--mob-brand-bg, #3041b0);
	color: var(--mob-brand-fg, #fff); font-weight: 600;
}
.mob-ag-chip.active .mob-ag-chip-n { background: rgba(255,255,255,.22); color: var(--mob-brand-fg, #fff); }
.mob-ag-filters { display: flex; flex-direction: column; gap: 8px; }
.mob-ag-search { width: 100%; box-sizing: border-box; }
.mob-ag-list { min-height: 40vh; }
.mob-ag-card { cursor: pointer; -webkit-user-select: none; user-select: none; }
.mob-ag-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.mob-ag-ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: #8a8f9c; }
.mob-ag-epic {
	font-size: 11px; font-weight: 600; background: #e8eaf6; color: #3041b0; border-radius: 4px;
	padding: 2px 6px; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mob-ag-move {
	margin-left: auto; border: 0; background: transparent; color: #8a8f9c; font-size: 15px; padding: 4px 6px;
}
.mob-ag-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; font-size: 12px; color: #5a6072; }
.mob-ag-pri { border-radius: 4px; padding: 2px 7px; font-weight: 600; font-size: 11px; }
.mob-ag-pri-crit { background: #fde8e8; color: #c62828; }
.mob-ag-pri-high { background: #fff1e0; color: #e65100; }
.mob-ag-pri-norm { background: #eef0f5; color: #5a6072; }
.mob-ag-pri-low { background: #e8f5e9; color: #2e7d32; }
.mob-ag-pts { background: #eef0f5; border-radius: 4px; padding: 2px 7px; font-weight: 600; font-size: 11px; }
.mob-ag-blocked { color: #e65100; font-weight: 600; }
.mob-ag-who { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; }
.mob-ag-avatar { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.mob-ag-initials {
	width: 20px; height: 20px; border-radius: 50%; background: var(--mob-brand-bg, #3041b0); color: var(--mob-brand-fg, #fff);
	font-size: 9px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.mob-ag-sheet-wrap { position: fixed; inset: 0; z-index: 1200; }
.mob-ag-sheet-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.35); }
.mob-ag-sheet {
	position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 16px 16px 0 0;
	padding: 14px 14px calc(14px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 6px;
	max-height: 80vh; overflow-y: auto; box-shadow: 0 -8px 30px rgba(0,0,0,.18);
}
.mob-ag-sheet-title { font-size: 15px; font-weight: 600; color: #1a1a2e; }
.mob-ag-sheet-sub { font-size: 13px; color: #8a8f9c; margin-bottom: 6px; }
.mob-ag-sheet-opt {
	display: flex; align-items: center; gap: 8px; text-align: left; font: inherit; font-size: 15px;
	border: 1px solid #e4e6ec; background: #fff; color: #1a1a2e; border-radius: 10px; padding: 12px;
}
.mob-ag-sheet-opt.current { color: #8a8f9c; background: #f6f7fa; }
.mob-ag-sheet-now, .mob-ag-sheet-close { margin-left: auto; font-size: 11px; font-weight: 600; color: #8a8f9c; text-transform: uppercase; letter-spacing: .04em; }
.mob-ag-sheet-close { color: #2e7d32; }
.mob-ag-sheet-cancel {
	margin-top: 6px; font: inherit; font-size: 15px; font-weight: 600; border: 0; border-radius: 10px;
	padding: 12px; background: #eef0f5; color: #5a6072;
}

/* ---- Update available banner ---- */
.mob-update-banner {
	display: flex;
	align-items: center;
	gap: var(--df-space-3);
	background: var(--df-grey-900);
	color: var(--df-surface);
	padding: var(--df-space-3) var(--df-space-4);
	padding-left: calc(var(--df-space-4) + env(safe-area-inset-left));
	padding-right: calc(var(--df-space-4) + env(safe-area-inset-right));
	font-size: var(--df-font-size-md);
	position: relative;
	z-index: 99;
}

.mob-update-reload {
	flex-shrink: 0;
	min-height: 44px;
	min-width: 44px;
	border: none;
	border-radius: var(--df-radius);
	background: var(--mob-brand-bg, var(--df-accent));
	color: var(--mob-brand-fg, var(--df-surface));
	font: inherit;
	font-size: var(--df-font-size-md);
	font-weight: 600;
	padding: var(--df-space-2) var(--df-space-4);
	cursor: pointer;
}

.mob-update-reload:active {
	opacity: 0.85;
}

/* ---- Drawer: Install app ---- */
.mob-install-item {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	min-height: 44px;
	box-sizing: border-box;
	padding: var(--df-space-3) var(--df-space-2);
	background: none;
	border: none;
	border-radius: var(--df-radius);
	font: inherit;
	font-size: var(--df-font-size-lg);
	color: var(--mob-brand-bg, var(--df-accent));
	cursor: pointer;
}

.mob-install-item i {
	width: 20px;
	text-align: center;
	font-size: 17px;
}

.mob-install-item:active {
	background: var(--df-grey-100);
}

/* ---- iOS "Add to Home Screen" instruction sheet ---- */
.mob-pwa-sheet-wrap {
	position: fixed;
	inset: 0;
	z-index: 20000;
}

.mob-pwa-sheet-scrim {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
}

.mob-pwa-sheet {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--df-surface);
	border-radius: var(--df-radius-lg) var(--df-radius-lg) 0 0;
	padding: var(--df-space-4) var(--df-space-4) calc(var(--df-space-4) + env(safe-area-inset-bottom));
	text-align: center;
	box-shadow: var(--df-shadow);
}

.mob-pwa-sheet-illus {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--df-space-3);
	font-size: 28px;
	color: var(--mob-brand-bg, var(--df-accent));
	margin-bottom: var(--df-space-3);
}

.mob-pwa-sheet-illus .fa-chevron-right {
	font-size: 14px;
	color: var(--df-grey-400);
}

.mob-pwa-sheet-title {
	font-size: var(--df-font-size-xl);
	font-weight: 700;
	color: var(--df-text);
	margin-bottom: var(--df-space-2);
}

.mob-pwa-sheet-text {
	font-size: var(--df-font-size-md);
	color: var(--df-text-muted);
	margin-bottom: var(--df-space-4);
}

.mob-pwa-sheet-close {
	width: 100%;
	box-sizing: border-box;
	min-height: 44px;
	border: none;
	border-radius: var(--df-radius);
	background: var(--mob-brand-bg, var(--df-accent));
	color: var(--mob-brand-fg, var(--df-surface));
	font: inherit;
	font-size: var(--df-font-size-lg);
	font-weight: 600;
	cursor: pointer;
}

.mob-pwa-sheet-close:active {
	opacity: 0.85;
}

/* ---- Offline start screen ---- */
.mob-offline {
	text-align: center;
	padding: 60px var(--df-space-4);
}

.mob-offline i {
	display: block;
	font-size: 40px;
	margin-bottom: var(--df-space-3);
	color: var(--df-grey-400);
}

.mob-offline p {
	margin: 0 0 var(--df-space-4);
	font-size: var(--df-font-size-lg);
	color: var(--df-text-muted);
}

.mob-offline-retry {
	min-height: 44px;
	min-width: 44px;
	border: none;
	border-radius: var(--df-radius);
	background: var(--mob-brand-bg, var(--df-accent));
	color: var(--mob-brand-fg, var(--df-surface));
	font: inherit;
	font-size: var(--df-font-size-lg);
	font-weight: 600;
	padding: var(--df-space-2) var(--df-space-4);
	cursor: pointer;
}

.mob-offline-retry:active {
	opacity: 0.85;
}

/* ---- Tower jobs screen ---- */
.mobTower { display: flex; flex-direction: column; gap: 10px; }
.mobTower .mob-empty { padding: 40px 24px; }
.mobTowerHead { display: flex; align-items: center; gap: 4px; min-height: 48px; }
.mobTowerBack { width: 48px; height: 48px; border: 0; background: none; font-size: 18px; color: var(--mob-brand-bg, #3041b0); }
.mobTowerHeadLabel { font-size: 17px; font-weight: 600; color: #1a1a2e; }
.mobTowerOffline { background: #fff4e5; border: 1px solid #f0c27b; color: #7a4b00; border-radius: 10px; padding: 12px 14px; font-size: 14px; }
.mobTowerOffline[hidden] { display: none; }
.mobTowerJob, .mobTowerTarget { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 64px; text-align: left; font: inherit; cursor: pointer; }
.mobTowerJobMain { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.mobTowerJobRow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-top: 8px; font-size: 13px; color: #5a6072; }
.mobTowerChip { padding: 3px 10px; border-radius: 12px; background: #eef0f4; font-size: 12px; font-weight: 600; color: #5a6072; }
.mobTowerChip--confirmed { background: #e3f4e8; color: #1b6e3a; }
.mobTowerChip--requested { background: #fff4e5; color: #7a4b00; }
.mobTowerChip--refused { background: #fde8e8; color: #a12020; }
.mobTowerActions { display: flex; flex-direction: column; gap: 8px; }
.mobTowerBtn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 16px; border: 1.5px solid var(--mob-brand-bg, #3041b0); border-radius: 10px; background: #fff; color: var(--mob-brand-bg, #3041b0); font: inherit; font-size: 16px; font-weight: 600; text-decoration: none; cursor: pointer; }
.mobTowerBtn--primary { background: var(--mob-brand-bg, #3041b0); color: var(--mob-brand-fg, #ffffff); }
.mobTowerBtn:disabled { opacity: 0.45; cursor: not-allowed; }
.mobTowerH { margin: 8px 2px 0; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #8a8f9c; }
.mobTowerDrawing { background: #fff; border: 1px solid #e4e6ec; border-radius: 10px; padding: 6px; overflow: auto; touch-action: pan-x pan-y pinch-zoom; }
.mobTowerDrawing svg { display: block; width: 100%; height: auto; }
.mobTowerDrawing .mob-loading { padding: 30px 20px; }
.mobTowerDim { opacity: 0.3; }
.mobTowerFaceRing { stroke: var(--mob-brand-bg, #3041b0); }
.mobTowerNote { margin: 4px 2px; font-size: 13px; color: #5a6072; }
.mobTowerFace .mobTowerList { margin: 8px 0 0; padding-left: 18px; font-size: 14px; color: #1a1a2e; }
.mobTowerPd { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; padding: 10px 12px; border-radius: 8px; font-size: 14px; font-weight: 600; }
.mobTowerPd--ok { background: #e3f4e8; color: #1b6e3a; }
.mobTowerPd--no { background: #fde8e8; color: #a12020; }
.mobTowerPdNote { margin: 8px 0 0; font-size: 13px; color: #5a6072; }
.mobTowerDl { margin: 0; font-size: 14px; }
.mobTowerDl dt { margin-top: 8px; font-size: 12px; font-weight: 600; color: #8a8f9c; }
.mobTowerDl dt:first-child { margin-top: 0; }
.mobTowerDl dd { margin: 2px 0 0; color: #1a1a2e; white-space: pre-wrap; }
.mobTowerPreview { width: 100%; max-height: 40vh; object-fit: contain; border-radius: 10px; background: #e4e6ec; }
.mobTowerChoices { display: flex; flex-wrap: wrap; gap: 8px; }
.mobTowerChoices--col { flex-direction: column; flex-wrap: nowrap; }
.mobTowerChoice { flex: 1 1 40%; min-height: 52px; padding: 8px 12px; border: 1.5px solid #c2c6d2; border-radius: 10px; background: #fff; color: #1a1a2e; font: inherit; font-size: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; }
.mobTowerChoice small { font-size: 11px; color: #8a8f9c; }
.mobTowerChoice.is-on { border-color: var(--mob-brand-bg, #3041b0); background: var(--mob-brand-bg, #3041b0); color: var(--mob-brand-fg, #ffffff); }
.mobTowerChoice.is-on small { color: inherit; }
.mobTowerLabel { margin-top: 6px; font-size: 14px; font-weight: 600; color: #1a1a2e; }
.mobTowerInput { box-sizing: border-box; width: 100%; min-height: 48px; padding: 10px 12px; border: 1.5px solid #c2c6d2; border-radius: 10px; background: #fff; font: inherit; font-size: 16px; }
.mobTowerPhotoRow { display: flex; align-items: center; gap: 10px; }
.mobTowerPhotoRow .mobTowerBtn { flex: 0 0 auto; }

/* ---- Tower inspections screen ---- */
.mobTowerInspOffline { background: #fff4e5; border: 1px solid #f0c27b; color: #7a4b00; border-radius: 10px; padding: 12px 14px; font-size: 14px; }
.mobTowerInspOffline[hidden] { display: none; }
.mobTowerInspProgress { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 600; color: #1a1a2e; }
.mobTowerInspSaved { font-size: 13px; font-weight: 600; color: #1b6e3a; }
.mobTowerInspSaved.is-bad { color: #a12020; }
.mobTowerInspBar { height: 6px; border-radius: 3px; background: #e4e6ec; overflow: hidden; }
.mobTowerInspBar span { display: block; height: 100%; background: var(--mob-brand-bg, #3041b0); }
.mobTowerInspQ { display: flex; flex-direction: column; gap: 12px; }
.mobTowerInspQNo { font-size: 12px; color: #8a8f9c; }
.mobTowerInspReq { color: #a12020; }
.mobTowerInspQText { font-size: 18px; line-height: 1.35; white-space: normal; }
.mobTowerInspYesNo { display: flex; gap: 10px; }
.mobTowerInspAnswer { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 72px; border: 1.5px solid #c2c6d2; border-radius: 12px; background: #fff; color: #1a1a2e; font: inherit; font-size: 20px; font-weight: 600; cursor: pointer; }
.mobTowerInspAnswer:disabled { opacity: 0.45; cursor: not-allowed; }
.mobTowerInspAnswer--yes.is-on { background: #1b6e3a; border-color: #1b6e3a; color: #fff; }
.mobTowerInspAnswer--no.is-on { background: #a12020; border-color: #a12020; color: #fff; }
.mobTowerInspCamera { min-height: 64px; }
.mobTowerInspNav { display: flex; gap: 10px; }
.mobTowerInspNav .mobTowerBtn { flex: 1; }
.mobTowerInspThumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.mobTowerInspThumbs:empty { display: none; }
.mobTowerInspThumb { position: relative; width: 84px; height: 84px; }
.mobTowerInspThumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; background: #e4e6ec; }
.mobTowerInspThumb button { position: absolute; top: -8px; right: -8px; width: 44px; height: 44px; border: 0; background: none; color: #fff; font-size: 14px; }
.mobTowerInspThumb button i { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #a12020; }
.mobTowerInspMissing { background: #fde8e8; border: 1px solid #f0b4b4; color: #a12020; border-radius: 10px; padding: 12px 14px; font-size: 14px; }
.mobTowerInspMissing ul { margin: 6px 0 0; padding-left: 4px; list-style: none; }
.mobTowerInspLink { min-height: 44px; padding: 0; border: 0; background: none; color: #a12020; font: inherit; text-align: left; text-decoration: underline; cursor: pointer; }
.mobTowerInspDefect { display: flex; flex-direction: column; }
.mobTowerInspConfirm p { margin: 0 0 10px; font-size: 15px; color: #1a1a2e; }
.mobTowerInspResult { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 20px; }
.mobTowerInspResult > i { font-size: 36px; color: #1b6e3a; }
.mobTowerInspResult--pass_with_defects > i { color: #7a4b00; }
.mobTowerInspResult--fail > i { color: #a12020; }
.mobTowerInspResultText { font-size: 16px; font-weight: 600; color: #1a1a2e; }

/* ---- Offline audits: top-bar badge, offline strip, sync sheet ---- */
.mob-topbar-right {
	min-width: 52px;
	height: 52px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: var(--df-space-2);
}

.mob-sync-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--df-space-1);
	min-height: 44px;
	padding: 0 var(--df-space-3);
	border: 1px solid currentColor;
	border-radius: var(--df-radius-lg);
	background: none;
	color: var(--mob-brand-fg, var(--df-surface));
	font: inherit;
	font-size: var(--df-font-size-sm);
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
}

.mob-sync-badge.attention {
	border-width: 2px;
}

.mob-sync-badge:active {
	opacity: 0.7;
}

.mob-offline-strip {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--df-space-2);
	padding: var(--df-space-1) var(--df-space-4);
	background: var(--df-grey-900);
	color: var(--df-surface);
	font-size: var(--df-font-size-sm);
	font-weight: 600;
	flex-shrink: 0;
}

.mob-offline-strip[hidden] {
	display: none;
}

.mob-sync-body {
	display: flex;
	flex-direction: column;
	gap: var(--df-space-3);
}

.mob-sync-item {
	background: var(--df-surface);
	border: 1px solid var(--df-border);
	border-left-width: 4px;
	border-radius: var(--df-radius);
	padding: var(--df-space-3) var(--df-space-4);
	display: flex;
	flex-direction: column;
	gap: var(--df-space-2);
}

.mob-sync-item.pending { border-left-color: var(--df-grey-400); }
.mob-sync-item.failed { border-left-color: var(--df-danger); }
.mob-sync-item.conflict { border-left-color: var(--df-warning); }

.mob-sync-item-head {
	display: flex;
	align-items: center;
	gap: var(--df-space-2);
	min-height: 44px;
}

.mob-sync-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
	background: var(--df-grey-400);
}

.mob-sync-item.failed .mob-sync-dot { background: var(--df-danger); }
.mob-sync-item.conflict .mob-sync-dot { background: var(--df-warning); }

.mob-sync-item-title {
	flex: 1;
	min-width: 0;
	font-size: var(--df-font-size-lg);
	font-weight: 600;
	color: var(--df-text);
	overflow-wrap: anywhere;
}

.mob-sync-state {
	font-size: var(--df-font-size-sm);
	color: var(--df-text-muted);
	flex-shrink: 0;
}

.mob-sync-meta {
	font-size: var(--df-font-size-md);
	color: var(--df-text-muted);
	overflow-wrap: anywhere;
}

.mob-sync-conflict-head,
.mob-sync-conflict-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--df-space-2);
	font-size: var(--df-font-size-md);
}

.mob-sync-conflict-head {
	font-size: var(--df-font-size-sm);
	font-weight: 600;
	color: var(--df-text-muted);
}

.mob-sync-conflict-row {
	padding: var(--df-space-2) 0;
	border-top: 1px solid var(--df-border);
}

.mob-sync-field {
	font-weight: 600;
	color: var(--df-text);
}

.mob-sync-val {
	color: var(--df-text);
	overflow-wrap: anywhere;
}

.mob-sync-actions {
	display: flex;
	gap: var(--df-space-2);
}

.mob-sync-btn {
	flex: 1;
	min-height: 44px;
	border: 1px solid var(--df-border);
	border-radius: var(--df-radius);
	background: var(--df-surface);
	color: var(--df-text);
	font: inherit;
	font-size: var(--df-font-size-md);
	font-weight: 600;
	cursor: pointer;
}

.mob-sync-btn.primary {
	background: var(--mob-brand-bg, var(--df-accent));
	border-color: var(--mob-brand-bg, var(--df-accent));
	color: var(--mob-brand-fg, var(--df-surface));
}

/* Photo thumbnails kept on the phone until they upload. */
.mob-img-cell.waiting {
	outline: 2px dashed var(--df-warning);
	outline-offset: -2px;
}

.mob-img-wait {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: var(--df-space-1);
	background: var(--df-grey-900);
	color: var(--df-surface);
	font-size: var(--df-font-size-xs);
	text-align: center;
}

/* ---- My approvals ---- */
.mob-apv-list { display: flex; flex-direction: column; gap: var(--df-space-3); }
.mob-apv-card {
	display: flex; flex-direction: column; gap: var(--df-space-1); text-align: left; width: 100%; min-height: 44px;
	font: inherit; color: var(--df-text); background: var(--df-surface); border: 1px solid var(--df-border);
	border-radius: var(--df-radius-lg); padding: var(--df-space-3) var(--df-space-4);
}
.mob-apv-card:active { background: var(--df-grey-100); }
.mob-apv-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--df-space-3); }
.mob-apv-title { font-size: var(--df-font-size-lg); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.mob-apv-amount { font-size: var(--df-font-size-md); font-weight: 600; white-space: nowrap; color: var(--df-accent); }
.mob-apv-meta { font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.mob-apv-foot { display: flex; justify-content: space-between; gap: var(--df-space-3); font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.mob-apv-detail {
	background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius-lg);
	padding: var(--df-space-4); margin-bottom: var(--df-space-3);
}
.mob-apv-detail-title { font-size: var(--df-font-size-xl); font-weight: 600; margin-bottom: var(--df-space-3); overflow-wrap: anywhere; }
.mob-apv-fact { display: flex; justify-content: space-between; gap: var(--df-space-3); padding: var(--df-space-2) 0; font-size: var(--df-font-size-md); }
.mob-apv-fact span:first-child { color: var(--df-text-muted); }
.mob-apv-fact span:last-child { text-align: right; overflow-wrap: anywhere; }
.mob-apv-section { font-size: var(--df-font-size-sm); font-weight: 600; color: var(--df-text-muted); text-transform: uppercase; margin-bottom: var(--df-space-2); }
.mob-apv-chain-row { display: flex; align-items: center; gap: var(--df-space-3); min-height: 36px; font-size: var(--df-font-size-md); }
.mob-apv-chain-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.mob-apv-chain-state { font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.mob-apv-chain-none { font-size: var(--df-font-size-md); color: var(--df-text-muted); }
.mob-apv-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; border: 2px solid var(--df-grey-400); background: var(--df-surface); }
.mob-apv-dot-approved { background: var(--df-accent); border-color: var(--df-accent); }
.mob-apv-dot-rejected { background: var(--df-danger); border-color: var(--df-danger); }
.mob-apv-actions {
	display: flex; gap: var(--df-space-3); flex-shrink: 0; background: var(--df-surface); border-top: 1px solid var(--df-border);
	padding: var(--df-space-3) var(--df-space-4) calc(var(--df-space-3) + env(safe-area-inset-bottom));
	padding-left: calc(var(--df-space-4) + env(safe-area-inset-left)); padding-right: calc(var(--df-space-4) + env(safe-area-inset-right));
}
.mob-apv-btn {
	flex: 1; min-height: 44px; font: inherit; font-size: var(--df-font-size-md); font-weight: 600;
	border: 1px solid transparent; border-radius: var(--df-radius); padding: 0 var(--df-space-4);
}
.mob-apv-btn:disabled { opacity: 0.5; }
.mob-apv-btn-approve { background: var(--df-accent); color: var(--df-surface); }
.mob-apv-btn-reject { background: var(--df-surface); color: var(--df-danger); border-color: var(--df-danger); }
.mob-apv-btn-cancel { background: var(--df-grey-100); color: var(--df-text); }
.mob-apv-sheet-wrap { position: fixed; inset: 0; z-index: 20000; }
.mob-apv-sheet-scrim { position: absolute; inset: 0; background: var(--df-grey-900); opacity: 0.4; }
.mob-apv-sheet {
	position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: var(--df-space-2);
	background: var(--df-surface); border-radius: var(--df-radius-lg) var(--df-radius-lg) 0 0; box-shadow: var(--df-shadow);
	padding: var(--df-space-4) var(--df-space-4) calc(var(--df-space-4) + env(safe-area-inset-bottom));
}
.mob-apv-sheet-title { font-size: var(--df-font-size-lg); font-weight: 600; }
.mob-apv-sheet-label { font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.mob-apv-sheet-text {
	font: inherit; font-size: 16px; color: var(--df-text); border: 1px solid var(--df-border);
	border-radius: var(--df-radius); padding: var(--df-space-3); resize: vertical; min-height: 96px;
}
.mob-apv-sheet-btns { display: flex; gap: var(--df-space-3); margin-top: var(--df-space-2); }

/* ---- Notifications screen ---- */
.mob-notif-status {
	display: flex; align-items: center; gap: var(--df-space-3); min-height: 44px;
	padding: var(--df-space-3) var(--df-space-4); border-radius: var(--df-radius); border: 1px solid var(--df-border);
	background: var(--df-grey-50); font-size: var(--df-font-size-md); font-weight: 600; margin-bottom: var(--df-space-4);
}
.mob-notif-status i { font-size: var(--df-font-size-xl); }
.mob-notif-status-on { color: var(--df-success); }
.mob-notif-status-off { color: var(--df-text-muted); }
.mob-notif-status-blocked { color: var(--df-danger); }
.mob-notif-status-unsupported { color: var(--df-text-muted); }
.mob-notif-ios {
	display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--df-space-3);
	padding: var(--df-space-4); border-radius: var(--df-radius); border: 1px solid var(--df-border);
	background: var(--df-grey-50); margin-bottom: var(--df-space-4);
}
.mob-notif-ios i { font-size: var(--df-font-size-2xl); color: var(--mob-brand-bg, var(--df-accent)); }
.mob-notif-ios p { margin: 0; font-size: var(--df-font-size-md); color: var(--df-text-muted); line-height: 1.4; }
.mob-notif-actions { margin-bottom: var(--df-space-4); }
.mob-notif-btn {
	width: 100%; box-sizing: border-box; min-height: 44px; font: inherit; font-size: var(--df-font-size-md); font-weight: 600;
	border-radius: var(--df-radius); border: 1px solid var(--mob-brand-bg, var(--df-accent));
	background: var(--df-surface); color: var(--mob-brand-bg, var(--df-accent));
}
.mob-notif-btn-primary { background: var(--mob-brand-bg, var(--df-accent)); color: var(--mob-brand-fg, var(--df-surface)); }
.mob-notif-section {
	font-size: var(--df-font-size-sm); font-weight: 600; color: var(--df-text-muted); text-transform: uppercase;
	margin: var(--df-space-4) 0 var(--df-space-2);
}
.mob-notif-list { border: 1px solid var(--df-border); border-radius: var(--df-radius); overflow: hidden; }
.mob-notif-row {
	display: flex; align-items: center; justify-content: space-between; gap: var(--df-space-3); min-height: 44px;
	padding: 0 var(--df-space-4); background: var(--df-surface); border-bottom: 1px solid var(--df-grey-100);
}
.mob-notif-row:last-child { border-bottom: none; }
.mob-notif-row-label { font-size: var(--df-font-size-md); color: var(--df-text); }

/* ---- Front door: Requests screen ---- */
.mob-door-list { gap: var(--df-space-3); }
.mob-door-card {
	display: flex; align-items: center; gap: var(--df-space-3); min-height: 44px; cursor: pointer;
}
.mob-door-card:active { background: var(--df-grey-50); }
.mob-door-icon {
	width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--df-radius);
	background: var(--df-grey-100); color: var(--mob-brand-bg, var(--df-accent));
	display: flex; align-items: center; justify-content: center; font-size: 19px;
}
.mob-door-body { flex: 1; min-width: 0; }
.mob-door-new { font-size: var(--df-font-size-sm); font-weight: 600; color: var(--mob-brand-bg, var(--df-accent)); margin-bottom: 2px; }

/* The submit bar is the last child of the scrolling form body, stuck to the bottom of the
   visible area (not the document) — reachable with the on-screen keyboard open, and clear of
   the device's home-indicator safe area. */
.mob-door-form-body { padding-bottom: 12px; }
.mob-door-submitbar {
	position: sticky;
	bottom: 0;
	margin: var(--df-space-4) -12px -12px;
	padding: var(--df-space-3) 12px calc(var(--df-space-3) + env(safe-area-inset-bottom));
	background: var(--df-surface);
	border-top: 1px solid var(--df-border);
}
.mob-door-submit {
	width: 100%;
	box-sizing: border-box;
	min-height: 44px;
	border: none;
	border-radius: var(--df-radius);
	background: var(--mob-brand-bg, var(--df-accent));
	color: var(--mob-brand-fg, var(--df-surface));
	font: inherit;
	font-size: var(--df-font-size-lg);
	font-weight: 600;
	cursor: pointer;
}
.mob-door-submit:active { opacity: 0.85; }
.mob-door-submit:disabled { opacity: 0.5; }

.mob-door-photo-add {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
	min-height: 96px; border: 1.5px dashed var(--df-grey-300); border-radius: var(--df-radius);
	color: var(--df-text-muted); font-size: var(--df-font-size-sm); cursor: pointer;
}
.mob-door-photo-add i { font-size: 22px; color: var(--mob-brand-bg, var(--df-accent)); }
.mob-door-photo-thumb { position: relative; width: 100%; max-width: 220px; }
.mob-door-photo-thumb img {
	display: block; width: 100%; max-height: 220px; object-fit: cover;
	border-radius: var(--df-radius); background: var(--df-grey-100);
}
.mob-door-photo-del {
	position: absolute; top: -8px; right: -8px; width: 28px; height: 28px; border-radius: 50%;
	border: none; background: var(--df-grey-900); color: var(--df-surface); font-size: 13px;
	display: flex; align-items: center; justify-content: center; cursor: pointer;
}

/* ---- Recruitment desk: Vacancies and Today ---- */
.mob-rec-switch { display: flex; gap: 2px; padding: 2px; margin-bottom: var(--df-space-3); background: var(--df-grey-100); border-radius: var(--df-radius); }
.mob-rec-switch button {
	flex: 1; min-height: 44px; font: inherit; font-size: var(--df-font-size-md); font-weight: 600; color: var(--df-text-muted);
	background: transparent; border: 0; border-radius: var(--df-radius);
}
.mob-rec-switch button.active { background: var(--df-surface); color: var(--df-text); box-shadow: var(--df-shadow); }
.mob-rec-list { display: flex; flex-direction: column; gap: var(--df-space-3); }
.mob-rec-card {
	display: flex; flex-direction: column; gap: var(--df-space-1); text-align: left; width: 100%; min-height: 44px;
	font: inherit; color: var(--df-text); background: var(--df-surface); border: 1px solid var(--df-border);
	border-radius: var(--df-radius-lg); padding: var(--df-space-3) var(--df-space-4);
}
.mob-rec-card:active { background: var(--df-grey-100); }
.mob-rec-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--df-space-3); }
.mob-rec-name { font-size: var(--df-font-size-lg); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.mob-rec-count { font-size: var(--df-font-size-lg); font-weight: 600; white-space: nowrap; color: var(--df-accent); }
.mob-rec-count small { font-size: var(--df-font-size-sm); font-weight: 400; color: var(--df-text-muted); }
.mob-rec-meta { font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.mob-rec-sla { display: flex; align-items: center; gap: var(--df-space-2); font-size: var(--df-font-size-sm); }
.mob-rec-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; background: var(--df-grey-400); }
.mob-rec-dot-ok, .mob-rec-dot-met { background: var(--df-success); }
.mob-rec-dot-risk { background: var(--df-warning); }
.mob-rec-dot-late { background: var(--df-danger); }

.mob-rec-vachead { font-size: var(--df-font-size-sm); color: var(--df-text-muted); margin-bottom: var(--df-space-2); }
.mob-rec-chips { display: flex; flex-wrap: wrap; gap: var(--df-space-2); margin-bottom: var(--df-space-3); }
.mob-rec-chip {
	display: inline-flex; align-items: center; gap: var(--df-space-2); max-width: 100%; box-sizing: border-box;
	border: 1px solid var(--df-border); border-radius: var(--df-radius); padding: 6px var(--df-space-3);
	font-size: var(--df-font-size-sm); background: var(--df-surface);
}
.mob-rec-chip i { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--df-grey-400); }
.mob-rec-chip-ok i, .mob-rec-chip-met i { background: var(--df-success); }
.mob-rec-chip-risk i { background: var(--df-warning); }
.mob-rec-chip-late i { background: var(--df-danger); }

.mob-rec-bar { display: flex; gap: 2px; height: 36px; margin-bottom: var(--df-space-2); }
.mob-rec-seg {
	flex-basis: 0; min-width: 28px; min-height: 36px; padding: 0; border: 0; border-radius: var(--df-radius-sm);
	background: var(--df-grey-400); color: var(--df-surface); font: inherit; font-size: var(--df-font-size-sm);
}
.mob-rec-seg-new, .mob-rec-legend i.mob-rec-seg-new { background: var(--df-grey-500); }
.mob-rec-seg-screening, .mob-rec-legend i.mob-rec-seg-screening { background: var(--df-accent-soft); color: var(--df-accent); }
.mob-rec-seg-shortlisted, .mob-rec-legend i.mob-rec-seg-shortlisted { background: var(--df-accent); }
.mob-rec-seg-interviewing, .mob-rec-legend i.mob-rec-seg-interviewing { background: var(--df-warning); }
.mob-rec-seg-offered, .mob-rec-seg-placed, .mob-rec-legend i.mob-rec-seg-offered, .mob-rec-legend i.mob-rec-seg-placed { background: var(--df-success); }
.mob-rec-seg-rejected, .mob-rec-seg-withdrawn, .mob-rec-legend i.mob-rec-seg-rejected, .mob-rec-legend i.mob-rec-seg-withdrawn { background: var(--df-danger); }
.mob-rec-legend { display: flex; flex-wrap: wrap; gap: 0 var(--df-space-3); margin-bottom: var(--df-space-3); }
.mob-rec-legend-item {
	display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; font: inherit;
	font-size: var(--df-font-size-sm); color: var(--df-text-muted); background: none; border: 0;
}
.mob-rec-legend i { width: 10px; height: 10px; border-radius: 2px; background: var(--df-grey-400); }

.mob-rec-group h3 { margin: var(--df-space-3) 0 var(--df-space-2); font-size: var(--df-font-size-sm); font-weight: 600; text-transform: uppercase; color: var(--df-text-muted); }
.mob-rec-group h3 span { font-weight: 400; }
.mob-rec-app {
	display: flex; flex-direction: column; gap: var(--df-space-1); width: 100%; min-height: 44px; margin-bottom: var(--df-space-2);
	text-align: left; font: inherit; color: var(--df-text); background: var(--df-surface); border: 1px solid var(--df-border);
	border-left: 4px solid var(--df-success); border-radius: var(--df-radius); padding: var(--df-space-3);
}
.mob-rec-app:active { background: var(--df-grey-100); }
.mob-rec-tone-warn { border-left-color: var(--df-warning); }
.mob-rec-tone-bad { border-left-color: var(--df-danger); }
.mob-rec-app-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--df-space-3); }
.mob-rec-app-name { font-size: var(--df-font-size-md); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.mob-rec-app-sub { font-size: var(--df-font-size-sm); color: var(--df-text-muted); overflow-wrap: anywhere; }
.mob-rec-age { font-size: var(--df-font-size-sm); color: var(--df-text-muted); text-align: right; }
.mob-rec-age-warn { color: var(--df-warning); }
.mob-rec-age-bad { color: var(--df-danger); font-weight: 600; }
.mob-rec-badges { display: flex; flex-wrap: wrap; gap: var(--df-space-1); }
.mob-rec-b {
	max-width: 100%; padding: 2px var(--df-space-2); font-size: var(--df-font-size-xs); overflow-wrap: anywhere;
	color: var(--df-text); background: var(--df-grey-100); border: 1px solid var(--df-border); border-radius: var(--df-radius-sm);
}
.mob-rec-b-ok { color: var(--df-success); border-color: var(--df-success); background: var(--df-success-soft); }
.mob-rec-b-warn { color: var(--df-warning); border-color: var(--df-warning); background: var(--df-warning-soft); }
.mob-rec-b-bad { color: var(--df-danger); border-color: var(--df-danger); background: var(--df-danger-soft); }
.mob-rec-b-acc { color: var(--df-accent); border-color: var(--df-accent); background: var(--df-accent-soft); }
.mob-rec-guide { margin: var(--df-space-2) 0; font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.mob-rec-guide-over { color: var(--df-danger); }
.mob-rec-tl { list-style: none; margin: 0; padding: 0; }
.mob-rec-tl li { display: flex; gap: var(--df-space-3); padding: var(--df-space-2) 0; font-size: var(--df-font-size-md); overflow-wrap: anywhere; }
.mob-rec-tl-dot { width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; flex-shrink: 0; background: var(--df-accent); }
.mob-rec-tl-t { font-size: var(--df-font-size-sm); color: var(--df-text-muted); }

.mob-rec-sheet-wrap { position: fixed; inset: 0; z-index: 20000; }
.mob-rec-sheet-scrim { position: absolute; inset: 0; background: var(--df-grey-900); opacity: 0.4; }
.mob-rec-sheet {
	position: absolute; left: 0; right: 0; bottom: 0; max-height: 80vh; display: flex; flex-direction: column; gap: var(--df-space-2);
	background: var(--df-surface); border-radius: var(--df-radius-lg) var(--df-radius-lg) 0 0; box-shadow: var(--df-shadow);
	padding: var(--df-space-4) var(--df-space-4) calc(var(--df-space-4) + env(safe-area-inset-bottom));
}
.mob-rec-sheet-title { font-size: var(--df-font-size-lg); font-weight: 600; overflow-wrap: anywhere; }
.mob-rec-sheet-list { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.mob-rec-stage {
	display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; padding: 0 var(--df-space-2);
	font: inherit; font-size: var(--df-font-size-md); color: var(--df-text); text-align: left; background: none; border: 0;
	border-bottom: 1px solid var(--df-border);
}
.mob-rec-stage.current { font-weight: 600; color: var(--df-accent); }

.mob-rec-contact { display: flex; flex-wrap: wrap; gap: var(--df-space-3); margin-top: var(--df-space-3); }
.mob-rec-contact-btn {
	flex: 1 1 96px; display: flex; align-items: center; justify-content: center; gap: var(--df-space-2); min-height: 48px; box-sizing: border-box;
	font: inherit; font-size: var(--df-font-size-lg); font-weight: 600; text-decoration: none; cursor: pointer;
	color: var(--mob-brand-fg, var(--df-surface)); background: var(--mob-brand-bg, var(--df-accent)); border: 0; border-radius: var(--df-radius);
}
button.mob-rec-contact-btn { color: var(--mob-brand-bg, var(--df-accent)); background: var(--df-surface); border: 1.5px solid var(--mob-brand-bg, var(--df-accent)); }

.mob-rec-int { display: flex; align-items: center; gap: var(--df-space-3); margin-bottom: var(--df-space-2); padding: var(--df-space-3); background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius); }
.mob-rec-int-time { min-width: 52px; font-size: var(--df-font-size-lg); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--df-accent); }
.mob-rec-int-body { flex: 1; min-width: 0; }
.mob-rec-join {
	display: flex; align-items: center; justify-content: center; min-width: 64px; min-height: 44px; padding: 0 var(--df-space-3);
	font-weight: 600; text-decoration: none; color: var(--df-surface); background: var(--df-accent); border-radius: var(--df-radius);
}

/* Desktop slide-outs (makePopout) on a phone: full width, body scrolls, Cancel and OK bar stays reachable. */
.mob-rec-acts { flex-direction: column; }
.mob-rec-actrow { display: flex; flex-wrap: wrap; gap: var(--df-space-3); }
.mob-rec-actrow .mob-apv-btn { flex: 1 1 40%; }
body.df-mobile .createdSlider .dfPopoutPanel { width: 100vw !important; max-width: 100vw !important; min-width: 0 !important; }
body.df-mobile .createdSlider .dfPopoutFunctionForm { overflow-y: auto; -webkit-overflow-scrolling: touch; }
body.df-mobile .createdSlider .dfPopoutPanel [data-cell-id="functionFormAction"] {
	position: sticky; bottom: 0; background: var(--df-surface); border-top: 1px solid var(--df-border);
	padding-bottom: env(safe-area-inset-bottom);
}

/* ---- Fibre work (mobile_fibre_orders.js) ---- */
.mobFibre { padding: 12px; }
.mobFibreNote { font-size: 13px; color: #6b7080; margin: 0 0 10px; display: flex; align-items: center; gap: 6px; }
.mobFibreGroup { margin-bottom: 14px; }
.mobFibreGroupTitle { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #4a4f5e; margin: 0 0 6px; }
.mobFibreGroupTitle span { font-weight: 500; color: #8a8f9c; }
.mobFibreCard {
	display: flex; flex-direction: column; gap: 4px; width: 100%; min-height: 44px; box-sizing: border-box;
	margin: 0 0 8px; padding: 12px; text-align: left; font: inherit; color: inherit;
	background: #ffffff; border: 1px solid #e1e3ea; border-radius: 10px; cursor: pointer;
}
.mobFibreCard:active { background: #f1f2f5; }
.mobFibreCardTop { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.mobFibreCardName { font-size: 15px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.mobFibreCardLine { font-size: 13px; color: #4a4f5e; overflow-wrap: anywhere; }
.mobFibreCardLine i { width: 14px; color: #8a8f9c; }
.mobFibreDist { font-weight: 600; color: var(--mob-brand-bg, #3041b0); margin-left: 4px; }
.mobFibreBadge {
	flex-shrink: 0; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px;
	background: #ffffff; border: 1px solid #8a8f9c; color: #4a4f5e; white-space: nowrap;
}
.mobFibreBadge-prog { border-color: var(--mob-brand-bg, #3041b0); color: var(--mob-brand-bg, #3041b0); }
.mobFibreBadge-blocked { border-color: #c0392b; color: #c0392b; }
.mobFibreBadge-done { border-color: #1a8a44; color: #1a8a44; }
.mobFibreBadge-sched { border-color: #b9770e; color: #b9770e; }
.mobFibreSheetHead { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.mobFibreRef { font-size: 13px; color: #6b7080; }
.mobFibrePanel { background: #ffffff; border: 1px solid #e1e3ea; border-radius: 10px; padding: 12px; margin-bottom: 10px; }
.mobFibrePanelTitle { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7080; margin-bottom: 6px; }
.mobFibreRow { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 14px; }
.mobFibreRowLabel { color: #6b7080; }
.mobFibreRowValue { text-align: right; overflow-wrap: anywhere; }
.mobFibrePlace { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.mobFibreHint { font-size: 13px; color: #6b7080; margin: 0; }
.mobFibreNotes { font-size: 14px; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.mobFibreCheck { font-size: 14px; padding: 4px 0; }
.mobFibreLine { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid #eceef3; font-size: 14px; }
.mobFibreLine:first-of-type { border-top: 0; }
.mobFibreLineText { min-width: 0; overflow-wrap: anywhere; }
.mobFibreLineStatus { flex-shrink: 0; font-size: 12px; color: #6b7080; }
.mobFibreLineStatus::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; border: 2px solid #8a8f9c; box-sizing: border-box; }
.mobFibreLine-done::before { background: #1a8a44; border-color: #1a8a44; }
.mobFibreLine-redlined::before { border-color: #c0392b; }
.mobFibreLine-skipped::before { border-color: #b9770e; }
.mobFibreBtn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px;
	box-sizing: border-box; font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer;
	color: var(--mob-brand-bg, #3041b0); background: #ffffff; border: 1px solid var(--mob-brand-bg, #3041b0); border-radius: 10px;
}
.mobFibreBtn-primary { background: var(--mob-brand-bg, #3041b0); color: var(--mob-brand-fg, #ffffff); }
.mobFibreTools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.mobFibreActions { display: flex; gap: 8px; padding-bottom: env(safe-area-inset-bottom); }
.mobFibreActions .mobFibreBtn { flex: 1; }

/* Splice plan (FM-19, PRODREQ-0000134): tray by tray, fibre colours as data, not theme. */
.mobFibreSplice { padding: var(--df-space-3); }
.mobFibreSpliceHead { margin-bottom: var(--df-space-3); }
.mobFibreSpliceName { font-size: var(--df-font-size-lg); font-weight: 600; color: var(--df-text); }
.mobFibreSpliceHeadLine { font-size: var(--df-font-size); color: var(--df-text-muted); margin-top: 2px; }
.mobFibreSpliceSummary { font-weight: 600; color: var(--mob-brand-bg, var(--df-accent)); }
.mobFibreSpliceTrays { display: flex; gap: var(--df-space-2); overflow-x: auto; padding-bottom: var(--df-space-2); margin-bottom: var(--df-space-2); -webkit-overflow-scrolling: touch; }
.mobFibreSpliceTray {
	flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 44px; padding: 6px 14px;
	font: inherit; font-size: var(--df-font-size); font-weight: 600; color: var(--df-text); white-space: nowrap;
	background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius); cursor: pointer;
}
.mobFibreSpliceTray.is-active { background: var(--mob-brand-bg, var(--df-accent)); border-color: var(--mob-brand-bg, var(--df-accent)); color: var(--mob-brand-fg, var(--df-surface)); }
.mobFibreSpliceTrayCount { font-size: var(--df-font-size-xs); font-weight: 500; opacity: 0.85; }
.mobFibreSpliceRows { display: flex; flex-direction: column; }
.mobFibreSpliceRow {
	display: grid; grid-template-columns: 22px 1fr 18px 1fr 14px; align-items: center; gap: var(--df-space-2);
	min-height: 44px; padding: var(--df-space-2) 0; border-top: 1px solid var(--df-border);
}
.mobFibreSpliceRow:first-child { border-top: 0; }
.mobFibreSpliceSlot { font-size: var(--df-font-size-sm); font-weight: 600; color: var(--df-text-muted); text-align: center; }
.mobFibreSpliceSide { display: flex; align-items: center; gap: var(--df-space-2); min-width: 0; }
.mobFibreSpliceSideText { font-size: var(--df-font-size); color: var(--df-text); min-width: 0; overflow-wrap: anywhere; }
.mobFibreSpliceDot { flex-shrink: 0; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--df-border); }
.mobFibreSpliceJoin { display: flex; justify-content: center; color: var(--df-text-muted); font-size: var(--df-font-size-sm); }
.mobFibreSpliceStatus { grid-column: 1 / -1; justify-self: start; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--mob-brand-bg, var(--df-accent)); box-sizing: border-box; }
.mobFibreSpliceStatus-done { background: var(--mob-brand-bg, var(--df-accent)); }
.mobFibreSpliceLossCell { grid-column: 1 / -1; }
.mobFibreSpliceLoss { font-size: var(--df-font-size-sm); color: var(--df-text); }
.mobFibreSpliceLoss-plan { color: var(--df-text-muted); }
.mobFibreSpliceLoss-over { color: var(--df-danger); font-weight: 600; }
.mobFibreSpliceOver { display: block; font-size: var(--df-font-size-xs); font-weight: 600; color: var(--df-danger); }

/* Splice plan: record and add splices (bottom sheet, large buttons, greyed strands). */
.mobFibreSpliceRow { cursor: pointer; }
.mobFibreSpliceRow:focus-visible { outline: 2px solid var(--mob-brand-bg, var(--df-accent)); outline-offset: -2px; }
.mobFibreSplicePending { display: block; font-size: var(--df-font-size-xs); font-weight: 600; color: var(--df-text-muted); }
.mobFibreSpliceAdd {
	display: flex; align-items: center; justify-content: center; gap: var(--df-space-2); width: 100%; min-height: 48px; margin-top: var(--df-space-3);
	font: inherit; font-weight: 600; color: var(--mob-brand-fg, var(--df-surface)); background: var(--mob-brand-bg, var(--df-accent));
	border: 0; border-radius: var(--df-radius); cursor: pointer;
}
.mobFibreSpliceOverlay {
	position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 5; display: flex; align-items: flex-end;
	background: color-mix(in srgb, var(--df-text) 45%, transparent);
}
.mobFibreSpliceBottom {
	width: 100%; max-height: 90%; display: flex; flex-direction: column; box-sizing: border-box;
	padding-bottom: env(safe-area-inset-bottom); background: var(--df-surface);
	border-radius: var(--df-radius-lg) var(--df-radius-lg) 0 0;
}
.mobFibreSpliceBottomHead { display: flex; align-items: center; justify-content: space-between; padding: var(--df-space-3); border-bottom: 1px solid var(--df-border); }
.mobFibreSpliceBottomTitle { font-size: var(--df-font-size-lg); font-weight: 600; color: var(--df-text); }
.mobFibreSpliceClose { min-width: 44px; min-height: 44px; font: inherit; color: var(--df-text); background: transparent; border: 0; cursor: pointer; }
.mobFibreSpliceBottomBody { padding: var(--df-space-3); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.mobFibreSpliceSheetSide { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--df-space-3); }
.mobFibreSpliceSheetLabel { font-size: var(--df-font-size-xs); font-weight: 600; color: var(--df-text-muted); }
.mobFibreSpliceField { display: flex; flex-direction: column; gap: var(--df-space-1); margin-bottom: var(--df-space-3); font-size: var(--df-font-size-sm); font-weight: 600; color: var(--df-text-muted); }
.mobFibreSpliceField input {
	box-sizing: border-box; width: 100%; min-height: 48px; padding: 0 var(--df-space-3); font: inherit; font-size: 16px; color: var(--df-text);
	background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius);
}
.mobFibreSpliceTwo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--df-space-3); }
.mobFibreSpliceMethods { display: grid; grid-template-columns: 1fr 1fr; gap: var(--df-space-2); }
.mobFibreSpliceMethod, .mobFibreSpliceBack {
	min-height: 52px; font: inherit; font-weight: 600; color: var(--df-text); background: var(--df-surface);
	border: 1px solid var(--df-border); border-radius: var(--df-radius); cursor: pointer;
}
.mobFibreSpliceMethod.is-active { color: var(--mob-brand-fg, var(--df-surface)); background: var(--mob-brand-bg, var(--df-accent)); border-color: var(--mob-brand-bg, var(--df-accent)); }
.mobFibreSpliceError { margin-bottom: var(--df-space-3); font-size: var(--df-font-size-sm); font-weight: 600; color: var(--df-danger); }
.mobFibreSpliceSave {
	width: 100%; min-height: 52px; font: inherit; font-weight: 600; color: var(--mob-brand-fg, var(--df-surface));
	background: var(--mob-brand-bg, var(--df-accent)); border: 0; border-radius: var(--df-radius); cursor: pointer;
}
.mobFibreSpliceStep { margin: 0 0 var(--df-space-3); font-weight: 600; color: var(--df-text); }
.mobFibreSpliceList { display: flex; flex-direction: column; gap: var(--df-space-2); }
.mobFibreSpliceChoice {
	display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 52px; padding: var(--df-space-2) var(--df-space-3);
	font: inherit; font-weight: 600; color: var(--df-text); text-align: left; background: var(--df-surface);
	border: 1px solid var(--df-border); border-radius: var(--df-radius); cursor: pointer;
}
.mobFibreSpliceChoiceNote { font-size: var(--df-font-size-xs); font-weight: 500; color: var(--df-text-muted); }
.mobFibreSpliceFibres { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: var(--df-space-2); margin-bottom: var(--df-space-3); }
.mobFibreSpliceFibre {
	display: flex; align-items: center; justify-content: center; gap: var(--df-space-2); min-height: 48px; padding: 0 var(--df-space-2);
	font: inherit; font-weight: 600; color: var(--df-text); background: var(--df-surface);
	border: 1px solid var(--df-border); border-radius: var(--df-radius); cursor: pointer;
}
.mobFibreSpliceFibre.is-spliced, .mobFibreSpliceFibre:disabled { opacity: 0.4; cursor: not-allowed; text-decoration: line-through; }
.mobFibreSpliceBack { width: 100%; }

/* OTDR test (scripts/mobile/mobile_fibre_otdr.js) */
.mobFibreOtdr { padding: var(--df-space-3); }
.mobFibreOtdrStep { margin: var(--df-space-3) 0 var(--df-space-2); font-size: var(--df-font-size-sm); font-weight: 600; color: var(--df-text-muted); }
.mobFibreOtdrStep:first-child { margin-top: 0; }
.mobFibreOtdrList { display: flex; flex-direction: column; gap: var(--df-space-2); }
.mobFibreOtdrChoice, .mobFibreOtdrFibre, .mobFibreOtdrDir {
	min-height: 48px; padding: 0 var(--df-space-3); font: inherit; font-weight: 600; color: var(--df-text); text-align: left;
	background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius); cursor: pointer;
}
.mobFibreOtdrChoice.is-active, .mobFibreOtdrFibre.is-active, .mobFibreOtdrDir.is-active {
	color: var(--mob-brand-fg, var(--df-surface)); background: var(--mob-brand-bg, var(--df-accent)); border-color: var(--mob-brand-bg, var(--df-accent));
}
.mobFibreOtdrFibres { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: var(--df-space-2); }
.mobFibreOtdrFibre { display: flex; align-items: center; justify-content: center; gap: var(--df-space-2); padding: 0 var(--df-space-2); }
.mobFibreOtdrDot { flex-shrink: 0; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--df-border); }
.mobFibreOtdrDirs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--df-space-2); }
.mobFibreOtdrDir { text-align: center; }
.mobFibreOtdrPick {
	display: flex; align-items: center; justify-content: center; gap: var(--df-space-2); min-height: 52px; margin: var(--df-space-3) 0;
	font-weight: 600; color: var(--mob-brand-bg, var(--df-accent)); background: var(--df-surface);
	border: 1px dashed var(--mob-brand-bg, var(--df-accent)); border-radius: var(--df-radius); cursor: pointer;
}
.mobFibreOtdrCard {
	display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--df-space-2); padding: var(--df-space-3);
	background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius);
}
.mobFibreOtdrCard-bad { border-color: var(--df-danger); }
.mobFibreOtdrCardName { font-weight: 600; color: var(--df-text); overflow-wrap: anywhere; }
.mobFibreOtdrCardLine { font-size: var(--df-font-size); color: var(--df-text); }
.mobFibreOtdrError { font-size: var(--df-font-size-sm); font-weight: 600; color: var(--df-danger); }
.mobFibreOtdrWaiting { font-size: var(--df-font-size-xs); font-weight: 600; color: var(--df-text-muted); }
.mobFibreOtdrRemove { align-self: flex-start; min-height: 44px; padding: 0; font: inherit; font-size: var(--df-font-size-sm); color: var(--df-text-muted); background: transparent; border: 0; cursor: pointer; }
.mobFibreOtdrSave {
	width: 100%; min-height: 52px; margin-top: var(--df-space-2); font: inherit; font-weight: 600; color: var(--mob-brand-fg, var(--df-surface));
	background: var(--mob-brand-bg, var(--df-accent)); border: 0; border-radius: var(--df-radius); cursor: pointer;
}
.mobFibreOtdrSave:disabled { opacity: 0.5; cursor: not-allowed; }
.mobFibreOtdrNone { margin: 0; font-size: var(--df-font-size-sm); color: var(--df-text-muted); }

/* Photos and redlines (scripts/mobile/mobile_fibre_capture.js) */
.mobFibreCapture { padding: var(--df-space-3); }
.mobFibreCaptureStep { margin: var(--df-space-3) 0 var(--df-space-2); font-size: var(--df-font-size-sm); font-weight: 600; color: var(--df-text-muted); }
.mobFibreCaptureStep:first-child { margin-top: 0; }
.mobFibreCaptureTypes, .mobFibreCaptureList { display: flex; flex-wrap: wrap; gap: var(--df-space-2); }
.mobFibreCaptureList { flex-direction: column; flex-wrap: nowrap; }
.mobFibreCaptureType, .mobFibreCaptureChoice {
	display: flex; align-items: center; gap: var(--df-space-2); min-height: 48px; padding: 0 var(--df-space-3);
	font: inherit; font-weight: 600; text-align: left; color: var(--df-text); background: var(--df-surface);
	border: 1px solid var(--df-border); border-radius: var(--df-radius); cursor: pointer;
}
.mobFibreCaptureType.is-active, .mobFibreCaptureChoice.is-active { color: var(--mob-brand-fg, var(--df-surface)); background: var(--mob-brand-bg, var(--df-accent)); border-color: var(--mob-brand-bg, var(--df-accent)); }
.mobFibreCaptureKind { font-size: var(--df-font-size-xs); font-weight: 500; opacity: 0.8; }
.mobFibreCaptureLabel { display: flex; flex-direction: column; gap: var(--df-space-2); margin-top: var(--df-space-3); font-size: var(--df-font-size-sm); font-weight: 600; color: var(--df-text-muted); }
.mobFibreCaptureInput {
	width: 100%; min-height: 48px; padding: var(--df-space-2) var(--df-space-3); box-sizing: border-box; font: inherit; color: var(--df-text);
	background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius);
}
.mobFibreCapturePosition { display: flex; align-items: center; gap: var(--df-space-2); margin: var(--df-space-3) 0; font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.mobFibreCaptureSwitch { display: flex; align-items: center; gap: var(--df-space-3); min-height: 48px; margin-top: var(--df-space-3); font-weight: 600; color: var(--df-text); }
.mobFibreCaptureSwitch input { width: 24px; height: 24px; flex: none; }
.mobFibreCaptureTake {
	display: flex; align-items: center; justify-content: center; gap: var(--df-space-2); min-height: 52px; margin: var(--df-space-3) 0;
	font-weight: 600; color: var(--mob-brand-bg, var(--df-accent)); background: var(--df-surface);
	border: 1px dashed var(--mob-brand-bg, var(--df-accent)); border-radius: var(--df-radius); cursor: pointer;
}
.mobFibreCaptureGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--df-space-2); }
.mobFibreCaptureThumb { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius); }
.mobFibreCaptureThumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mobFibreCaptureWaiting { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px var(--df-space-2); font-size: var(--df-font-size-xs); font-weight: 600; text-align: center; color: var(--df-text); background: var(--df-surface); }
.mobFibreCaptureRemove {
	position: absolute; top: 0; right: 0; width: 44px; height: 44px; font: inherit; color: var(--df-text);
	background: transparent; border: 0; cursor: pointer;
}
.mobFibreCaptureNone { margin: 0; font-size: var(--df-font-size-sm); color: var(--df-text-muted); }
.mobFibreCaptureSend {
	width: 100%; min-height: 52px; margin-top: var(--df-space-3); font: inherit; font-weight: 600; color: var(--mob-brand-fg, var(--df-surface));
	background: var(--mob-brand-bg, var(--df-accent)); border: 0; border-radius: var(--df-radius); cursor: pointer;
}
.mobFibreCaptureSend:disabled { opacity: 0.5; cursor: not-allowed; }