/* ==========================================================================
 * TrackMyTrucks — CSS
 * Mobile-first, responsive, 3-portal-aware.
 * Single stylesheet for desktop super/admin shells + driver phone shell.
 * ========================================================================== */

:root {
	--tmt-brand:        #0e7c66;
	--tmt-brand-dk:     #0a5a4a;
	--tmt-accent:       #f5b301;
	--tmt-ink:          #1f2937;
	--tmt-ink-2:        #374151;
	--tmt-muted:        #6b7280;
	--tmt-bg:           #f7f8fa;
	--tmt-card:         #ffffff;
	--tmt-line:         #e5e7eb;
	--tmt-ok:           #15803d;
	--tmt-warn:         #b45309;
	--tmt-danger:       #c81e1e;
	--tmt-info:         #1d4ed8;
	--tmt-radius:       10px;
	--tmt-radius-sm:    6px;
	--tmt-shadow:       0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.08);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
	font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: var(--tmt-ink);
	background: var(--tmt-bg);
	-webkit-text-size-adjust: 100%;
}
h1, h2, h3 { color: var(--tmt-ink); margin: 0 0 .8rem; }
h1 { font-size: 1.5rem; font-weight: 700; }
h2 { font-size: 1.2rem; font-weight: 600; }
h3 { font-size: 1rem;   font-weight: 600; }
a { color: var(--tmt-brand); text-decoration: none; }
a:hover { text-decoration: underline; }
code { background: #f1f5f9; padding: .1rem .35rem; border-radius: 4px; font-size: .85em; }

.tmt-muted    { color: var(--tmt-muted); }
.tmt-text-sm  { font-size: .85rem; }

/* ============================== Login ============================== */

.tmt-login-wrap {
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: 1rem;
	background:
		radial-gradient(900px 600px at 80% -10%, rgba(14,124,102,.15), transparent),
		radial-gradient(700px 500px at 0% 110%, rgba(245,179,1,.15), transparent),
		var(--tmt-bg);
}
.tmt-login-card {
	background: var(--tmt-card);
	border: 1px solid var(--tmt-line);
	border-radius: var(--tmt-radius);
	padding: 1.8rem;
	width: min(420px, 100%);
	box-shadow: var(--tmt-shadow);
	display: grid; gap: .9rem;
}
.tmt-login-head { text-align: center; margin-bottom: .5rem; }
.tmt-login-head h1 { font-size: 1.4rem; margin: .3rem 0 .1rem; }
.tmt-login-head p  { color: var(--tmt-muted); margin: 0; font-size: .9rem; }
.tmt-login-mark {
	width: 64px; height: 64px; border-radius: 16px;
	background: linear-gradient(135deg, var(--tmt-brand), var(--tmt-brand-dk));
	color: white; display: grid; place-items: center; font-size: 2rem; margin: 0 auto .5rem;
	box-shadow: 0 6px 20px rgba(14,124,102,.35);
}

/* ============================== Forms ============================== */

label { display: grid; gap: .25rem; font-size: .85rem; color: var(--tmt-ink-2); font-weight: 500; }
input, select, textarea {
	width: 100%;
	padding: .55rem .7rem;
	border: 1px solid var(--tmt-line);
	border-radius: var(--tmt-radius-sm);
	background: white;
	font: inherit; color: var(--tmt-ink);
	min-height: 40px;     /* touch target */
}
textarea { min-height: 80px; resize: vertical; }
input:focus, select:focus, textarea:focus {
	outline: none;
	border-color: var(--tmt-brand);
	box-shadow: 0 0 0 3px rgba(14,124,102,.18);
}

.tmt-form fieldset {
	border: 1px solid var(--tmt-line);
	border-radius: var(--tmt-radius);
	padding: 1rem;
	margin: 0 0 1rem;
	background: var(--tmt-card);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: .8rem;
}
.tmt-form legend { font-weight: 600; padding: 0 .4rem; color: var(--tmt-ink); }
.tmt-form .tmt-form-wide { grid-column: 1 / -1; }
.tmt-form-foot { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }

.tmt-checkboxes { display: flex; flex-wrap: wrap; gap: .5rem; }
.tmt-cb { display: inline-flex; align-items: center; gap: .35rem; font-weight: 400; background: #f1f5f9; padding: .35rem .6rem; border-radius: 6px; cursor: pointer; }
.tmt-cb input { width: auto; min-height: 0; }

/* ============================== Buttons ============================== */

.tmt-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
	padding: .55rem .9rem; min-height: 40px;
	border: 1px solid var(--tmt-line); border-radius: var(--tmt-radius-sm);
	background: white; color: var(--tmt-ink);
	font: inherit; font-weight: 500; cursor: pointer; text-decoration: none;
	transition: background .15s, border-color .15s;
}
.tmt-btn:hover { background: #f8fafc; text-decoration: none; }
.tmt-btn-primary { background: var(--tmt-brand); border-color: var(--tmt-brand); color: white; }
.tmt-btn-primary:hover { background: var(--tmt-brand-dk); border-color: var(--tmt-brand-dk); }
.tmt-btn-ghost   { border-color: transparent; background: transparent; }
.tmt-btn-ghost:hover { background: rgba(255,255,255,.1); }
.tmt-btn-block   { width: 100%; }
.tmt-btn-sm      { min-height: 32px; padding: .3rem .6rem; font-size: .85rem; }
.tmt-btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ============================== Flash ============================== */

.tmt-flash {
	padding: .75rem 1rem;
	border-radius: var(--tmt-radius-sm);
	margin-bottom: 1rem;
	border: 1px solid var(--tmt-line);
	font-weight: 500;
}
.tmt-flash-ok   { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.tmt-flash-warn { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.tmt-flash-err  { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

/* ============================== Shell (super + admin) ============================== */

.tmt-shell {
	display: grid;
	grid-template-columns: 240px 1fr;
	grid-template-rows: 56px 1fr;
	grid-template-areas: "sidebar topbar" "sidebar main";
	min-height: 100vh;
}
.tmt-sidebar {
	grid-area: sidebar;
	background: linear-gradient(180deg, var(--tmt-brand-dk), var(--tmt-brand));
	color: white;
	padding: 1rem .7rem;
	overflow-y: auto;
	position: sticky; top: 0; height: 100vh;
	display: flex; flex-direction: column; gap: .25rem;
}
.tmt-brand {
	display: flex; align-items: center; gap: .6rem;
	color: white; text-decoration: none; padding: .5rem .3rem; border-radius: var(--tmt-radius-sm);
	margin-bottom: .6rem;
}
.tmt-brand-mark { font-size: 1.4rem; }
.tmt-brand-text { line-height: 1.1; font-weight: 600; }
.tmt-brand-text small { display: block; opacity: .75; font-weight: 400; font-size: .75rem; margin-top: .15rem; }

.tmt-nav { display: flex; flex-direction: column; gap: 1px; }
.tmt-nav-group { color: rgba(255,255,255,.55); font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; padding: .9rem .7rem .25rem; }
.tmt-nav a {
	color: rgba(255,255,255,.92);
	padding: .55rem .7rem;
	border-radius: 6px;
	font-size: .9rem;
	text-decoration: none;
	display: flex; gap: .5rem; align-items: center;
}
.tmt-nav a:hover { background: rgba(255,255,255,.1); text-decoration: none; }

.tmt-sidebar-foot { margin-top: auto; opacity: .55; font-size: .7rem; padding: .6rem; }

.tmt-topbar {
	grid-area: topbar;
	background: white; border-bottom: 1px solid var(--tmt-line);
	display: flex; align-items: center; padding: 0 1rem; gap: 1rem;
	position: sticky; top: 0; z-index: 5;
}
.tmt-topbar-title { font-weight: 600; flex: 1; }
.tmt-menu { background: none; border: 0; font-size: 1.4rem; cursor: pointer; display: none; padding: .4rem .6rem; }
.tmt-user { display: flex; gap: .6rem; align-items: center; font-size: .85rem; }
.tmt-user small { color: var(--tmt-muted); }

.tmt-main { grid-area: main; padding: 1.5rem; }

/* ----- Tablet / mobile collapse ----- */
@media (max-width: 900px) {
	.tmt-shell { grid-template-columns: 1fr; grid-template-areas: "topbar" "main"; }
	.tmt-sidebar {
		position: fixed; top: 0; left: 0; height: 100vh; width: 260px;
		transform: translateX(-100%); transition: transform .2s ease; z-index: 30;
	}
	body.tmt-nav-open .tmt-sidebar { transform: translateX(0); box-shadow: 2px 0 20px rgba(0,0,0,.2); }
	.tmt-menu { display: inline-flex; }
	.tmt-main { padding: 1rem; }
}

/* ============================== Driver portal (mobile-first) ============================== */

.tmt-driver-shell {
	max-width: 540px; margin: 0 auto;
	min-height: 100vh;
	background: var(--tmt-bg);
	display: flex; flex-direction: column;
	padding-bottom: 70px;  /* leave room for tab bar */
}
.tmt-driver-topbar {
	background: linear-gradient(135deg, var(--tmt-brand), var(--tmt-brand-dk));
	color: white;
	padding: .8rem 1rem;
	padding-top: max(.8rem, env(safe-area-inset-top));
	display: flex; align-items: center; justify-content: space-between;
	position: sticky; top: 0; z-index: 5;
}
.tmt-driver-topbar .tmt-brand { color: white; padding: 0; }
.tmt-driver-main { padding: 1rem; flex: 1; }

.tmt-driver-greeting { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.tmt-driver-avatar {
	width: 48px; height: 48px; border-radius: 50%;
	background: var(--tmt-brand); color: white;
	display: grid; place-items: center; font-weight: 700; font-size: 1.3rem;
}

.tmt-driver-card {
	background: var(--tmt-card);
	border: 1px solid var(--tmt-line);
	border-radius: var(--tmt-radius);
	padding: 1rem;
	margin-bottom: 1rem;
	box-shadow: var(--tmt-shadow);
}
.tmt-driver-card h2 { margin: .2rem 0; }
.tmt-driver-card-eyebrow { color: var(--tmt-muted); font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; margin-bottom: .3rem; }
.tmt-driver-card-vehicle {
	background: linear-gradient(135deg, #ecfdf5, #f0fdfa);
	border-color: rgba(14,124,102,.25);
}
.tmt-plate {
	display: inline-block;
	background: white; border: 2px dashed var(--tmt-ink);
	padding: .35rem .8rem; border-radius: 6px;
	font-family: "SF Mono", Menlo, Consolas, monospace;
	font-weight: 700; font-size: 1.1rem;
	margin: .4rem 0;
}
.tmt-driver-meta { display: grid; grid-template-columns: max-content 1fr; gap: .3rem .8rem; margin: .5rem 0; }
.tmt-driver-meta dt { color: var(--tmt-muted); font-weight: 500; font-size: .85rem; }
.tmt-driver-meta dd { margin: 0; font-weight: 500; }
.tmt-driver-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .5rem; }
.tmt-driver-actions .tmt-btn { padding: 1rem .5rem; }

.tmt-driver-tabs {
	position: fixed; left: 0; right: 0; bottom: 0;
	max-width: 540px; margin: 0 auto;
	background: white; border-top: 1px solid var(--tmt-line);
	display: grid; grid-template-columns: 1fr 1fr 1fr;
	padding-bottom: env(safe-area-inset-bottom);
	z-index: 10;
}
.tmt-tab {
	display: flex; flex-direction: column; align-items: center; gap: .15rem;
	padding: .55rem .3rem;
	color: var(--tmt-muted); text-decoration: none;
	font-size: .7rem;
}
.tmt-tab:hover { color: var(--tmt-brand); text-decoration: none; }

/* ============================== Cards (dashboard counters) ============================== */

.tmt-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .8rem; margin: 0 0 1.5rem; }
.tmt-card {
	background: var(--tmt-card);
	border: 1px solid var(--tmt-line);
	border-radius: var(--tmt-radius);
	padding: 1rem;
	display: block;
	color: inherit; text-decoration: none;
	box-shadow: var(--tmt-shadow);
}
.tmt-card:hover { text-decoration: none; transform: translateY(-1px); border-color: var(--tmt-brand); }
.tmt-card-num { font-size: 2rem; font-weight: 700; color: var(--tmt-brand); line-height: 1; }
.tmt-card-lbl { color: var(--tmt-muted); font-size: .85rem; margin-top: .35rem; }
.tmt-card-warn .tmt-card-num { color: var(--tmt-warn); }
.tmt-card-ok   .tmt-card-num { color: var(--tmt-ok); }
.tmt-card-danger .tmt-card-num { color: var(--tmt-danger); }

.tmt-section { background: var(--tmt-card); border: 1px solid var(--tmt-line); border-radius: var(--tmt-radius); padding: 1.2rem; margin: 1rem 0; box-shadow: var(--tmt-shadow); }
.tmt-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ============================== Tables ============================== */

.tmt-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--tmt-card); border: 1px solid var(--tmt-line); border-radius: var(--tmt-radius); box-shadow: var(--tmt-shadow); }
.tmt-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .9rem;
	min-width: 600px;
}
.tmt-table th, .tmt-table td { padding: .65rem .8rem; text-align: left; border-bottom: 1px solid var(--tmt-line); white-space: nowrap; }
.tmt-table th { background: #f8fafc; font-weight: 600; font-size: .8rem; color: var(--tmt-muted); text-transform: uppercase; letter-spacing: .04em; }
.tmt-table tr:last-child td { border-bottom: 0; }
.tmt-table td a { color: var(--tmt-brand); }

.tmt-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.tmt-toolbar input[type=search] { min-width: 220px; }

/* ============================== Pills ============================== */

.tmt-pill { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 500; background: #f1f5f9; color: var(--tmt-ink-2); }
.tmt-pill-ok      { background: #dcfce7; color: #166534; }
.tmt-pill-warn    { background: #fef3c7; color: #92400e; }
.tmt-pill-danger  { background: #fee2e2; color: #991b1b; }
.tmt-pill-info    { background: #dbeafe; color: #1e40af; }

.tmt-portal-pill-super  { background: #fce7f3; color: #9d174d; }
.tmt-portal-pill-admin  { background: #dbeafe; color: #1e40af; }
.tmt-portal-pill-driver { background: #dcfce7; color: #166534; }

/* ============================== Inspection checklist (driver) ============================== */

.tmt-inspect-item { padding: .65rem 0; border-bottom: 1px solid var(--tmt-line); display: grid; gap: .4rem; }
.tmt-inspect-item:last-child { border-bottom: 0; }
.tmt-inspect-label { font-weight: 500; }
.tmt-inspect-buttons { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .3rem; }
.tmt-inspect-btn {
	display: flex; align-items: center; justify-content: center;
	padding: .6rem .3rem; min-height: 44px;
	border: 1px solid var(--tmt-line); border-radius: var(--tmt-radius-sm);
	background: white; font-weight: 500; font-size: .85rem;
	cursor: pointer;
}
.tmt-inspect-btn input { width: 1px; height: 1px; opacity: 0; position: absolute; }
.tmt-inspect-btn:has(input:checked) { color: white; border-color: transparent; }
.tmt-inspect-pass:has(input:checked) { background: var(--tmt-ok); }
.tmt-inspect-fail:has(input:checked) { background: var(--tmt-danger); }
.tmt-inspect-na:has(input:checked)   { background: var(--tmt-muted); }
.tmt-inspect-note { font-size: .85rem; }

/* ============================== Photo / document tiles ============================== */

.tmt-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; margin-top: .5rem; }
.tmt-photo-tile {
	display: block; aspect-ratio: 1; overflow: hidden;
	border: 1px solid var(--tmt-line); border-radius: var(--tmt-radius-sm);
	background: #f8fafc;
	text-align: center; text-decoration: none; color: var(--tmt-muted);
	display: flex; align-items: center; justify-content: center; flex-direction: column;
}
.tmt-photo-tile:hover { border-color: var(--tmt-brand); }
.tmt-photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================== Notification bell ============================== */

.tmt-bell {
	position: relative; display: inline-flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; border-radius: 50%; background: #f1f5f9;
	text-decoration: none; font-size: 1.05rem;
}
.tmt-bell:hover { background: #e2e8f0; text-decoration: none; }
.tmt-bell-badge {
	position: absolute; top: -3px; right: -3px;
	min-width: 18px; height: 18px; padding: 0 5px;
	background: var(--tmt-danger); color: white;
	border-radius: 999px; font-size: .65rem; font-weight: 700;
	display: flex; align-items: center; justify-content: center;
	border: 2px solid white;
}

/* notif center cards */
.tmt-notif-row { display: flex; gap: .8rem; padding: .8rem; border-bottom: 1px solid var(--tmt-line); }
.tmt-notif-row:last-child { border-bottom: 0; }
.tmt-notif-row-unread { background: #fffbeb; }
.tmt-notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tmt-brand); margin-top: .4rem; flex: 0 0 auto; }
.tmt-notif-row-read .tmt-notif-dot { background: transparent; }

/* ============================== Status bar chart ============================== */

.tmt-status-bar { display: flex; height: 32px; border-radius: 6px; overflow: hidden; border: 1px solid var(--tmt-line); }
.tmt-status-seg { display: flex; align-items: center; justify-content: center; color: white; font-size: .7rem; font-weight: 600; min-width: 4px; }
.tmt-status-legend { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .6rem; font-size: .85rem; color: var(--tmt-muted); }
.tmt-status-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: .35rem; vertical-align: middle; }

/* =========================================================================
   P12 — PWA hardening + animations + standalone mode
   ========================================================================= */

:root {
	--tmt-anim-fast: 0.18s;
	--tmt-anim-base: 0.32s;
	--tmt-anim-slow: 0.5s;
	--tmt-ease: cubic-bezier(.22,.61,.36,1);
}

/* Safe-area insets on every fixed/sticky element */
.tmt-topbar { padding-top: max(0.5rem, env(safe-area-inset-top)); }
.tmt-driver-tabs { padding-bottom: max(0.5rem, env(safe-area-inset-bottom)); }
.tmt-sidebar { padding-bottom: max(0.5rem, env(safe-area-inset-bottom)); }
@supports (-webkit-touch-callout: none) {
	/* iOS — prevent bottom inset overlap with tab bar */
	.tmt-driver-tabs { min-height: calc(64px + env(safe-area-inset-bottom)); }
}

/* Standalone-mode polish: hide install prompts, smooth scrolling */
@media (display-mode: standalone) {
	.tmt-install-hint { display: none !important; }
	body { overscroll-behavior-y: contain; }
}

/* Touch-friendly minimums on EVERY interactive element */
.tmt-btn, button, input, select, textarea, .tmt-tab, .tmt-sidebar a {
	min-height: 44px;
}
.tmt-btn-sm { min-height: 36px; }

/* No horizontal scroll, ever */
html, body { max-width: 100vw; overflow-x: hidden; }
.tmt-table-wrap { -webkit-overflow-scrolling: touch; }

/* Page fade-in */
.tmt-main, .tmt-driver-card, main { animation: tmt-page-in var(--tmt-anim-base) var(--tmt-ease); }
@keyframes tmt-page-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Cards + form blocks slide up on appearance */
.tmt-card, fieldset, .tmt-empty {
	animation: tmt-card-in var(--tmt-anim-base) var(--tmt-ease) both;
}
@keyframes tmt-card-in {
	from { opacity: 0; transform: translateY(12px) scale(0.99); }
	to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Buttons get a subtle press + hover lift */
.tmt-btn { transition: transform var(--tmt-anim-fast) var(--tmt-ease), box-shadow var(--tmt-anim-fast); }
.tmt-btn:not([disabled]):hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.tmt-btn:not([disabled]):active { transform: translateY(0); box-shadow: 0 1px 3px rgba(0,0,0,0.12); }

/* Sidebar links: smooth highlight + slide-in indicator */
.tmt-sidebar a {
	position: relative;
	transition: background var(--tmt-anim-fast), padding-left var(--tmt-anim-fast);
}
.tmt-sidebar a:hover { padding-left: 1.2rem; }
.tmt-sidebar a:hover::before {
	content: '';
	position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
	background: var(--tmt-color, #0e7c66);
	border-radius: 0 2px 2px 0;
	animation: tmt-slide-in-x 0.2s var(--tmt-ease);
}
@keyframes tmt-slide-in-x { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* Flash messages slide down + auto-dismiss visual */
.tmt-flash {
	animation: tmt-flash-in var(--tmt-anim-base) var(--tmt-ease);
	border-radius: 0.6rem;
	box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
@keyframes tmt-flash-in {
	from { opacity: 0; transform: translateY(-12px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Driver tile-style portal: when on driver-portal, make cards more app-like */
.tmt-driver-card {
	border-radius: 1rem;
	padding: 1.25rem;
	background: #fff;
	box-shadow: 0 2px 12px rgba(0,0,0,0.06);
	transition: transform var(--tmt-anim-fast);
}
.tmt-driver-card:active { transform: scale(0.99); }

/* Big primary buttons on driver portal */
.tmt-btn-block { width: 100%; padding: 1rem; font-size: 1.05rem; border-radius: 0.8rem; }

/* Table cells never push horizontally past viewport */
.tmt-table th, .tmt-table td { white-space: normal; word-break: break-word; }
.tmt-table { table-layout: auto; }

/* Make sure topbar + sidebar never cover content on tiny screens */
@media (max-width: 640px) {
	.tmt-main { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
	.tmt-sidebar { z-index: 100; }
	.tmt-topbar { z-index: 90; }
	.tmt-driver-tabs { z-index: 95; }
	/* Stack form grids */
	.tmt-grid-2 { grid-template-columns: 1fr !important; }
}

/* Better focus indicator (accessibility + visible click target) */
:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--tmt-color, #0e7c66) 60%, transparent);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Spinner for any .tmt-loading element */
.tmt-loading::after {
	content: ''; display: inline-block; width: 1em; height: 1em;
	margin-left: 0.5em; border: 2px solid currentColor; border-right-color: transparent;
	border-radius: 50%; animation: tmt-spin 0.8s linear infinite;
	vertical-align: middle;
}
@keyframes tmt-spin { to { transform: rotate(360deg); } }

/* Privilege matrix: dense readable table */
.tmt-matrix th, .tmt-matrix td { padding: 0.4rem 0.5rem; font-size: 0.85em; }
.tmt-matrix input[type=checkbox] { width: 18px; height: 18px; min-height: auto; cursor: pointer; }

/* =========================================================================
   P15 — Broadcast modal (full-screen acknowledge dialog)
   ========================================================================= */
.tmt-bcast-overlay {
	position: fixed; inset: 0; z-index: 10000;
	background: rgba(0,0,0,0.6);
	display: flex; align-items: center; justify-content: center;
	padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
	animation: tmt-bcast-in 0.25s ease-out;
	backdrop-filter: blur(4px);
}
@keyframes tmt-bcast-in { from { opacity: 0; } to { opacity: 1; } }
.tmt-bcast-modal {
	max-width: 520px; width: 100%;
	background: #fff; border-radius: 1.2rem;
	padding: 2rem 1.5rem 1.5rem;
	box-shadow: 0 20px 60px rgba(0,0,0,0.4);
	text-align: center;
	animation: tmt-bcast-pop 0.35s cubic-bezier(.2,.9,.3,1.15);
	max-height: 90vh; overflow: auto;
}
@keyframes tmt-bcast-pop { from { opacity: 0; transform: scale(0.9) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.tmt-bcast-icon { font-size: 3.5rem; line-height: 1; margin-bottom: 0.4rem; }
.tmt-bcast-modal h2 { margin: 0.4rem 0; font-size: 1.3rem; color: #111; }
.tmt-bcast-body { font-size: 1.02rem; line-height: 1.5; color: #333; margin: 1rem 0; text-align: left; }
.tmt-bcast-meta { font-size: 0.78rem; color: #888; margin-bottom: 1rem; }
.tmt-bcast-ack button { width: 100%; padding: 1rem; font-size: 1.05rem; font-weight: 600; border-radius: 0.6rem; }

/* severity-specific borders */
.tmt-bcast-info .tmt-bcast-modal     { border-top: 6px solid var(--tmt-color, #0e7c66); }
.tmt-bcast-warn .tmt-bcast-modal     { border-top: 6px solid #f59e0b; }
.tmt-bcast-critical .tmt-bcast-modal { border-top: 6px solid #dc2626; }
.tmt-bcast-critical .tmt-bcast-icon  { animation: tmt-pulse 1.5s ease-in-out infinite; }
@keyframes tmt-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }

/* Critical broadcasts can't be dismissed without OK */
.tmt-bcast-critical { background: rgba(220,38,38,0.7); }

/* =========================================================================
   P18 — Persistent install nudge (when not running as PWA)
   ========================================================================= */
.tmt-install-nudge {
	position: fixed;
	bottom: max(0.5rem, env(safe-area-inset-bottom));
	left: 50%;
	transform: translateX(-50%);
	max-width: 540px;
	width: calc(100% - 1.5rem);
	z-index: 9000;
	animation: tmt-nudge-up .4s cubic-bezier(.2,.9,.3,1.1) both;
}
@keyframes tmt-nudge-up { from { transform: translate(-50%, 30px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.tmt-install-nudge-card {
	display: flex;
	align-items: center;
	gap: .8rem;
	background: #fff;
	color: #1a2533;
	padding: .8rem 1rem;
	border-radius: .9rem;
	box-shadow: 0 8px 30px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.04);
}
.tmt-install-icon { font-size: 1.8rem; line-height: 1; }
.tmt-install-text { flex: 1; min-width: 0; }
.tmt-install-text strong { display: block; font-size: .95rem; line-height: 1.2; }
.tmt-install-text small { display: block; color: #5a6b80; font-size: .82rem; margin-top: .2rem; }
.tmt-install-x {
	background: transparent; border: 0; cursor: pointer;
	color: #94a3b8; font-size: 1.4rem; line-height: 1;
	padding: .25rem .5rem; border-radius: .3rem; min-height: 32px;
}
.tmt-install-x:hover { background: #f1f5f9; color: #1a2533; }
.tmt-install-nudge .tmt-btn { white-space: nowrap; }

/* Push tab bar / sidebar above the nudge on driver portal */
@media (max-width: 720px) {
	.tmt-driver-tabs { bottom: calc(72px + env(safe-area-inset-bottom)); }
	.tmt-install-nudge { bottom: max(0.5rem, env(safe-area-inset-bottom)); }
}

@media (display-mode: standalone) {
	.tmt-install-nudge { display: none !important; }
}