/* Shared MD Transit interface. Plain CSS, independent of runtime compilation. */
:root { color-scheme: light; --ink: #1c2c22; --muted: #5e6f61; --navy: #17271f; --brand: #296d40; --accent: #296d40; --line: #e2e8e3; --canvas: #f4f6f3; --panel-width: 300px; --header-height: 72px; --radius: 16px; --navigation-width: 220px; --lime: #c3ed9a; }
* { box-sizing: border-box; }
body { margin: 0; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; color: var(--ink); background: var(--canvas); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button:disabled { cursor: not-allowed; opacity: .55; }
:focus-visible { outline: 3px solid #2587dc !important; outline-offset: 3px; }
::selection { background: #cce8ff; color: #102e4b; }
.custom-scrollbar { scrollbar-width: thin; scrollbar-color: #b9c9d8 transparent; }
.custom-scrollbar::-webkit-scrollbar { width: 7px; height: 7px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #b9c9d8; border: 2px solid transparent; background-clip: padding-box; border-radius: 8px; }
.app-shell { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.app-shell > header { height: var(--header-height); min-height: var(--header-height); padding: 0 24px; background: var(--navy); box-shadow: none; border-bottom: 1px solid #ffffff12; gap: 20px; }
.app-shell > header > div { gap: 18px; min-width: 0; }
.app-brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; flex-shrink: 0; }
.app-brand-mark { width: 44px; height: 44px; display: block; object-fit: contain; flex-shrink: 0; }
.app-brand-name { font-size: 16px; font-weight: 650; letter-spacing: -.4px; white-space: nowrap; }
.app-brand-name b { font-weight: 750; }
.app-shell header nav { gap: 4px; }
.app-shell header nav a { padding: 10px 11px; border-radius: 8px; font-size: 13px; font-weight: 550; text-transform: none; letter-spacing: 0; color: #d3e0ef; white-space: nowrap; }
.app-shell header nav a:hover { background: #ffffff10; color: #fff; }
.app-shell header nav a[aria-current="page"] { background: #ffffff16; color: #fff; box-shadow: inset 0 -2px #6fe0c6; }
.app-shell header #appLangSelect { color: #e8f2ff; background: #ffffff0b; border-color: #ffffff2b; font-size: 12px; min-height: 36px; width: 108px; padding: 6px 24px 6px 10px; }
#appLangSelect option { color: var(--ink); background: #fff; }
.app-shell header #headerUserContainer { border-left: 1px solid #ffffff22; padding-left: 16px; gap: 10px; }
.app-shell header #headerUserName { font-size: 13px; max-width: 140px; }
.app-shell header #headerUserRole { font-size: 11px; color: #acbfd4; margin-top: 3px; }
.app-shell header #headerUserContainer > div:first-child { background: #ffffff15; box-shadow: none; }
.app-shell #headerUserDropdown { top: 100%; margin-top: 16px; width: 220px; border-radius: 12px; box-shadow: 0 12px 40px #142c4926; }
.app-shell #headerLogoutBtn { font-size: 13px; min-height: 42px; }
.app-shell header [data-header-bell] { min-width: 38px; min-height: 38px; display: flex; align-items: center; justify-content: center; }
.app-shell header [data-header-notify-badge] { border-color: var(--navy); }
.workspace-heading { padding: 20px 24px 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-shrink: 0; }
.workspace-heading h1 { margin: 0; font-size: 23px; line-height: 1.3; font-weight: 700; letter-spacing: -.6px; color: #142e48; }
.workspace-heading p { font-size: 13px; color: var(--muted); margin: 5px 0 0; }
.workspace-eyebrow { display: flex; gap: 7px; align-items: center; color: #6f8195; font-size: 11px; margin-bottom: 5px; }
.workspace-eyebrow span { width: 5px; height: 5px; background: #199583; border-radius: 50%; }
.workspace-tools { display: flex; align-items: center; gap: 8px; }
.sidebar-mobile-head { display: none; }
.page-feedback { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; font-size: 13px; background: #edf5fb; color: #426983; border-bottom: 1px solid #d9e6f0; }
.page-feedback[role="alert"] { background: #fff6ef; color: #9a5422; border-color: #efd8c6; }
.page-feedback[hidden] { display: none; }
.page-feedback button { padding: 6px 12px; background: #fff; border: 1px solid currentColor; color: inherit; flex-shrink: 0; }
.workspace-filter { display: none; gap: 8px; align-items: center; justify-content: center; padding: 10px 14px; border: 1px solid #cfdce8; border-radius: 10px; font-size: 13px; font-weight: 600; background: #fff; color: #243f5b; min-height: 42px; }
.workspace-link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid #cfdce8; border-radius: 10px; color: #315273; font-size: 13px; font-weight: 600; background: #fff; text-decoration: none; }
.app-shell > main { flex: 1 1 auto; min-height: 0; width: auto; margin: 0 24px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; isolation: isolate; box-shadow: 0 4px 16px #182f4804; }
.app-shell main > section { min-width: 0; min-height: 0; background: #fff; }
.app-shell #sidebar { width: var(--panel-width); flex: 0 0 var(--panel-width); min-width: 0; min-height: 0; box-shadow: none; background: #fff; border-right: 1px solid var(--line); transition: margin .2s ease, transform .2s ease; }
.app-shell #sidebar.is-hidden { transform: translateX(-100%); margin-left: calc(-1 * var(--panel-width)); margin-right: 0; pointer-events: none; }
.app-shell #sidebar > div:first-child { background: #f9fbfd; }
.app-shell #sidebar > .custom-scrollbar { padding: 18px; }
.app-shell #sidebar .space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: 14px; }
.app-shell #sidebar label:not(:has(input[type="checkbox"])):not(:has(input[type="radio"])) { font-size: 12px; font-weight: 600; color: #526a82; text-transform: none; letter-spacing: 0; }
.app-shell #sidebar label:has(input[type="checkbox"]), .app-shell #sidebar label:has(input[type="radio"]) { min-height: 30px; font-size: 12px; color: #415970; }
.app-shell #sidebar h3, .app-shell #sidebar h4 { font-size: 13px; text-transform: none; letter-spacing: 0; color: #294761; }
.app-shell input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .app-shell select, .app-shell textarea { border-color: #ccd9e5; border-radius: 8px; font-size: 13px; min-height: 38px; background-color: #fff; color: #233e59; transition: border-color .15s, box-shadow .15s; }
.app-shell input:focus, .app-shell select:focus, .app-shell textarea:focus { border-color: #3285cc; box-shadow: 0 0 0 3px #3285cc12; }
.app-shell input::placeholder, .app-shell textarea::placeholder { color: #8395a8; }
.app-shell input[type="checkbox"], .app-shell input[type="radio"] { width: 16px; height: 16px; accent-color: var(--accent); flex-shrink: 0; }
.app-shell button { font-size: 12px; text-transform: none; letter-spacing: 0; border-radius: 8px; }
.app-shell button:not(.leaflet-control-zoom-in):not(.leaflet-control-zoom-out) { min-height: 34px; }
.app-shell #sidebar button:not(#toggle-sidebar-btn) { min-height: 38px; }
.app-shell button[class*="bg-[#2d7a5f]"], .app-shell button[class*="bg-[#4d7"], .app-shell button[class*="bg-[#4d86"] { background: var(--accent); box-shadow: none; }
.app-shell button[class*="bg-[#2d7a5f]"]:hover, .app-shell button[class*="bg-[#4d7"]:hover, .app-shell button[class*="bg-[#4d86"]:hover { background: #10685e; }
.app-shell button[class*="bg-[#a3adb8]"] { background: #edf4fa; border: 1px solid #ccdbe8; color: #345677; }
.app-shell #toggle-sidebar-btn { width: 26px; height: 56px; left: var(--panel-width); border: 1px solid var(--line); background: #fff; border-radius: 0 10px 10px 0; box-shadow: 3px 0 12px #18374c08; }
.app-shell #sidebar.is-hidden + #toggle-sidebar-btn { left: 0; }
.app-shell .map-container { height: 100%; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.app-shell table { font-size: 13px; }
.app-shell table th { padding: 14px 12px; border-bottom: 1px solid #dfe7ef; background: #f7f9fc; color: #60758a; font-size: 11px; font-weight: 650; text-transform: none; letter-spacing: .1px; white-space: nowrap; }
.app-shell table td { padding: 13px 12px; border-bottom: 1px solid #edf1f6; color: #334e68; font-size: 13px; }
.app-shell table td.italic { font-style: normal; }
.app-shell .text-slate-400 { color: #637b91; }
.app-shell #sidebar [class*="text-[10px]"] { font-size: 12px; }
.app-shell table tbody tr { transition: background-color .12s; }
.app-shell table tbody tr:hover { background-color: #f2f8fc; }
.app-shell table td [class*="text-[9px]"] { font-size: 11px; text-transform: none; }
.app-shell table td [class*="text-[10px]"] { font-size: 12px; }
.app-shell table td[colspan] { padding: 40px 16px; color: #647c93; }
.app-shell #routesTablePager, .app-shell #notificationsTablePager { padding: 12px; background: #fff; border-color: var(--line); }
.app-shell [id$="TablePager"] button, .app-shell #usersPageButtons button { min-width: 34px; min-height: 34px; }
.app-shell [id$="SearchStats"] { font-size: 12px; color: #61778c; }
.app-shell main > section > div:first-child:has(input[type="search"]) { padding: 16px 20px; background: #fff; gap: 12px; }
.app-shell main > section > div:first-child h2 { font-size: 16px; color: #243f59; font-weight: 650; }
.app-shell main > section > div:first-child label { font-size: 12px; }
.app-shell #routesSearch { padding-left: 30px; }
html[data-page="history"] #historyTableWrapper table { min-width: 760px; }
html[data-page="notifications"] main table { min-width: 740px; box-shadow: none; border-radius: 0; }
html[data-page="notifications"] main > section > .custom-scrollbar { padding: 0; }
html[data-page="history"] main > section { padding: 0; gap: 0; }
html[data-page="monitoring"] #monitorMap { min-height: 0; flex: 1; }
html[data-page="monitoring"] main > section > div:last-child { border-top-color: var(--line); box-shadow: 0 -4px 16px #18374c0a; }
html[data-page="monitoring"] #transitList { font-size: 13px; }
html[data-page="monitoring"] #transitList [class*="text-[9px]"], html[data-page="monitoring"] #transitList [class*="text-[10px]"], html[data-page="monitoring"] #transitList [class*="text-[11px]"] { font-size: 12px; }
.app-shell .leaflet-control-zoom { border: 1px solid #d7e1ec !important; border-radius: 10px !important; overflow: hidden; box-shadow: 0 3px 12px #18374c12 !important; }
.app-shell .leaflet-control-zoom a { width: 36px; height: 36px; line-height: 36px; color: #315372; }
.app-shell #mobileMenuContent { background: var(--navy); width: min(320px, 88vw); }
.app-shell #mobileMenu { transition: none; }
.app-shell #mobileMenuContent nav a { padding: 13px 16px; font-size: 14px; text-transform: none; letter-spacing: 0; }
.app-shell #mobileMenuContent nav a[aria-current="page"] { background: #ffffff16; border-left: 3px solid #6fe0c6; }
.app-shell [role="dialog"] { overscroll-behavior: contain; }
.app-shell [role="dialog"] > div:first-child { border-radius: 16px; max-height: calc(100dvh - 32px); min-height: 0; overflow-y: auto; }
.app-shell [role="dialog"] > div:first-child > div:first-child[class*="bg-[#1e3a5f]"] { background: var(--navy); padding: 16px 20px; box-shadow: none; }
.app-shell [role="dialog"] h3 { text-transform: none; letter-spacing: 0; font-size: 16px; }
.app-shell [role="dialog"] table th, .app-shell [role="dialog"] table td { padding: 10px; font-size: 12px; }
.app-shell [role="dialog"] button { min-height: 38px; }
.app-shell #modal { z-index: 220; }
.app-shell #userModal > div > div:nth-child(2) { overflow-y: auto; min-height: 0; }
.app-shell #userModal > div > div:last-child { flex-shrink: 0; }
html[data-page="users"] { --panel-width: 58%; }
html[data-page="users"] main > section { padding: 24px; background: #f7f9fc; }
html[data-page="users"] #sidebar { flex-basis: 58%; }
html[data-page="users"] #sidebar > div:first-child { padding: 16px; }
.user-avatar { display: grid; place-items: center; width: 72px; height: 72px; flex-shrink: 0; background: #eaf3fa; color: #2972b1; border-radius: 18px; font-size: 27px; }
html[data-page="users"] #userDetailName { font-size: 20px; }
html[data-page="users"] main > section .shadow-sm { box-shadow: none; border-color: var(--line); padding: 20px; }
html[data-page="sealing"] main { background: transparent; border: 0; box-shadow: none; }
html[data-page="sealing"] .content-wrap { padding: 0; }
html[data-page="sealing"] .card { box-shadow: none; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
html[data-page="sealing"] .card-title { font-size: 19px; font-weight: 650; }
html[data-page="sealing"] table th, html[data-page="sealing"] table td { border-left: 0; border-right: 0; }
html[data-page="sealing"] .btn { border-radius: 8px; min-height: 38px; }
html[data-page="sealing"] .btn-primary { background: var(--accent); border-color: var(--accent); }
html[data-page="sealing"] .locks-toolbar { background: #f7f9fc; border-color: var(--line); }
/* Authentication and the focused seal utility. */
.auth-page { min-height: 100vh; min-height: 100dvh; background: #f6f8fb; }
.auth-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr); min-height: 100vh; min-height: 100dvh; }
.auth-story { position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 48px 56px; background: #102b44; color: #fff; }
.auth-story::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #102b4473, #102b44ed 85%), url('img/intro.png') center / cover; opacity: .85; }
.auth-story > * { position: relative; z-index: 1; }
.auth-story .app-brand-name { font-size: 23px; }
.auth-story .app-brand-mark { width: 56px; height: 56px; }
.auth-story-copy { max-width: 520px; margin: 80px 0; }
.auth-kicker { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #8fddce; margin: 0 0 20px; }
.auth-story-copy h1 { font-size: clamp(34px,3.3vw,52px); line-height: 1.12; letter-spacing: -1.5px; font-weight: 650; margin: 0 0 24px; }
.auth-story-copy > p:last-of-type { font-size: 16px; line-height: 1.7; color: #c2d4e5; max-width: 420px; }
.auth-features { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.auth-features span { border: 1px solid #ffffff25; border-radius: 8px; padding: 10px 14px; font-size: 12px; color: #e1edf8; background: #ffffff07; }
.auth-features i { color: #75d9c2; margin-right: 7px; }
.auth-story-foot { color: #93aec5; font-size: 12px; }
.auth-side { padding: 92px 48px 40px; display: flex; align-items: center; justify-content: center; position: relative; }
.auth-language { position: absolute; right: 36px; top: 28px; }
.auth-language select { border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; min-height: 40px; color: #415d78; background: #fff; font-size: 13px; }
.auth-card { width: 100%; max-width: 400px; }
.auth-card-icon { width: 48px; height: 48px; border: 1px solid #d8e7f4; border-radius: 14px; background: #eaf3fb; color: #2375b8; display: grid; place-items: center; font-size: 20px; margin-bottom: 24px; }
.auth-card h2 { font-size: 28px; font-weight: 650; letter-spacing: -.7px; color: #17314b; margin: 0 0 10px; }
.auth-card-intro { color: #647c92; font-size: 14px; line-height: 1.6; margin: 0 0 32px; }
.auth-field { margin-top: 20px; }
.auth-field > label { display: block; color: #34506c; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.auth-input-wrap { position: relative; }
.auth-input-wrap > i { position: absolute; left: 16px; top: 18px; color: #889caf; font-size: 14px; }
.auth-input-wrap input { width: 100%; height: 50px; padding: 0 48px 0 44px; border: 1px solid #cbd9e6; border-radius: 10px; background: #fff; color: #27445e; font-size: 15px; outline: none; transition: .15s; }
.auth-input-wrap input:focus { border-color: #2b86cc; box-shadow: 0 0 0 4px #2b86cc0d; }
.auth-input-wrap input::placeholder { color: #8c9daf; }
.auth-input-wrap button { position: absolute; right: 5px; top: 5px; width: 40px; height: 40px; border: 0; background: transparent; color: #6a8195; border-radius: 7px; cursor: pointer; }
.auth-options { margin: 20px 0 24px; display: flex; gap: 8px; align-items: center; font-size: 13px; color: #62798f; }
.auth-options input { width: 16px; height: 16px; accent-color: var(--accent); }
.auth-submit { width: 100%; height: 50px; background: var(--accent); color: #fff; border: 0; border-radius: 10px; font-size: 14px; font-weight: 650; cursor: pointer; box-shadow: 0 4px 10px #147d7014; transition: background .15s; }
.auth-submit:hover { background: #10695f; }
.auth-help { width: 100%; border: 0; background: transparent; padding: 20px 0; color: #3f75a5; font-size: 13px; cursor: pointer; }
.auth-note { font-size: 12px; color: #71869a; line-height: 1.6; padding: 16px 0; border-top: 1px solid var(--line); margin: 4px 0 0; }
.auth-error { font-size: 13px; padding: 12px 14px; margin: 16px 0; border: 1px solid #f0cdcd; border-radius: 8px; color: #a83b3b; background: #fff3f3; }
.auth-help-message { padding: 14px; border: 1px solid #d3e3f0; border-radius: 8px; color: #486780; background: #edf5fb; font-size: 13px; line-height: 1.6; margin-bottom: 16px; }
.seal-utility { max-width: 760px; margin: 60px auto; padding: 36px; background: #fff; border: 1px solid var(--line); border-radius: 20px; }
.seal-utility h1 { font-size: 28px; font-weight: 650; letter-spacing: -.5px; margin: 0 0 10px; }
.seal-utility p { color: var(--muted); font-size: 14px; line-height: 1.6; }
.seal-utility label { display: block; font-size: 13px; color: #415e79; font-weight: 600; margin: 28px 0 8px; }
.seal-utility-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.seal-utility input { flex: 1; min-width: 180px; padding: 12px 16px; border: 1px solid #cbd9e6; border-radius: 10px; font-size: 16px; }
.seal-utility button { padding: 12px 18px; border-radius: 10px; font-size: 14px; font-weight: 600; border: 1px solid #cbd9e6; background: #fff; color: #335d82; }
.seal-utility #findSealBtn { background: var(--accent); border-color: var(--accent); color: #fff; }
.seal-utility #sealResult { margin-top: 24px; padding: 12px; min-height: 160px; background: #f7f9fc; border: 1px solid var(--line); border-radius: 12px; overflow: auto; }
.seal-utility-back { color: #56748f; font-size: 13px; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; margin-bottom: 24px; }
.legacy-panel .row { display: flex; flex-wrap: wrap; gap: 20px; min-width: 0; }
.legacy-panel .card { border: 1px solid var(--line); border-radius: 14px; box-shadow: none; }
.legacy-panel h1 { font-size: 26px; color: #18334d; }
.legacy-panel .card table { display: block; overflow-x: auto; }
@media (max-width: 1279px) {
  .app-shell header nav { display: none; }
  .app-shell #toggleSidebarMobile, .app-shell #mobileMenu { display: block; }
  .app-shell > header { padding: 0 20px; }
}
@media (min-width: 1280px) { .app-shell #mobileMenu { display: none; } }
@media (max-width: 1023px) {
  :root { --header-height: 64px; }
  .app-shell > header { padding: 0 16px; gap: 8px; }
  .app-shell header #headerUserContainer { padding-left: 10px; }
  .workspace-heading { padding: 18px 16px 14px; }
  .workspace-heading h1 { font-size: 21px; }
  .workspace-filter { display: inline-flex; }
  .app-shell .sidebar-mobile-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); flex-shrink: 0; font-size: 14px; }
  .sidebar-mobile-head button { width: 38px; background: #edf3f8; color: #526d85; }
  .app-shell > main { margin: 0 16px 16px; }
  .app-shell #sidebar { position: absolute; inset: 0 auto 0 0; z-index: 130; width: min(380px,100%); height: 100%; margin: 0; border: 0; box-shadow: 8px 0 30px #18334d18; transition: transform .2s; }
  .app-shell #sidebar.is-hidden { margin: 0; transform: translateX(-105%); }
  .app-shell #toggle-sidebar-btn { display: none; }
  .app-shell main > section { width: 100%; flex: 1; }
  .sidebar-backdrop { position: absolute; inset: 0; z-index: 125; background: #102b4466; backdrop-filter: blur(2px); }
  .sidebar-backdrop[hidden] { display: none; }
  html[data-page="users"] main > #sidebar { position: relative; width: 100%; flex: 1; box-shadow: none; transform: none; }
  html[data-page="users"] main > #sidebar.is-hidden { display: none; }
  html[data-page="users"] main > section { display: none; padding: 18px; }
  html[data-page="users"] main:has(#sidebar.is-hidden) > section { display: block; }
  .app-shell [role="dialog"] > div:first-child { max-height: calc(100dvh - 24px); }
  .auth-story { padding: 40px; }
  .auth-side { padding-left: 32px; padding-right: 32px; }
  .legacy-panel .card { width: 100% !important; min-width: 0 !important; }
}
@media (max-width: 639px) {
  .app-shell table.mobile-records { display: block; min-width: 0; width: 100%; border-collapse: separate; }
  .app-shell table.mobile-records thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .app-shell table.mobile-records tbody { display: block; padding: 12px; }
  .app-shell table.mobile-records tbody tr { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; position: relative; border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin-bottom: 12px; background: #fff; }
  .app-shell table.mobile-records td { display: flex; flex-direction: column; gap: 5px; padding: 0; border: 0; font-size: 13px; overflow-wrap: anywhere; text-align: left; }
  .app-shell table.mobile-records td::before { content: attr(data-label); color: #71869b; font-size: 11px; font-weight: 500; }
  .app-shell table.mobile-records td:first-child { position: absolute; right: 16px; top: 16px; }
  .app-shell table.mobile-records td:first-child::before { content: none; }
  .app-shell table.mobile-records td:nth-child(2) { grid-column: 1 / -1; padding-right: 24px; font-size: 15px; font-weight: 650; color: #254968; }
  .app-shell table.mobile-records td[colspan] { grid-column: 1 / -1; position: static; text-align: center; padding: 24px 8px; }
  .app-shell table.mobile-records td[colspan]::before { content: none; }
  html[data-page="users"] .app-shell #sidebar > .custom-scrollbar { padding: 0; }
  .app-shell .app-brand-name { display: none; }
  .app-shell .app-brand-mark { width: 36px; height: 36px; }
  .app-shell > header > div { gap: 8px; }
  .app-shell header #headerUserName { max-width: 78px; font-size: 11px; }
  .app-shell header #headerUserRole { font-size: 10px; }
  .app-shell header #appLangSelect { width: 92px; font-size: 11px; min-height: 36px; }
  .app-shell header #headerUserContainer { padding-left: 8px; }
  .workspace-heading { align-items: flex-start; gap: 10px; }
  .workspace-heading h1 { font-size: 20px; }
  .workspace-heading p { font-size: 12px; line-height: 1.5; }
  .workspace-eyebrow { display: none; }
  .workspace-tools { flex-shrink: 0; }
  .workspace-filter { padding: 9px 10px; font-size: 12px; }
  .workspace-link { padding: 9px; font-size: 12px; }
  .app-shell > main { margin: 0 10px 10px; border-radius: 12px; }
  .app-shell input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), .app-shell select, .app-shell textarea { font-size: 16px; min-height: 42px; }
  .app-shell header #appLangSelect { min-height: 36px; font-size: 11px; }
  .app-shell #sidebar button { min-height: 42px; }
  .app-shell main > section > div:first-child:has(input[type="search"]) { padding: 14px; gap: 10px; }
  .app-shell table th, .app-shell table td { padding: 12px 10px; }
  .app-shell #sidebar .grid-cols-2 { gap: 8px; }
  .app-shell [role="dialog"] { padding: 10px; }
  .app-shell [role="dialog"] h3 { font-size: 14px; }
  .app-shell [role="dialog"] .grid-cols-2 { grid-template-columns: minmax(0,1fr); }
  .app-shell #modalMessageCard > div { width: 100%; }
  .app-shell #modalMessageCard > div > div:nth-child(2) { display: flex; flex-direction: column; }
  html[data-page="sealing"] .card { padding: 16px; }
  html[data-page="sealing"] .locks-card-header { gap: 12px; flex-wrap: wrap; }
  .auth-layout { display: block; min-height: 100dvh; }
  .auth-story { padding: 24px; min-height: 190px; }
  .auth-story .app-brand-name { font-size: 20px; }
  .auth-story .app-brand-mark { width: 44px; height: 44px; }
  .auth-story-copy { margin: 24px 0 0; }
  .auth-story-copy h1 { font-size: 26px; letter-spacing: -.6px; margin: 0; max-width: 290px; }
  .auth-story-copy .auth-kicker, .auth-story-copy > p:last-of-type, .auth-features, .auth-story-foot { display: none; }
  .auth-side { padding: 72px 24px 28px; }
  .auth-language { top: 16px; right: 24px; }
  .auth-card-icon { display: none; }
  .auth-card h2 { font-size: 25px; }
  .auth-card-intro { margin-bottom: 24px; }
  .auth-input-wrap input { font-size: 16px; }
  .seal-utility { margin: 16px; padding: 24px; }
  .seal-utility h1 { font-size: 24px; }
  .seal-utility-actions input { flex-basis: 100%; }
  .seal-utility-actions button { flex: 1; }
}
/* Modern workspace: restrained surfaces, permanent desktop navigation and useful view controls. */
body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; font-variant-numeric: tabular-nums; }
body.app-shell { background: var(--canvas); font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; }
:focus-visible { outline-color: #4c8d45 !important; }
::selection { background: #ddefce; color: #17271f; }
.app-shell > header { background: #fff; color: var(--ink); border-bottom: 1px solid var(--line); padding: 0 24px; }
.app-shell > header .app-brand { color: var(--ink); }
.app-shell header #appLangSelect { color: #475b4d; background: #f7f9f6; border-color: var(--line); border-radius: 9px; font-size: 12px; }
.app-shell header #headerUserContainer { border-color: var(--line); }
.app-shell header #headerUserContainer > div:first-child { color: #3b6747; background: #eaf2e6; border: 1px solid #dce8d6; }
.app-shell header #headerUserName { color: var(--ink); }
.app-shell header #headerUserRole { color: var(--muted); }
.app-shell header [data-header-bell] { color: #536859; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.app-shell header [data-header-bell]:hover { background: #f1f6ed; }
.app-shell header [data-header-notify-badge] { border-color: #fff; }
.topbar-context { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); }
.topbar-context > i { width: 30px; height: 30px; display: grid; place-items: center; background: #f1f5ed; border-radius: 8px; color: #64834e; }
.topbar-context .topbar-page { color: #344e3e; font-weight: 600; }
.navigation-label { color: #a8b8aa; font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; padding: 0 14px 16px; }
.navigation-footer { margin-top: auto; padding: 20px 14px 0; border-top: 1px solid #ffffff17; color: #9faf9f; font-size: 11px; line-height: 1.6; }
.navigation-footer strong { display: block; color: #dbe5d7; font-weight: 500; font-size: 12px; margin-bottom: 3px; }
.app-shell header nav a .nav-icon { width: 20px; text-align: center; font-size: 14px; opacity: .85; flex-shrink: 0; }
.workspace-heading { padding: 22px 24px 20px; }
.workspace-heading h1 { color: var(--ink); font-size: 28px; letter-spacing: -.9px; font-weight: 650; }
.workspace-heading p { color: var(--muted); line-height: 1.5; margin-top: 6px; }
.workspace-eyebrow { color: #61745e; font-size: 10px; margin-bottom: 8px; }
.workspace-eyebrow span { background: #8dac78; }
.workspace-filter { display: inline-flex; color: #465d4c; border-color: var(--line); box-shadow: 0 2px 3px #17271f03; }
.workspace-filter[aria-expanded="true"] { color: #296d40; background: #edf5e8; border-color: #d4e4c8; }
.workspace-link { color: #465d4c; border-color: var(--line); }
.workspace-link:hover, .workspace-filter:hover { background: #edf4e8; border-color: #c5d7ba; }
.app-shell > main { border-color: var(--line); box-shadow: 0 6px 24px #1c2c2204; }
.app-shell #sidebar { border-color: var(--line); }
.app-shell #sidebar > .custom-scrollbar { padding: 18px; }
.app-shell #sidebar .sidebar-mobile-head { display: flex; background: #fff; font-size: 13px; color: #425948; border-bottom: 1px solid var(--line); padding: 14px 18px; }
.sidebar-mobile-head button { margin-left: auto; width: 28px; color: #76847a; background: #f3f6f0; }
.sidebar-actions { flex-shrink: 0; padding: 12px 18px; border-top: 1px solid var(--line); background: #fafcf7; }
.app-shell #sidebar .filter-fields { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px; }
.app-shell #sidebar .sidebar-actions button:not(#toggle-sidebar-btn) { width: 100%; min-height: 40px; }
.app-shell #sidebar label:not(:has(input[type="checkbox"])):not(:has(input[type="radio"])) { color: #627366; font-size: 11px; font-weight: 500; }
.app-shell #sidebar h3, .app-shell #sidebar h4 { color: #3e5846; font-size: 12px; }
.app-shell input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .app-shell select, .app-shell textarea { color: #2c4333; border-color: #dae3d9; background: #fff; border-radius: 9px; }
.app-shell input:focus, .app-shell select:focus, .app-shell textarea:focus { border-color: #80a56b; box-shadow: 0 0 0 3px #85b36519; }
.app-shell input::placeholder, .app-shell textarea::placeholder { color: #66775f; }
.app-shell button { font-weight: 550; transition: background-color .16s, border-color .16s, box-shadow .16s; }
.app-shell button[class*="bg-[#2d7a5f]"], .app-shell button[class*="bg-[#4d7"], .app-shell button[class*="bg-[#4d86"] { background: #296d40; }
.app-shell button[class*="bg-[#2d7a5f]"]:hover, .app-shell button[class*="bg-[#4d7"]:hover, .app-shell button[class*="bg-[#4d86"]:hover { background: #205a34; box-shadow: 0 3px 8px #296d4020; }
.app-shell button[class*="bg-[#a3adb8]"] { color: #527043; background: #f0f5eb; border-color: #d8e4cd; }
.app-shell #sidebar [class*="bg-blue-50"] { background: #f4f8ef; border-color: #e0ead7; }
.app-shell #sidebar [class*="text-blue-"] { color: #5b804a; }
.app-shell #toggle-sidebar-btn { color: #6b806d; background: #fff; }
.table-view-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 18px; border-bottom: 1px solid var(--line); flex-shrink: 0; background: #fff; }
.table-view-tools[hidden] { display: none; }
.table-view-caption { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; color: #63715f; }
.table-density-options { display: inline-flex; gap: 3px; padding: 3px; background: #f3f5f1; border: 1px solid #e9ede5; border-radius: 9px; }
.app-shell .table-density-options button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 28px; padding: 5px 9px; border-radius: 6px; font-size: 11px; color: #617258; background: transparent; border: 1px solid transparent; }
.app-shell .table-density-options button[aria-pressed="true"] { color: #385b2e; background: #fff; border-color: #e0e7da; box-shadow: 0 1px 3px #23331b08; }
.density-symbol { width: 12px; height: 12px; display: block; background: repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px 5px); opacity: .75; }
.density-symbol.compact { background: repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px 3px); }
.app-shell .modern-table { font-family: inherit; }
.app-shell .modern-table thead { position: sticky; top: 0; z-index: 10; }
.app-shell .modern-table th { padding: 12px 14px; color: #596a55; background: #f7f9f5; border-color: var(--line); font-size: 11px; font-weight: 600; }
.app-shell .modern-table td { padding: 14px; color: #3e5143; border-color: #edf0ea; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.app-shell .modern-table tbody tr { background: #fff; transition: background-color .14s; }
.app-shell .modern-table tbody tr:nth-child(even) { background: #fcfdfb; }
.app-shell .modern-table tbody tr:hover { background: #f0f6e9; }
.app-shell .modern-table tbody tr.bg-blue-50 { background: #edf5e7; }
.app-shell .modern-table td[colspan] { padding: 44px 18px; color: #7e8c7c; }
.app-shell .modern-table td [class*="bg-blue-100"], .app-shell .modern-table td [class*="bg-green-100"] { background: #edf4e6; color: #4c7435; border-radius: 5px; padding: 3px 7px; }
.app-shell .modern-table a { color: #2f6c41; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.app-shell .modern-table a:hover { text-decoration: underline; }
html[data-table-density="compact"] .app-shell .modern-table td { padding-top: 7px; padding-bottom: 7px; }
html[data-table-density="compact"] .app-shell .modern-table th { padding-top: 9px; padding-bottom: 9px; }
.app-shell #routesTablePager, .app-shell #notificationsTablePager, .app-shell #historyTablePager, .app-shell #usersTablePager { background: #fafbf8; border-color: var(--line); padding: 12px 16px; color: #73816e; }
.app-shell #routesTablePager button, .app-shell #notificationsTablePager button, .app-shell #historyTablePager button, .app-shell #usersTablePager button { border-color: #e1e8db; border-radius: 8px; }
.app-shell #routesTablePager button[class*="bg-blue-"], .app-shell #notificationsTablePager button[class*="bg-blue-"], .app-shell #historyTablePager button[class*="bg-blue-"], .app-shell #usersTablePager button[class*="bg-blue-"] { background: #296d40; color: #fff; }
.app-shell #usersPageButtons button[aria-current="page"] { background: #296d40; color: #fff; border-color: #296d40; }
.app-shell #usersPageButtons button:not([aria-current="page"]) { background: #fff; color: #64755e; border: 1px solid #e0e8da; }
.app-shell .page-feedback { color: #47673d; background: #f0f6e9; border-color: #dfe9d6; }
.app-shell .page-feedback[role="alert"] { color: #92541e; background: #fff7eb; border-color: #f0ddbb; }
.app-shell .leaflet-control-zoom { border-color: #dce5d8 !important; border-radius: 10px !important; box-shadow: 0 3px 12px #17271f12 !important; }
.app-shell .leaflet-control-zoom a { color: #466543; }
.app-shell .leaflet-popup-content-wrapper { border-radius: 12px; border: 1px solid #e0e7db; box-shadow: 0 8px 30px #22351b18; }
.app-shell .leaflet-container { font-family: inherit; background: #e9eee4; }
html[data-page="monitoring"] #monitorListPanel { position: relative; display: flex; flex-direction: column; left: auto; right: auto; bottom: auto; flex: 0 0 42%; min-height: 200px; max-height: 50%; border-color: var(--line); box-shadow: 0 -4px 12px #20351b08; }
html[data-page="monitoring"] #transitList { height: auto; flex: 1; min-height: 0; max-height: none; }
html[data-page="monitoring"] #monitorListPanel > div:first-child { background: #f2f6ed; color: #6f8067; border-color: var(--line); text-transform: none; font-size: 10px; }
html[data-page="monitoring"] #monitorListPanel > div:first-child > div { padding-top: 9px; padding-bottom: 9px; border-color: var(--line); }
html[data-page="monitoring"] #transitList > div { padding-top: 5px; padding-bottom: 5px; border-color: #edf1e7; }
html[data-page="monitoring"] #transitList > div.is-selected { background: #f0f7e8; }
html[data-page="monitoring"] #transitList input[type="checkbox"] { accent-color: var(--accent); }
.map-view-controls { position: absolute; right: 14px; top: 14px; display: flex; align-items: center; gap: 3px; padding: 4px; border: 1px solid #dee6d6; border-radius: 10px; background: #fff; box-shadow: 0 4px 16px #26321b14; z-index: 450; }
.app-shell .map-view-controls button { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px; min-height: 32px; color: #596e4a; background: transparent; font-size: 11px; }
.app-shell .map-view-controls button[aria-pressed="true"] { background: #eaf4df; color: #436c2d; }
html[data-page="monitoring"] #monitorMap[hidden], html[data-page="monitoring"] #monitorListPanel[hidden] { display: none !important; }
html[data-page="monitoring"] .map-container.is-list-only #monitorListPanel { flex: 1; max-height: none; padding-top: 62px; }
html[data-page="monitoring"] .map-container.is-list-only #monitorMap { display: none; }
.app-shell #mobileMenuContent { background: #17271f; border-right: 1px solid #ffffff14; }
.app-shell #mobileMenuContent nav a { border-left: 3px solid transparent; border-radius: 9px; color: #bdcbb9; background: transparent; margin: 4px 0; transition: background-color .16s, color .16s; }
.app-shell #mobileMenuContent nav a:hover { background: #ffffff0b; }
.app-shell #mobileMenuContent nav a[aria-current="page"] { color: #d5f6b7; background: #c3ed9a12; border-left-color: #c3ed9a; }
.app-shell [role="dialog"] > div:first-child { border-radius: 18px; border: 1px solid #e1e8db; box-shadow: 0 24px 80px #14241926; }
.app-shell .fixed[role="dialog"][aria-hidden="false"] > div:first-child { animation: dialog-enter .18s ease-out; }
.app-shell [role="dialog"] > div:first-child > div:first-child[class*="bg-[#1e3a5f]"] { background: #203829; }
html[data-page="users"] main > section { background: #f8faf5; }
.user-avatar { color: #54833e; background: #eef5e5; border: 1px solid #e5eeda; border-radius: 20px; }
html[data-page="users"] #userDetailName { color: #263c2b; font-size: 21px; letter-spacing: -.4px; }
html[data-page="users"] main > section .shadow-sm { border-color: #e1e8db; border-radius: 15px; }
html[data-page="sealing"] .card { border-color: var(--line); box-shadow: 0 5px 24px #17271f04; }
html[data-page="sealing"] .locks-toolbar { background: #f7faf3; border-color: var(--line); }
.auth-page { background: #f5f7f2; }
.auth-layout { grid-template-columns: minmax(0, 1fr) minmax(440px, 1fr); }
.auth-story { background: #17271f; padding: 44px 56px; }
.auth-story::before { background: radial-gradient(ellipse at 65% 25%, #a9dc6230, transparent 65%), linear-gradient(150deg, #17271fee, #17271fce), url('img/intro.png') center / cover; opacity: 1; }
.auth-story::after { content: ''; position: absolute; width: 560px; height: 560px; border: 1px solid #c3ed9a18; border-radius: 50%; top: 120px; left: 28%; box-shadow: 0 0 0 70px #c3ed9a05, 0 0 0 140px #c3ed9a04; pointer-events: none; }
.auth-kicker { color: #c3ed9a; font-size: 11px; letter-spacing: 2px; }
.auth-story-copy h1 { font-size: clamp(36px,3.8vw,58px); font-weight: 550; line-height: 1.1; letter-spacing: -2px; max-width: 490px; }
.auth-story-copy > p:last-of-type { color: #bacab5; font-size: 15px; line-height: 1.8; }
.auth-features { gap: 10px; flex-wrap: wrap; }
.auth-features > span { color: #d0dec8; border-color: #c3ed9a20; background: #c3ed9a08; padding: 12px 14px; border-radius: 10px; }
.auth-features i { color: #b1dc83; }
.auth-story-foot { color: #93a58f; }
.auth-side { background: #f5f7f2; }
.auth-card { background: #fff; padding: 36px; border: 1px solid #e2e9dc; border-radius: 22px; box-shadow: 0 16px 55px #23341907; width: 100%; max-width: 440px; }
.auth-card h2 { color: #263c2b; font-size: 29px; font-weight: 600; letter-spacing: -.8px; }
.auth-card-icon { color: #54843c; background: #f0f6e8; border: 1px solid #e4ecd9; border-radius: 14px; }
.auth-input-wrap input { border-color: #dce5d6; border-radius: 10px; }
.auth-input-wrap input::placeholder { color: #66775f; }
.auth-input-wrap input:focus { border-color: #80a765; box-shadow: 0 0 0 3px #8aba6a1a; }
.auth-submit { background: #296d40; border-radius: 10px; box-shadow: 0 4px 10px #296d4018; }
.auth-submit:hover { background: #205a34; }
.auth-language select { background: #fff; border-color: #dce5d6; color: #5b7056; }
.seal-utility, .legacy-panel .card { border-color: var(--line); border-radius: 18px; box-shadow: 0 8px 32px #1d321804; }
.seal-utility h1, .legacy-panel h1 { color: #263c2b; letter-spacing: -.7px; }
.seal-utility-actions button { border-radius: 9px; }
.workspace-heading, .auth-card { animation: workspace-enter .32s ease-out both; }
@keyframes workspace-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dialog-enter { from { opacity: .5; transform: translateY(6px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (min-width: 1280px) {
  .app-shell::before { content: ''; position: fixed; inset: 0 auto 0 0; width: var(--navigation-width); background: #17271f; border-right: 1px solid #ffffff0b; }
  .app-shell > header { margin-left: var(--navigation-width); }
  .app-shell > header .app-brand { position: fixed; left: 22px; top: 21px; color: #f0f6e9; gap: 8px; }
  .app-shell > header .app-brand-mark { width: 40px; height: 40px; }
  .app-shell header nav { position: fixed; top: 108px; bottom: 28px; left: 16px; width: calc(var(--navigation-width) - 32px); display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
  .app-shell header nav a { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid transparent; border-radius: 9px; font-size: 13px; font-weight: 500; color: #b1c1ad; background: transparent; box-shadow: none; transition: background-color .16s, color .16s; }
  .app-shell header nav a:hover { color: #e2edda; background: #ffffff08; }
  .app-shell header nav a[aria-current="page"] { color: #c3ed9a; background: #c3ed9a10; border-color: #c3ed9a12; box-shadow: none; }
  .app-shell header nav a[aria-current="page"]::after { content: ''; width: 5px; height: 5px; margin-left: auto; border-radius: 50%; background: #c3ed9a; }
  .app-shell .workspace-heading { margin-left: var(--navigation-width); }
  .app-shell > main { margin-left: calc(var(--navigation-width) + 24px); }
}
@media (max-width: 1279px) {
  .topbar-context { display: none; }
  .navigation-label, .navigation-footer { display: none; }
}
@media (min-width: 640px) {
  html[data-page="users"] .modern-table th, html[data-page="users"] .modern-table td { padding-left: 10px; padding-right: 10px; }
  html[data-page="users"] .modern-table td:nth-child(4), html[data-page="users"] .modern-table td:nth-child(5),
  html[data-page="history"] .modern-table td:nth-child(2), html[data-page="history"] .modern-table td:nth-child(3), html[data-page="history"] .modern-table td:nth-child(4) { white-space: nowrap; }
}
@media (max-width: 1023px) {
  .workspace-heading { padding: 18px 16px 16px; }
  .workspace-heading h1 { font-size: 24px; }
  .app-shell .sidebar-mobile-head { padding: 14px 18px; }
  .app-shell #sidebar .sidebar-mobile-head button { min-height: 36px; width: 36px; }
  .app-shell .modern-table.mobile-records td { padding: 5px 0; font-size: 12px; }
  html[data-table-density="compact"] .app-shell .modern-table.mobile-records td { padding-top: 3px; padding-bottom: 3px; }
  .app-shell .modern-table.mobile-records tbody tr { margin: 10px; border-color: #e2ead9; border-radius: 12px; padding: 16px; box-shadow: 0 2px 6px #24371803; }
  .app-shell .modern-table.mobile-records td::before { color: #829179; }
  .app-shell .modern-table.mobile-records td:nth-child(2) { font-size: 15px; color: #345a29; }
}
@media (max-width: 639px) {
  .app-shell > header { padding: 0 12px; }
  .workspace-heading { padding: 16px 12px 14px; }
  .workspace-heading h1 { font-size: 22px; letter-spacing: -.5px; }
  .workspace-heading p { font-size: 11px; }
  .workspace-tools { gap: 5px; }
  .workspace-link, .workspace-filter { min-height: 38px; padding: 8px; font-size: 11px; }
  .app-shell > main { margin: 0 10px 10px; }
  .app-shell input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .app-shell select, .app-shell textarea { font-size: 16px; min-height: 42px; }
  .app-shell header #appLangSelect { font-size: 11px; min-height: 36px; }
  .table-view-tools { padding: 7px 14px; gap: 6px; }
  .table-view-caption { font-size: 10px; }
  .table-density-options button span[data-i18n] { display: none; }
  .app-shell .table-density-options button { min-height: 32px; width: 36px; }
  .map-view-controls { right: 9px; top: 9px; padding: 3px; gap: 2px; }
  .app-shell .map-view-controls button { padding: 8px; font-size: 10px; gap: 5px; }
  html[data-page="monitoring"] #monitorListPanel { min-height: 180px; flex-basis: 44%; }
  .auth-layout { display: block; }
  .auth-story { padding: 24px; }
  .auth-story-copy h1 { font-size: 27px; letter-spacing: -.8px; }
  .auth-side { padding: 70px 16px 24px; }
  .auth-card { padding: 26px 22px; border-radius: 18px; max-width: 440px; }
  .auth-card h2 { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Contextual guidance stays close to the action and leaves the work area free. */
.workspace-heading { position: relative; z-index: 50; }
.app-shell > header { position: relative; z-index: 60; }
.app-shell > main { z-index: 0; }
.workflow-guide { position: relative; color: #334d30; }
.workflow-guide summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; border: 1px solid #cfdbc9; border-radius: 10px; padding: 10px 13px; min-height: 40px; font-size: 12px; font-weight: 600; background: #f7faf4; }
.workflow-guide summary::-webkit-details-marker { display: none; }
.workflow-guide summary:hover, .workflow-guide[open] summary { background: #eaf3e3; border-color: #91aa80; }
.workflow-guide-panel { position: absolute; z-index: 300; top: calc(100% + 10px); right: 0; width: 350px; max-width: calc(100vw - 28px); padding: 20px; border: 1px solid #d6e0ce; border-radius: 16px; background: #fff; box-shadow: 0 12px 40px #233c2320; }
.workflow-guide-intro { display: block; line-height: 1.5; font-size: 13px; font-weight: 600; color: #294a25; }
.workflow-steps { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 16px; }
.workflow-steps li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; font-size: 12px; line-height: 1.55; color: #475647; }
.workflow-steps i { margin-top: 3px; color: #487b38; }
.app-shell .workflow-start { width: 100%; margin-top: 18px; padding: 10px; background: #345c2b; color: #fff; border: 0; border-radius: 9px; font-weight: 600; }
.transit-form-feedback { margin: 12px; padding: 12px 14px; border-radius: 10px; background: #fff3ee; border: 1px solid #e9b59c; color: #843916; font-size: 13px; line-height: 1.5; }
.transit-form-feedback[hidden], .transit-list-feedback[hidden] { display: none; }
.transit-form-progress { margin: 0 12px 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.transit-form-progress > span { display: inline-flex; align-items: center; gap: 6px; border-radius: 8px; padding: 7px 9px; color: #52644c; background: #f2f5ee; font-size: 11px; }
.transit-form-progress > span[data-ready="true"] { color: #2f5d25; background: #e4f1dc; }
.app-shell #modal [aria-invalid="true"] { border: 2px solid #b45129; background: #fff9f5; }
.transit-list-feedback { padding: 12px; font-size: 12px; line-height: 1.5; background: #f3f6ef; color: #465542; }
.transit-list-feedback[role="alert"] { background: #fff3ee; color: #843916; }
.app-shell .transit-list-feedback button { margin-left: 8px; text-decoration: underline; font-weight: 600; }
.form-label-icon { margin-right: 7px; color: #526b47; }
.paged-list { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 10px 14px; border-top: 1px solid #dce5d6; background: #f7faf4; color: #475844; font-size: 11px; }
.paged-list[hidden], .paged-list button[hidden], .paged-list small[hidden] { display: none; }
.app-shell .paged-list button { border: 1px solid #bfceb5; border-radius: 8px; background: #fff; color: #315c27; padding: 8px 12px; font-weight: 600; }
.paged-list small { flex-basis: 100%; font-size: 11px; line-height: 1.4; }
.paged-list small[role="alert"] { color: #843916; }
@media (max-width: 639px) {
  .workspace-heading { flex-wrap: wrap; }
  .workspace-tools { width: 100%; margin-top: 10px; justify-content: flex-end; }
  .workflow-guide { position: static; }
  .workspace-heading { position: relative; }
  .workflow-guide-panel { top: 100%; right: 8px; }
}

/* Daylight collection — generated photography, readable event types, light navigation. */
:root { --canvas: #f5f7f8; --ink: #203a36; --muted: #60736f; --line: #e3eae8; --brand: #25715c; --accent: #25715c; }
.app-shell > header { background: #fff; border-bottom-color: #e6edeb; }
.app-shell .workspace-heading { padding-top: 25px; padding-bottom: 23px; }
.workspace-heading h1 { font-size: 29px; letter-spacing: -.9px; }
.workspace-eyebrow { letter-spacing: .6px; color: #657c75; }
.workspace-heading p { color: #61736f; }
.app-shell > main { border-radius: 18px; box-shadow: 0 4px 28px #203a3605; }
.app-shell #sidebar { background: #fdfefe; }
.app-shell .modern-table th { color: #5c726c; background: #f8faf9; font-size: 11px; }
.app-shell .modern-table td { color: #354e47; border-color: #edf1ef; }
.app-shell .modern-table tbody tr:nth-child(even) { background: #fff; }
.app-shell .modern-table tbody tr:hover { background: #f0f8f4; }
.app-shell button[class*="bg-[#2d7a5f]"], .app-shell button[class*="bg-[#4d7"], .app-shell button[class*="bg-[#4d86"] { background: #25715c; }
.app-shell #mobileMenuContent { background: #fff; border-right-color: var(--line); color: var(--ink); }
.app-shell #mobileMenuContent > div { border-color: var(--line); background: #f8faf9; }
.app-shell #mobileMenuContent [class*="text-white"] { color: #435f55; }
.app-shell #mobileMenuContent nav a { color: #536c63; }
.app-shell #mobileMenuContent nav a:hover { background: #f0f7f4; color: #235b47; }
.app-shell #mobileMenuContent nav a[aria-current="page"] { color: #21634f; background: #eaf5ee; border-left-color: #378167; }
.navigation-photo { width: 100%; height: 112px; object-fit: cover; object-position: 72% 70%; border-radius: 12px; margin-bottom: 14px; border: 1px solid #e2eae6; }
.navigation-footer { color: #687d72; border-top: 1px solid #e5ece8; padding: 16px 10px 0; }
.navigation-footer strong { color: #304f40; }
.navigation-label { color: #698071; }
@media (min-width:1280px) {
  .app-shell::before { background: #fff; border-right: 1px solid #e4ebe7; }
  .app-shell > header .app-brand { color: #244a3b; }
  .app-shell header nav a { color: #53695f; border-radius: 11px; padding: 14px; }
  .app-shell header nav a:hover { color: #23563f; background: #f2f7f3; }
  .app-shell header nav a[aria-current="page"] { color: #215f48; background: #eaf5ee; border-color: #dfede3; }
  .app-shell header nav a[aria-current="page"]::after { background: #3f8c66; }
}
@media (min-width:1024px) and (max-width:1279px) {
  .app-shell header nav a { color: #526b60; }
  .app-shell header nav a:hover, .app-shell header nav a[aria-current="page"] { color: #235c43; background: #edf6ef; box-shadow: none; }
}
@media (max-height:740px) { .navigation-photo { height: 72px; } }
@media (max-height:620px) { .navigation-footer { display:none; } }

/* The picture remains decorative; all copy and controls are selectable HTML. */
.auth-page { background: #fff; }
.auth-layout { padding: 18px; gap: 18px; grid-template-columns: minmax(0,1.15fr) minmax(430px,.85fr); }
.auth-story { background: #edf3ef; border-radius: 24px; padding: 38px 44px; color: #203f35; min-height: 740px; }
.auth-story::before { background: linear-gradient(180deg,#f4f7f2 0%,#f4f7f2 31%,#f4f7f2e6 39%,#f4f7f200 66%), url('img/visuals/transit-daylight.webp') right bottom / auto 78% no-repeat; opacity: 1; }
.auth-story::after { display: none; }
.auth-story .app-brand { color: #204331; }
.auth-story-copy { margin: 44px 0 auto; max-width: 540px; }
.auth-story-copy h1 { color: #204536; font-size: clamp(36px,3.6vw,56px); max-width: 540px; line-height: 1.1; letter-spacing: -2px; font-weight: 600; }
.auth-kicker { color: #547662; letter-spacing: 1.8px; margin-bottom: 16px; }
.auth-story-copy > p:last-of-type { color: #526c5d; font-size: 15px; line-height: 1.7; max-width: 430px; }
.auth-features { margin-top: 22px; gap: 8px; }
.auth-features > span { color: #365b46; border: 1px solid #cdded2; background: #ffffffd9; padding: 9px 11px; font-size: 11px; }
.auth-features i { color: #478467; }
.auth-story-foot { color: #294737; background: #ffffffeb; border: 1px solid #dbe6dc; border-radius: 8px; padding: 8px 12px; width: fit-content; font-size: 11px; }
.auth-side { background: #fff; padding-left: 32px; padding-right: 32px; }
.auth-card { border: 0; box-shadow: none; border-radius: 0; padding: 28px 14px; max-width: 410px; }
.auth-card h2 { font-size: 32px; color: #233c31; }
.auth-card-icon { color: #32735c; background: #eef6f1; width: 56px; height: 56px; border-color: #dfece3; border-radius: 17px; }
.auth-card-intro, .auth-note, .auth-options { color: #61756b; }
.auth-field > label { color: #425b4d; }
.auth-input-wrap input { border-color: #dce5df; background: #fdfefd; height: 52px; }
.auth-submit { background: #25715c; height: 52px; margin-top: 4px; box-shadow: 0 5px 12px #25715c17; }
.auth-submit:hover { background: #1d5e4b; }
.auth-help { color: #3c7860; }
.auth-input-wrap > i, .auth-input-wrap button { color: #758b7d; }

/* One shared atlas: all nine photographic icons require a single small request. */
.event-art { width: 52px; height: 52px; flex: 0 0 52px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background-color: #fff; vertical-align: middle; color: #387b65; font-size: 26px; }
.event-art--photo { background-image: url('img/visuals/event-atlas.webp'); background-size: 300% 300%; background-repeat: no-repeat; }
.event-art--small { width: 36px; height: 36px; flex-basis: 36px; border-radius: 8px; font-size: 18px; }
.event-art--large { width: 84px; height: 84px; flex-basis: 84px; border-radius: 16px; font-size: 34px; }
.event-label { display: inline-flex; gap: 10px; align-items: center; min-width: 0; text-align: left; }
.event-label-title { font-size: 13px; font-weight: 600; color: #334d43; line-height: 1.45; overflow-wrap: anywhere; }
.event-priority { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 6px; color: #4d625a; background: #f0f4f2; font-size: 10px; line-height: 1.4; font-weight: 600; white-space: nowrap; }
.event-priority::before { content:''; width: 5px; height: 5px; border-radius:50%; background:currentColor; flex-shrink:0; }
.event-priority[data-priority="high"] { color: #a83e39; background: #fff0ed; }
.event-priority[data-priority="medium"] { color: #93611c; background: #fff6e3; }
.event-priority[data-priority="low"] { color: #356b55; background: #edf6f0; }
.app-shell #notifyEventTypesContainer .event-filter-option { display:flex; align-items:center; gap:9px; padding:5px 6px; margin:0; border-radius:9px; min-height:46px; }
.app-shell #notifyEventTypesContainer .event-filter-option:hover { background: #f1f7f4; }
.app-shell #notifyEventTypesContainer .event-filter-option:has(input:checked) { background: #f7faf8; }
.event-filter-option .event-label { gap: 6px; }
.event-filter-option .event-label-title { font-size: 12px; font-weight: 500; }
.notification-overview { display:flex; flex:0 0 auto; align-items:center; gap:24px; padding:20px; border-bottom:1px solid var(--line); background:linear-gradient(110deg,#f1f8f4,#fff 70%); }
.notification-overview-copy { display:flex; flex-direction:column; gap:5px; flex:1; }
.notification-overview-copy strong { color:#315746; font-size:17px; font-weight:650; letter-spacing:-.3px; }
.notification-overview-copy > span { font-size:12px; color:#637b6c; }
.notification-overview-stats { display:flex; gap:22px; }
.notification-overview-stats > div { display:flex; flex-direction:column; gap:4px; }
.notification-overview-stats b { font-size:23px; line-height:1.1; color:#325f49; font-weight:600; }
.notification-overview-stats span { font-size:10px; color:#62776a; white-space:nowrap; }
.app-shell .event-guide-button { padding:10px 13px; background:#fff; border:1px solid #d9e6dc; color:#38634b; font-size:11px; white-space:nowrap; min-height:40px; }
.app-shell .event-guide-button:hover { background:#edf7f0; border-color:#8eb29a; }
html[data-page="notifications"] main > section > div:has(> #notificationsQuickSearch), html[data-page="notifications"] main > section > div:has(#notificationsQuickSearch) { padding:16px 20px; background:#fff; }
.app-shell #notificationsTableBody td:nth-child(4) { min-width:205px; }
.app-shell #notificationsTableBody td:last-child { color:#697e75; font-size:12px; }
.app-shell .modern-table .notification-empty { padding:50px 24px; }
.notification-empty > i { display:block; font-size:34px; margin-bottom:15px; color:#7d9d8b; }
.event-advice { padding:14px 16px; background:#eff7f2; border:1px solid #dcebe1; border-radius:10px; color:#526d5d; margin-top:10px; font-size:12px; line-height:1.6; }
.event-advice strong { color:#315d44; font-weight:600; }
.event-advice p { margin:5px 0 0; }
#notifyDetailEvent { background:#fff; border-radius:12px; padding:12px; color:#365745; }
#notifyDetailEvent .event-label-title { font-size:16px; }
#notifyDetailPriority { display:inline-flex; }
#modalMessageCard [class*="animate-pulse"] { display:none; }
#modalMessageCard [class*="bg-rose-50"]:has(#notifyDetailPriority) { background:transparent; border:0; padding:0; }
#modalMessageCard > div { max-height:calc(100dvh - 32px); }
#modalMessageCard > div > div:first-child { gap:12px; }
#modalMessageCard > div > div:first-child > div { min-width:0; }
#modalMessageCard > div > div:first-child h3 { line-height:1.5; }
#modalMessageCard > div > div:first-child > button { flex:0 0 36px; width:36px; height:36px; }
.app-shell #modalMessageCard > div > div:first-child { background:#f1f7f3; color:#315a45; border-bottom:1px solid #dfeae3; }
.app-shell #modalMessageCard > div > div:first-child i { color:#53856b; }
#notificationSyncStatus { border-color:#dce8df !important; border-radius:16px !important; box-shadow:0 12px 48px #203a3621 !important; }
.event-toast-row .event-label { gap:7px; }
.event-toast-row > div { padding-left:43px; color:#617268; }
.event-guide-dialog { position:fixed; inset:0; margin:auto; width:min(900px,calc(100vw - 32px)); max-height:calc(100dvh - 48px); padding:26px; border:1px solid #e0e9e2; border-radius:22px; background:#f8faf8; color:#294836; box-shadow:0 24px 90px #18332633; overflow:auto; }
.event-guide-dialog::backdrop { background:#203c3559; backdrop-filter:blur(5px); }
.event-guide-head { display:flex; align-items:center; justify-content:space-between; gap:20px; position:sticky; top:-26px; z-index:1; background:#f8faf8; padding:10px 0; }
.event-guide-head h2 { font-size:26px; font-weight:600; letter-spacing:-.7px; margin:0; }
.app-shell .event-guide-close { flex:0 0 38px; width:38px; height:38px; background:#eaf0ec; color:#496755; font-size:25px; border:0; }
.event-guide-intro { font-size:13px; line-height:1.7; color:#617666; max-width:600px; margin:10px 0 22px; }
.event-guide-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.event-guide-card { padding:18px; border:1px solid #e1e9e3; border-radius:14px; background:#fff; }
.event-guide-card h3 { font-size:14px; line-height:1.4; font-weight:600; margin:10px 0 7px; }
.event-guide-card p { font-size:12px; line-height:1.65; color:#65796b; margin:0; }
.seal-event .event-art.seal-event-icon { padding:0; background-color:#fff; border-radius:12px; }
.seal-event .event-art--photo.seal-event-icon { background-image:url('img/visuals/event-atlas.webp'); background-size:300% 300%; }
@media (max-width:1023px) {
  .notification-overview { gap:16px; padding:16px; flex-wrap:wrap; }
  .notification-overview-copy { flex:1 1 200px; }
  .notification-overview-copy > span { display:none; }
  .notification-overview-stats { gap:18px; }
  .notification-overview-stats b { font-size:20px; }
  .app-shell #notificationsTableBody td:nth-child(4) { min-width:0; }
  .app-shell #notificationsTableBody td:nth-child(4) .event-label { flex:1; }
}
@media (max-width:960px) {
  #modalMessageCard > div > div:nth-child(2) { display:block; flex:1; min-height:0; overflow:auto; }
  #modalMessageCard > div > div:nth-child(2) > div { width:100%; max-height:none; overflow:visible; border-left:0; }
  .auth-layout { padding:10px; display:block; }
  .auth-story { min-height:240px; padding:22px; border-radius:18px; }
  .auth-story::before { background:linear-gradient(90deg,#eff5effa 0%,#eff5eff2 38%,#eff5ef22 100%),url('img/visuals/transit-daylight.webp') right bottom / auto 100% no-repeat; }
  .auth-story-copy { margin:26px 0 0; }
  .auth-story-copy h1 { max-width:260px; font-size:30px; letter-spacing:-.8px; }
  .auth-story-copy .auth-kicker, .auth-story-copy > p:last-of-type, .auth-features, .auth-story-foot { display:none; }
  .auth-side { padding:66px 16px 24px; }
  .auth-card { padding:8px 6px; max-width:440px; }
  .auth-card h2 { font-size:28px; }
  .auth-language { right:16px; top:18px; }
  .event-guide-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:639px) {
  .app-shell .workspace-heading { padding:18px 14px 14px; }
  .workspace-heading h1 { font-size:24px; }
  .notification-overview { padding:14px; gap:12px; }
  .notification-overview-copy { flex:1 1 100%; }
  .notification-overview-copy strong { font-size:15px; }
  .notification-overview-stats { flex:1; gap:22px; }
  .app-shell .event-guide-button { padding:8px 10px; }
  .event-guide-dialog { padding:18px; width:calc(100vw - 20px); max-height:calc(100dvh - 24px); border-radius:16px; }
  .event-guide-head h2 { font-size:22px; }
  .event-guide-grid { gap:8px; }
  .event-guide-card { padding:12px; }
  .event-guide-card h3 { font-size:12px; }
  .event-guide-card p { font-size:12px; }
  .event-guide-head { top:-18px; }
  .event-art--large { width:68px; height:68px; flex-basis:68px; }
  #notificationsTableBody .event-art { width:44px; height:44px; flex-basis:44px; }
  .app-shell #notificationsTableBody { padding:6px; }
  .app-shell #notificationsTableBody tr { gap:10px; margin:8px; }
  .app-shell #notificationsTableBody td:nth-child(2) { padding-right:64px; font-size:13px; color:#526a5b; }
  .app-shell #notificationsTableBody td:nth-child(3) { grid-column:1; grid-row:3; }
  .app-shell #notificationsTableBody td:nth-child(4) { grid-column:1 / -1; grid-row:2; }
  .app-shell #notificationsTableBody td:nth-child(4)::before { display:none; }
  .app-shell #notificationsTableBody td:nth-child(4) .event-label-title { font-size:14px; }
  .app-shell #notificationsTableBody td:nth-child(5) { grid-column:2; grid-row:3; }
  .app-shell #notificationsTableBody td:nth-child(6) { grid-column:1 / -1; }
}
@media (prefers-reduced-motion:reduce) { .app-shell .event-guide-button { transition:none; } }