:root {
  color-scheme: dark;
  --bg: #07111d;
  --surface: #0f1b29;
  --surface-raised: #142334;
  --surface-muted: #18283a;
  --surface-dark: #07111d;
  --surface-dark-2: #10243a;

  --ink: #e7eef7;
  --ink-soft: #9fb0c3;
  --ink-faint: #718399;
  --line: #26384b;
  --line-strong: #36506a;

  --blue: #4b9bd8;
  --blue-strong: #68afe4;
  --blue-soft: #122f49;

  --amber: #e7a63b;
  --amber-soft: #3a2a12;
  --green: #4fc78a;
  --green-soft: #123524;
  --red: #ff7166;
  --red-soft: #3d1c1d;
  --violet: #a991ff;
  --violet-soft: #272044;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.24), 0 1px 5px rgba(0,0,0,.16);
  --shadow-md: 0 10px 28px rgba(0,0,0,.26);
  --shadow-lg: 0 24px 54px rgba(0,0,0,.40);

  --control-h: 42px;
  --transition: 160ms ease;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(31,95,153,.07), transparent 32rem),
    var(--bg);
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
h1, h2, h3 { font-family: 'Space Grotesk', 'IBM Plex Sans', sans-serif; margin: 0; color: var(--ink); }
.mono { font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace; }

.shell, .app-shell {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 20px 0 72px;
}
.app-content { min-width: 0; }

/* ---------- App header ---------- */
.titleblock, .app-header {
  position: relative;
  overflow: visible;
  border: 0;
  border-radius: var(--radius-lg);
  padding: 17px 18px;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, var(--surface-dark), var(--surface-dark-2));
  color: #fff;
  gap: 16px;
  box-shadow: var(--shadow-md);
}
.titleblock::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, #4fa3e3, #73c7f2);
  opacity: .95;
}
.titleblock .eyebrow {
  font-size: 10px;
  font-weight: 700;
  color: #93b7d8;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.titleblock .title {
  font-size: clamp(17px, 2.2vw, 21px);
  line-height: 1.2;
  font-weight: 700;
  margin-top: 3px;
  color: #fff;
}
.titleblock .status-pill { color: #c7d7e7; }
.status-pill {
  font-size: 11px;
  font-family: 'IBM Plex Mono', monospace;
  white-space: nowrap;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}
.status-pill.offline { color: #ffd7d2; background: rgba(180,35,24,.22); }
.status-pill.queued { color: #ffe6b6; background: rgba(168,100,8,.22); }
.titleblock .btn.secondary {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.18);
  color: #fff;
}
.titleblock .btn.secondary:hover { background: rgba(255,255,255,.16); }
.titleblock .project-switch > .mono { color: #9fb3c8 !important; }
.app-header-brand { display:flex; align-items:center; gap:14px; min-width:0; }
.company-logo-wrap { width:150px; height:58px; display:flex; align-items:center; justify-content:flex-start; flex:0 0 auto; overflow:hidden; }
.company-logo { display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; filter:drop-shadow(0 1px 1px rgba(0,0,0,.45)) drop-shadow(0 0 1px rgba(255,255,255,.9)); }
.company-logo-settings-preview { min-height:82px; padding:12px; margin-bottom:10px; border:1px solid var(--line); border-radius:10px; background:linear-gradient(90deg,#fff 0 50%,#111827 50%); display:flex; align-items:center; justify-content:center; }
.company-logo-settings-preview img { max-width:min(420px,90%); max-height:90px; object-fit:contain; }


/* ---------- Primary navigation ---------- */
.tabs, .app-nav {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 0 20px;
  padding: 6px;
  background: rgba(255,255,255,.88);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(12px);
}
.tabs::-webkit-scrollbar { display: none; }
.tab-btn {
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font-weight: 650;
  font-size: 13px;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 9px;
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
  font-family: inherit;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.tab-btn:hover { background: var(--surface-muted); color: var(--ink); }
.tab-btn.active {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 4px 12px rgba(31,95,153,.22);
}

/* ---------- Cards & sections ---------- */
.module-menu-dropdown {
  position: fixed;
  top: 60px;
  right: 8px;
  z-index: 200;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  padding: 10px;
  min-width: 230px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.module-menu-dropdown > button,
.module-menu-dropdown > select {
  width: 100%;
  text-align: left;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}
.record-card {
  position: relative;
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.record-card:hover {
  border-color: var(--line-strong);
  box-shadow: 0 7px 20px rgba(15,29,45,.07);
}
.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin: 2px 0 14px;
  gap: 12px;
}
.section-header h2 {
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.2;
  letter-spacing: -.015em;
}
.subtitle {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-soft);
  margin-top: 3px;
}

/* ---------- Buttons ---------- */
.btn {
  min-height: var(--control-h);
  border: 1px solid transparent;
  background: var(--blue);
  color: #fff;
  border-radius: 9px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 650;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 1px 1px rgba(15,29,45,.04);
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.btn:hover { background: var(--blue-strong); box-shadow: 0 4px 10px rgba(31,95,153,.16); }
.btn:active { transform: translateY(1px); }
.btn.secondary {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn.secondary:hover { background: var(--surface-muted); border-color: var(--line-strong); box-shadow: none; }
.btn.danger {
  background: var(--surface);
  color: var(--red);
  border-color: #efb8b2;
}
.btn.danger:hover { background: var(--red-soft); border-color: #e89d95; box-shadow: none; }
.btn:disabled { opacity: .45; cursor: default; transform: none; box-shadow: none; }
.compact-btn, .icon-btn {
  min-height: 34px !important;
  height: 34px;
  padding: 6px 10px !important;
}
.icon-btn { min-width: 36px; }
.link-btn {
  background: none;
  border: 0;
  color: var(--blue);
  font-weight: 650;
  cursor: pointer;
  padding: 0;
  font-size: 13px;
  font-family: inherit;
}

/* ---------- Form system ---------- */
.field { display: block; margin-bottom: 13px; }
.field .label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .065em;
}
input, select, textarea {
  width: 100%;
  min-height: var(--control-h);
  box-sizing: border-box;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  padding: 9px 11px;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
  background: var(--surface);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
textarea { min-height: 84px; resize: vertical; line-height: 1.45; }
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
input:hover, select:hover, textarea:hover { border-color: var(--line-strong); }
input:focus, select:focus, textarea:focus {
  border-color: #6e9fca;
  box-shadow: 0 0 0 3px rgba(31,95,153,.11);
}
input[type="checkbox"], input[type="radio"] {
  width: auto;
  min-height: 0;
  accent-color: var(--blue);
  flex-shrink: 0;
}

/* ---------- Tags / chips ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 650;
  color: var(--blue);
  background: var(--blue-soft);
  padding: 5px 8px;
  border-radius: 7px;
  border: 1px solid rgba(31,95,153,.12);
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 28px;
  font-size: 11.5px;
  line-height: 1.25;
  font-weight: 700;
  padding: 5px 9px;
  border-radius: 999px;
  white-space: normal;
  overflow-wrap: anywhere;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
}
.chip.grey { color: var(--ink-soft); background: var(--surface-muted); border-color: var(--line); }
.chip.amber { color: #8c5608; background: var(--amber-soft); border-color: #f5ddb1; }
.chip.green { color: #146c44; background: var(--green-soft); border-color: #ccebdc; }
.chip.blue { color: #175ea8; background: #e8f2ff; border-color: #b9d7f7; }
.chip.red { color: #a1281f; background: var(--red-soft); border-color: #f3cfcb; }
.type-chip { background: var(--violet-soft); color: var(--violet); border-color: #e0d5ff; }
.location-chip { background: var(--blue-soft); color: var(--blue); border-color: #d8e8f6; }
.record-equipment-tag { font-size: 12px; padding: 5px 8px; }

/* ---------- Shared record-card anatomy ---------- */
.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.record-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.record-header-main {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  flex: 1 1 auto;
  min-width: 0;
}
.record-title { flex: 1 1 auto; min-width: 0; }
.record-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
  flex: 0 0 auto;
}
.record-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.record-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}
.record-card .tag,
.record-card .record-chip {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.35;
}
.collapse-toggle { cursor: pointer; min-width: 0; }
.collapse-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 6px;
  transition: transform .15s, background var(--transition);
  color: var(--ink-soft);
  font-size: 11px;
}
.collapse-toggle:hover .collapse-chevron { background: var(--surface-muted); }
.collapse-chevron.open { transform: rotate(90deg); }

/* ---------- Progress ---------- */
.bar-track {
  background: var(--line);
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width .35s ease;
}

/* ---------- Dashboard ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 16px;
  min-width: 0;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.stat-card[style*="cursor:pointer"]:hover {
  border-color: var(--line-strong);
  box-shadow: 0 7px 18px rgba(15,29,45,.07);
  transform: translateY(-1px);
}
.stat-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: .055em;
}
.stat-value {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 30px;
  line-height: 1;
  font-weight: 700;
  margin-top: 8px;
  letter-spacing: -.02em;
}
.stat-sub { font-size: 12px; color: var(--ink-soft); margin-top: 4px; }

/* ---------- Menus ---------- */
.project-switch { position: relative; }
.project-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  margin-top: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  z-index: 50;
  min-width: min(290px, calc(100vw - 32px));
  padding: 7px;
}
.project-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink);
  font-family: inherit;
}
.project-menu button:hover { background: var(--surface-muted); }

/* ---------- Attachments ---------- */
.attachment-thumb {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 5px 8px;
  font-size: 12px;
  margin: 5px 5px 0 0;
  background: var(--surface-muted);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.attachment-thumb:hover { border-color: #9bb9d7; background: var(--blue-soft); color: var(--blue); }
.attachment-thumb img { width: 32px; height: 32px; object-fit: cover; border-radius: 6px; }

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7,18,30,.62);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}
.modal-overlay.hidden { display: none; }
.modal-box {
  position: relative;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.5);
  border-radius: var(--radius-lg);
  max-width: 520px;
  width: 100%;
  max-height: 88vh;
  overflow: auto;
  padding: 24px 20px 20px;
  box-shadow: var(--shadow-lg);
}
.modal-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: var(--surface-muted);
  font-size: 16px;
  cursor: pointer;
  color: var(--ink-soft);
}

/* ---------- Authentication ---------- */
.auth-wrap {
  width: min(420px, calc(100% - 32px));
  margin: min(12vh, 100px) auto;
  padding: 0;
}
.auth-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 30px 26px;
  box-shadow: var(--shadow-lg);
}
.auth-card::before {
  content: "QC";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 20px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--surface-dark), var(--blue));
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .05em;
}
.auth-title { font-size: 25px; font-weight: 700; margin-bottom: 5px; }
.auth-sub { font-size: 13px; line-height: 1.45; color: var(--ink-soft); margin-bottom: 21px; }
.auth-error { background: var(--red-soft); color: var(--red); font-size: 13px; padding: 9px 11px; border-radius: 9px; margin-bottom: 13px; }

/* ---------- Choice chips ---------- */
.chip-option { position: relative; display: inline-flex; }
.chip-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip-option-label {
  padding: 7px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
  background: var(--surface);
  color: var(--ink);
  user-select: none;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.chip-option input:checked + .chip-option-label { background: var(--blue); color: #fff; border-color: var(--blue); }
.chip-option input:focus-visible + .chip-option-label { outline: 3px solid rgba(31,95,153,.16); outline-offset: 1px; }



/* ---------- Appearance themes ---------- */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #eef2f7;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-muted: #f6f8fb;
  --surface-dark: #0f1d2d;
  --surface-dark-2: #16283d;

  --ink: #152235;
  --ink-soft: #64748b;
  --ink-faint: #94a3b8;
  --line: #dce4ee;
  --line-strong: #cbd5e1;

  --blue: #1f5f99;
  --blue-strong: #174b7a;
  --blue-soft: #e8f1fa;

  --amber: #a86408;
  --amber-soft: #fff2d8;
  --green: #16794b;
  --green-soft: #e7f7ef;
  --red: #b42318;
  --red-soft: #fdecea;
  --violet: #6d4cc7;
  --violet-soft: #f0ebff;

  --shadow-sm: 0 1px 2px rgba(15,29,45,.05), 0 1px 4px rgba(15,29,45,.04);
  --shadow-md: 0 8px 24px rgba(15,29,45,.08);
  --shadow-lg: 0 22px 48px rgba(15,29,45,.16);
}

html[data-theme="dark"] body {
  background:
    radial-gradient(circle at top left, rgba(75,155,216,.11), transparent 34rem),
    linear-gradient(180deg, #07111d 0%, #091522 100%);
}

html[data-theme="light"] body {
  background:
    radial-gradient(circle at top left, rgba(31,95,153,.07), transparent 32rem),
    var(--bg);
}

html[data-theme="dark"] .titleblock,
html[data-theme="dark"] .app-header {
  background: linear-gradient(135deg, #08131f, #10273d);
  border: 1px solid #20374e;
}

html[data-theme="dark"] .tabs,
html[data-theme="dark"] .app-nav {
  background: rgba(15,27,41,.94);
  border-color: var(--line);
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .modal-box,
html[data-theme="dark"] .project-menu {
  background: linear-gradient(180deg, var(--surface-raised), var(--surface));
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: #0b1724;
  color: var(--ink);
  border-color: var(--line-strong);
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
  background: #0d1b2a;
  border-color: #579ed4;
  box-shadow: 0 0 0 3px rgba(75,155,216,.16);
}

html[data-theme="dark"] .btn.secondary {
  background: #142334;
  color: var(--ink);
  border-color: var(--line-strong);
}

html[data-theme="dark"] .btn.secondary:hover {
  background: #1a2d42;
}

html[data-theme="dark"] .btn.danger {
  background: #1c2028;
}

html[data-theme="dark"] .attachment-thumb {
  background: var(--surface-muted);
}

html[data-theme="dark"] .chip.grey {
  color: #b7c4d2;
}

html[data-theme="dark"] .type-chip {
  color: #c0afff;
}

html[data-theme="dark"] .location-chip {
  color: #8dc4ee;
}

html[data-theme="dark"] .record-card:hover {
  border-color: #3a5874;
  box-shadow: 0 8px 22px rgba(0,0,0,.22);
}

/* Account Settings appearance selector */
.theme-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.theme-choice {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr 22px;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 72px;
  padding: 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  color: var(--ink);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.theme-choice:hover {
  border-color: var(--blue);
}
.theme-choice.active {
  border-color: var(--blue);
  background: var(--blue-soft);
  box-shadow: 0 0 0 2px rgba(75,155,216,.10);
}
.theme-choice strong {
  display: block;
  font-size: 13px;
  margin-bottom: 3px;
}
.theme-choice small {
  display: block;
  color: var(--ink-soft);
  font-size: 11px;
}
.theme-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 12px;
  opacity: 0;
}
.theme-choice.active .theme-check { opacity: 1; }

.theme-preview {
  width: 56px;
  height: 45px;
  border-radius: 8px;
  padding: 7px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid rgba(127,145,165,.28);
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
}
.theme-preview span {
  display: block;
  height: 5px;
  border-radius: 999px;
}
.dark-preview { background: #08131f; }
.dark-preview span:nth-child(1) { width: 75%; background: #4b9bd8; }
.dark-preview span:nth-child(2) { width: 95%; background: #314961; }
.dark-preview span:nth-child(3) { width: 58%; background: #23384d; }
.light-preview { background: #f4f7fa; }
.light-preview span:nth-child(1) { width: 75%; background: #1f5f99; }
.light-preview span:nth-child(2) { width: 95%; background: #d2dce7; }
.light-preview span:nth-child(3) { width: 58%; background: #e1e7ee; }

@media (max-width: 520px) {
  .theme-picker { grid-template-columns: 1fr; }
}

@media print {
  html[data-theme="dark"],
  html[data-theme="light"] {
    color-scheme: light;
  }
}



/* ---------- Blackout theme ---------- */
html[data-theme="blackout"] {
  color-scheme: dark;
  --bg: #000000;
  --surface: #050505;
  --surface-raised: #090909;
  --surface-muted: #111111;
  --surface-dark: #000000;
  --surface-dark-2: #050505;

  --ink: #ffffff;
  --ink-soft: #d6d6d6;
  --ink-faint: #a5a5a5;
  --line: #232323;
  --line-strong: #3a3a3a;

  --blue: #63b8ff;
  --blue-strong: #8bcbff;
  --blue-soft: #0b2436;

  --amber: #ffc65c;
  --amber-soft: #352400;
  --green: #63dda0;
  --green-soft: #08261a;
  --red: #ff7b72;
  --red-soft: #321011;
  --violet: #c4adff;
  --violet-soft: #22193c;

  --shadow-sm: 0 1px 2px rgba(255,255,255,.03);
  --shadow-md: 0 10px 28px rgba(0,0,0,.8);
  --shadow-lg: 0 24px 54px rgba(0,0,0,.9);
}

html[data-theme="blackout"] body {
  background: #000000;
  color: #ffffff;
}

html[data-theme="blackout"] .titleblock,
html[data-theme="blackout"] .app-header,
html[data-theme="blackout"] .tabs,
html[data-theme="blackout"] .app-nav,
html[data-theme="blackout"] .card,
html[data-theme="blackout"] .stat-card,
html[data-theme="blackout"] .auth-card,
html[data-theme="blackout"] .modal-box,
html[data-theme="blackout"] .project-menu {
  background: #050505;
  border-color: #292929;
}

html[data-theme="blackout"] input,
html[data-theme="blackout"] select,
html[data-theme="blackout"] textarea {
  background: #000000;
  color: #ffffff;
  border-color: #3a3a3a;
}

html[data-theme="blackout"] .btn.secondary {
  background: #0b0b0b;
  color: #ffffff;
  border-color: #3a3a3a;
}

html[data-theme="blackout"] .btn.secondary:hover {
  background: #151515;
}

html[data-theme="blackout"] .attachment-thumb {
  background: #101010;
}

.blackout-preview { background: #000000; }
.blackout-preview span:nth-child(1) { width: 75%; background: #ffffff; }
.blackout-preview span:nth-child(2) { width: 95%; background: #555555; }
.blackout-preview span:nth-child(3) { width: 58%; background: #2f2f2f; }

/* Inspector queue status chips */
.inspector-queue-item {
  align-items: center;
  gap: 12px;
}
.inspector-queue-copy {
  flex: 1 1 auto;
  min-width: 0;
}
.inspector-queue-status {
  flex: 0 0 auto;
}
.inspector-queue-status .chip {
  white-space: nowrap;
  min-width: max-content;
}
.inspector-queue-status .chip.amber {
  color: #5b3700;
  background: #ffd991;
  border-color: #ffe6b8;
}
html[data-theme="dark"] .inspector-queue-status .chip.amber,
html[data-theme="blackout"] .inspector-queue-status .chip.amber {
  color: #14100a;
  background: #f5c96d;
  border-color: #ffe5a7;
}

/* Linked item tag uses informational cyan/teal, not success/warning/danger */
.linked-chip {
  color: #0d6971;
  background: #dff7f8;
  border-color: #b9e9ec;
}
html[data-theme="dark"] .linked-chip,
html[data-theme="blackout"] .linked-chip {
  color: #8cebf1;
  background: #0b3136;
  border-color: #17525a;
}

@media (max-width: 520px) {
  .inspector-queue-item {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .inspector-queue-copy {
    flex: 1 1 calc(100% - 104px);
  }
  .inspector-queue-status {
    margin-left: auto;
  }
}

@media (max-width: 360px) {
  .inspector-queue-copy {
    flex-basis: 100%;
  }
  .inspector-queue-status {
    margin-left: 0;
  }
}

/* ---------- Responsive ---------- */
@media (min-width: 900px) {
  .app-content { padding: 0 2px; }
  .card { padding: 18px; }
}

@media (max-width: 820px) {
  .shell, .app-shell {
    width: min(100% - 20px, 760px);
    padding-top: 10px;
  }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .record-header { align-items: flex-start; }
}

@media (max-width: 640px) {
  :root { --control-h: 44px; }
  body { background: var(--bg); }
  .shell, .app-shell {
    width: 100%;
    /* Reserve permanent clearance for the thumb-reachable bottom navigation. */
    padding: 0 10px calc(88px + env(safe-area-inset-bottom));
  }

  .titleblock, .app-header {
    margin-left: -10px;
    margin-right: -10px;
    margin-bottom: 10px;
    border-radius: 0 0 16px 16px;
    padding: calc(13px + env(safe-area-inset-top)) 13px 14px;
    gap: 10px;
  }
  .titleblock::after { left: 13px; right: 13px; }
  .app-header-brand { gap:9px; }
  .company-logo-wrap { width:92px; height:42px; }
  .titleblock .eyebrow { font-size: 9px; }
  .titleblock .title { font-size: 17px; }
  .titleblock .status-pill {
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Thumb-reachable mobile navigation. Keep this dock attached to the
     viewport and reserve matching space in .app-shell so content never hides
     underneath it. */
  .tabs, .app-nav {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    z-index: 100;
    width: auto;
    margin: 0;
    padding: 6px;
    border-radius: 14px;
    box-shadow: 0 12px 34px rgba(15,29,45,.20);
    background: rgba(255,255,255,.96);
  }
  .tab-btn {
    min-height: 42px;
    padding: 8px 13px;
    border-radius: 9px;
  }

  .card {
    padding: 13px;
    border-radius: 13px;
    margin-bottom: 10px;
  }
  .record-card:hover { transform: none; box-shadow: var(--shadow-sm); }
  .section-header { align-items: flex-start; }
  .section-header h2 { font-size: 21px; }

  .record-header {
    flex-direction: column;
    gap: 10px;
  }
  .record-header-main { width: 100%; }
  .record-actions {
    width: 100%;
    justify-content: flex-end;
    padding-top: 1px;
  }
  .record-footer { align-items: flex-start; }
  .record-card .btn { max-width: 100%; }
  .record-card .chip { font-size: 11.5px; }

  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .stat-card { padding: 14px; }
  .stat-value { font-size: 27px; }

  .project-menu {
    position: fixed;
    top: max(68px, calc(env(safe-area-inset-top) + 58px));
    right: 10px;
    left: 10px;
    min-width: 0;
    max-height: calc(100vh - 92px);
    overflow-y: auto;
  }

  input, select, textarea { font-size: 16px; } /* prevents iOS zoom */
}

@media (max-width: 420px) {
  .shell, .app-shell { padding-left: 8px; padding-right: 8px; }
  .titleblock, .app-header { margin-left: -8px; margin-right: -8px; }
  .card { padding: 12px; }
  .record-actions { gap: 5px; }
  .record-actions .btn { padding: 6px 9px !important; font-size: 12px; }
  .record-footer .record-actions { width: auto; margin-left: auto; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 350px) {
  .stat-grid { grid-template-columns: 1fr; }
  .record-actions { justify-content: flex-start; }
  .titleblock .status-pill { display: none; }
}

@media print {
  .no-print, .tabs, .app-nav, .titleblock .project-switch { display: none !important; }
  html, body { background: var(--surface); }
  .shell, .app-shell { width: 100%; max-width: none; padding: 0; }
  .titleblock { background: var(--surface); color: #000; box-shadow: none; border: 1px solid #bbb; }
  .titleblock .title, .titleblock .eyebrow { color: #000; }
  .card, .stat-card { box-shadow: none; break-inside: avoid; }
}


/* ---------- v2.7 mobile navigation, sticky headers, and report tables ---------- */
.module-sticky-header {
  position: sticky;
  top: 0;
  z-index: 24;
  background: var(--bg);
  padding-top: 8px;
  padding-bottom: 8px;
  box-shadow: 0 8px 14px rgba(0,0,0,.08);
}
.dashboard-sticky { margin-bottom: 12px; }
.table-scroll { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.data-table { width:100%; border-collapse:collapse; font-size:13px; }
.data-table th { text-align:left; color:var(--ink-soft); font-size:11px; text-transform:uppercase; letter-spacing:.04em; font-weight:700; border-bottom:1px solid var(--line); padding:8px 6px; white-space:nowrap; }
.data-table td { padding:9px 6px; border-bottom:1px solid var(--line); vertical-align:middle; }
.status-cell { min-width:118px; }
.status-cell .chip { white-space:nowrap; min-width:max-content; word-break:normal; overflow-wrap:normal; }
.form-grid-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 12px; }
.sticky-control-card { margin-bottom:8px; }

@media (max-width:640px) {
  .module-sticky-header { top:0; }
  .form-grid-2 { grid-template-columns:1fr; }
  .app-nav { scroll-behavior:auto; }
}

.module-sticky-controls {
  position: sticky;
  top: 0;
  z-index: 25;
  background: var(--bg);
  padding: 8px 0 6px;
  margin-bottom: 6px;
  max-height: min(52vh, 460px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.module-sticky-controls .module-sticky-header {
  position: static;
  box-shadow: none;
  padding-top: 0;
}
@media (max-width:640px) {
  .module-sticky-controls { max-height: 46vh; }
}


/* ---------- v2.9 mobile forms and searchable target selectors ---------- */
.search-picker { position: relative; width: 100%; }
.search-picker-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 5px);
  z-index: 80;
  max-height: min(320px, 42vh);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
}
.search-picker-menu[hidden] { display: none !important; }
.search-picker-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  width: 100%;
  border: 0;
  border-radius: 8px;
  padding: 10px 11px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.search-picker-option + .search-picker-option { border-top: 1px solid var(--line); border-radius: 0; }
.search-picker-option:hover, .search-picker-option:focus { background: var(--blue-soft); outline: none; }
.search-picker-option span { font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.search-picker-option small { font-size: 11px; line-height: 1.35; color: var(--ink-soft); overflow-wrap: anywhere; }
.search-picker-empty { padding: 11px; color: var(--ink-soft); font-size: 12px; }
.entry-form { width: 100%; }

@media (max-width: 640px) {
  /* New-record forms become normal full-width document sections. This lets the
     form consume the screen naturally and pushes record cards below it. */
  .module-sticky-controls:has(.entry-form) {
    position: relative;
    top: auto;
    max-height: none;
    overflow: visible;
    overscroll-behavior: auto;
    z-index: 20;
  }
  .module-sticky-header:has(.entry-form) {
    position: relative;
    top: auto;
    z-index: 20;
  }
  .entry-form {
    width: 100%;
    max-width: none;
    max-height: none;
    overflow: visible;
  }

  /* iOS-safe replacement for datalist. */
  .search-picker-menu {
    position: relative;
    top: 4px;
    max-height: 300px;
    margin-bottom: 6px;
    box-shadow: var(--shadow-md);
  }
}

/* v3.4 search clear buttons and add-form actions */
.search-clear-wrap { position: relative; width: 100%; min-width: 0; }
.search-clear-wrap > input:not([type="hidden"]) { width: 100%; padding-right: 40px; }
.search-clear-btn {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-soft);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  z-index: 4;
}
.search-clear-btn:hover, .search-clear-btn:focus-visible { background: var(--blue-soft); color: var(--ink); outline: none; }
.search-clear-wrap:has(> input:not([type="hidden"]):placeholder-shown) > .search-clear-btn { opacity: 0; pointer-events: none; }
.form-actions { display: flex; align-items: center; justify-content: flex-start; gap: 8px; flex-wrap: wrap; margin-top: 4px; }

/* v3.6 loading treatment */
.boot-loader{position:fixed;inset:0;display:grid;place-items:center;background:var(--bg,#07111D);z-index:9999}
.boot-nut{font-size:54px;line-height:1;color:var(--blue,#4aa3df);animation:qcNutSpin 1.05s linear infinite}
.ptr-indicator{font-size:0!important;display:flex!important;justify-content:center;align-items:center;pointer-events:none}
.ptr-spinner{display:inline-block;width:26px;height:26px;border:3px solid currentColor;border-right-color:transparent;border-radius:50%;animation:qcNutSpin .8s linear infinite}
@keyframes qcNutSpin{to{transform:rotate(360deg)}}

/* v3.7 biometric settings */
.biometric-setting-row{display:flex;align-items:center;justify-content:space-between;gap:18px}
.switch{position:relative;display:inline-flex;width:48px;height:28px;flex:0 0 auto}
.switch input{opacity:0;width:0;height:0;position:absolute}
.switch-slider{position:absolute;inset:0;border-radius:999px;background:var(--surface-muted);border:1px solid var(--line);cursor:pointer;transition:.2s ease}
.switch-slider:before{content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;border-radius:50%;background:var(--ink-soft);transition:.2s ease}
.switch input:checked + .switch-slider{background:var(--blue);border-color:var(--blue)}
.switch input:checked + .switch-slider:before{transform:translateX(20px);background:#fff}
.switch input:disabled + .switch-slider{opacity:.45;cursor:not-allowed}
.biometric-prompt{z-index:1000}
/* Pull-to-sync indicator must never appear until an actual pull gesture begins. */
.ptr-indicator{opacity:0;transform:translateY(-40px)}

/* ---------- v3.8 public product landing ---------- */
.landing-page{--landing-bg:#050b12;--landing-ink:#f7f9fc;--landing-soft:#aeb9c6;--landing-blue:#2797ff;--landing-line:rgba(255,255,255,.12);min-height:100vh;background:var(--landing-bg);color:var(--landing-ink);font-family:'IBM Plex Sans',system-ui,sans-serif;overflow-x:hidden}
.landing-page *{box-sizing:border-box}
.landing-page button,.landing-page a{font:inherit}
.landing-nav{position:sticky;top:0;z-index:80;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;width:100%;padding:16px clamp(22px,5vw,72px);background:rgba(5,11,18,.78);border-bottom:1px solid rgba(255,255,255,.07);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%)}
.landing-brand{justify-self:start;display:flex;align-items:center;gap:10px;background:none;border:0;color:#fff;font-weight:700;font-size:18px;cursor:pointer;padding:0}
.landing-brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:linear-gradient(145deg,#0d75d8,#4eb1ff);box-shadow:0 10px 25px rgba(39,151,255,.22);font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:14px;letter-spacing:-.04em}
.landing-nav-links{display:flex;align-items:center;gap:30px}
.landing-nav-links a{color:#ccd5df;text-decoration:none;font-size:13px;font-weight:600;transition:color .2s ease}
.landing-nav-links a:hover{color:#fff}
.landing-nav-actions{justify-self:end;display:flex;align-items:center;gap:10px}
.landing-btn{border:0;border-radius:999px;padding:11px 20px;font-weight:600;cursor:pointer;transition:transform .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease;color:#fff}
.landing-btn:hover{transform:translateY(-1px)}
.landing-btn-primary{background:linear-gradient(135deg,#168cff,#54b7ff);box-shadow:0 12px 34px rgba(29,146,255,.24)}
.landing-btn-primary:hover{box-shadow:0 16px 40px rgba(29,146,255,.34)}
.landing-btn-ghost{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.3)}
.landing-btn-large{padding:14px 27px;font-size:15px}
.landing-hero{display:grid;grid-template-columns:minmax(0,.92fr) minmax(440px,1.08fr);min-height:min(820px,calc(100svh - 71px));align-items:center;gap:clamp(34px,5vw,82px);padding:clamp(64px,9vw,118px) clamp(24px,6vw,88px);background:radial-gradient(circle at 76% 20%,rgba(43,142,225,.12),transparent 34%),linear-gradient(180deg,#06101b,#07111d 65%,#0a1521)}
.landing-hero-copy{max-width:690px}
.landing-eyebrow{color:#4daeff;font-size:12px;letter-spacing:.16em;font-weight:700;margin-bottom:18px}
.landing-hero h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(52px,6.3vw,92px);line-height:.98;letter-spacing:-.055em;margin:0 0 28px;color:#fff}
.landing-hero h1 span{background:linear-gradient(100deg,#2c9fff,#79caff);-webkit-background-clip:text;background-clip:text;color:transparent}
.landing-hero-copy>p{max-width:650px;color:#bdc8d3;font-size:clamp(17px,1.6vw,22px);line-height:1.58;margin:0 0 30px}
.landing-hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.landing-proof-row{display:flex;gap:24px;flex-wrap:wrap;color:#9eacba;font-size:13px;margin-top:30px}
.landing-hero-media{position:relative;border-radius:32px;overflow:hidden;aspect-ratio:16/11;box-shadow:0 45px 95px rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.12);background:#101820}
.landing-hero-media:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(4,10,16,.45));pointer-events:none}
.landing-hero-media video{width:100%;height:100%;object-fit:cover;display:block}
.landing-media-glass{position:absolute;z-index:2;left:22px;bottom:22px;display:flex;align-items:center;gap:9px;padding:10px 14px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(5,12,18,.48);backdrop-filter:blur(14px);font-size:12px;color:#e5edf5}
.landing-live-dot{width:8px;height:8px;border-radius:50%;background:#55d68c;box-shadow:0 0 0 5px rgba(85,214,140,.12)}
.landing-feature-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:0;background:#fff;color:#0a1727;padding:0 clamp(24px,5vw,72px)}
.landing-feature{padding:38px 22px 42px;text-align:center;border-right:1px solid #e8edf2}
.landing-feature:last-child{border-right:0}
.landing-feature-icon{width:48px;height:48px;margin:0 auto 14px;display:grid;place-items:center;color:#168df5}
.landing-feature-icon svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.landing-feature h3{font-family:'Space Grotesk',sans-serif;font-size:16px;margin:0 0 7px}
.landing-feature p{font-size:12px;line-height:1.5;color:#677586;margin:0}
.landing-section{display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:clamp(38px,6vw,90px);padding:clamp(78px,10vw,130px) clamp(24px,6vw,88px)}
.landing-field-section{background:#f7f9fb;color:#081421}
.landing-video-frame{position:relative;border-radius:24px;overflow:hidden;background:#07111d;box-shadow:0 28px 75px rgba(6,20,35,.18);border:1px solid #dfe5ea}
.landing-video-frame video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#07111d}
.landing-video-label{position:absolute;top:18px;left:18px;display:flex;flex-direction:column;gap:2px;background:rgba(5,13,20,.64);color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:10px 12px;backdrop-filter:blur(10px)}
.landing-video-label span{font-size:9px;letter-spacing:.13em;color:#71c0ff}.landing-video-label strong{font-size:13px}
.landing-section-copy{max-width:580px}
.landing-section-copy h2,.landing-cta h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(42px,5vw,68px);line-height:1.02;letter-spacing:-.045em;margin:0 0 22px}
.landing-section-copy>p{font-size:17px;line-height:1.65;color:#5d6b7b;margin:0 0 26px}
.landing-check-list{list-style:none;padding:0;margin:0;display:grid;gap:13px}
.landing-check-list li{position:relative;padding-left:30px;font-size:15px;color:#263849}.landing-check-list li:before{content:"✓";position:absolute;left:0;top:-1px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#e5f3ff;color:#168df5;font-size:12px;font-weight:800}
.landing-platform-section{background:linear-gradient(155deg,#07111d,#0b1b2c);color:#fff;overflow:hidden}
.landing-platform-section .landing-section-copy>p{color:#aebcca}
.landing-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:30px}
.landing-stat-grid>div{padding:20px 16px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.landing-stat-grid strong,.landing-stat-grid span{display:block}.landing-stat-grid strong{font-size:22px;font-family:'Space Grotesk',sans-serif}.landing-stat-grid span{margin-top:4px;font-size:12px;color:#9eacbb}
.landing-device-stage{position:relative;min-height:455px}
.landing-laptop{position:absolute;left:0;right:8%;top:8%;border-radius:20px 20px 10px 10px;background:#0b1119;border:2px solid #506070;box-shadow:0 32px 70px rgba(0,0,0,.42);padding:10px 10px 14px}
.landing-device-top{height:12px;display:flex;justify-content:center}.landing-device-top span{width:7px;height:7px;border-radius:50%;background:#253b4d}
.landing-dashboard-mock{display:grid;grid-template-columns:84px 1fr;min-height:290px;border-radius:10px;overflow:hidden;background:#0b1826}
.landing-mock-side{background:#08121d;color:#49aafa;font-weight:700;padding:18px 14px;font-size:12px}.landing-mock-side div{height:7px;background:#25405a;border-radius:4px;margin-top:23px;width:58px}
.landing-mock-main{padding:24px}.landing-mock-main h4{margin:0 0 18px;font-size:16px}.landing-mock-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.landing-mock-cards span{display:grid;place-items:center;height:62px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:#102438;font-size:20px;color:#72c4ff;font-weight:700}.landing-mock-chart{height:122px;margin-top:18px;display:flex;align-items:flex-end;gap:12px;padding:15px;border-radius:12px;background:#0e2031}.landing-mock-chart i{display:block;width:12%;border-radius:5px 5px 2px 2px;background:linear-gradient(#41aaff,#176aac)}.landing-mock-chart i:nth-child(1){height:38%}.landing-mock-chart i:nth-child(2){height:72%}.landing-mock-chart i:nth-child(3){height:54%}.landing-mock-chart i:nth-child(4){height:90%}.landing-mock-chart i:nth-child(5){height:64%}
.landing-phone{position:absolute;right:0;bottom:0;width:190px;height:385px;border-radius:34px;padding:9px;background:#070b10;border:2px solid #687787;box-shadow:0 26px 55px rgba(0,0,0,.48);transform:rotate(1.5deg)}
.landing-phone-notch{position:absolute;z-index:2;top:14px;left:50%;transform:translateX(-50%);width:70px;height:17px;border-radius:12px;background:#030507}.landing-phone-screen{height:100%;border-radius:26px;background:linear-gradient(180deg,#102237,#09131e);padding:65px 18px 18px;display:flex;flex-direction:column}.landing-phone-screen small{color:#67b9fb;font-size:10px}.landing-phone-screen strong{font-size:25px;margin:8px 0 2px}.landing-phone-screen span{color:#9daaba;font-size:11px}.landing-phone-progress{height:7px;border-radius:99px;background:#20364a;margin:34px 0 16px;overflow:hidden}.landing-phone-progress i{display:block;width:76%;height:100%;background:#34a4ff}.landing-phone-screen button{margin-top:auto;border:0;border-radius:10px;padding:12px;background:#178df5;color:#fff;font-weight:700;font-size:11px}
.landing-cta{text-align:center;background:#fff;color:#07111d;padding:clamp(90px,11vw,145px) 24px;position:relative;overflow:hidden}.landing-cta:before,.landing-cta:after{content:"";position:absolute;width:440px;height:220px;border:1px solid #e8eef5;border-radius:50%;bottom:-150px}.landing-cta:before{left:-110px}.landing-cta:after{right:-110px}.landing-cta h2{font-size:clamp(42px,5.7vw,72px);margin-bottom:14px}.landing-cta>p{font-size:18px;color:#657383;margin:0 0 28px}.landing-cta-actions{justify-content:center}.landing-cta .landing-btn-ghost{color:#0a1727;border-color:#aeb9c4;background:#fff}
.landing-footer{display:flex;justify-content:space-between;gap:20px;padding:26px clamp(24px,6vw,88px);font-size:12px;color:#8190a0;background:#050b12;border-top:1px solid rgba(255,255,255,.08)}
.auth-back-home{display:inline-flex;margin:0 0 18px;padding:0;border:0;background:none;color:var(--blue);font-weight:600;cursor:pointer;font-size:13px}

@media(max-width:1050px){.landing-nav{grid-template-columns:1fr auto}.landing-nav-links{display:none}.landing-hero{grid-template-columns:1fr;min-height:auto}.landing-hero-copy{max-width:760px}.landing-hero-media{max-width:880px;width:100%;aspect-ratio:16/9}.landing-feature-strip{grid-template-columns:repeat(3,1fr)}.landing-feature:nth-child(3){border-right:0}.landing-feature:nth-child(-n+3){border-bottom:1px solid #e8edf2}.landing-section{grid-template-columns:1fr}.landing-field-section .landing-video-frame{order:2}.landing-field-section .landing-section-copy{order:1}.landing-device-stage{min-height:500px;max-width:760px;width:100%;margin:auto}}
@media(max-width:700px){.landing-nav{padding:12px 16px}.landing-brand{font-size:15px}.landing-brand-mark{width:34px;height:34px}.landing-nav-actions{gap:7px}.landing-nav-actions .landing-btn{padding:9px 13px;font-size:12px}.landing-hero{padding:58px 18px 68px;gap:36px}.landing-hero h1{font-size:clamp(46px,14vw,68px)}.landing-hero-copy>p{font-size:17px}.landing-hero-media{border-radius:22px}.landing-proof-row{gap:10px 18px}.landing-feature-strip{grid-template-columns:repeat(2,1fr);padding:0}.landing-feature{border-bottom:1px solid #e8edf2!important}.landing-feature:nth-child(even){border-right:0}.landing-section{padding:76px 18px}.landing-section-copy h2,.landing-cta h2{font-size:42px}.landing-platform-section{padding-bottom:42px}.landing-device-stage{min-height:390px}.landing-laptop{right:0}.landing-dashboard-mock{grid-template-columns:58px 1fr;min-height:235px}.landing-mock-side{padding:14px 9px}.landing-mock-side div{width:36px;margin-top:17px}.landing-mock-main{padding:18px 12px}.landing-mock-cards span{font-size:15px;height:50px}.landing-mock-chart{height:90px}.landing-phone{width:142px;height:292px}.landing-phone-screen{padding:52px 12px 12px}.landing-phone-screen strong{font-size:20px}.landing-stat-grid{grid-template-columns:1fr}.landing-footer{flex-direction:column;text-align:center}.landing-video-label{top:10px;left:10px}.landing-cta{padding-left:18px;padding-right:18px}}


/* ---------- v3.9 approved product landing ---------- */
.landing-v39{background:#06111c}
.landing-v39 .landing-nav{position:absolute;top:0;left:0;right:0;background:linear-gradient(180deg,rgba(2,10,18,.96),rgba(2,10,18,.74));border-bottom:1px solid rgba(255,255,255,.08)}
.landing-brand-wordmark{font-family:'Space Grotesk',sans-serif;font-size:34px;font-weight:800;letter-spacing:-.08em;color:#1f9fff;line-height:1}
.landing-brand-copy{display:flex;flex-direction:column;align-items:flex-start;line-height:1.05}.landing-brand-copy strong{font-size:20px}.landing-brand-copy small{font-size:7px;letter-spacing:.14em;color:#b7c3cf;margin-top:6px}
.landing-hero-v39{position:relative;display:flex;align-items:center;min-height:720px;padding:132px clamp(30px,6vw,98px) 72px;overflow:hidden;background:#07111d}
.landing-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.landing-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,10,17,.97) 0%,rgba(3,10,17,.83) 28%,rgba(3,10,17,.28) 62%,rgba(3,10,17,.06) 100%),linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.32))}
.landing-hero-copy-v39{position:relative;z-index:3;max-width:575px}.landing-hero-copy-v39 .landing-eyebrow{color:#b4c4d5;margin-bottom:15px}.landing-hero-copy-v39 h1{font-size:clamp(58px,6vw,94px);margin-bottom:18px}.landing-hero-copy-v39>p{font-size:19px;line-height:1.55;max-width:520px;color:#eef4f8}
.landing-watch-btn{display:inline-flex;align-items:center;gap:9px}.landing-play-dot{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#fff;color:#08121d;font-size:9px;padding-left:1px}
.landing-proof-v39{margin-top:36px;gap:38px}.landing-proof-v39 span{display:grid;grid-template-columns:24px auto;color:#28a6ff;font-size:22px;column-gap:8px;align-items:center}.landing-proof-v39 b,.landing-proof-v39 small{color:#fff;font-size:11px;line-height:1.1}.landing-proof-v39 small{grid-column:2;color:#c7d2dd}
.landing-hero-slogan{position:absolute;right:4.5vw;bottom:76px;z-index:3;color:#fff;font-family:cursive;font-style:italic;font-size:clamp(26px,2.4vw,40px);line-height:1.05;transform:rotate(-5deg);text-align:center;text-shadow:0 4px 18px rgba(0,0,0,.48)}
.landing-feature-strip-v39{grid-template-columns:repeat(5,1fr);padding:0 clamp(30px,5.5vw,90px);box-shadow:0 -1px 0 rgba(255,255,255,.08)}
.landing-feature-strip-v39 .landing-feature{display:flex;align-items:flex-start;text-align:left;gap:14px;padding:30px 26px 32px}.landing-feature-strip-v39 .landing-feature-icon{flex:0 0 auto;width:42px;height:42px;margin:0}.landing-feature-strip-v39 .landing-feature h3{font-size:14px;margin-bottom:5px}.landing-feature-strip-v39 .landing-feature p{font-size:11px}
.landing-platform-v39{display:grid;grid-template-columns:.72fr .95fr 1.55fr;gap:44px;align-items:center;background:linear-gradient(180deg,#081421,#06101a);padding:52px clamp(34px,6vw,98px) 10px;min-height:500px}
.landing-mobile-showcase{align-self:end}.landing-phone-v39{position:relative;right:auto;bottom:auto;width:260px;height:480px;margin:0 auto -20px;transform:none}.landing-phone-home{padding:48px 18px 12px}.landing-phone-brand{font-size:18px;font-weight:700;color:#36a7ff;margin-bottom:30px}.landing-phone-brand span{color:#fff}.landing-progress-ring{width:116px;height:116px;margin:18px auto;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#27d7a0 0 78%,#183449 78%);position:relative}.landing-progress-ring:before{content:"";position:absolute;width:88px;height:88px;border-radius:50%;background:#0a1c2b}.landing-progress-ring b{position:relative;font-size:26px}.landing-mini-stats{display:grid;gap:7px;margin-top:18px}.landing-mini-stats span{display:flex;justify-content:space-between;font-size:10px;color:#b5c1cd}.landing-mini-stats b{color:#fff}.landing-phone-nav{margin-top:auto;padding-top:14px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;color:#4fb5ff;font-size:18px}
.landing-product-copy{max-width:470px}.landing-product-copy h2{font-size:43px;margin-top:-10px}.landing-product-copy>p{color:#b7c4cf}.landing-check-dark li{color:#f4f7fa}.landing-check-dark li:before{background:#1d9cff;color:white}.landing-product-copy .landing-btn{margin-top:30px}
.landing-desktop-inspection{min-width:0}.landing-app-window{border:2px solid #657789;border-radius:18px 18px 8px 8px;background:#0c1723;box-shadow:0 28px 60px rgba(0,0,0,.42);overflow:hidden}.landing-app-top{height:42px;display:flex;justify-content:space-between;align-items:center;padding:0 16px;background:#06101a;border-bottom:1px solid rgba(255,255,255,.08);font-size:11px}.landing-app-top strong{color:#36a7ff}.landing-app-top span{color:#ccd6df}.landing-app-body{display:grid;grid-template-columns:58px 1.35fr 1fr;min-height:340px}.landing-app-body aside{display:flex;flex-direction:column;gap:18px;align-items:center;padding:20px 8px;background:#07111b;color:#8da2b5}.landing-app-body aside b{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;font-size:13px}.landing-app-body aside b.active{background:#118df6;color:#fff}.landing-inspection-panel{padding:24px 20px;background:#edf2f5;color:#122131}.landing-inspection-panel small{font-weight:700;color:#304457}.landing-inspection-panel h3{margin:5px 0 14px;font-size:18px}.landing-inspection-tabs{display:flex;gap:8px;border-bottom:1px solid #ced7de;margin-bottom:12px}.landing-inspection-tabs span{padding:8px 5px;font-size:10px;color:#6b7985}.landing-inspection-tabs span.active{color:#147ed0;border-bottom:2px solid #147ed0}.landing-inspection-list{display:grid;gap:7px}.landing-inspection-list span{display:flex;justify-content:space-between;align-items:center;padding:8px 9px;background:#fff;border:1px solid #dce3e8;border-radius:6px;font-size:10px}.landing-inspection-list b{padding:3px 8px;border-radius:99px;background:#25be69;color:#fff;font-size:9px}.landing-inspection-list b.progress{background:#2e9ee9}.landing-transformer-photo{background:#102132;padding:14px}.landing-transformer-photo img{width:100%;height:100%;object-fit:cover;border-radius:9px;min-height:310px}
.landing-field-video-v39{display:grid;grid-template-columns:.75fr 1.25fr;gap:60px;align-items:center;background:#f6f8fa;color:#0a1724;padding:92px clamp(34px,6vw,98px)}.landing-video-v39-copy h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(42px,4.5vw,68px);line-height:1.02;letter-spacing:-.045em;margin:0 0 20px}.landing-video-v39-copy p{color:#617080;font-size:17px;line-height:1.6}.landing-transformer-video{box-shadow:0 30px 75px rgba(8,20,33,.18)}
.landing-bottom-stats{display:grid;grid-template-columns:2fr repeat(3,.8fr) 1.25fr;align-items:center;gap:18px;padding:30px clamp(34px,6vw,98px);background:linear-gradient(90deg,#0b2234,#06101a);color:#fff;border-top:1px solid rgba(255,255,255,.08)}.landing-bottom-message h2{font-family:'Space Grotesk',sans-serif;font-size:27px;margin:0 0 4px}.landing-bottom-message p{margin:0;color:#a9b7c4;font-size:12px}.landing-bottom-stat{text-align:center;border-left:1px solid rgba(255,255,255,.12)}.landing-bottom-stat strong{display:block;font-size:28px}.landing-bottom-stat span{display:block;font-size:10px;color:#c0cad3;margin-top:4px}.landing-bottom-actions{display:flex;gap:10px;justify-content:flex-end}
@media(max-width:1100px){.landing-hero-v39{min-height:680px}.landing-platform-v39{grid-template-columns:.8fr 1.2fr}.landing-desktop-inspection{grid-column:1/-1}.landing-feature-strip-v39{grid-template-columns:repeat(2,1fr)}.landing-feature-strip-v39 .landing-feature:last-child{grid-column:1/-1}.landing-bottom-stats{grid-template-columns:1.5fr repeat(3,1fr)}.landing-bottom-actions{grid-column:1/-1;justify-content:center}.landing-field-video-v39{grid-template-columns:1fr}}
@media(max-width:700px){.landing-v39 .landing-nav{position:absolute}.landing-hero-v39{min-height:720px;padding:120px 20px 46px;align-items:flex-end}.landing-hero-video{object-position:64% center}.landing-hero-shade{background:linear-gradient(180deg,rgba(3,10,17,.20),rgba(3,10,17,.94) 63%,rgba(3,10,17,.99))}.landing-hero-copy-v39 h1{font-size:56px}.landing-hero-copy-v39>p{font-size:16px}.landing-hero-slogan{display:none}.landing-proof-v39{gap:18px}.landing-feature-strip-v39{grid-template-columns:1fr}.landing-feature-strip-v39 .landing-feature:last-child{grid-column:auto}.landing-feature-strip-v39 .landing-feature{border-right:0}.landing-platform-v39{grid-template-columns:1fr;padding:60px 18px 0}.landing-mobile-showcase{order:2}.landing-product-copy{order:1}.landing-desktop-inspection{order:3;grid-column:auto;margin:20px -2px 0}.landing-phone-v39{width:230px;height:430px}.landing-app-body{grid-template-columns:42px 1fr}.landing-transformer-photo{display:none}.landing-app-body aside{padding:14px 4px}.landing-field-video-v39{padding:72px 18px;gap:32px}.landing-bottom-stats{grid-template-columns:1fr 1fr;padding:30px 18px}.landing-bottom-message,.landing-bottom-actions{grid-column:1/-1;text-align:center}.landing-bottom-stat{border-left:0}.landing-bottom-stat:nth-of-type(4){grid-column:1/-1}.landing-bottom-actions{justify-content:center}.landing-brand-copy small{display:none}.landing-brand-copy strong{font-size:16px}.landing-brand-wordmark{font-size:28px}}

/* v4.0 transformer inspection hero video */
.landing-hero-video { object-position: center center; }
@media (max-width:700px) {
  .landing-hero-video { object-position: center center; }
}


/* v4.2 landing-page readability + auth shell cleanup */
/* White landing sections use the product's bright QC blue for headings. */
.landing-page .landing-feature-title,
.landing-page .landing-features h2,
.landing-page .landing-features h3,
.landing-page .landing-action-section h2,
.landing-page .landing-action-section h3,
.landing-page .landing-light-section h2,
.landing-page .landing-light-section h3 {
  color: #1597f5 !important;
  opacity: 1 !important;
}

/* Some feature titles are rendered through generic strong/title elements. */
.landing-page .landing-features .landing-feature strong,
.landing-page .landing-features .landing-feature .title {
  color: #1597f5 !important;
  opacity: 1 !important;
}

/* Remove the oversized translucent rectangle surrounding the actual auth card. */
.auth-page,
.auth-shell,
.auth-wrap,
.auth-stage {
  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
  background-image: none !important;
}
.auth-shell::before,
.auth-shell::after,
.auth-wrap::before,
.auth-wrap::after,
.auth-stage::before,
.auth-stage::after {
  content: none !important;
  display: none !important;
}

/* Preserve the intentional border on the sign-in card itself. */
.auth-card {
  box-shadow: none !important;
}


/* v4.2 stabilization — exact landing title + auth wrapper fix */
.landing-v39 .landing-feature-strip-v39 .landing-feature h3 {
  color: #168df5 !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #168df5 !important;
}
.landing-v39 .landing-field-video-v39 .landing-video-v39-copy h2 {
  color: #168df5 !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #168df5 !important;
}

.auth-page {
  min-height: 100dvh;
  width: 100%;
  display: flow-root;
  background: var(--bg) !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}
.auth-page .auth-wrap {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}
.auth-page .auth-card {
  box-shadow: none !important;
}
@media (max-width: 640px) {
  .auth-page { background: #07111d !important; }
  .auth-page .auth-wrap {
    width: min(420px, calc(100% - 32px));
    margin: min(12vh, 100px) auto;
    padding: 0 !important;
  }
}

/* v4.3 subscriptions / pricing */
.landing-pricing-section{padding:88px 5vw;background:#f7fbff;text-align:center;color:#102033}
.landing-pricing-section h2{font:700 clamp(34px,5vw,58px)/1.05 'Space Grotesk',sans-serif;color:#168df5;margin:12px 0}
.landing-pricing-lead{color:#667085;margin:0 auto 34px;max-width:680px}
.billing-plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;max-width:1120px;margin:28px auto 0;text-align:left}
.billing-plan{position:relative;background:#fff;border:1px solid #dbe7f2;border-radius:22px;padding:28px;color:#142033;box-shadow:0 12px 34px rgba(8,31,55,.07)}
.billing-plan.featured{border:2px solid #168df5;transform:translateY(-5px)}
.billing-plan h3{font-size:24px;color:#168df5;margin:0 0 8px}
.billing-price{font-size:38px;font-weight:800;margin:10px 0}.billing-price small{font-size:12px;font-weight:500;color:#667085}
.billing-plan p{min-height:42px;color:#667085}.billing-plan ul{list-style:none;padding:0;margin:20px 0}.billing-plan li{padding:6px 0}
.billing-plan .landing-btn{width:100%}.billing-popular{position:absolute;right:18px;top:18px;font-size:9px;font-weight:800;letter-spacing:.1em;color:#168df5}
.subscription-wall{min-height:100vh;background:#06111e;color:white;padding:60px 20px}.subscription-wall-inner{max-width:1180px;margin:auto;text-align:center}
.subscription-wall h1{font:700 clamp(38px,6vw,72px)/1 'Space Grotesk',sans-serif;margin:14px 0}.subscription-wall>div>p{color:#a8b6c6}
.subscription-wall .billing-plan{text-align:left}
@media(max-width:760px){.billing-plan-grid{grid-template-columns:1fr}.billing-plan.featured{transform:none}.landing-pricing-section{padding:64px 18px}.subscription-wall{padding:38px 14px}}

/* v4.5 equipment checklist assignment */
.checklist-assignment-row{display:grid;grid-template-columns:minmax(180px,2fr) 1fr 1fr auto;gap:8px;align-items:end;}
@media(max-width:700px){.checklist-assignment-row{grid-template-columns:1fr;}.checklist-assignment-row .btn.danger{justify-self:start;}}

/* v4.5 mobile global single-scroll form layout
   On phone-sized screens, module forms/controls participate in the normal
   document flow. This prevents a form and its record cards from becoming
   separate vertical scroll regions. */
@media (max-width: 700px) {
  .module-sticky-controls {
    position: relative;
    top: auto;
    z-index: 20;
    max-height: none;
    overflow: visible;
    overscroll-behavior: auto;
    -webkit-overflow-scrolling: auto;
  }

  .module-sticky-controls .module-sticky-header,
  .module-sticky-header:has(form),
  .module-sticky-header:has(.entry-form) {
    position: relative;
    top: auto;
    max-height: none;
    overflow: visible;
  }

  .module-sticky-controls form,
  .module-sticky-controls .entry-form {
    width: 100%;
    max-width: none;
    max-height: none;
    overflow: visible;
  }
}

/* v4.5 checklist assignment equipment search + type filter */
.checklist-equipment-filters { display:grid; grid-template-columns:minmax(0,1fr) minmax(180px,260px); gap:8px; margin-bottom:8px; }
.checklist-equipment-filters select { width:100%; }
@media (max-width: 700px) {
  .checklist-equipment-filters { grid-template-columns:1fr; }
  .checklist-equipment-list { max-height:none !important; overflow:visible !important; }
}


/* v4.5 refinement — global single-scroll module forms
   Desktop and mobile use the page as the only vertical scroll container. */
.module-sticky-controls {
  position: relative;
  top: auto;
  max-height: none;
  overflow: visible;
  overscroll-behavior: auto;
  -webkit-overflow-scrolling: auto;
}
.module-sticky-controls .module-sticky-header {
  position: relative;
  top: auto;
}
.checklist-equipment-list {
  max-height: none !important;
  overflow: visible !important;
}


/* v4.6 — inspection Gantt */

.gantt-controls { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-bottom:12px; }
.gantt-view-toggle { display:inline-flex; border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.gantt-view-toggle button { min-height:38px; padding:7px 14px; border:0; border-right:1px solid var(--line); background:var(--surface-2); color:var(--ink-soft); cursor:pointer; font-weight:700; }
.gantt-view-toggle button:last-child { border-right:0; }
.gantt-view-toggle button.active { background:var(--blue); color:white; }
.gantt-period-nav { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.gantt-period-nav strong { min-width:150px; text-align:center; }
.gantt-day-head { position:absolute; top:0; bottom:0; border-left:1px solid var(--line); display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:10px; color:var(--ink-soft); }
.gantt-day-head strong { color:var(--ink); font-size:12px; margin-top:2px; }
.gantt-day-head.today { background:var(--blue-soft); }
.gantt-day-head.today strong { color:var(--blue); }
.gantt-empty { min-height:52px; padding:15px 12px; color:var(--ink-soft); background:var(--surface); position:sticky; left:0; z-index:3; border-bottom:1px solid var(--line); }
@media (max-width:700px) { .gantt-controls { align-items:stretch; } .gantt-period-nav { width:100%; justify-content:space-between; } .gantt-period-nav strong { flex:1; min-width:0; } }
.gantt-card { overflow: hidden; }
.gantt-scroll { overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; }
.gantt-grid { display:grid; grid-template-columns:minmax(210px,280px) var(--gantt-width); min-width:max-content; }
.gantt-label { min-height:52px; padding:9px 12px; border-bottom:1px solid var(--line); display:flex; flex-direction:column; justify-content:center; cursor:pointer; background:var(--surface); position:sticky; left:0; z-index:3; }
.gantt-label strong { font-size:12px; }
.gantt-label span { font-size:11px; color:var(--ink-soft); margin-top:2px; }
.gantt-header-label { min-height:42px; font-size:11px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; z-index:5; }
.gantt-timeline { position:relative; border-bottom:1px solid var(--line); min-height:52px; cursor:pointer; background:var(--surface); }
.gantt-header { min-height:42px; cursor:default; background:var(--surface-2); }
.gantt-tick-label { position:absolute; top:11px; transform:translateX(5px); font-size:10px; color:var(--ink-soft); white-space:nowrap; }
.gantt-gridline { position:absolute; top:0; bottom:0; border-left:1px solid var(--line); opacity:.6; }
.gantt-today { position:absolute; top:0; bottom:0; border-left:2px solid var(--blue); z-index:2; }
.gantt-bar { position:absolute; top:14px; height:24px; min-width:8px; border-radius:7px; padding:4px 7px; overflow:hidden; white-space:nowrap; font-size:10px; line-height:16px; font-weight:700; z-index:1; background:var(--blue-soft); color:var(--blue); border:1px solid currentColor; }
.gantt-bar.in_progress, .gantt-legend i.in_progress { background:var(--amber-soft); color:var(--amber); }
.gantt-bar.passed, .gantt-legend i.passed { background:var(--green-soft); color:var(--green); }
.gantt-bar.failed, .gantt-legend i.failed { background:var(--red-soft); color:var(--red); }
.gantt-bar.assigned, .gantt-bar.ready_for_reinspection { background:var(--blue-soft); color:var(--blue); }
.gantt-legend { display:flex; gap:14px; flex-wrap:wrap; padding-top:12px; font-size:11px; color:var(--ink-soft); }
.gantt-legend span { display:flex; align-items:center; gap:5px; }
.gantt-legend i { width:10px; height:10px; border-radius:3px; display:inline-block; background:var(--blue-soft); border:1px solid currentColor; color:var(--blue); }
@media (max-width:700px) { .gantt-grid { grid-template-columns:170px var(--gantt-width); } .gantt-label { padding:8px; } }

/* v4.7 timeline */
.timeline-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;align-items:end}.timeline-row{position:relative;display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}.timeline-row:last-child{border-bottom:0}.timeline-dot{width:9px;height:9px;border-radius:50%;background:var(--blue);margin-top:5px;flex:0 0 auto}.inspection-mini-timeline{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:7px 9px;margin-top:7px;color:var(--ink-soft);font-size:10px;cursor:pointer}.inspection-mini-timeline:hover{border-color:var(--blue)}
.requirement-edit-row{display:grid;grid-template-columns:minmax(140px,1fr) minmax(150px,220px) minmax(150px,220px) auto;gap:10px;align-items:end;padding:10px 0;border-bottom:1px solid var(--line)}
.gantt-bar.planned,.gantt-legend i.planned{background:var(--panel-2);color:var(--ink-soft);border-style:dashed}
.gantt-resize-handle{position:absolute;top:-1px;bottom:-1px;width:12px;border:0;background:transparent;padding:0;cursor:ew-resize;z-index:3;touch-action:none}.gantt-resize-handle.left{left:-2px}.gantt-resize-handle.right{right:-2px}.gantt-resize-handle:disabled{display:none}.gantt-resize-handle::after{content:"";position:absolute;top:5px;bottom:5px;left:5px;border-left:2px solid currentColor;opacity:.7}
@media(max-width:700px){.requirement-edit-row{grid-template-columns:1fr}.requirement-edit-row .form-actions{grid-column:1}}

.timeline-changes{display:flex;flex-direction:column;gap:3px;margin:5px 0;font-size:12px}.timeline-changes span{padding:3px 7px;border:1px solid var(--border);border-radius:7px;width:fit-content;max-width:100%;overflow-wrap:anywhere}

.gantt-bar.movable{cursor:grab;touch-action:none}.gantt-bar.movable:active{cursor:grabbing}.gantt-bar.movable>span{pointer-events:none}

/* v4.8 Gantt equipment search/filter */
.gantt-filterbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding-bottom:12px}.gantt-search-wrap{flex:1;min-width:220px}.gantt-search-wrap input,.gantt-equipment-filter select{width:100%;min-height:40px}.gantt-equipment-filter{min-width:220px;max-width:360px;flex:0 1 320px}@media(max-width:700px){.gantt-filterbar>*{width:100%;max-width:none}.gantt-search-wrap,.gantt-equipment-filter{min-width:0;flex:1 1 100%}}

/* v4.8 Gantt compact tools */
.gantt-tool-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:10px}.gantt-tool-row-spacer{flex:1}.gantt-tool-menu-wrap{position:relative;margin-left:auto}.gantt-menu-button{font-size:20px;line-height:1;min-width:42px}.gantt-tool-menu{position:absolute;z-index:40;top:calc(100% + 6px);right:0;left:auto;min-width:190px;padding:6px;background:var(--card,#111827);border:1px solid var(--border,#334155);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.28)}.gantt-tool-menu button{display:block;width:100%;border:0;background:transparent;color:inherit;text-align:left;padding:10px 12px;border-radius:7px;cursor:pointer}.gantt-tool-menu button:hover{background:rgba(127,127,127,.14)}
.gantt-selection-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 0}.gantt-selection-toolbar .subtitle{flex:1;min-width:180px}.gantt-bar.multi-selected{outline:3px solid var(--blue);outline-offset:2px;z-index:4}.gantt-select-box{position:absolute;left:4px;top:3px;width:18px;height:18px;border:1px solid currentColor;border-radius:4px;background:var(--panel);color:inherit;padding:0;line-height:16px;font-size:12px;font-weight:800;z-index:6;cursor:pointer}.gantt-bar:has(.gantt-select-box)>span{padding-left:20px}.gantt-dragging .gantt-scroll{scroll-behavior:auto}


/* v5.2.23 — sticky module headings, mobile inspection time, expanded recent activity */
.app-content > .module-sticky-header,
.module-sticky-controls > .module-sticky-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 32 !important;
  background: var(--bg) !important;
  padding-top: 8px;
  padding-bottom: 8px;
  box-shadow: 0 8px 14px rgba(0,0,0,.08);
}
.inspection-time-chip { white-space: nowrap; flex-shrink: 0; }
.inspection-recent-activity { margin: 0 0 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.inspection-recent-title { font-size: 10px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 5px; }
.inspection-recent-row { display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:4px 0; font-size:11px; border-top:1px solid var(--line); }
.inspection-recent-row:first-of-type { border-top:0; }
.inspection-recent-row span { color:var(--ink-soft); text-align:right; }
@media (max-width:700px) {
  .inspection-recent-row { flex-direction:column; gap:2px; }
  .inspection-recent-row span { text-align:left; }
}

/* v5.2.24 — true sticky module titles, inspection activity control, rework workflow */
.module-sticky-controls{display:contents !important;}
.module-sticky-controls>.module-sticky-header,.app-content>.module-sticky-header{position:sticky !important;top:0 !important;z-index:70 !important;background:var(--bg) !important;padding:8px 0 !important;margin-bottom:10px !important;box-shadow:0 8px 14px rgba(0,0,0,.12) !important;}
.inspection-activity-toggle{width:100%;display:flex;justify-content:space-between;gap:12px;align-items:center;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:8px;padding:8px 10px;margin:0 0 8px;font-size:11px;font-weight:700;cursor:pointer;}
.rework-card{background:var(--surface);border:1px solid var(--line);padding:12px;margin-bottom:10px}.not-ready-btn{border-color:var(--red);color:var(--red)}

/* v5.2.25 header/menu/dashboard/equipment refinements */
.app-header-logo-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:180px;height:64px;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:1}
.app-header-logo-center .company-logo{max-width:100%;max-height:100%}
.app-header-brand,.app-header-actions{position:relative;z-index:2}
.project-menu{max-height:min(70vh,520px);overflow-y:auto;overscroll-behavior:contain}
.foreman-request-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--line);cursor:pointer}
.foreman-request-summary{font-size:13px;font-weight:600;line-height:1.45;min-width:0;overflow-wrap:anywhere}
.foreman-request-summary span{color:var(--ink-soft);padding:0 2px}
.foreman-request-status{display:flex;align-items:center;justify-content:flex-end;min-width:max-content}
.foreman-request-status .chip{white-space:nowrap;line-height:1.15;text-align:center}
.pending-invitations{border-top:1px solid var(--line);padding:12px 0;margin-top:4px}
.pending-invitations-title,.module-menu-label{font-size:11px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em;margin-bottom:7px}
.pending-invitation-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.equipment-filter-group{display:grid;gap:6px;padding:4px 2px}
.equipment-arrange-group{display:grid;grid-template-columns:minmax(0,1fr) 42px;gap:6px;align-items:end;padding:4px 2px}
.sort-direction-btn{height:38px;border:1px solid var(--line);border-radius:9px;background:var(--surface-muted);color:var(--ink);font-size:22px;line-height:1;cursor:pointer}
.sort-direction-btn:hover{border-color:var(--blue);color:var(--blue)}
@media(max-width:700px){
  .app-header-logo-center{width:105px;height:46px;left:50%}
  .app-header-brand{max-width:42%}
  .app-header-brand .title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .foreman-request-row{grid-template-columns:1fr auto;gap:8px}
  .foreman-request-summary{font-size:12px}
  .foreman-request-status .chip{max-width:112px;white-space:normal;padding:6px 9px}
  .pending-invitation-row{align-items:flex-start;flex-direction:column}
}
.project-menu{z-index:300}

/* v5.2.25 QC lead checklist governance + menu stacking + equipment controls */
.app-header{z-index:1000 !important;}
.project-menu{z-index:1001 !important;}
.equipment-arrange-arrow-only{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 2px;}
.equipment-arrange-arrow-only .module-menu-label{margin:0;}
.equipment-arrange-arrow-only .sort-direction-btn{width:44px;flex:0 0 44px;}

/* v5.2.25 inspection governance/mobile refinements */
.quick-assign-wrap{position:relative;display:inline-flex;align-items:center;max-width:100%}
.quick-assign-select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px}
@media (max-width:700px){
  .record-card .field{min-width:0;width:100%}
  .record-card input[type="date"],.record-card input[type="time"],.record-card select,.record-card textarea{box-sizing:border-box;width:100%;max-width:100%;min-width:0}
  .record-card input[type="date"],.record-card input[type="time"]{-webkit-appearance:none;appearance:none;display:block}
}


/* v5.2.25 mobile inspection scheduling */
.entry-form,.entry-form .field,.inspection-schedule-field{min-width:0;max-width:100%;box-sizing:border-box;}
.entry-form input[type="date"],.entry-form input[type="time"]{display:block;width:100%;max-width:100%;min-width:0;box-sizing:border-box;}
@media (max-width:700px){
  .entry-form{overflow:hidden;}
  .entry-form .inspection-schedule-field{width:100%;min-width:0;overflow:hidden;}
  .entry-form input[type="date"],.entry-form input[type="time"]{inline-size:100%;max-inline-size:100%;min-inline-size:0;-webkit-appearance:none;appearance:none;}
  .entry-form input[type="date"]::-webkit-date-and-time-value,.entry-form input[type="time"]::-webkit-date-and-time-value{min-width:0;text-align:left;}
}

/* v5.2.44 — Gantt 15-second schedule edit lock */
.gantt-view-controls{
  display:flex;
  align-items:center;
  gap:8px;
}
.gantt-edit-lock{
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--surface-2);
  cursor:pointer;
  padding:0;
}
.gantt-edit-lock.locked{color:var(--red);}
.gantt-edit-lock.unlocked{
  color:var(--green);
  border-color:var(--green);
}
.gantt-edit-lock svg{display:block;}

/* v5.2.44 — Equipment Assigned Inspections */
.assigned-inspections-heading{
  margin-bottom:8px;
  color:var(--ink-soft);
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.assigned-inspection-card{
  padding:12px 0;
  border-bottom:1px solid var(--line);
}
.assigned-inspection-card:last-child{
  border-bottom:0;
}
.assigned-inspection-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.assigned-inspection-name{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.assigned-inspection-name strong{
  font-size:13px;
}
.assigned-inspection-name span,
.assigned-inspection-pending{
  color:var(--ink-soft);
  font-size:11px;
}
.assigned-inspection-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}
.assigned-inspection-progress{
  margin-top:9px;
}
.assigned-inspection-dates{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}
.assigned-inspection-date-card{
  position:relative;
  min-width:145px;
  min-height:54px;
  flex:0 1 175px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface-2);
  cursor:pointer;
  overflow:hidden;
}
.assigned-inspection-date-icon{
  width:30px;
  height:30px;
  flex:0 0 30px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--surface);
  color:var(--blue);
  font-size:16px;
}
.assigned-inspection-date-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.assigned-inspection-date-copy>span{
  color:var(--ink-soft);
  font-size:10px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.assigned-inspection-date-copy strong{
  font-size:12px;
  white-space:nowrap;
}
@media(max-width:700px){
  .assigned-inspection-top{
    gap:8px;
  }
  .assigned-inspection-dates{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .assigned-inspection-date-card{
    min-width:0;
    width:100%;
    box-sizing:border-box;
  }
}

/* v5.2.45 — persistent navigation, module searches, and Gantt controls */

/* Desktop/tablet project navigation stays available while the page scrolls.
   Phone navigation keeps the validated fixed bottom-dock behavior below. */
@media (min-width:641px){
  .tabs.app-nav{
    position:sticky;
    top:0;
    z-index:120;
  }

  /* Module headings sit directly below the sticky project navigation. */
  .module-sticky-controls>.module-sticky-header,
  .app-content>.module-sticky-header{
    top:52px !important;
  }
}

/* Only top-level list search cards become sticky. Entry-form controls and
   searchable pickers inside forms remain normal document content. */
.module-sticky-controls>.sticky-control-card:not(.entry-form){
  position:sticky;
  top:64px;
  z-index:68;
  background:var(--surface);
}

/* Gantt's tools, filters, selection controls, edit lock, view selector and
   period navigation travel together as one persistent control header. */
.gantt-sticky-controls{
  position:sticky;
  top:64px;
  z-index:69;
  background:var(--surface);
  margin:-1px -1px 10px;
  padding:10px 12px 0;
  border-bottom:1px solid var(--line);
  box-shadow:0 8px 14px rgba(0,0,0,.08);
}

/* The equipment name is the only Gantt navigation target. */
.gantt-equipment-link{
  display:block;
  width:fit-content;
  max-width:100%;
  border:0;
  padding:0;
  background:transparent;
  color:var(--ink);
  font:inherit;
  font-size:12px;
  font-weight:700;
  text-align:left;
  cursor:pointer;
}
.gantt-equipment-link:hover,
.gantt-equipment-link:focus-visible{
  color:var(--blue);
  text-decoration:underline;
  outline:none;
}

/* Rows and timeline cells themselves are no longer navigation links. */
.gantt-label,
.gantt-timeline{
  cursor:default;
}
.gantt-bar.movable{
  cursor:grab;
}

/* Phone keeps its fixed bottom navigation. Module searches and Gantt controls
   can therefore use the top edge of the viewport. */
@media (max-width:640px){
  .module-sticky-controls>.sticky-control-card:not(.entry-form),
  .gantt-sticky-controls{
    top:0;
  }
}

/* v5.2.46 — Assigned Inspections as responsive widget cards */
.assigned-inspections-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:10px;
  margin-bottom:14px;
}

.assigned-inspections-grid .assigned-inspection-card{
  min-width:0;
  padding:16px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--surface-2);
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.assigned-inspections-grid .assigned-inspection-card:last-child{
  border-bottom:1px solid var(--line);
}

.assigned-inspection-name strong{
  font-size:15px;
}

.assigned-inspection-progress{
  margin-top:14px;
}

.assigned-inspection-dates{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:14px;
}

.assigned-inspection-date-card{
  position:relative;
  min-width:0;
  min-height:88px;
  width:100%;
  box-sizing:border-box;
  display:grid;
  grid-template-columns:52px minmax(0,1fr);
  grid-template-rows:auto 1fr;
  column-gap:11px;
  row-gap:5px;
  align-items:center;
  padding:10px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface);
  cursor:pointer;
  overflow:hidden;
}

.assigned-inspection-date-kind{
  grid-column:1 / -1;
  color:var(--ink-soft);
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.assigned-inspection-calendar{
  width:50px;
  height:52px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface-2);
}

.assigned-inspection-calendar-month{
  width:100%;
  padding:3px 2px;
  box-sizing:border-box;
  background:var(--blue);
  color:white;
  font-size:9px;
  font-weight:800;
  line-height:12px;
  text-align:center;
  letter-spacing:.05em;
}

.assigned-inspection-calendar strong{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--ink);
  font-size:21px;
  line-height:1;
}

.assigned-inspection-date-card.due .assigned-inspection-calendar-month{
  background:var(--red);
}

.assigned-inspection-date-detail{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.assigned-inspection-date-detail strong{
  color:var(--ink);
  font-size:13px;
}

.assigned-inspection-date-detail span{
  color:var(--ink-soft);
  font-size:11px;
}

@media(max-width:700px){
  .assigned-inspections-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }

  .assigned-inspections-grid .assigned-inspection-card{
    padding:11px;
  }

  .assigned-inspection-top{
    flex-direction:column;
  }

  .assigned-inspection-actions{
    width:100%;
    justify-content:space-between;
  }

  .assigned-inspection-dates{
    grid-template-columns:1fr;
  }
}

@media(max-width:390px){
  .assigned-inspections-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:520px){
  .assigned-inspections-grid .assigned-inspection-card{
    padding:13px;
    border-radius:16px;
  }

  .assigned-inspection-dates{
    gap:8px;
  }

  .assigned-inspection-date-card{
    grid-template-columns:44px minmax(0,1fr);
    column-gap:8px;
    min-height:82px;
    padding:8px;
  }

  .assigned-inspection-calendar{
    width:42px;
    height:48px;
  }

  .assigned-inspection-calendar strong{
    font-size:19px;
  }
}

/* v5.2.49 — structural Gantt calendar row + Assigned Inspection refinement */

/* Gantt header and equipment rows share the same two-column grid. */
.gantt-grid{
  grid-auto-flow:row;
  align-items:stretch;
}

.gantt-header-label,
.gantt-header{
  height:52px;
  min-height:52px;
  box-sizing:border-box;
  visibility:visible;
  opacity:1;
}

.gantt-header-label{
  position:sticky;
  left:0;
  top:auto;
  z-index:30;
  background:var(--surface-2);
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.gantt-header{
  position:relative;
  top:auto;
  z-index:5;
  overflow:visible;
  background:var(--surface-2);
  border-bottom:1px solid var(--line);
}

.gantt-day-head{
  top:0;
  bottom:auto;
  height:52px;
  min-height:52px;
  box-sizing:border-box;
  visibility:visible;
  opacity:1;
  background:var(--surface-2);
  z-index:1;
}

/* Frozen equipment labels stay opaque while the timeline scrolls beneath. */
.gantt-label{
  isolation:isolate;
  opacity:1;
  background:var(--surface);
}

.gantt-grid > .gantt-label{
  z-index:12;
  background:var(--surface);
  border-right:1px solid var(--line);
}

/* Assigned Inspection title is centered. Open is part of the title row. */
.assigned-inspection-top{
  display:block;
}

.assigned-inspection-title-row{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  text-align:center;
}

.assigned-inspection-title-row strong{
  min-width:0;
  color:var(--ink);
  font-size:15px;
  text-align:center;
  overflow-wrap:anywhere;
}

.assigned-inspection-open{
  flex:0 0 auto;
  font-size:12px;
}

.assigned-inspection-title-row .assigned-inspection-pending{
  flex:0 0 auto;
}

/* Progress text sits over the fill rather than consuming a separate line. */
.assigned-inspection-progress-track{
  position:relative;
  min-height:20px;
  overflow:hidden;
}

.assigned-inspection-progress-track .bar-fill{
  position:absolute;
  inset:0 auto 0 0;
  height:100%;
}

.assigned-inspection-progress-label{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 6px;
  box-sizing:border-box;
  color:#fff;
  font-size:11px;
  font-weight:800;
  line-height:1;
  text-align:center;
  text-shadow:0 1px 2px rgba(0,0,0,.75);
  pointer-events:none;
}

/* Compact Start / Due selector. */
.assigned-inspection-date-card{
  position:relative;
  display:block;
  width:100%;
  min-width:0;
  min-height:0;
  box-sizing:border-box;
  padding:0;
  border:0;
  border-radius:14px;
  background:transparent;
  overflow:hidden;
  cursor:pointer;
}

.assigned-inspection-date-display{
  display:grid;
  grid-template-columns:minmax(42px,1fr) 58px minmax(42px,1fr);
  gap:8px;
  align-items:center;
  justify-items:center;
  min-height:64px;
}

.assigned-inspection-date-month,
.assigned-inspection-date-year{
  min-width:0;
  color:var(--ink);
  font-size:18px;
  font-weight:800;
  line-height:1;
  text-align:center;
}

.assigned-inspection-calendar{
  width:56px;
  height:58px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  overflow:hidden;
  box-sizing:border-box;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  box-shadow:0 2px 7px rgba(0,0,0,.12);
}

.assigned-inspection-date-kind{
  display:block;
  width:100%;
  box-sizing:border-box;
  padding:3px 2px;
  background:var(--blue);
  color:#fff;
  font-size:9px;
  font-weight:800;
  line-height:13px;
  letter-spacing:.06em;
  text-align:center;
  text-transform:uppercase;
}

.assigned-inspection-date-card.due .assigned-inspection-date-kind{
  background:var(--red);
}

.assigned-inspection-calendar strong{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#172333;
  font-size:19px;
  font-weight:800;
  line-height:1;
}

/* Visible native date field: reliable on iOS and independent of Gantt editing. */
.assigned-inspection-date-picker{
  position:relative !important;
  inset:auto !important;
  display:block !important;
  width:100% !important;
  height:36px !important;
  min-width:0 !important;
  min-height:36px !important;
  box-sizing:border-box;
  margin:7px 0 0 !important;
  padding:5px 8px !important;
  border:1px solid var(--line) !important;
  border-radius:8px;
  opacity:1 !important;
  background:var(--surface-2);
  color:var(--ink);
  font:inherit;
  font-size:12px;
  cursor:pointer;
  pointer-events:auto !important;
  -webkit-appearance:auto;
  appearance:auto;
}

.assigned-inspection-date-picker:disabled{
  cursor:default;
  opacity:.65 !important;
}

.assigned-inspection-date-detail,
.assigned-inspection-native-date{
  display:none !important;
}

/* Phone: Assigned Inspection cards are one full-width card per row. */
@media(max-width:700px){
  .assigned-inspections-grid{
    grid-template-columns:1fr;
    gap:12px;
  }

  .assigned-inspections-grid .assigned-inspection-card{
    width:100%;
    box-sizing:border-box;
    padding:13px;
    border-radius:16px;
  }

  .assigned-inspection-dates{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }

  .gantt-header-label,
  .gantt-grid > .gantt-label{
    background:var(--surface);
  }

  .gantt-header-label{
    background:var(--surface-2);
  }
}

@media(max-width:390px){
  .assigned-inspection-dates{
    grid-template-columns:1fr;
  }
}

/* v5.2.53 — dedicated phone Assigned Inspection calendar.
   Desktop keeps the proven native date input. */
.assigned-inspection-mobile-date-button{
  border:0;
  padding:0;
  margin:0;
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:inherit;
}

.assigned-inspection-mobile-date-button:disabled{
  cursor:default;
}

.equipment-date-picker-overlay{
  z-index:220;
}

.equipment-date-picker-modal{
  max-width:390px;
}

.equipment-date-picker-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding-right:34px;
}

.equipment-date-picker-title{
  font-size:18px;
  font-weight:800;
}

.equipment-date-calendar-nav{
  display:grid;
  grid-template-columns:42px 1fr 42px;
  align-items:center;
  gap:8px;
  margin-top:20px;
}

.equipment-date-calendar-nav strong{
  text-align:center;
  font-size:14px;
}

.equipment-date-calendar-weekdays,
.equipment-date-calendar-grid{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:5px;
}

.equipment-date-calendar-weekdays{
  margin-top:14px;
}

.equipment-date-calendar-weekdays span{
  padding:4px 0;
  color:var(--ink-soft);
  font-size:10px;
  font-weight:700;
  text-align:center;
  text-transform:uppercase;
}

.equipment-date-calendar-grid{
  margin-top:4px;
}

.equipment-date-calendar-blank{
  aspect-ratio:1;
}

.equipment-date-calendar-day{
  aspect-ratio:1;
  min-width:0;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface-2);
  color:var(--ink);
  font:inherit;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}

.equipment-date-calendar-day.selected{
  border-color:var(--blue);
  background:var(--blue);
  color:#fff;
}

.equipment-date-calendar-day:disabled,
.equipment-date-calendar-day.disabled{
  border-color:transparent;
  background:transparent;
  color:var(--ink-soft);
  opacity:.32;
  cursor:not-allowed;
  pointer-events:none;
}

.equipment-date-picker-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:18px;
}

@media(min-width:701px){
  .assigned-inspection-mobile-date-button{
    pointer-events:none;
  }
}

@media(max-width:700px){
  .assigned-inspection-date-picker{
    display:none !important;
  }

  .assigned-inspection-mobile-date-button{
    display:flex;
    cursor:pointer;
  }

  .equipment-date-picker-modal{
    width:100%;
    max-width:390px;
    padding:22px 16px 18px;
  }
}

/* v5.2.54 — phone schedule modal + desktop Gantt calendar header */

/* The dedicated phone date picker must center against the viewport rather than
   inheriting positioning from the Equipment card or mobile navigation shell. */
.equipment-date-picker-overlay{
  position:fixed !important;
  inset:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:20px !important;
  box-sizing:border-box;
}

@media(max-width:700px){
  .equipment-date-picker-overlay{
    padding:
      max(16px, env(safe-area-inset-top))
      16px
      max(16px, env(safe-area-inset-bottom)) !important;
  }

  .equipment-date-picker-modal{
    width:min(100%,390px) !important;
    max-width:390px !important;
    margin:0 !important;
    max-height:calc(100dvh - 32px) !important;
  }
}

/* On desktop the sticky Gantt controls remain above the schedule while
   scrolling, but the calendar header itself must occupy visible layout space
   immediately below those controls instead of being painted underneath them. */
@media(min-width:701px){
  .gantt-sticky-controls{
    position:relative;
    top:auto;
  }

  .gantt-header-label,
  .gantt-header{
    position:relative;
    top:auto;
  }

  .gantt-header-label{
    left:auto;
  }
}

/* v5.2.56 — deterministic iPhone calendar viewport centering. */
@media(max-width:700px){
  .equipment-date-picker-overlay{
    width:100vw !important;
    height:100dvh !important;
    min-height:100dvh !important;
    top:0 !important;
    right:auto !important;
    bottom:auto !important;
    left:0 !important;
    margin:0 !important;
    overflow:auto !important;
    align-items:center !important;
    justify-content:center !important;
  }

  .equipment-date-picker-modal{
    flex:0 0 auto !important;
    align-self:auto !important;
  }
}

/* v5.2.57 — center Assigned Inspection schedule controls on desktop. */
@media(min-width:701px){
  .assigned-inspection-date-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
  }

  .assigned-inspection-date-display{
    width:min(100%,220px);
  }

  .assigned-inspection-date-picker{
    width:min(100%,220px) !important;
    margin:7px auto 0 !important;
  }
}


/* v5.2.58 — continuous Gantt drag across adjacent periods.
   The active timeline remains immediate while the drag handoff re-renders
   the previous/next week or month. */
.gantt-dragging .gantt-scroll{
  scroll-behavior:auto;
}
.gantt-dragging .gantt-bar.movable{
  cursor:grabbing;
}

/* v5.2.59 — viewport-level Gantt HUD.
   This is a display-only mirror. The original Gantt remains the source of
   truth for layout, horizontal scrolling, dragging and date calculations. */
.gantt-floating-hud{
  position:fixed;
  top:0;
  z-index:120;
  box-sizing:border-box;
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--line);
  border-top:0;
  border-radius:0 0 10px 10px;
  box-shadow:0 10px 24px rgba(0,0,0,.22);
  pointer-events:none;
}

.gantt-floating-hud-controls{
  background:var(--surface);
  border-bottom:1px solid var(--line);
}

.gantt-floating-hud-controls .gantt-controls{
  padding:8px 10px;
}

.gantt-floating-hud-calendar{
  display:flex;
  width:100%;
  box-sizing:border-box;
  height:52px;
  min-height:52px;
  overflow:hidden;
  background:var(--surface-2);
}

.gantt-floating-hud-label{
  position:relative;
  display:flex;
  align-items:center;
  box-sizing:border-box;
  height:52px;
  min-height:52px;
  padding:9px 12px;
  overflow:hidden;
  white-space:nowrap;
  background:var(--surface-2);
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  color:var(--ink-soft);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em;
  z-index:2;
}

.gantt-floating-hud-days{
  position:relative;
  height:52px;
  min-height:52px;
  overflow:hidden;
  background:var(--surface-2);
  border-bottom:1px solid var(--line);
}

.gantt-floating-hud-days .gantt-day-head{
  top:0;
  bottom:auto;
  height:52px;
  min-height:52px;
  box-sizing:border-box;
}

@media(max-width:700px){
  .gantt-floating-hud{
    /*
     * Phone navigation is docked at the bottom, so the Gantt HUD can use
     * the top viewport edge.
     */
    top:0;
  }
}

/* v5.2.59 Step 93 — the floating HUD mirrors only the compact navigation row.
   Filter/search/menu controls remain in normal document flow. */
.gantt-floating-hud-controls{
  padding:0;
  overflow:hidden;
}

.gantt-floating-hud-controls > .gantt-controls{
  margin:0;
  padding:8px 10px;
  min-height:56px;
  box-sizing:border-box;
  background:var(--surface);
}

.gantt-floating-hud-controls .gantt-filterbar,
.gantt-floating-hud-controls .gantt-tool-row,
.gantt-floating-hud-controls .gantt-selection-toolbar,
.gantt-floating-hud-controls .gantt-tool-menu{
  display:none !important;
}

/* v5.2.59 Step 96 — detached Gantt controls remain operational.
   Calendar/header mirror stays non-interactive so it cannot interfere with
   Gantt rows or drag/drop underneath it. */
.gantt-floating-hud-controls{
  pointer-events:auto;
}

.gantt-floating-hud-calendar{
  pointer-events:none;
}

.gantt-floating-hud-controls button{
  pointer-events:auto;
  cursor:pointer;
}

/* v5.2.59 — Gantt tools remain available in the detached floating HUD. */
.gantt-floating-hud-controls-row{
  display:flex;
  align-items:center;
  width:100%;
}

.gantt-floating-hud-controls-row .gantt-floating-hud-controls{
  flex:1 1 auto;
  min-width:0;
}

.gantt-floating-menu-wrap{
  position:relative;
  flex:0 0 auto;
  padding-right:8px;
  pointer-events:auto;
}

.gantt-floating-menu-button{
  pointer-events:auto;
}

.gantt-floating-tool-menu{
  /*
   * FLOATING GANTT MENU CONTAINMENT
   *
   * The menu belongs to the floating Gantt HUD, not the browser viewport.
   * Anchor its right edge to the hamburger wrapper so desktop/laptop
   * layouts cannot send it outside the Gantt card.
   */
  position:absolute;
  z-index:140;
  top:calc(100% + 6px);
  right:8px;
  left:auto;
  min-width:210px;
  max-width:min(320px,calc(100vw - 24px));
  padding:6px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface);
  box-shadow:0 12px 28px rgba(0,0,0,.28);
  pointer-events:auto;
}

.gantt-floating-tool-menu:empty{
  display:none;
}

.gantt-floating-tool-menu > button{
  display:block;
  width:100%;
  padding:8px 10px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:var(--ink);
  text-align:left;
  cursor:pointer;
}

.gantt-floating-tool-menu > button:hover{
  background:var(--surface-2);
}

.gantt-floating-tool-menu .module-arrange{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:8px 10px;
}

.gantt-floating-tool-menu .module-arrange select{
  width:100%;
}


/* v5.2.59 — active Filter / Multi-select controls inside floating menu. */
.gantt-floating-active-tools{
  margin-top:6px;
  padding-top:8px;
  border-top:1px solid var(--line);
}

.gantt-floating-tool-heading{
  padding:2px 10px 7px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

.gantt-floating-active-tools label{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:6px 10px;
}

.gantt-floating-active-tools label > span{
  font-size:11px;
  color:var(--ink-soft);
}

.gantt-floating-active-tools select{
  width:100%;
}

.gantt-floating-active-tools > button{
  display:block;
  width:100%;
  padding:8px 10px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:var(--ink);
  text-align:left;
  cursor:pointer;
}

.gantt-floating-active-tools > button:hover{
  background:var(--surface-2);
}

.gantt-floating-selection-count{
  padding:6px 10px;
  font-size:12px;
}

/* v5.2.59 Step 130 — responsive detached Gantt active tools.
   Desktop mirrors active filters / multi-select in the floating header.
   Mobile keeps active tools inside the compact overflow menu. */

.gantt-floating-desktop-tools{
  display:block;
  width:100%;
  box-sizing:border-box;
  background:var(--surface);
  border-bottom:1px solid var(--line);
  pointer-events:auto;
}

.gantt-floating-desktop-tools:empty{
  display:none;
}

.gantt-floating-desktop-tools .gantt-filterbar,
.gantt-floating-desktop-tools .gantt-selection-toolbar{
  margin:0;
  padding:8px 10px;
  box-sizing:border-box;
}

.gantt-floating-desktop-tools select,
.gantt-floating-desktop-tools input,
.gantt-floating-desktop-tools button{
  pointer-events:auto;
}

@media(min-width:701px){
  /*
   * Desktop/laptop: active controls belong in the visible floating header,
   * not inside the overflow menu.
   */
  .gantt-floating-tool-menu .gantt-floating-active-tools{
    display:none !important;
  }
}

@media(max-width:700px){
  /*
   * Phone: preserve horizontal space. Active controls stay under Arrange by
   * inside the floating overflow menu.
   */
  .gantt-floating-desktop-tools{
    display:none !important;
  }
}

/* v5.2.59 Step 132 — floating Gantt controls hit-testing.
   The detached HUD shell is intentionally non-interactive except for its
   controls. Keep the navigation/menu row above the mirrored desktop tools
   and calendar so the floating menu remains clickable at every resolution. */
.gantt-floating-hud-controls-row{
  position:relative;
  z-index:6;
  pointer-events:auto;
}

.gantt-floating-hud-controls{
  position:relative;
  z-index:6;
  pointer-events:auto;
}

.gantt-floating-menu-wrap{
  position:relative;
  z-index:8;
  pointer-events:auto;
}

.gantt-floating-menu-button{
  position:relative;
  z-index:9;
  pointer-events:auto !important;
  cursor:pointer;
}

.gantt-floating-tool-menu{
  z-index:10;
  pointer-events:auto;
}

.gantt-floating-tool-menu button,
.gantt-floating-tool-menu select,
.gantt-floating-tool-menu input,
.gantt-floating-tool-menu label{
  pointer-events:auto;
}

/* Desktop active filters remain interactive but below the navigation/menu
   layer so they cannot intercept the floating menu button. */
.gantt-floating-desktop-tools{
  position:relative;
  z-index:4;
  pointer-events:auto;
}

/* Calendar mirror is display-only. */
.gantt-floating-hud-calendar{
  position:relative;
  z-index:2;
  pointer-events:none;
}

/* v5.2.59 Step 133 — compact mobile Gantt filters.
   Desktop keeps the full filter row. Phones use one Filters button and an
   expandable panel while primary timeline navigation stays directly visible. */

.gantt-mobile-filter-shell,
.gantt-floating-mobile-filter-shell{
  display:none;
}

@media(max-width:700px){
  /* Replace the permanently expanded filter row with the compact mobile UI. */
  .gantt-desktop-filterbar{
    display:none !important;
  }

  .gantt-mobile-filter-shell{
    display:block;
    position:relative;
    padding-bottom:10px;
  }

  .gantt-mobile-filter-toggle{
    min-height:40px;
    padding:8px 14px;
    font-weight:700;
  }

  .gantt-mobile-filter-panel{
    margin-top:8px;
    padding:12px;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--surface-2);
    box-shadow:0 10px 24px rgba(0,0,0,.16);
  }

  .gantt-mobile-filter-panel[hidden]{
    display:none !important;
  }

  .gantt-mobile-filter-panel-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:8px;
  }

  .gantt-mobile-filter-panel-head strong{
    font-size:13px;
  }

  .gantt-mobile-filter-panel label{
    display:flex;
    flex-direction:column;
    gap:5px;
    margin-top:9px;
  }

  .gantt-mobile-filter-panel label > span{
    font-size:11px;
    font-weight:700;
    color:var(--ink-soft);
  }

  .gantt-mobile-filter-panel select{
    width:100%;
    min-height:42px;
  }

  .gantt-mobile-filter-clear{
    width:100%;
    margin-top:10px;
  }

  /*
   * Detached/floating phone header gets the same compact filter control.
   * It sits between the navigation row and calendar header.
   */
  .gantt-floating-mobile-filter-shell{
    display:block;
    position:relative;
    z-index:7;
    width:100%;
    box-sizing:border-box;
    padding:6px 10px 8px;
    background:var(--surface);
    border-bottom:1px solid var(--line);
    pointer-events:auto;
  }

  .gantt-floating-mobile-filter-shell .gantt-mobile-filter-panel{
    max-height:min(58vh,430px);
    overflow-y:auto;
    overscroll-behavior:contain;
    pointer-events:auto;
  }

  .gantt-floating-mobile-filter-shell button,
  .gantt-floating-mobile-filter-shell select,
  .gantt-floating-mobile-filter-shell label{
    pointer-events:auto;
  }

  /*
   * Filters now have their own dedicated mobile control. Do not duplicate
   * Equipment / Area / Inspection Type beneath Arrange by in the ☰ menu.
   * Multi-select active controls remain available there.
   */
  .gantt-floating-tool-menu
  .gantt-floating-active-tools
  .gantt-floating-tool-heading:first-child,
  .gantt-floating-tool-menu
  .gantt-floating-active-tools
  label{
    display:none;
  }
}

@media(min-width:701px){
  /* Explicitly preserve the confirmed desktop/laptop implementation. */
  .gantt-mobile-filter-shell,
  .gantt-floating-mobile-filter-shell{
    display:none !important;
  }

  .gantt-desktop-filterbar{
    display:flex;
  }
}

/* v5.2.59 Step 136 — Today is the single timeline-focus action. */
.gantt-today{
  width:3px !important;
  border-left:0 !important;
  background:var(--blue) !important;
  opacity:1 !important;
  z-index:8 !important;
  pointer-events:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.22);
}

/*
 * Phone compact toolbar:
 * Filters and the hamburger share one row. The filter panel opens underneath.
 */
@media(max-width:700px){
  .gantt-mobile-filter-shell{
    padding-bottom:8px;
  }

  .gantt-mobile-filter-shell > .gantt-mobile-filter-toggle{
    margin:0;
  }

  .gantt-floating-hud-controls-row{
    display:flex;
    align-items:center;
  }

  .gantt-floating-mobile-filter-shell{
    position:absolute;
    top:8px;
    left:10px;
    right:auto;
    width:auto;
    padding:0;
    border:0;
    background:transparent;
    z-index:12;
  }

  .gantt-floating-mobile-filter-shell
  .gantt-mobile-filter-panel{
    position:fixed;
    top:58px;
    left:10px;
    right:10px;
    width:auto;
    margin:0;
    background:var(--surface);
    border:1px solid var(--line);
    z-index:150;
  }

  .gantt-floating-menu-wrap{
    margin-left:auto;
  }
}

/* =========================================================
   v5.2.59 Step 140
   Compact mobile Gantt tools + clean floating-header handoff
   ========================================================= */

@media(max-width:700px){

  /*
   * Normal Gantt:
   * Filters and hamburger occupy the same visual toolbar line.
   */
  .gantt-card{
    position:relative;
  }

  .gantt-mobile-filter-shell{
    position:absolute;
    top:16px;
    left:24px;
    right:auto;
    width:auto;
    padding:0;
    margin:0;
    border:0;
    background:transparent;
    z-index:20;
  }

  .gantt-mobile-filter-shell >
  .gantt-mobile-filter-toggle{
    margin:0;
  }

  /*
   * The actual filter panel remains a full usable panel beneath
   * the compact top row.
   */
  .gantt-mobile-filter-shell
  .gantt-mobile-filter-panel{
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    width:min(86vw,420px);
    max-height:70vh;
    overflow:auto;
    margin:0;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:10px;
    z-index:160;
    box-shadow:0 12px 28px rgba(0,0,0,.28);
  }

  /*
   * Floating Gantt:
   * Filters is now structurally inside the exact same flex row
   * as the hamburger instead of being absolutely overlaid.
   */
  .gantt-floating-hud-controls-row{
    display:flex;
    align-items:center;
    gap:8px;
    width:100%;
    pointer-events:auto;
  }

  .gantt-floating-hud-controls{
    flex:1 1 auto;
    min-width:0;
  }

  .gantt-floating-mobile-filter-shell{
    position:relative;
    inset:auto;
    flex:0 0 auto;
    width:auto;
    padding:0;
    margin:0;
    border:0;
    background:transparent;
    z-index:12;
    pointer-events:auto;
  }

  .gantt-floating-mobile-filter-shell
  .gantt-mobile-filter-toggle{
    margin:0;
  }

  .gantt-floating-menu-wrap{
    position:relative;
    flex:0 0 auto;
    margin-left:0;
    z-index:13;
  }

  .gantt-floating-mobile-filter-shell
  .gantt-mobile-filter-panel{
    position:fixed;
    top:58px;
    left:10px;
    right:10px;
    width:auto;
    max-height:70vh;
    overflow:auto;
    margin:0;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:10px;
    z-index:160;
    box-shadow:0 12px 28px rgba(0,0,0,.28);
  }
}

/* =========================================================
   v5.2.59 Step 141
   Desktop Gantt: filters + hamburger on one compact row.
   Mobile Step 140 remains untouched.
   ========================================================= */

@media(min-width:701px){

  /*
   * Remove the oversized vertical space created by the menu occupying
   * a separate line above the desktop filters.
   */
  .gantt-card{
    position:relative;
  }

  /*
   * Normal desktop filter row leaves room at its right edge for ☰.
   */
  .gantt-desktop-filterbar{
    padding-right:72px;
  }

  /*
   * Place the normal Gantt hamburger on the same vertical level
   * as the desktop filter controls.
   */
  .gantt-card > .gantt-sticky-controls .gantt-menu-wrap,
  .gantt-card .gantt-sticky-controls > .gantt-menu-wrap{
    position:absolute;
    top:16px;
    right:16px;
    z-index:25;
    margin:0;
  }

  /*
   * Floating desktop HUD:
   * filters and hamburger share one row instead of stacking.
   */
  .gantt-floating-hud{
    position:fixed;
  }

  .gantt-floating-hud-controls-row{
    position:absolute;
    top:8px;
    right:10px;
    width:auto;
    z-index:20;
  }

  .gantt-floating-desktop-tools{
    display:block;
    padding-right:72px;
  }

  .gantt-floating-desktop-tools .gantt-filterbar{
    margin:0;
  }
}

/* =========================================================
   v5.2.59 Step 146
   Desktop filters and hamburger are one structural row.
   ========================================================= */

@media(min-width:701px){

  .gantt-tool-row{
    display:flex;
    align-items:flex-end;
    gap:12px;
    width:100%;
  }

  .gantt-tool-row-spacer{
    display:none;
  }

  .gantt-desktop-inline-tools{
    display:flex;
    align-items:flex-end;
    gap:10px;
    flex:1 1 auto;
    min-width:0;
  }

  .gantt-desktop-inline-tools label{
    display:flex;
    flex-direction:column;
    gap:5px;
    flex:1 1 0;
    min-width:120px;
    margin:0;
  }

  .gantt-desktop-inline-tools label > span:not(.sr-only){
    font-size:13px;
    line-height:1.15;
    white-space:nowrap;
  }

  .gantt-desktop-inline-tools select,
  .gantt-desktop-inline-tools input{
    width:100%;
    min-width:0;
    height:42px;
  }

  .gantt-tool-menu-wrap{
    position:relative !important;
    inset:auto !important;
    flex:0 0 auto;
    align-self:flex-end;
    margin:0 !important;
  }

  /*
   * The old desktop filterbar remains in the DOM for existing event/
   * floating-HUD plumbing, but the visible desktop controls now live
   * directly in the tool row.
   */
  .gantt-desktop-filterbar{
    display:none !important;
  }
}

@media(min-width:701px) and (max-width:1100px){
  .gantt-desktop-inline-tools{
    gap:7px;
  }

  .gantt-desktop-inline-tools label{
    min-width:100px;
  }

  .gantt-desktop-inline-tools label > span:not(.sr-only){
    font-size:11px;
  }
}

/* =========================================================
   v5.2.59 Step 147
   Final responsive ownership of Gantt filter/menu controls.
   ========================================================= */

/* ---------- PHONE / MOBILE ---------- */
@media(max-width:700px){

  /* Step 146 desktop controls must never appear on mobile. */
  .gantt-desktop-inline-tools,
  .gantt-desktop-filterbar,
  .gantt-floating-desktop-tools{
    display:none !important;
  }

  /*
   * Compact normal header:
   * Filters left, hamburger right, same exact row.
   */
  .gantt-tool-row{
    position:relative;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px;
    min-height:64px;
    padding:8px 16px;
  }

  .gantt-tool-row-spacer{
    display:none !important;
  }

  .gantt-mobile-filter-shell{
    position:static !important;
    inset:auto !important;
    display:block !important;
    width:auto !important;
    margin:0 !important;
    padding:0 !important;
    flex:0 0 auto;
    order:1;
    background:transparent !important;
    border:0 !important;
  }

  .gantt-mobile-filter-shell >
  .gantt-mobile-filter-toggle{
    margin:0 !important;
  }

  .gantt-tool-menu-wrap{
    position:relative !important;
    inset:auto !important;
    width:auto !important;
    margin:0 0 0 auto !important;
    flex:0 0 auto;
    order:2;
    z-index:30;
  }

  /*
   * Mobile filter panel is an overlay beneath the compact row.
   * It must not widen or push the Gantt card.
   */
  .gantt-mobile-filter-shell
  .gantt-mobile-filter-panel{
    position:absolute !important;
    top:72px !important;
    left:16px !important;
    right:16px !important;
    width:auto !important;
    max-width:none !important;
    max-height:70vh;
    overflow:auto;
    box-sizing:border-box;
    margin:0 !important;
    z-index:170;
  }

  /* Floating header uses exactly the same ownership. */
  .gantt-floating-hud-controls-row{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px;
    width:100%;
    box-sizing:border-box;
  }

  .gantt-floating-hud-controls{
    flex:1 1 auto;
    min-width:0;
  }

  .gantt-floating-mobile-filter-shell{
    position:relative !important;
    inset:auto !important;
    display:block !important;
    width:auto !important;
    flex:0 0 auto;
    margin:0 !important;
    padding:0 !important;
  }

  .gantt-floating-menu-wrap{
    position:relative !important;
    inset:auto !important;
    flex:0 0 auto;
    margin-left:auto !important;
  }
}


/* ---------- TABLET / LAPTOP / DESKTOP ---------- */
@media(min-width:701px){

  /* Compact mobile filter control never participates on desktop. */
  .gantt-mobile-filter-shell,
  .gantt-floating-mobile-filter-shell{
    display:none !important;
  }

  /*
   * Desktop owns one structural row:
   * Equipment | Area | Inspection Type | ☰
   */
  .gantt-tool-row{
    position:relative !important;
    display:flex !important;
    align-items:flex-end !important;
    flex-wrap:nowrap !important;
    gap:10px !important;
    width:100%;
    box-sizing:border-box;
  }

  .gantt-tool-row-spacer{
    display:none !important;
  }

  .gantt-desktop-inline-tools{
    display:flex !important;
    align-items:flex-end !important;
    flex:1 1 auto !important;
    min-width:0;
    gap:10px;
    order:1;
  }

  .gantt-desktop-inline-tools label{
    flex:1 1 0 !important;
    min-width:0 !important;
  }

  .gantt-desktop-inline-tools select,
  .gantt-desktop-inline-tools input{
    width:100% !important;
    min-width:0 !important;
    box-sizing:border-box;
  }

  /*
   * Explicitly defeat all older absolute hamburger positioning.
   */
  .gantt-tool-row > .gantt-tool-menu-wrap{
    position:relative !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;
    inset:auto !important;
    order:2;
    flex:0 0 auto !important;
    align-self:flex-end !important;
    margin:0 !important;
    z-index:30;
  }

  .gantt-tool-row >
  .gantt-tool-menu-wrap >
  .gantt-menu-button{
    margin:0 !important;
  }

  /* Old duplicate desktop filter row remains plumbing-only. */
  .gantt-desktop-filterbar{
    display:none !important;
  }
}


/* Slightly tighten intermediate laptop widths. */
@media(min-width:701px) and (max-width:1100px){
  .gantt-desktop-inline-tools{
    gap:7px;
  }

  .gantt-desktop-inline-tools label > span:not(.sr-only){
    font-size:11px;
  }
}

/* =========================================================
   v5.2.59 Step 149
   One real responsive Gantt tool row.
   ========================================================= */

@media(max-width:700px){

  /*
   * DOM order is:
   * desktop tools (hidden) | menu | mobile Filters.
   *
   * Force the visible mobile order to:
   * Filters -------------------------------- ☰
   */
  .gantt-tool-row{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    flex-wrap:nowrap !important;
    width:100% !important;
    min-height:64px !important;
    gap:12px !important;
    box-sizing:border-box !important;
  }

  .gantt-tool-row > .gantt-mobile-filter-shell{
    display:block !important;
    position:relative !important;
    order:1 !important;
    flex:0 0 auto !important;
    width:auto !important;
    margin:0 !important;
    padding:0 !important;
  }

  .gantt-tool-row >
  .gantt-mobile-filter-shell >
  .gantt-mobile-filter-toggle{
    margin:0 !important;
  }

  .gantt-tool-row > .gantt-tool-menu-wrap{
    display:block !important;
    position:relative !important;
    inset:auto !important;
    order:2 !important;
    flex:0 0 auto !important;
    margin:0 0 0 auto !important;
    align-self:center !important;
  }

  .gantt-tool-row >
  .gantt-tool-menu-wrap >
  .gantt-menu-button{
    margin:0 !important;
  }

  /*
   * Panel is anchored to the unified tool row but remains an overlay.
   */
  .gantt-tool-row
  .gantt-mobile-filter-panel{
    top:calc(100% + 8px) !important;
    left:0 !important;
    right:auto !important;
    width:min(
      calc(100vw - 64px),
      820px
    ) !important;
    max-width:none !important;
  }
}


@media(min-width:701px){

  /*
   * Desktop/laptop:
   * three filters consume the row;
   * hamburger is the final fixed-width item at far right.
   */
  .gantt-tool-row{
    justify-content:flex-start !important;
  }

  .gantt-tool-row > .gantt-desktop-inline-tools{
    order:1 !important;
    flex:1 1 auto !important;
    width:auto !important;
    min-width:0 !important;
  }

  .gantt-tool-row > .gantt-mobile-filter-shell{
    display:none !important;
  }

  .gantt-tool-row > .gantt-tool-menu-wrap{
    order:2 !important;
    position:relative !important;
    inset:auto !important;
    flex:0 0 auto !important;
    margin-left:auto !important;
    align-self:flex-end !important;
  }
}


/* =========================================================
   v5.2.59 Step 150
   Permanent mobile Filters control + floating HUD ownership.
   ========================================================= */

@media(max-width:700px){

  /*
   * Filters is a permanent primary mobile Gantt control.
   * It remains visible whether or not a filter is currently active/open.
   */
  .gantt-tool-row > .gantt-mobile-filter-shell{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
  }

  .gantt-tool-row
  .gantt-mobile-filter-toggle{
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
    align-items:center !important;
    justify-content:center !important;
    pointer-events:auto !important;
  }

  /*
   * Keep Filters and hamburger on one common centerline.
   */
  .gantt-tool-row{
    align-items:center !important;
  }

  .gantt-tool-row > .gantt-mobile-filter-shell,
  .gantt-tool-row > .gantt-tool-menu-wrap{
    align-self:center !important;
  }

  /*
   * The detached/floating HUD must remain interactive and visible while
   * the page scrolls vertically.
   */
  .gantt-floating-hud{
    display:block;
    visibility:visible;
    opacity:1;
  }

  .gantt-floating-hud-controls-row{
    position:relative !important;
    z-index:6 !important;
    display:flex !important;
    align-items:center !important;
  }

  .gantt-floating-mobile-filter-shell{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
  }

  .gantt-floating-mobile-filter-shell
  .gantt-mobile-filter-toggle{
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
  }

  .gantt-floating-menu-wrap,
  .gantt-floating-menu-button{
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
  }
}

@media(min-width:701px){

  /*
   * Permanent mobile source exists in DOM for responsive ownership,
   * but remains completely hidden on laptop/desktop.
   */
  .gantt-tool-row > .gantt-mobile-filter-shell,
  .gantt-floating-mobile-filter-shell{
    display:none !important;
  }
}


/* =========================================================
   v5.2.59 Step 154
   Floating HUD activation/layout stabilization.
   Mobile: Filters left + menu right; navigation underneath.
   ========================================================= */

@media(max-width:700px){

  /*
   * The floating HUD's first line belongs only to the two tool actions.
   * Keep Filters at the left and the hamburger at the right.
   */
  .gantt-floating-hud-controls-row{
    position:relative !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;
    inset:auto !important;

    display:grid !important;
    grid-template-columns:auto 1fr auto !important;
    grid-template-areas:"filter space menu" !important;
    align-items:center !important;

    width:100% !important;
    min-height:64px;
    padding:8px 10px !important;
    gap:10px !important;
    box-sizing:border-box;
  }

  /*
   * The cloned primary controls should not consume the Filters/menu line.
   * Put them on their own full-width row immediately underneath.
   */
  .gantt-floating-hud-controls{
    grid-column:1 / -1 !important;
    grid-row:2 !important;
    width:100% !important;
    min-width:0 !important;
    order:initial !important;
  }

  .gantt-floating-mobile-filter-shell{
    grid-area:filter !important;
    position:relative !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;
    inset:auto !important;

    display:block !important;
    width:auto !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    justify-self:start !important;
    align-self:center !important;
    z-index:12 !important;
  }

  .gantt-floating-mobile-filter-shell >
  .gantt-mobile-filter-toggle{
    margin:0 !important;
  }

  .gantt-floating-menu-wrap{
    grid-area:menu !important;
    position:relative !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;
    inset:auto !important;

    width:auto !important;
    margin:0 !important;
    padding:0 !important;
    justify-self:end !important;
    align-self:center !important;
    z-index:14 !important;
  }

  .gantt-floating-menu-button{
    margin:0 !important;
  }

  /*
   * Keep the filter panel below the top tool line rather than allowing its
   * absolute/fixed positioning to pull the Filters button away from ☰.
   */
  .gantt-floating-mobile-filter-shell
  .gantt-mobile-filter-panel{
    position:fixed !important;
    top:64px !important;
    left:10px !important;
    right:10px !important;
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
    z-index:180 !important;
  }
}


/* =========================================================
   v5.2.59 Step 155
   Final floating Gantt HUD layout ownership.

   Desktop:
     row 1 = active filters/tools + hamburger
     row 2 = Lock/View + period navigation
     row 3 = Equipment / Inspection + dates

   Mobile:
     row 1 = Filters + hamburger
     row 2 = Lock/View + period navigation
     row 3 = Equipment / Inspection + dates
   ========================================================= */

.gantt-floating-hud{
  display:flex !important;
  flex-direction:column !important;
  overflow:visible !important;
}

/*
 * The mirrored calendar must always be the final full-width HUD row.
 * Older rules must not allow it to sit beside the controls.
 */
.gantt-floating-hud-calendar{
  position:relative !important;
  display:flex !important;
  width:100% !important;
  flex:0 0 52px !important;
  order:30 !important;
  overflow:hidden !important;
}

/* =========================================================
   DESKTOP / LAPTOP
   ========================================================= */

@media(min-width:701px){

  /*
   * Desktop tool row:
   * active filters/search/selection occupy available width;
   * hamburger remains fixed at far right.
   */
  .gantt-floating-hud-controls-row{
    position:relative !important;
    inset:auto !important;

    display:flex !important;
    flex-direction:row !important;
    align-items:flex-end !important;

    width:100% !important;
    min-height:0 !important;
    padding:8px 10px !important;
    gap:10px !important;

    box-sizing:border-box !important;
    order:10 !important;

    background:var(--surface) !important;
    border-bottom:1px solid var(--line);
  }

  /*
   * Navigation is a separate full-width row.
   */
  .gantt-floating-hud-controls{
    display:block !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    width:auto !important;
    order:2 !important;
  }

  .gantt-floating-hud-controls >
  .gantt-controls{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    flex-wrap:nowrap !important;

    width:100% !important;
    min-height:56px !important;
    margin:0 !important;
    padding:0 !important;

    box-sizing:border-box !important;
    background:transparent !important;
  }

  /*
   * Desktop active filters live in this row rather than disappearing
   * when the source Gantt has scrolled away.
   */
  .gantt-floating-desktop-tools{
    display:flex !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    width:auto !important;

    margin:0 !important;
    padding:0 !important;

    order:1 !important;
    align-items:flex-end !important;

    pointer-events:auto !important;
  }

  .gantt-floating-desktop-tools
  .gantt-filterbar{
    display:flex !important;
    flex:1 1 auto !important;
    align-items:flex-end !important;

    width:100% !important;
    min-width:0 !important;

    margin:0 !important;
    padding:0 !important;
    gap:10px !important;
  }

  .gantt-floating-desktop-tools
  .gantt-filterbar label{
    flex:1 1 0 !important;
    min-width:0 !important;
  }

  .gantt-floating-desktop-tools
  .gantt-filterbar select,
  .gantt-floating-desktop-tools
  .gantt-filterbar input{
    width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  /*
   * Hamburger is always the last item on the first row.
   */
  .gantt-floating-menu-wrap{
    position:relative !important;
    inset:auto !important;

    display:block !important;
    flex:0 0 auto !important;

    width:auto !important;
    margin:0 !important;
    padding:0 !important;

    order:3 !important;
    align-self:flex-end !important;

    z-index:30 !important;
    pointer-events:auto !important;
  }

  .gantt-floating-menu-button{
    margin:0 !important;
  }

  /*
   * Because the navigation clone currently lives inside the controls-row
   * DOM node, make it span a second flex line without changing JS/markup.
   */
  .gantt-floating-hud-controls-row{
    flex-wrap:wrap !important;
  }

  .gantt-floating-hud-controls{
    flex:0 0 100% !important;
    width:100% !important;
    order:20 !important;
  }

  .gantt-floating-desktop-tools{
    order:10 !important;
  }

  .gantt-floating-menu-wrap{
    order:11 !important;
  }

  .gantt-floating-mobile-filter-shell{
    display:none !important;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:700px){

  /*
   * First floating row:
   * Filters at far left, hamburger at far right.
   */
  .gantt-floating-hud-controls-row{
    position:relative !important;
    inset:auto !important;

    display:grid !important;
    grid-template-columns:auto 1fr auto !important;
    grid-template-areas:
      "filter spacer menu"
      "controls controls controls" !important;

    align-items:center !important;

    width:100% !important;
    min-height:0 !important;
    padding:8px 10px !important;
    gap:8px 10px !important;

    box-sizing:border-box !important;
    order:10 !important;

    background:var(--surface) !important;
    border-bottom:1px solid var(--line);
  }

  .gantt-floating-mobile-filter-shell{
    grid-area:filter !important;

    position:relative !important;
    inset:auto !important;

    display:block !important;
    width:auto !important;

    margin:0 !important;
    padding:0 !important;

    justify-self:start !important;
    align-self:center !important;

    border:0 !important;
    background:transparent !important;

    z-index:20 !important;
    pointer-events:auto !important;
  }

  .gantt-floating-menu-wrap{
    grid-area:menu !important;

    position:relative !important;
    inset:auto !important;

    display:block !important;
    width:auto !important;

    margin:0 !important;
    padding:0 !important;

    justify-self:end !important;
    align-self:center !important;

    z-index:30 !important;
    pointer-events:auto !important;
  }

  .gantt-floating-hud-controls{
    grid-area:controls !important;

    display:block !important;
    width:100% !important;
    min-width:0 !important;

    margin:0 !important;
    padding:0 !important;
  }

  .gantt-floating-hud-controls >
  .gantt-controls{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    width:100% !important;
    min-height:0 !important;

    margin:0 !important;
    padding:0 !important;
    gap:8px !important;

    box-sizing:border-box !important;
    background:transparent !important;
  }

  .gantt-floating-desktop-tools{
    display:none !important;
  }

  /*
   * Filter panel remains an overlay and therefore does not make the
   * floating header taller when opened.
   */
  .gantt-floating-mobile-filter-shell
  .gantt-mobile-filter-panel{
    position:fixed !important;
    top:64px !important;
    left:10px !important;
    right:10px !important;

    width:auto !important;
    max-width:none !important;
    max-height:70vh !important;

    margin:0 !important;
    overflow:auto !important;

    z-index:180 !important;
  }
}


/* =========================================================
   v5.2.59 Step 159
   Keep the real Gantt equipment column aligned with the
   floating Equipment / Inspection header.

   The floating calendar is display-only. Horizontal timeline
   scrolling must move only the calendar/timeline portion;
   the Equipment / Inspection column remains frozen.
   ========================================================= */

@media(min-width:701px){

  /*
   * Restore one consistent frozen-column model on desktop.
   *
   * Earlier desktop rules changed the header label to relative/left:auto
   * while body equipment labels remained sticky/left:0. That allowed the
   * mirrored calendar divider and the real equipment rows to use different
   * horizontal reference points.
   */
  .gantt-grid > .gantt-label{
    position:sticky !important;
    left:0 !important;
    z-index:12 !important;
    box-sizing:border-box !important;
    background:var(--surface) !important;
    border-right:1px solid var(--line) !important;
  }

  .gantt-grid > .gantt-header-label{
    position:sticky !important;
    left:0 !important;
    z-index:30 !important;
    background:var(--surface-2) !important;
  }

  /*
   * The timeline header itself continues to move with the horizontal
   * calendar axis. Only the Equipment / Inspection column is frozen.
   */
  .gantt-grid > .gantt-timeline.gantt-header{
    position:relative !important;
    left:auto !important;
    z-index:5 !important;
  }

  /*
   * Keep the floating mirror's two columns from shrinking each other.
   * JavaScript supplies the exact measured widths.
   */
  .gantt-floating-hud-label{
    flex-shrink:0 !important;
    box-sizing:border-box !important;
  }

  .gantt-floating-hud-days{
    flex-shrink:0 !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }
}


/* =========================================================
   v5.2.59 Step 160
   Final desktop floating HUD row order.

   Row 1: active filters/tools + hamburger
   Row 2: Lock/View + period navigation
   Row 3: Equipment / Inspection + calendar dates

   Step 159 frozen equipment-column behavior is unchanged.
   ========================================================= */

@media(min-width:701px){

  /*
   * The controls-row owns rows 1 and 2.
   * Desktop tools and menu occupy the first flex line.
   * Navigation occupies the complete second line.
   */
  .gantt-floating-hud-controls-row{
    display:flex !important;
    flex-flow:row wrap !important;
    align-items:flex-end !important;

    width:100% !important;
    padding:8px 10px !important;
    gap:8px 10px !important;

    box-sizing:border-box !important;
  }

  /* Row 1 — filters/search/selection tools. */
  .gantt-floating-desktop-tools{
    display:flex !important;

    flex:1 1 0 !important;
    width:auto !important;
    min-width:0 !important;

    order:10 !important;
    align-self:flex-end !important;
  }

  /*
   * Row 1 — hamburger.
   * Keep it immediately after the desktop tools.
   */
  .gantt-floating-menu-wrap{
    display:block !important;

    flex:0 0 auto !important;
    width:auto !important;

    order:11 !important;
    align-self:flex-end !important;
  }

  /*
   * Row 2 — operational navigation.
   * flex-basis:100% forces this onto its own line after filters/menu.
   */
  .gantt-floating-hud-controls{
    display:block !important;

    flex:0 0 100% !important;
    width:100% !important;
    min-width:0 !important;

    order:20 !important;
  }

  .gantt-floating-hud-controls > .gantt-controls{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;

    align-items:center !important;
    justify-content:space-between !important;

    width:100% !important;
    min-height:56px !important;

    margin:0 !important;
    padding:0 !important;
  }

  /*
   * Row 3 remains owned by Step 155/159 and must stay outside
   * the controls-row.
   */
  .gantt-floating-hud-calendar{
    order:30 !important;
    width:100% !important;
  }
}


/* =========================================================
   v5.2.59 Step 162
   Floating Gantt HUD structural ownership.

   Desktop:
     Row 1 — filters + menu
     Row 2 — navigation
     Row 3 — equipment/calendar

   Mobile:
     compact Filters + menu
     navigation
     equipment/calendar
   ========================================================= */

@media(min-width:701px){

  .gantt-floating-hud-controls-row{
    position:relative !important;
    inset:auto !important;

    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-areas:
      "tools menu"
      "controls controls" !important;

    align-items:end !important;

    width:100% !important;
    min-width:0 !important;
    min-height:0 !important;

    margin:0 !important;
    padding:8px 10px !important;
    gap:8px 10px !important;

    box-sizing:border-box !important;

    background:var(--surface) !important;
    border-bottom:1px solid var(--line) !important;

    pointer-events:auto !important;
  }

  .gantt-floating-desktop-tools{
    grid-area:tools !important;

    display:flex !important;
    position:relative !important;
    inset:auto !important;

    width:100% !important;
    min-width:0 !important;

    margin:0 !important;
    padding:0 !important;

    align-items:flex-end !important;

    pointer-events:auto !important;
  }

  .gantt-floating-desktop-tools
  .gantt-desktop-inline-tools{
    display:flex !important;
    flex:1 1 auto !important;
    align-items:flex-end !important;

    width:100% !important;
    min-width:0 !important;

    margin:0 !important;
    padding:0 !important;
    gap:10px !important;
  }

  .gantt-floating-desktop-tools
  .gantt-desktop-inline-tools > *{
    min-width:0 !important;
  }

  .gantt-floating-desktop-tools
  .gantt-desktop-inline-tools label{
    flex:1 1 0 !important;
    min-width:0 !important;
  }

  .gantt-floating-desktop-tools
  .gantt-desktop-inline-tools select,
  .gantt-floating-desktop-tools
  .gantt-desktop-inline-tools input{
    width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  .gantt-floating-menu-wrap{
    grid-area:menu !important;

    position:relative !important;
    inset:auto !important;

    display:block !important;

    width:auto !important;
    margin:0 !important;
    padding:0 !important;

    justify-self:end !important;
    align-self:end !important;

    z-index:30 !important;
    pointer-events:auto !important;
  }

  .gantt-floating-hud-controls{
    grid-area:controls !important;

    display:block !important;

    width:100% !important;
    min-width:0 !important;

    margin:0 !important;
    padding:0 !important;
  }

  .gantt-floating-hud-controls >
  .gantt-controls{
    display:flex !important;

    width:100% !important;
    min-width:0 !important;
    min-height:56px !important;

    align-items:center !important;
    justify-content:space-between !important;
    flex-wrap:nowrap !important;

    margin:0 !important;
    padding:0 !important;
    gap:10px !important;

    box-sizing:border-box !important;
    background:transparent !important;
  }

  .gantt-floating-mobile-filter-shell{
    display:none !important;
  }

  .gantt-floating-hud-calendar{
    position:relative !important;

    display:flex !important;

    width:100% !important;
    height:52px !important;
    min-height:52px !important;

    margin:0 !important;
    padding:0 !important;

    flex:0 0 52px !important;

    overflow:hidden !important;

    background:var(--surface-2) !important;

    pointer-events:none !important;
  }
}


/*
 * Step 162 mobile ownership after moving desktop tools into the
 * controls-row DOM. Desktop tools remain absent on phones.
 */
@media(max-width:700px){

  .gantt-floating-desktop-tools{
    display:none !important;
  }

  .gantt-floating-hud-controls-row{
    grid-template-columns:auto 1fr auto !important;
    grid-template-areas:
      "filter spacer menu"
      "controls controls controls" !important;
  }

  .gantt-floating-mobile-filter-shell{
    grid-area:filter !important;
  }

  .gantt-floating-menu-wrap{
    grid-area:menu !important;
  }

  .gantt-floating-hud-controls{
    grid-area:controls !important;
  }
}

/* =========================================================
   v5.2.59 Step 164
   Deterministic desktop Gantt frozen equipment column.

   The desktop Equipment / Inspection header and every
   equipment row own the same fixed 280px first grid column.
   The calendar timeline begins only after that column.

   Mobile keeps its existing 170px column.
   ========================================================= */

@media(min-width:701px){

  .gantt-grid{
    grid-template-columns:280px var(--gantt-width) !important;
  }

  .gantt-grid > .gantt-label{
    width:280px !important;
    min-width:280px !important;
    max-width:280px !important;
    box-sizing:border-box !important;
  }

  .gantt-grid > .gantt-header-label{
    width:280px !important;
    min-width:280px !important;
    max-width:280px !important;
    overflow:hidden !important;
  }

  .gantt-grid > .gantt-timeline{
    min-width:var(--gantt-width) !important;
    width:var(--gantt-width) !important;
  }
}

/* =========================================================
   v5.2.59 Step 168
   One horizontal Gantt axis + opaque frozen equipment column.
   ========================================================= */

.gantt-grid > .gantt-label{
  position:sticky !important;
  left:0 !important;
  z-index:20 !important;
  opacity:1 !important;
  isolation:isolate !important;
  background:var(--surface) !important;
  background-color:var(--surface) !important;
  background-image:none !important;
  border-right:1px solid var(--line) !important;
  box-sizing:border-box !important;
}

.gantt-grid > .gantt-header-label{
  z-index:40 !important;
  opacity:1 !important;
  isolation:isolate !important;
  background:var(--surface-2) !important;
  background-color:var(--surface-2) !important;
  background-image:none !important;
}

.gantt-floating-hud-calendar{
  overflow:hidden !important;
}

.gantt-floating-hud-label{
  position:relative !important;
  z-index:5 !important;
  opacity:1 !important;
  isolation:isolate !important;
  background:var(--surface-2) !important;
  background-color:var(--surface-2) !important;
  background-image:none !important;
  box-sizing:border-box !important;
}

.gantt-floating-hud-days{
  position:relative !important;
  min-width:0 !important;
  overflow:hidden !important;
}

.gantt-floating-hud-days-track{
  position:relative !important;
  height:52px !important;
  min-height:52px !important;
  flex:none !important;
  will-change:transform;
}

.gantt-floating-hud-days-track > .gantt-day-head{
  top:0 !important;
  bottom:auto !important;
  height:52px !important;
  min-height:52px !important;
  box-sizing:border-box !important;
}


/* Mobile: real grid and floating HUD share one 170px frozen column. */
@media(max-width:700px){

  .gantt-grid{
    grid-template-columns:170px var(--gantt-width) !important;
  }

  .gantt-grid > .gantt-label,
  .gantt-grid > .gantt-header-label{
    width:170px !important;
    min-width:170px !important;
    max-width:170px !important;
  }

  .gantt-floating-hud-label{
    width:170px !important;
    min-width:170px !important;
    max-width:170px !important;
    flex:0 0 170px !important;
  }
}


/* Desktop: retain Step 164's 280px frozen column. */
@media(min-width:701px){

  .gantt-grid{
    grid-template-columns:280px var(--gantt-width) !important;
  }

  .gantt-grid > .gantt-label,
  .gantt-grid > .gantt-header-label{
    width:280px !important;
    min-width:280px !important;
    max-width:280px !important;
  }

  .gantt-floating-hud-label{
    width:280px !important;
    min-width:280px !important;
    max-width:280px !important;
    flex:0 0 280px !important;
  }
}

/* =========================================================
   v5.2.59 Step 176
   Structural mobile Gantt frozen header.

   Mobile uses one horizontal scroller and one calendar axis.

   The Equipment / Inspection header remains the real first
   grid cell, but its visible text/paint is promoted into a
   viewport-fixed 170px foreground layer inside that cell.

   This avoids trying to mask the moving calendar with the
   scroller or negative-z pseudo-elements.

   Desktop Step 164 remains unchanged.
   ========================================================= */

@media(max-width:700px){

  /*
   * One deterministic mobile grid:
   * 170px frozen equipment column + horizontal calendar.
   */
  .gantt-grid{
    grid-template-columns:170px var(--gantt-width) !important;
  }

  /*
   * Every real equipment cell owns exactly the same frozen
   * first-column geometry.
   */
  .gantt-grid > .gantt-label{
    position:sticky !important;
    left:0 !important;

    width:170px !important;
    min-width:170px !important;
    max-width:170px !important;

    box-sizing:border-box !important;

    z-index:50 !important;

    background:var(--surface) !important;
    background-color:var(--surface) !important;
    background-image:none !important;
    opacity:1 !important;

    border-right:1px solid var(--line) !important;
  }

  /*
   * Header cell is the foreground owner.
   *
   * Do not let its inherited padding/text participate in the
   * scrolling-grid paint. The dedicated child below paints the
   * complete 170px header surface.
   */
  .gantt-grid > .gantt-header-label{
    position:sticky !important;
    left:0 !important;

    width:170px !important;
    min-width:170px !important;
    max-width:170px !important;

    height:52px !important;
    min-height:52px !important;

    padding:0 !important;

    overflow:hidden !important;

    z-index:100 !important;

    background:var(--surface-2) !important;
    background-color:var(--surface-2) !important;
    background-image:none !important;
    opacity:1 !important;

    isolation:isolate !important;
  }

  /*
   * This child is the actual visible mobile header foreground.
   *
   * It fills the entire frozen cell, so no calendar day can
   * become visible through unused padding or text geometry.
   */
  .gantt-header-label-text{
    position:absolute !important;
    inset:0 !important;

    display:flex !important;
    align-items:center !important;

    width:170px !important;
    height:52px !important;

    padding:8px !important;

    box-sizing:border-box !important;

    overflow:hidden !important;

    background:var(--surface-2) !important;
    background-color:var(--surface-2) !important;
    background-image:none !important;
    opacity:1 !important;

    color:var(--ink-soft) !important;

    font-size:11px !important;
    line-height:1.2 !important;
    text-transform:uppercase !important;
    letter-spacing:.06em !important;

    white-space:normal !important;

    z-index:2 !important;

    pointer-events:none !important;
  }

  /*
   * The calendar is one moving background plane.
   * It never owns the frozen first-column foreground.
   */
  .gantt-grid > .gantt-timeline,
  .gantt-grid > .gantt-timeline.gantt-header{
    position:relative !important;
    left:auto !important;
    z-index:1 !important;
  }

  /*
   * Empty months must preserve the same first-column geometry
   * as populated months.
   */
  .gantt-grid > .gantt-empty{
    width:170px !important;
    min-width:170px !important;
    max-width:170px !important;

    box-sizing:border-box !important;

    background:var(--surface) !important;
    background-color:var(--surface) !important;
    background-image:none !important;

    position:sticky !important;
    left:0 !important;

    z-index:50 !important;
  }
}


/*
 * Desktop retains the established deterministic 280px frozen
 * column. The new child simply inherits the existing header
 * presentation and does not alter desktop geometry.
 */
@media(min-width:701px){

  .gantt-header-label-text{
    display:block;
  }
}

/* =========================================================
   v5.2.59 Step 185
   Opaque mobile Gantt frozen header.

   Runtime geometry confirms the 170px frozen column remains
   correctly positioned while the calendar scrolls beneath it.

   The body equipment cells already paint an opaque --surface
   background. The header previously used --surface-2, which
   resolves transparent in the active mobile theme and allowed
   the moving calendar dates to remain visible underneath.

   Use the same proven opaque surface as the frozen body cells.
   No Gantt geometry, scrolling or drag math changes.
   ========================================================= */

@media(max-width:700px){

  .gantt-grid > .gantt-header-label{
    background:var(--surface) !important;
    background-color:var(--surface) !important;
    background-image:none !important;
    opacity:1 !important;
  }

  .gantt-grid > .gantt-header-label > .gantt-header-label-text{
    background:var(--surface) !important;
    background-color:var(--surface) !important;
    background-image:none !important;
    opacity:1 !important;
  }
}


/* =========================================================
   v5.2.59 Step 186
   Opaque desktop Gantt frozen pane.

   Step 185 confirmed that the calendar/frozen-column geometry
   is correct and that the remaining bleed is a paint-layer
   issue.

   Desktop keeps the established 280px first column and the
   existing single horizontal Gantt axis. Only the frozen
   foreground paint is made explicitly opaque.

   No timeline geometry, scrolling or drag math changes.
   ========================================================= */

@media(min-width:701px){

  .gantt-grid > .gantt-label{
    background:var(--surface) !important;
    background-color:var(--surface) !important;
    background-image:none !important;
    opacity:1 !important;
  }

  .gantt-grid > .gantt-header-label{
    background:var(--surface) !important;
    background-color:var(--surface) !important;
    background-image:none !important;
    opacity:1 !important;
    isolation:isolate !important;
  }

  .gantt-grid > .gantt-header-label > .gantt-header-label-text{
    background:var(--surface) !important;
    background-color:var(--surface) !important;
    background-image:none !important;
    opacity:1 !important;
  }
}


/* =========================================================
   v5.2.59 Step 187
   Mobile Gantt filter-panel layering.

   The frozen Equipment / Inspection header intentionally owns
   a high stacking level so the horizontal calendar disappears
   beneath it.

   When the temporary mobile Filters panel is open, however,
   that panel must be the foreground interaction surface.

   Raise only the mobile filter shell/panel above the Gantt
   frozen column. No Gantt geometry, scrolling or drag changes.
   ========================================================= */

@media(max-width:700px){

  .gantt-mobile-filter-shell{
    z-index:140 !important;
  }

  .gantt-mobile-filter-panel{
    position:relative !important;
    z-index:141 !important;

    background:var(--surface) !important;
    background-color:var(--surface) !important;

    isolation:isolate !important;
  }

  /*
   * The detached/floating version uses the same panel while
   * vertically scrolled, so give it identical foreground
   * ownership.
   */
  .gantt-floating-mobile-filter-shell{
    z-index:140 !important;
  }

  .gantt-floating-mobile-filter-shell .gantt-mobile-filter-panel{
    z-index:141 !important;
  }
}


/* =========================================================
   v5.2.59 Step 189
   Mobile Gantt filter-panel stacking-context ownership.

   Runtime Step 188 proved that the filter panel's z-index 141
   was trapped inside .gantt-sticky-controls at z-index 69,
   while the frozen Equipment / Inspection header owns z-index
   100 in a separate branch.

   Raise the owning controls stacking context only while the
   mobile filter panel is open.

   No Gantt geometry, horizontal scrolling, drag math or
   desktop behavior changes.
   ========================================================= */

@media(max-width:700px){

  .gantt-sticky-controls:has(
    .gantt-mobile-filter-panel.open
  ){
    z-index:150 !important;
  }

}

/* =========================================================
   v5.2.59 Step 190
   Responsive mobile Gantt Filters panel.

   Step 189 established the correct stacking ownership.

   Keep the opened panel inside the phone viewport/card instead
   of sizing/positioning it from the narrow Filters button.

   This changes only the mobile filter overlay geometry.
   No Gantt grid, frozen-column, scrolling or drag changes.
   ========================================================= */

@media(max-width:700px){

  /*
   * Normal Gantt Filters panel.
   *
   * The panel is absolutely positioned inside the Gantt controls,
   * so use the controls/card width rather than the Filters button
   * as its visual width.
   */
  .gantt-tool-row
  .gantt-mobile-filter-panel.open{
    position:absolute !important;

    left:0 !important;
    right:auto !important;

    width:min(
      calc(100vw - 48px),
      420px
    ) !important;

    max-width:calc(100vw - 48px) !important;

    box-sizing:border-box !important;

    max-height:calc(
      100dvh - 210px
    ) !important;

    overflow-x:hidden !important;
    overflow-y:auto !important;

    overscroll-behavior:contain !important;
  }

  /*
   * All fields must shrink with the panel instead of imposing
   * their intrinsic/select width on the overlay.
   */
  .gantt-mobile-filter-panel.open label,
  .gantt-mobile-filter-panel.open select,
  .gantt-mobile-filter-panel.open button{
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  .gantt-mobile-filter-panel.open select,
  .gantt-mobile-filter-panel.open
  .gantt-mobile-filter-clear{
    width:100% !important;
  }

  /*
   * Detached/floating header version uses viewport coordinates.
   * Keep equal safe margins on both sides of the phone.
   */
  .gantt-floating-mobile-filter-shell
  .gantt-mobile-filter-panel.open{
    position:fixed !important;

    left:12px !important;
    right:12px !important;
    width:auto !important;
    max-width:none !important;

    box-sizing:border-box !important;

    max-height:calc(
      100dvh - 84px
    ) !important;

    overflow-x:hidden !important;
    overflow-y:auto !important;

    overscroll-behavior:contain !important;
  }
}

/* =========================================================
   v5.2.59 Step 191
   Mobile Gantt Filters bottom viewport boundary.

   Step 190 fixed horizontal containment.

   The normal mobile panel begins below the Gantt tool row, so
   its previous max-height did not account for its actual
   viewport Y position. Give the open panel a viewport-aware
   height based on its known mobile top position and reserve
   space for the fixed bottom navigation.

   Filter contents scroll inside the panel when necessary.

   No Gantt grid, scrolling, drag or frozen-column changes.
   ========================================================= */

@media(max-width:700px){

  .gantt-tool-row
  .gantt-mobile-filter-panel.open{
    /*
     * Panel top is the mobile Gantt tool row + 8px.
     *
     * Reserve 82px at the bottom for the fixed application
     * navigation and a small visual gap.
     */
    max-height:calc(
      100dvh - 170px - 82px
    ) !important;

    overflow-x:hidden !important;
    overflow-y:auto !important;

    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch;
  }

  /*
   * The floating HUD starts much closer to the viewport top,
   * so it can use the larger remaining viewport area.
   */
  .gantt-floating-mobile-filter-shell
  .gantt-mobile-filter-panel.open{
    max-height:calc(
      100dvh - 64px - 82px
    ) !important;

    overflow-x:hidden !important;
    overflow-y:auto !important;

    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch;
  }
}

/* =========================================================
   v5.2.59 Step 192
   Viewport-bound mobile Gantt Filters panel.

   Do not calculate panel height from estimated toolbar sizes.

   The open Filters panel owns a fixed viewport rectangle:
     top    = below the Gantt mobile tool row
     left   = safe phone margin
     right  = safe phone margin
     bottom = above the fixed application navigation

   Its contents scroll inside that rectangle.

   This also removes the panel from gantt-card overflow clipping.

   No Gantt grid, frozen-column, timeline, drag, lock or
   horizontal-scroll geometry changes.
   ========================================================= */

@media(max-width:700px){

  /*
   * Normal mobile Gantt filter panel.
   *
   * Fixed positioning means the Gantt card's overflow:hidden
   * can no longer crop the bottom of this overlay.
   */
  .gantt-tool-row
  .gantt-mobile-filter-panel.open{
    position:fixed !important;

    top:170px !important;
    left:12px !important;
    right:12px !important;
    bottom:84px !important;

    width:auto !important;
    height:auto !important;

    max-width:none !important;
    max-height:none !important;

    margin:0 !important;

    box-sizing:border-box !important;

    overflow-x:hidden !important;
    overflow-y:auto !important;

    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch;

    z-index:1000 !important;
  }

  /*
   * Floating Gantt header version uses the same viewport
   * ownership but begins immediately below the floating HUD.
   */
  .gantt-floating-mobile-filter-shell
  .gantt-mobile-filter-panel.open{
    position:fixed !important;

    top:64px !important;
    left:12px !important;
    right:12px !important;
    bottom:84px !important;

    width:auto !important;
    height:auto !important;

    max-width:none !important;
    max-height:none !important;

    margin:0 !important;

    box-sizing:border-box !important;

    overflow-x:hidden !important;
    overflow-y:auto !important;

    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch;

    z-index:1000 !important;
  }

  /*
   * Prevent children from forcing the viewport-bound panel
   * wider than its available rectangle.
   */
  .gantt-mobile-filter-panel.open > *,
  .gantt-mobile-filter-panel.open label,
  .gantt-mobile-filter-panel.open select,
  .gantt-mobile-filter-panel.open button{
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  .gantt-mobile-filter-panel.open select,
  .gantt-mobile-filter-panel.open
  .gantt-mobile-filter-clear{
    width:100% !important;
  }
}