/* ================================================================
   SYNOPS — Aviation Maintenance Dashboard
   Optimized for Bootstrap 5 · Cosmic Business Aesthetic
   ================================================================

   TABLE OF CONTENTS
   -----------------
   1.  CSS Custom Properties
   2.  Foundation & Base Styles
   3.  Spinner System
   4.  Bootstrap Component Overrides
         – Forms & Inputs
         – Cards
         – Modals
         – Dropdowns
         – Tables
         – Navigation Tabs
         – Badges & Misc
   5.  Bootstrap 5.3 Color Extensions
   6.  Opacity Button System
   7.  Layout (Sidebar · Content Area)
   8.  Sidebar Navigation
   9.  Mobile Navigation
   10. Hover-to-Reveal Actions (consolidated)
   11. Avatar System
   12. Timeline System (Gantt-style)
   13. Timeline Component (vertical)
   14. Rich Text Editor
   15. Multi-Select Autocomplete
   16. Delay Code System
   17. AOG Dashboard
   18. Team Management
   19. Engineering Actions
   20. Publications
   21. Notifications
   22. Messages & SynConnect
   23. RectifAI Chat Interface
   24. Access Control
   25. Flatpickr Integration
   26. Utility Classes
   27. Animations & Keyframes
   28. Responsive — Consolidated Media Queries
   ================================================================ */


/* ================================================================
   1. CSS CUSTOM PROPERTIES
   ================================================================ */
:root {
  /* Bootstrap Theme Overrides */
  --bs-badge-border-radius: var(--bs-border-radius-sm);
  --bs-btn-border-radius: var(--bs-border-radius-sm);
  --bs-border-radius: var(--bs-border-radius-sm);
  --bs-font-sans-serif: 'Open Sans', system-ui, -apple-system, sans-serif;
  --bs-font-monospace: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', monospace;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-color: var(--bs-light);
  --bs-body-bg: var(--bs-dark);

  /* Glass Morphism */
  --glass-opacity-low: 0.08;
  --glass-opacity-hover: 0.12;
  --glass-opacity-extra-low: 0.04;
  --glass-opacity-border: 0.2;
  --glass-opacity-flag-bg: 0.25;
  --glass-opacity-flag-border: 0.4;
  --glass-opacity-shadow: 0.3;
  --glass-opacity-shadow-light: 0.15;
  --glass-opacity-shadow-extra-light: 0.1;
  --glass-opacity-notification: 0.95;
  --glass-opacity-notification-border: 0.2;

  /* Spinner */
  --app-spinner-size: 1.5rem;
  --app-spinner-border-width: 0.18rem;
  --app-spinner-speed: 0.65s;

  /* Cosmic Theme */
  --bg-glass: rgba(var(--bs-white-rgb), var(--glass-opacity-low));
  --glass-border: rgba(var(--bs-light-rgb), 0.1);
  --glass-shadow: 0 8px 32px rgba(var(--bs-black-rgb), var(--glass-opacity-shadow));
  --glass-blur: blur(50px);

  /* Extended Colors */
  --success-dark-rgb: 14, 100, 46;
  --warning-dark-rgb: 120, 94, 16;
  --info-dark-rgb: 3, 108, 126;
  --pattern-gray-rgb: 185, 185, 185;
  --notification-warning-rgb: 245, 158, 11;
  --notification-error-rgb: 239, 68, 68;
  --bs-orange-rgb: 253, 126, 20;
  --bs-orange: #fd7e14;

  /* Scrollbar */
  --scrollbar-thumb: #3a3a3a;
  --scrollbar-track: #1a1a1a;

  /* Multi-Select */
  --multi-select-bg: #fff;
  --multi-select-border: #dee2e6;
  --multi-select-hover: #e9ecef;
  --multi-select-focus-border: #86b7fe;
  --multi-select-focus-shadow: rgba(var(--bs-blue-rgb), var(--glass-opacity-flag-bg));
  --multi-select-dark-bg: #212529;
  --multi-select-dark-border: #495057;
  --multi-select-dark-hover: #495057;

  /* Animation */
  --transition-cosmic: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --bs-transition: var(--transition-cosmic);
  --appear-duration: 420ms;
  --appear-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Layout */
  --sidebar-width: 280px;
}


/* ================================================================
   2. FOUNDATION & BASE STYLES
   ================================================================ */
body {
  color: var(--bs-light);
  font-family: var(--bs-font-sans-serif);
  outline: none !important;
  background-color: #000; 
}

* {
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

body:focus,
#main-content:focus,
.content-area .content {
  outline: none !important;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}


/* ================================================================
   3. SPINNER SYSTEM
   ================================================================ */
.spinner-border,
.spinner-border-sm,
.spinner-grow,
.spinner-grow-sm {
  --bs-spinner-width: var(--app-spinner-size);
  --bs-spinner-height: var(--app-spinner-size);
  --bs-spinner-border-width: var(--app-spinner-border-width);
  --bs-spinner-animation-speed: var(--app-spinner-speed);
  filter: drop-shadow(0 0 6px rgba(245, 194, 73, 0.15));
}

.spinner-border,
.spinner-grow {
  opacity: 0.95;
}


/* ================================================================
   4. BOOTSTRAP COMPONENT OVERRIDES
   ================================================================ */

/* --- Forms & Inputs --- */
.form-control:focus {
  box-shadow: none !important;
}

.form-control::placeholder,
.form-select option {
  color: rgba(var(--bs-light-rgb), 0.4) !important;
}

.form-switch .form-check-input {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23e5e7eb'/%3e%3c/svg%3e");
  background-color: var(--bs-secondary);
  border: 1px solid var(--bs-secondary);
}

.form-switch .form-check-input:hover {
  background-color: var(--bs-secondary);
  border-color: var(--bs-secondary);
}

.form-switch .form-check-input:focus {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23f3f4f6'/%3e%3c/svg%3e");
  background-color: var(--bs-secondary);
  border-color: var(--bs-secondary);
}

.form-switch .form-check-input:checked {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
  background-color: rgba(from var(--bs-primary) r g b / 0.5);
  border-color: var(--bs-secondary);
}

.form-switch .form-check-input:disabled {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%236b7280'/%3e%3c/svg%3e");
  background-color: #1f2937;
  opacity: 0.4;
}

/* Force dark input background (autofill-safe) */
.input-dark-fixed,
.input-dark-fixed:focus,
.input-dark-fixed:active,
.input-dark-fixed:not(:placeholder-shown) {
  background-color: var(--bs-dark) !important;
  color: var(--bs-light) !important;
}

.input-dark-fixed::placeholder {
  color: rgba(var(--bs-light-rgb), 0.4) !important;
}

.input-dark-fixed:-webkit-autofill,
.input-dark-fixed:-webkit-autofill:hover,
.input-dark-fixed:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--bs-light) !important;
  caret-color: var(--bs-light) !important;
  box-shadow: 0 0 0px 1000px var(--bs-dark) inset !important;
  transition: background-color 9999s ease-in-out 0s !important;
}

.input-dark-fixed:-moz-autofill {
  box-shadow: 0 0 0px 1000px var(--bs-dark) inset !important;
  -moz-text-fill-color: var(--bs-light) !important;
}

/* Contenteditable placeholder */
[contenteditable][data-placeholder]:empty::before {
  content: attr(data-placeholder);
  color: rgba(var(--bs-light-rgb), 0.5);
  pointer-events: none;
}

[contenteditable]:focus {
  outline: none;
}

/* --- Cards --- */
.card {
  background-color: var(--bg-glass);
  border: 1px solid var(--glass-border);
  color: var(--bs-light);
}

/* --- Flight Pair Reference --- */
#flight-pair-reference-row .flight-pair-reference-shell {
  height: 220px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding-right: 0.25rem;
}

#create-flight-pair-reference-list {
  margin-right: 0;
  margin-left: 0;
  align-content: start;
}

#flight-pair-reference-row .flight-pair-reference-card {
  box-shadow: 0 10px 24px rgba(var(--bs-black-rgb), 0.16);
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

#flight-pair-reference-row .flight-pair-reference-card:hover,
#flight-pair-reference-row .flight-pair-reference-card:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(var(--bs-black-rgb), 0.22);
}

#flight-pair-reference-row .flight-pair-reference-card.is-selected {
  box-shadow: 0 0 0 1px rgba(var(--bs-info-rgb), 0.45), 0 14px 28px rgba(var(--bs-info-rgb), 0.12);
}

#flight-pair-reference-row .flight-pair-route {
  display: grid;
}

#flight-pair-reference-row .flight-pair-route__labels,
#flight-pair-reference-row .flight-pair-route__stations {
  display: grid;
  grid-template-columns: minmax(2.75rem, max-content) minmax(2.5rem, 1fr) minmax(2.75rem, max-content) minmax(2.5rem, 1fr) minmax(2.75rem, max-content);
  align-items: center;
  column-gap: 0.5rem;
}

#flight-pair-reference-row .flight-pair-route__label {
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  color: rgba(var(--bs-light-rgb), 0.72);
  text-align: center;
  white-space: nowrap;
}

#flight-pair-reference-row .flight-pair-route__label--left {
  grid-column: 2;
}

#flight-pair-reference-row .flight-pair-route__label--right {
  grid-column: 4;
}

#flight-pair-reference-row .flight-pair-route__station {
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--bs-light);
  white-space: nowrap;
}

#flight-pair-reference-row .flight-pair-route__station--start {
  grid-column: 1;
  justify-self: start;
}

#flight-pair-reference-row .flight-pair-route__station--middle {
  grid-column: 3;
  justify-self: center;
  color: rgba(var(--bs-warning-rgb), 0.95);
}

#flight-pair-reference-row .flight-pair-route__station--end {
  grid-column: 5;
  justify-self: end;
  text-align: right;
}

#flight-pair-reference-row .flight-pair-route__times {
  display: grid;
  grid-template-columns: minmax(2.75rem, max-content) minmax(2.5rem, 1fr) minmax(2.75rem, max-content) minmax(2.5rem, 1fr) minmax(2.75rem, max-content);
  align-items: start;
  column-gap: 0.5rem;
}

#flight-pair-reference-row .flight-pair-route__time {
  line-height: 1.2;
  white-space: nowrap;
}

#flight-pair-reference-row .flight-pair-route__time--left {
  grid-column: 2;
  justify-self: center;
}

#flight-pair-reference-row .flight-pair-route__time--right {
  grid-column: 4;
  justify-self: center;
}

#flight-pair-reference-row .flight-pair-route__connector {
  position: relative;
  min-width: 0;
  height: 1rem;
}

#flight-pair-reference-row .flight-pair-route__connector--left {
  grid-column: 2;
}

#flight-pair-reference-row .flight-pair-route__connector--right {
  grid-column: 4;
}

#flight-pair-reference-row .flight-pair-route__connector::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0.35rem;
  border-top: 3px solid rgba(var(--bs-secondary-rgb));
  transform: translateY(-50%);
}

#flight-pair-reference-row .flight-pair-route__connector::after {
  content: '➜';
  position: absolute;
  top: 50%;
  right: -0.1rem;
  transform: translateY(-54%);
  color: rgba(var(--bs-secondary-rgb), 0.85);
  font-size: 0.85rem;
  line-height: 1;
}

.card-header {
  border-bottom: 1px solid var(--glass-border);
}

.card-footer {
  background-color: rgba(var(--bs-white-rgb), var(--glass-opacity-extra-low));
  border-top: 1px solid var(--glass-border);
}

/* --- Modals --- */
.modal-content {
  background-color: var(--bg-glass);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  color: var(--bs-light);
  display: flex;
  flex-direction: column;
}

.modal-header {
  border-bottom: 1px solid var(--glass-border);
  background-color: rgba(var(--bs-white-rgb), var(--glass-opacity-extra-low));
}

.modal-footer {
  border-top: 1px solid var(--glass-border);
  background-color: rgba(var(--bs-white-rgb), var(--glass-opacity-extra-low));
}

.modal-body {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.modal-dialog {
  height: 95vh;
}

/* --- Dropdowns --- */
.dropdown-menu {
  background-color: var(--bs-dark);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  z-index: 1100;
  transform: translate3d(0px, 30px, 0px) !important;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active,
.dropdown-item:active {
  background-color: rgba(var(--bs-primary-rgb), var(--glass-opacity-border));
  color: var(--bs-light);
}

/* Subscription dropdown */
.subscription-dropdown-menu {
  max-width: min(92vw, 360px);
}

.subscription-dropdown-minw-280 {
  min-width: 280px;
}

.subscription-label-pointer,
.is-clickable,
.event-clickable-icon,
.mel-sortable-head {
  cursor: pointer;
}

.subscription-event-description {
  font-size: 0.75rem;
  line-height: 1.3;
}

.subscription-dropdown-menu .dropdown-item,
.publications-wrap-normal,
.mel-dropdown-wrap-text {
  white-space: normal;
}

.multi-select-dropdown-mt-1 {
  margin-top: 1px;
}

.nav-rectifai-logo {
  height: 18px;
  width: auto;
  object-fit: contain;
}

.nav-sidebar-offcanvas {
  --bs-offcanvas-width: 280px;
}

.nav-desktop-sidebar-shell {
  top: 65px;
  width: 280px;
  height: calc(100vh - 65px);
  overflow: hidden;
  border-top-right-radius: var(--bs-border-radius);
}

.nav-desktop-sidebar-shell .nav.flex-column.overflow-auto {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.nav-desktop-sidebar-shell .nav.flex-column.overflow-auto::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.nav-conversations-offcanvas,
.notification-offcanvas,
.synconnect-offcanvas {
  --bs-offcanvas-width: 320px;
}

.nav-main-content-offset {
  margin-top: 65px;
}

body.messages-route-active {
  overflow: hidden;
}

body.messages-route-active #main-content {
  height: calc(100svh - 65px);
  overflow: hidden;
}

body.messages-route-active .content-area {
  height: 100%;
  overflow: hidden;
}

body.messages-route-active .content-area .content {
  padding: 0;
  height: 100%;
  overflow: hidden;
}

@media (min-width: 992px) {
  body.messages-route-active #main-content.nav-main-content-offset {
    margin-top: 65px !important;
    height: calc(100vh - 65px);
  }

  body.messages-route-active [data-messages-root],
  body.messages-route-active [data-messages-route-content],
  body.messages-route-active .messages-layout,
  body.messages-route-active [data-conversation-column],
  body.messages-route-active .messages-conversation-shell,
  body.messages-route-active .messages-thread-column {
    height: 100%;
    min-height: 0;
  }

  body.messages-route-active [data-messages-route-content] {
    margin-top: 65px;
    height: calc(100% - 65px);
  }

  body.messages-route-active .messages-conversation [data-message-scroll] {
    flex: 1 1 0%;
    min-height: 0;
    height: auto;
    overflow-y: auto;
  }

  body.messages-route-active .messages-thread-column {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  body.messages-route-active .messages-conversation form[data-message-form] {
    position: sticky;
    bottom: 0;
    margin-top: 0;
  }

  body.messages-route-active .messages-conversation .messages-thread-header {
    position: static !important;
    top: auto !important;
  }
}

.nav-avatar-44 {
  width: 44px;
  height: 44px;
}

.nav-avatar-image {
  object-fit: cover;
  display: block;
}

.nav-avatar-fallback-bg {
  background: rgba(192, 168, 54, 0.1);
}

.navigation-status-indicator-overlay {
  z-index: 1080;
  margin-top: 1.5rem;
}

.public-main-shell {
  min-height: 100vh;
}

#public-main.public-main-shell .content-area {
  margin-left: 0 !important;
}

#public-main.public-main-shell .auth-public-content {
  min-height: 100dvh;
  width: 100%;
  padding: 0;
}

.phone-verification-icon-18 {
  width: 18px;
  height: 18px;
}

.invitation-email-readonly {
  background-color: #f8f9fa;
}

.app-config-maintenance-icon {
  width: 64px;
  height: 64px;
}



.auth-card-sm { max-width: 420px; }
.auth-card-md { max-width: 500px; }

.auth-login-shell {
  min-height: 100dvh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.auth-login-card {
  max-width: 460px;
  margin-inline: auto;
}

.auth-login-logo-primary {
  width: min(220px, 62vw);
  max-width: 220px;
}


.auth-card :is(input, select, textarea),
.auth-card :is(input, select, textarea):focus,
.auth-card :is(input, select, textarea):active {
  font-size: 16px !important;
  line-height: 1.5;
  font-weight: 400;
  font-family: var(--bs-body-font-family) !important;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.auth-card :is(input, textarea)::placeholder {
  font-size: inherit !important;
  line-height: inherit;
}

.auth-card input:-webkit-autofill,
.auth-card input:-webkit-autofill:hover,
.auth-card input:-webkit-autofill:focus {
  -webkit-text-size-adjust: 100%;
  font-size: 16px !important;
  line-height: 1.5;
  font-weight: 400;
  font-family: var(--bs-body-font-family) !important;
  -webkit-text-fill-color: inherit !important;
  caret-color: inherit !important;
  transition: background-color 9999s ease-in-out 0s, color 9999s ease-in-out 0s;
}

.auth-form-disabled {
  pointer-events: none;
  opacity: 0.6;
}

.auth-btn-link-plain { background: none !important; }

.export-progress-overlay {
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: rgba(0, 0, 0, 0.5);
}

.export-progress-card {
  background: #1e1e1e;
  color: #fff;
  border: 1px solid #444;
  padding: 16px 20px;
  width: min(520px, 90vw);
  min-height: 96px;
}

.export-progress-title {
  margin-bottom: 8px;
}

.export-progress-message {
  font-size: 0.9rem;
  opacity: 0.9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 20px;
}

.export-progress-track {
  height: 6px;
  background: #2b2b2b;
  margin-top: 10px;
  overflow: hidden;
}

.export-progress-bar {
  height: 100%;
  background: #fff;
}

.export-render-iframe {
  position: fixed;
  left: -10000px;
  top: 0;
  width: 900px;
  height: 1200px;
  visibility: hidden;
  pointer-events: none;
  border: 0;
}

.export-email-slide-panel {
  overflow: hidden;
  transition: max-height 240ms ease, opacity 200ms ease;
  will-change: max-height, opacity;
}

.export-email-panel-closed {
  max-height: 0;
  opacity: 0;
}

.export-email-panel-open {
  opacity: 1;
}

/* --- Tables --- */
.table-dark {
  --bs-table-bg: var(--bg-glass);
  --bs-table-striped-bg: rgba(var(--bs-white-rgb), 0.02);
  --bs-table-hover-bg: rgba(var(--bs-primary-rgb), var(--glass-opacity-shadow-extra-light));
  --bs-table-border-color: var(--glass-border);
}

table.table-roomy > :not(caption) > * > * {
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}

/* --- Navigation Tabs --- */
.nav-tabs {
  border-bottom: 1px solid var(--glass-border);
}

.nav-tabs .nav-link {
  color: rgba(var(--bs-light-rgb), 0.8);
  border: 1px solid transparent;
}

.nav-tabs .nav-link:hover {
  border-color: var(--glass-border);
  color: var(--bs-light);
}

.nav-tabs .nav-link.active {
  background-color: var(--bg-glass);
  border-color: var(--glass-border);
  border-bottom: none;
  color: var(--bs-light);
  font-weight: 600;
}

/* --- Badges & Misc --- */
.badge {
  backdrop-filter: var(--glass-blur);
}

.badge-opp {
  letter-spacing: 0.1px;
}

.btn-close {
  filter: invert(1);
}

.text-muted {
  color: rgba(var(--bs-light-rgb), 0.6) !important;
}

/* Lucide icons fix */
[data-lucide] svg,
[data-lucide] svg * {
  pointer-events: none !important;
}

[data-lucide] {
  pointer-events: auto !important;
}

button [data-lucide],
.btn [data-lucide],
a [data-lucide],
[role="button"] [data-lucide] {
  pointer-events: none !important;
}

/* Zebra striping for resource lists */
.resource-zebra .list-group-item:nth-child(odd) {
  background-color: rgba(255, 255, 255, 0.02);
}

.resource-zebra .list-group-item:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.06);
}

.resource-zebra .list-group-item {
  border-color: rgba(255, 255, 255, 0.08) !important;
}


/* ================================================================
   6. OPACITY BUTTON SYSTEM
   ================================================================ */

/* Lightweight retained color utilities in active use */
.text-orange { --bs-text-opacity: 1; color: rgba(var(--bs-orange-rgb), var(--bs-text-opacity)) !important; }
.bg-orange { --bs-bg-opacity: 1; background-color: rgba(var(--bs-orange-rgb), var(--bs-bg-opacity)) !important; }

/* --- Primary --- */
.btn-primary-opacity-10 { background-color: rgba(var(--bs-primary-rgb), 0.1) !important;  border: 1px solid var(--glass-border) !important; }
.btn-primary-opacity-25 { background-color: rgba(var(--bs-primary-rgb), 0.25) !important; border: 1px solid var(--glass-border) !important; }
.btn-primary-opacity-50 { background-color: rgba(var(--bs-primary-rgb), 0.5) !important;  border: 1px solid var(--glass-border) !important; }
.btn-primary-opacity-75 { background-color: rgba(var(--bs-primary-rgb), 0.75) !important; border: 1px solid var(--glass-border) !important; }
.btn-primary-opacity-90 { background-color: rgba(var(--bs-primary-rgb), 0.9) !important;  border: 1px solid var(--glass-border) !important; }

.btn-primary-opacity-10:hover { background-color: rgba(var(--bs-primary-rgb), 0.14) !important; }
.btn-primary-opacity-25:hover { background-color: rgba(var(--bs-primary-rgb), 0.35) !important; }
.btn-primary-opacity-50:hover { background-color: rgba(var(--bs-primary-rgb), 0.7) !important; }
.btn-primary-opacity-75:hover { background-color: rgba(var(--bs-primary-rgb), 1.05) !important; }
.btn-primary-opacity-90:hover { background-color: rgba(var(--bs-primary-rgb), 1.26) !important; }

/* --- Secondary --- */
.btn-secondary-opacity-10 { background-color: rgba(var(--bs-secondary-rgb), 0.1) !important;  border: 1px solid var(--glass-border) !important; }
.btn-secondary-opacity-25 { background-color: rgba(var(--bs-secondary-rgb), 0.25) !important; border: 1px solid var(--glass-border) !important; }
.btn-secondary-opacity-50 { background-color: rgba(var(--bs-secondary-rgb), 0.5) !important;  border: 1px solid var(--glass-border) !important; }
.btn-secondary-opacity-75 { background-color: rgba(var(--bs-secondary-rgb), 0.75) !important; border: 1px solid var(--glass-border) !important; }
.btn-secondary-opacity-90 { background-color: rgba(var(--bs-secondary-rgb), 0.9) !important;  border: 1px solid var(--glass-border) !important; }

.btn-secondary-opacity-10:hover { background-color: rgba(var(--bs-secondary-rgb), 0.14) !important; }

.btn-secondary-opacity-25:hover,
button.btn-secondary-opacity-25:hover,
a.btn-secondary-opacity-25:hover {
  background-color: rgba(var(--bs-secondary-rgb), 0.35) !important;
  transition: background-color 0.15s ease-in-out !important;
}

.btn-secondary-opacity-25.active,
.btn-secondary-opacity-25[aria-pressed="true"] {
  background-color: rgba(var(--bs-secondary-rgb), 0.6) !important;
  border-color: rgba(var(--bs-secondary-rgb), 0.8) !important;
  color: #fff !important;
}

.btn-secondary-opacity-50:hover { background-color: rgba(var(--bs-secondary-rgb), 0.7) !important; }
.btn-secondary-opacity-75:hover { background-color: rgba(var(--bs-secondary-rgb), 1.05) !important; }
.btn-secondary-opacity-90:hover { background-color: rgba(var(--bs-secondary-rgb), 1.26) !important; }

/* --- Success --- */
.btn-success-opacity-10 { background-color: rgba(var(--bs-success-rgb), 0.1) !important;  border: 1px solid var(--glass-border) !important; }
.btn-success-opacity-25 { background-color: rgba(var(--bs-success-rgb), 0.25) !important; border: 1px solid var(--glass-border) !important; }
.btn-success-opacity-50 { background-color: rgba(var(--bs-success-rgb), 0.5) !important;  border: 1px solid var(--glass-border) !important; }
.btn-success-opacity-75 { background-color: rgba(var(--bs-success-rgb), 0.75) !important; border: 1px solid var(--glass-border) !important; }
.btn-success-opacity-90 { background-color: rgba(var(--bs-success-rgb), 0.9) !important;  border: 1px solid var(--glass-border) !important; }

.btn-success-opacity-10:hover { background-color: rgba(var(--bs-success-rgb), 0.14) !important; }
.btn-success-opacity-25:hover { background-color: rgba(var(--bs-success-rgb), 0.35) !important; }
.btn-success-opacity-50:hover { background-color: rgba(var(--bs-success-rgb), 0.7) !important; }
.btn-success-opacity-75:hover { background-color: rgba(var(--bs-success-rgb), 1.05) !important; }
.btn-success-opacity-90:hover { background-color: rgba(var(--bs-success-rgb), 1.26) !important; }

/* --- Danger --- */
.btn-danger-opacity-10 { background-color: rgba(var(--bs-danger-rgb), 0.1) !important;  border: 1px solid var(--glass-border) !important; }
.btn-danger-opacity-25 { background-color: rgba(var(--bs-danger-rgb), 0.25) !important; border: 1px solid var(--glass-border) !important; }
.btn-danger-opacity-50 { background-color: rgba(var(--bs-danger-rgb), 0.5) !important;  border: 1px solid var(--glass-border) !important; }
.btn-danger-opacity-75 { background-color: rgba(var(--bs-danger-rgb), 0.75) !important; border: 1px solid var(--glass-border) !important; }
.btn-danger-opacity-90 { background-color: rgba(var(--bs-danger-rgb), 0.9) !important;  border: 1px solid var(--glass-border) !important; }

.btn-danger-opacity-10:hover { background-color: rgba(var(--bs-danger-rgb), 0.14) !important; }
.btn-danger-opacity-25:hover { background-color: rgba(var(--bs-danger-rgb), 0.35) !important; }
.btn-danger-opacity-50:hover { background-color: rgba(var(--bs-danger-rgb), 0.7) !important; }
.btn-danger-opacity-75:hover { background-color: rgba(var(--bs-danger-rgb), 1.05) !important; }
.btn-danger-opacity-90:hover { background-color: rgba(var(--bs-danger-rgb), 1.26) !important; }

/* --- Warning --- */
.btn-warning-opacity-10 { background-color: rgba(var(--bs-warning-rgb), 0.1) !important;  border: 1px solid var(--glass-border) !important; }
.btn-warning-opacity-25 { background-color: rgba(var(--bs-warning-rgb), 0.25) !important; border: 1px solid var(--glass-border) !important; }
.btn-warning-opacity-50 { background-color: rgba(var(--bs-warning-rgb), 0.5) !important;  border: 1px solid var(--glass-border) !important; }
.btn-warning-opacity-75 { background-color: rgba(var(--bs-warning-rgb), 0.75) !important; border: 1px solid var(--glass-border) !important; }
.btn-warning-opacity-90 { background-color: rgba(var(--bs-warning-rgb), 0.9) !important;  border: 1px solid var(--glass-border) !important; }

.btn-warning-opacity-10:hover { background-color: rgba(var(--bs-warning-rgb), 0.14) !important; }
.btn-warning-opacity-25:hover { background-color: rgba(var(--bs-warning-rgb), 0.35) !important; }
.btn-warning-opacity-50:hover { background-color: rgba(var(--bs-warning-rgb), 0.7) !important; }
.btn-warning-opacity-75:hover { background-color: rgba(var(--bs-warning-rgb), 1.05) !important; }
.btn-warning-opacity-90:hover { background-color: rgba(var(--bs-warning-rgb), 1.26) !important; }

/* --- Info --- */
.btn-info-opacity-10 { background-color: rgba(var(--bs-info-rgb), 0.1) !important;  border: 1px solid var(--glass-border) !important; }
.btn-info-opacity-25 { background-color: rgba(var(--bs-info-rgb), 0.25) !important; border: 1px solid var(--glass-border) !important; }
.btn-info-opacity-50 { background-color: rgba(var(--bs-info-rgb), 0.5) !important;  border: 1px solid var(--glass-border) !important; }
.btn-info-opacity-75 { background-color: rgba(var(--bs-info-rgb), 0.75) !important; border: 1px solid var(--glass-border) !important; }
.btn-info-opacity-90 { background-color: rgba(var(--bs-info-rgb), 0.9) !important;  border: 1px solid var(--glass-border) !important; }

.btn-info-opacity-10:hover { background-color: rgba(var(--bs-info-rgb), 0.14) !important; }
.btn-info-opacity-25:hover { background-color: rgba(var(--bs-info-rgb), 0.35) !important; }
.btn-info-opacity-50:hover { background-color: rgba(var(--bs-info-rgb), 0.7) !important; }
.btn-info-opacity-75:hover { background-color: rgba(var(--bs-info-rgb), 1.05) !important; }
.btn-info-opacity-90:hover { background-color: rgba(var(--bs-info-rgb), 1.26) !important; }

/* --- Light --- */
.btn-light-opacity-10 { background-color: rgba(var(--bs-light-rgb), 0.1) !important;  border: 1px solid var(--glass-border) !important; }
.btn-light-opacity-25 { background-color: rgba(var(--bs-light-rgb), 0.25) !important; border: 1px solid var(--glass-border) !important; }
.btn-light-opacity-50 { background-color: rgba(var(--bs-light-rgb), 0.5) !important;  border: 1px solid var(--glass-border) !important; }
.btn-light-opacity-75 { background-color: rgba(var(--bs-light-rgb), 0.75) !important; border: 1px solid var(--glass-border) !important; }
.btn-light-opacity-90 { background-color: rgba(var(--bs-light-rgb), 0.9) !important;  border: 1px solid var(--glass-border) !important; }

.btn-light-opacity-10:hover { background-color: rgba(var(--bs-light-rgb), 0.14) !important; }
.btn-light-opacity-25:hover { background-color: rgba(var(--bs-light-rgb), 0.35) !important; }
.btn-light-opacity-50:hover { background-color: rgba(var(--bs-light-rgb), 0.7) !important; }
.btn-light-opacity-75:hover { background-color: rgba(var(--bs-light-rgb), 1.05) !important; }
.btn-light-opacity-90:hover { background-color: rgba(var(--bs-light-rgb), 1.26) !important; }

/* --- Dark --- */
.btn-dark-opacity-10 { background-color: rgba(var(--bs-dark-rgb), 0.1) !important;  border: 1px solid var(--glass-border) !important; }
.btn-dark-opacity-25 { background-color: rgba(var(--bs-dark-rgb), 0.25) !important; border: 1px solid var(--glass-border) !important; }
.btn-dark-opacity-50 { background-color: rgba(var(--bs-dark-rgb), 0.5) !important;  border: 1px solid var(--glass-border) !important; }
.btn-dark-opacity-75 { background-color: rgba(var(--bs-dark-rgb), 0.75) !important; border: 1px solid var(--glass-border) !important; }
.btn-dark-opacity-90 { background-color: rgba(var(--bs-dark-rgb), 0.9) !important;  border: 1px solid var(--glass-border) !important; }

.btn-dark-opacity-10:hover { background-color: rgba(var(--bs-dark-rgb), 0.14) !important; }
.btn-dark-opacity-25:hover { background-color: rgba(var(--bs-dark-rgb), 0.35) !important; }
.btn-dark-opacity-50:hover { background-color: rgba(var(--bs-dark-rgb), 0.7) !important; }
.btn-dark-opacity-75:hover { background-color: rgba(var(--bs-dark-rgb), 1.05) !important; }
.btn-dark-opacity-90:hover { background-color: rgba(var(--bs-dark-rgb), 1.26) !important; }

/* --- Orange --- */
.btn-orange-opacity-10 { background-color: rgba(var(--bs-orange-rgb), 0.1) !important;  border: 1px solid var(--glass-border) !important; }
.btn-orange-opacity-25 { background-color: rgba(var(--bs-orange-rgb), 0.25) !important; border: 1px solid var(--glass-border) !important; }
.btn-orange-opacity-50 { background-color: rgba(var(--bs-orange-rgb), 0.5) !important;  border: 1px solid var(--glass-border) !important; }
.btn-orange-opacity-75 { background-color: rgba(var(--bs-orange-rgb), 0.75) !important; border: 1px solid var(--glass-border) !important; }
.btn-orange-opacity-90 { background-color: rgba(var(--bs-orange-rgb), 0.9) !important;  border: 1px solid var(--glass-border) !important; }

.btn-orange-opacity-10:hover { background-color: rgba(var(--bs-orange-rgb), 0.14) !important; }
.btn-orange-opacity-25:hover { background-color: rgba(var(--bs-orange-rgb), 0.35) !important; }
.btn-orange-opacity-50:hover { background-color: rgba(var(--bs-orange-rgb), 0.7) !important; }
.btn-orange-opacity-75:hover { background-color: rgba(var(--bs-orange-rgb), 1.05) !important; }
.btn-orange-opacity-90:hover { background-color: rgba(var(--bs-orange-rgb), 1.26) !important; }


/* ================================================================
   7. LAYOUT (Sidebar · Content Area)
   ================================================================ */
.content-area {
  width: 100%;
  background-color: var(--bs-black);
  outline: none;
}

.content-area .content {
  background-color: var(--bs-black);
  outline: none;
}

#main-content {
  background-color: var(--bs-black);
}

.sidebar-width {
  width: var(--sidebar-width);
}

/* ================================================================
   8. SIDEBAR NAVIGATION
   ================================================================ */
.nav-item-link {
  color: var(--bs-gray-400);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid transparent;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.nav-item-link .nav-icon {
  opacity: 0.7;
  transition: opacity 0.18s ease, transform 0.25s ease;
}

.nav-item-link .nav-label {
  letter-spacing: 0.25px;
}

.nav-item-link .active-indicator {
  width: 4px;
  height: 22px;
  background: var(--bs-warning);
  opacity: 0;
  left: -6px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-item-link:hover,
.nav-item-link:focus-visible {
  background: rgba(var(--bs-secondary-rgb), 0.15);
  color: var(--bs-light);
  text-decoration: none;

}

.nav-item-link:hover .nav-icon,
.nav-item-link:focus-visible .nav-icon {
  opacity: 1;
}

.nav-item-link.is-active {
  background-color: rgba(var(--bs-secondary-rgb), 0.25) !important;
  border: 1px solid var(--glass-border) !important;
  color: var(--bs-light);
  position: relative;
}

.nav-item-link.is-active .nav-icon {
  opacity: 1;
  transform: translateY(-1px);
}

.nav-item-link.is-active .active-indicator {
  opacity: 1;
  transform: translate(0, -50%);
}

/* rectifAI route accent */
.nav-item-link[data-route="rectifai"] .nav-icon svg,
.nav-item-link[data-route="rectifai"] .nav-icon {
  color: var(--bs-warning) !important;
  stroke: var(--bs-warning) !important;
}

.nav-item-link.is-active[data-route="rectifai"] {
  background: linear-gradient(135deg, rgba(var(--bs-warning-rgb), 0.25) 0%, rgba(var(--bs-warning-rgb), 0.15) 100%);
  border-color: rgba(var(--bs-warning-rgb), 0.4);
  box-shadow: inset 0 0 0 1px rgba(var(--bs-warning-rgb), 0.35), 0 2px 10px -2px rgba(0, 0, 0, 0.6);
}

.nav-item-link.is-active[data-route="rectifai"] .active-indicator {
  background: var(--bs-warning);
}


/* ================================================================
   9. MOBILE NAVIGATION
   ================================================================ */
.mobile-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-glass);
  backdrop-filter: var(--glass-blur);
  border-top: 1px solid var(--glass-border);
  z-index: 1050;
}

body.mobile-nav-hidden .mobile-nav {
  display: none !important;
}

.mobile-nav .nav-item-link.nav-btn {
  border: none;
  background: transparent;
  color: var(--bs-gray-400);
}

.mobile-nav .nav-item-link.nav-btn.is-active {
  color: var(--bs-light);
  background: transparent;
}

.mobile-nav .nav-item-link.nav-btn .active-indicator {
  display: none;
}


/* ================================================================
   10. HOVER-TO-REVEAL ACTIONS (consolidated)
   All follow the same pattern: hidden by default, visible on
   hover / focus-within, always visible on touch devices.
   ================================================================ */

/* Shared transition for all hover-reveal targets */
.resource-row .resource-actions,
.status-updates-list .list-group-item .actions-on-hover,
.aog-status-updates .actions-on-hover,
.event-card .btn[data-event-id],
#event-table-wrapper tbody tr .btn[data-event-id],
.delay-card .btn[data-delay-id],
.list-group-item .btn[data-alloc-id],
#aog-table-wrapper tbody tr .actions-on-hover,
#mel-table-wrapper tbody tr .actions-on-hover,
#pub-ads-ac-table-wrapper tbody tr .actions-on-hover,
#delay-performance-wrapper tbody tr .actions-on-hover,
#io-requests-wrapper tbody tr .actions-on-hover,
#ea-table-wrapper tbody tr .row-actions,
.pub-ad-row .pub-view-btn {
  opacity: 0;
  visibility: hidden;
  transition: opacity 120ms ease-in-out;
}

/* SynConnect uses opacity only (no visibility toggle) */
#synconnect-container tbody tr .view-message-btn {
  transition: opacity 120ms ease-in-out;
}

/* Show on hover / focus-within */
.resource-row:hover .resource-actions,
.resource-row:focus-within .resource-actions,
.status-updates-list .list-group-item:hover .actions-on-hover,
.status-updates-list .list-group-item:focus-within .actions-on-hover,
.aog-status-updates .update-item:hover .actions-on-hover,
.aog-status-updates .update-item:focus-within .actions-on-hover,
.event-card:hover .btn[data-event-id],
.event-card:focus-within .btn[data-event-id],
#event-table-wrapper tbody tr:hover .btn[data-event-id],
#event-table-wrapper tbody tr:focus-within .btn[data-event-id],
.delay-card:hover .btn[data-delay-id],
.delay-card:focus-within .btn[data-delay-id],
.list-group-item:hover .btn[data-alloc-id],
.list-group-item:focus-within .btn[data-alloc-id],
#aog-table-wrapper tbody tr:hover .actions-on-hover,
#aog-table-wrapper tbody tr:focus-within .actions-on-hover,
#mel-table-wrapper tbody tr:hover .actions-on-hover,
#mel-table-wrapper tbody tr:focus-within .actions-on-hover,
#pub-ads-ac-table-wrapper tbody tr:hover .actions-on-hover,
#pub-ads-ac-table-wrapper tbody tr:focus-within .actions-on-hover,
#delay-performance-wrapper tbody tr:hover .actions-on-hover,
#delay-performance-wrapper tbody tr:focus-within .actions-on-hover,
#io-requests-wrapper tbody tr:hover .actions-on-hover,
#io-requests-wrapper tbody tr:focus-within .actions-on-hover,
#ea-table-wrapper tbody tr:hover .row-actions,
#ea-table-wrapper tbody tr:focus-within .row-actions,
.pub-ad-row:hover .pub-view-btn,
.pub-ad-row:focus-within .pub-view-btn {
  opacity: 1;
  visibility: visible;
}

#synconnect-container tbody tr:hover .view-message-btn,
#synconnect-container tbody tr:focus-within .view-message-btn {
  opacity: 1 !important;
}

/* Publications pointer-events */
.pub-ad-row .pub-view-btn {
  pointer-events: none;
}

.pub-ad-row:hover .pub-view-btn,
.pub-ad-row:focus-within .pub-view-btn {
  pointer-events: auto;
}

/* Always visible on touch devices */
@media (hover: none) and (pointer: coarse) {
  .status-updates-list .list-group-item .actions-on-hover,
  .aog-status-updates .actions-on-hover,
  .event-card .btn[data-event-id],
  #event-table-wrapper tbody tr .btn[data-event-id],
  .delay-card .btn[data-delay-id],
  .list-group-item .btn[data-alloc-id],
  #aog-table-wrapper tbody tr .actions-on-hover,
  #mel-table-wrapper tbody tr .actions-on-hover,
  #pub-ads-ac-table-wrapper tbody tr .actions-on-hover,
  #delay-performance-wrapper tbody tr .actions-on-hover,
  #io-requests-wrapper tbody tr .actions-on-hover,
  #ea-table-wrapper tbody tr .row-actions {
    opacity: 1;
    visibility: visible;
  }
}

/* Messages thread archive button */
.messages-thread-archive {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.list-group-item-action:hover .messages-thread-archive {
  opacity: 1;
}

.list-group-item-action:hover {
  background-color: rgba(var(--bs-primary-rgb), 0.05) !important;
  border-color: rgba(var(--bs-primary-rgb), 0.2) !important;
  transition: all 0.2s ease;
}

.messages-thread-unread {
  background-color: rgba(var(--bs-secondary-rgb), 0.4) !important;
}

.messages-thread-unread .messages-thread-unread-excerpt {
  display: block;
  max-width: 100%;
  opacity: 0.92;
}

.messages-thread-row {
  align-items: flex-start !important;
}

.messages-thread-main {
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(1.75rem, auto) minmax(1rem, auto);
  row-gap: 0.25rem;
  align-content: start;
}

.messages-thread-meta {
  flex-shrink: 0;
  display: grid;
  grid-template-rows: minmax(1.75rem, auto) minmax(1rem, auto);
  row-gap: 0.25rem;
  align-content: start;
}

.messages-thread-main-top,
.messages-thread-meta-top {
  min-height: 1.75rem;
  display: flex;
  align-items: center;
}

.messages-thread-inline-meta {
  flex-shrink: 0;
}

.messages-thread-main-bottom,
.messages-thread-meta-bottom {
  min-height: 1rem;
  display: flex;
  align-items: center;
}

.messages-thread-main-badges {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
}

.messages-thread-second-row {
  min-height: 1rem;
}

.messages-thread-second-row .messages-thread-unread-excerpt {
  min-width: 0;
  flex: 1 1 auto;
}

.messages-thread-meta-bottom {
  justify-content: flex-end;
}

.messages-thread-row-placeholder {
  visibility: hidden;
}


/* ================================================================
   11. AVATAR SYSTEM
   ================================================================ */
.avatar-wrapper {
  position: relative;
  display: inline-block;
  width: 56px;
  height: 56px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(var(--bs-light-rgb), 0.04);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 2px 4px rgba(0, 0, 0, 0.35);
  backface-visibility: hidden;
  line-height: 1;
}

.avatar-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.avatar-img,
.avatar-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: block;
}

.avatar-img {
  opacity: 0;
  object-fit: cover;
  object-position: center;
  image-rendering: -webkit-optimize-contrast;
  user-select: none;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  transition: opacity 0.28s ease, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), filter 0.35s ease;
  transform: scale(0.985);
  will-change: opacity, transform;
}

.avatar-img.avatar-visible {
  opacity: 1;
  transform: scale(1);
  filter: saturate(1.05) contrast(1.02);
}

.avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.85);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}

.avatar-fallback.avatar-hide {
  opacity: 0;
  transform: scale(0.97);
}

/* Size variants */
.avatar-sm { width: 32px; height: 32px; }
.avatar-sm .avatar-img,
.avatar-sm .avatar-fallback { font-size: 0.7rem; }
.avatar-md { width: 56px; height: 56px; }
.avatar-lg { width: 72px; height: 72px; }
.avatar-lg .avatar-fallback { font-size: 1.05rem; }

.avatar-circle-sm {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(var(--bs-primary-rgb), 0.08);
  flex: 0 0 36px;
  box-shadow: inset 0 0 0 1px var(--glass-border);
}

/* File input */
.avatar-file-input {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.avatar-file-wrapper:focus-within #avatar-file-trigger {
  outline: 2px solid var(--bs-info);
  outline-offset: 2px;
}


/* ================================================================
   12. TIMELINE SYSTEM (Gantt-style)
   ================================================================ */
.timeline-container {
  position: relative;
  overflow-x: auto;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  contain: layout style paint;
}

.timeline-container::-webkit-scrollbar {
  height: 10px;
}

.timeline-track {
  will-change: transform;
}

/* Scale bars */
.timeline-scale-upper,
.timeline-scale-lower {
  background: rgba(var(--bs-white-rgb), var(--glass-opacity-extra-low));
  backdrop-filter: var(--glass-blur);
  position: sticky;
  z-index: 1020;
  box-sizing: border-box;
}

.timeline-scale-upper {
  border-bottom: 1px solid var(--glass-border);
}

.timeline-scale-lower {
  border-top: 1px solid var(--glass-border);
}

.timeline-scale-upper .scale-tick,
.timeline-scale-lower .scale-tick {
  height: 100%;
}

.timeline-scale-lower .scale-tick { padding-top: 10px; }

.timeline-scale-upper .scale-tick .tick-line,
.timeline-scale-lower .scale-tick .tick-line {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.timeline-scale-upper .scale-tick .tick-line { bottom: -1px; }
.timeline-scale-lower .scale-tick .tick-line { top: -1px; }

.timeline-scale-upper .scale-tick .tick-time {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 10px;
  z-index: 1;
}

/* Tick marks */
.scale-tick { user-select: none; }

.tick-line {
  display: block;
  width: 2px;
  background: var(--glass-border);
  border-radius: 2px;
}

.tick-line.major { width: 3px; }
.tick-line.minor { width: 2px; }
.tick-line.micro { width: 1px; }

/* Current time marker */
.current-time-line {
  position: absolute;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, rgba(255, 90, 90, 0.65), rgba(255, 90, 90, 0.30));
  box-shadow: 0 0 2px 1px rgba(255, 90, 90, 0.35), 0 0 4px 1px rgba(255, 0, 0, 0.18);
  animation: currentTimePulse 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 8;
}

/* Grid lines */
.timeline-grid .grid-line.hour         { opacity: 0.1 !important; width: 3px !important; }
.timeline-grid .grid-line.half-hour    { opacity: 0.11 !important; width: 1px !important; }
.timeline-grid .grid-line.quarter-hour { opacity: 0.05 !important; }

/* Flight / maintenance items */
.maintenance-item,
.flight-item {
  position: absolute;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s ease-in-out;
}

.maintenance-item {
  border: 1px solid var(--bs-info);
  background-color: rgba(var(--bs-info-rgb), 0.2);
}

.flight-item {
  background-color: transparent;
  border: 1px solid transparent;
}

.flight-item:hover,
.maintenance-item:hover {
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
  z-index: 20;
  transition: box-shadow 0.3s ease;
}

/* Flight center column truncation */
.flight-center-col { max-width: 180px; min-width: 120px; }

.flight-center-col .flight-number-label,
.flight-center-col .flight-status-badge {
  max-width: 100%;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Flags (shared) */
.flight-flag,
.maintenance-flag {
  position: absolute;
  border: 1px solid var(--bs-primary);
  cursor: pointer;
  z-index: 80;
  transition: all 0.2s ease-in-out;
}

.flight-flag.flag-accent,
.maintenance-flag.flag-accent {
  border-left-width: 4px !important;
}

.timeline-container .flight-flag,
.timeline-container .maintenance-flag { z-index: 1065 !important; }
.timeline-container .flag-pointer     { z-index: 1066 !important; }

.flight-flag::before,
.maintenance-flag::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: -1;
  border-radius: var(--bs-border-radius);
}

.flight-flag:hover,
.maintenance-flag:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--glass-opacity-shadow-light) !important;
}

.flight-flag.z-3,
.maintenance-flag.z-3 {
  z-index: calc(var(--bs-zindex-dropdown) + 1);
}

/* Maintenance flag variants */
.maintenance-flag-primary { background: rgba(var(--bs-blue-rgb), var(--glass-opacity-flag-bg)) !important; border-color: rgba(var(--bs-blue-rgb), var(--glass-opacity-flag-border)) !important; border-left: 3px solid var(--bs-primary); }
.maintenance-flag-info    { background: rgba(var(--info-dark-rgb), var(--glass-opacity-flag-bg)) !important; border-color: rgba(var(--bs-info-rgb), var(--glass-opacity-flag-border)) !important; border-left: 3px solid var(--bs-info); }
.maintenance-flag-warning { background: rgba(var(--warning-dark-rgb), var(--glass-opacity-flag-bg)) !important; border-color: rgba(var(--bs-warning-rgb), var(--glass-opacity-flag-border)) !important; border-left: 3px solid var(--bs-warning); }
.maintenance-flag-danger  { background: rgba(var(--bs-danger-rgb), var(--glass-opacity-flag-bg)) !important; border-color: rgba(var(--bs-danger-rgb), var(--glass-opacity-flag-border)) !important; border-left: 3px solid var(--bs-danger); }
.maintenance-flag-success { background: rgba(var(--bs-success-rgb), var(--glass-opacity-flag-bg)) !important; border-color: rgba(var(--bs-success-rgb), var(--glass-opacity-flag-border)) !important; border-left: 3px solid var(--bs-success); }

/* Flight flag variants */
.flight-flag-success { background: rgba(var(--bs-success-rgb), var(--glass-opacity-flag-bg)) !important; border-color: rgba(var(--bs-success-rgb), var(--glass-opacity-flag-border)) !important; border-left: 3px solid var(--bs-success); }
.flight-flag-info    { background: rgba(var(--bs-info-rgb), var(--glass-opacity-flag-bg)) !important; border-color: rgba(var(--bs-info-rgb), var(--glass-opacity-flag-border)) !important; border-left: 3px solid var(--bs-info); }
.flight-flag-warning { background: rgba(var(--bs-warning-rgb), var(--glass-opacity-flag-bg)) !important; border-color: rgba(var(--bs-warning-rgb), var(--glass-opacity-flag-border)) !important; border-left: 3px solid var(--bs-warning); }
.flight-flag-danger  { background: rgba(var(--bs-danger-rgb), var(--glass-opacity-flag-bg)) !important; border-color: rgba(var(--bs-danger-rgb), var(--glass-opacity-flag-border)) !important; border-left: 3px solid var(--bs-danger); }

/* Arrow colors */
.maintenance-flag-primary-arrow { color: rgba(var(--bs-blue-rgb), 1) !important; }
.maintenance-flag-danger-arrow  { color: rgba(var(--bs-danger-rgb), 0.4) !important; }
.maintenance-flag-warning-arrow { color: rgba(var(--bs-warning-rgb), 0.4) !important; }
.maintenance-flag-info-arrow    { color: rgba(var(--bs-info-rgb), 0.4) !important; }
.maintenance-flag-success-arrow { color: rgba(var(--bs-success-rgb), 0.4) !important; }
.flight-flag-success-arrow      { color: rgba(var(--bs-success-rgb), 0.4) !important; }
.flight-flag-info-arrow         { color: rgba(var(--bs-info-rgb), 0.4) !important; }
.flight-flag-warning-arrow      { color: rgba(var(--bs-warning-rgb), 0.4) !important; }
.flight-flag-danger-arrow       { color: rgba(var(--bs-danger-rgb), 0.4) !important; }

/* Active state */
.flight-flag.flag-active {
  box-shadow: 0 0 15px rgba(var(--bs-success-rgb), var(--glass-opacity-flag-border)) !important;
  border-color: rgba(var(--bs-success-rgb), 0.6) !important;
}


/* ================================================================
   13. TIMELINE COMPONENT (vertical)
   ================================================================ */
.timeline-item {
  gap: 1rem;
  padding-bottom: 1.5rem;
}

.timeline-item:last-child { padding-bottom: 0; }

.timeline-marker {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 2px solid var(--glass-border);
  background: var(--bs-body-bg);
  flex-shrink: 0;
  z-index: 2;
}

.timeline-marker.text-bg-success { background: var(--bs-success) !important; border-color: var(--bs-success); }
.timeline-marker.text-bg-primary { background: var(--bs-primary) !important; border-color: var(--bs-primary); }
.timeline-marker.bg-light        { background: var(--bs-light) !important; border-color: var(--glass-border); }
.timeline-marker i { font-size: 1rem; }

.timeline-line {
  position: absolute;
  left: 1.25rem;
  top: 2.5rem;
  bottom: -1.5rem;
  width: 2px;
  background: var(--glass-border);
  z-index: 1;
}

.timeline-content { min-width: 0; }
.timeline-title   { font-weight: 600; color: var(--bs-body-color); margin: 0; }

.timeline-description {
  font-size: 0.875rem;
  color: var(--bs-secondary-color);
  margin: 0;
}


/* ================================================================
   14. RICH TEXT EDITOR
   ================================================================ */
.rich-text-source {
  display: none !important;
}

.rich-text-shell {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.5rem;
  background-color: var(--bg-glass) !important;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.6);
}

.rich-text-shell-readonly {
  opacity: 0.85;
}

.rich-text-actionbar {
  gap: 0.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pell-actionbar {
  background-color: inherit !important;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.rich-text-actionbar .pell-button {
  padding: 0.15rem 0.45rem;
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.85);
  background-color: rgba(255, 255, 255, 0.04);
  width: auto;
  min-width: 1.9rem;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rich-text-actionbar .pell-button:is(:hover, :focus-visible, .is-active) {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
  background-color: rgba(255, 255, 255, 0.12);
}

.rich-text-content {
  position: relative;
  min-height: 8rem;
  border: 0;
  border-radius: 0 0 0.5rem 0.5rem;
  background: rgba(15, 23, 42, 0.9);
  color: var(--bs-light);
  font-size: 0.95rem;
  line-height: 1.35;
  padding: 0.75rem 0.95rem;
  overflow-y: auto;
  resize: vertical;
}

.rich-text-content:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.6);
}

.rich-text-content[data-placeholder][data-empty="true"]::before {
  content: attr(data-placeholder);
  position: absolute;
  top: 0.75rem;
  left: 0.95rem;
  color: rgba(255, 255, 255, 0.4);
  pointer-events: none;
}

.rich-text-content ul,
.rich-text-content ol { padding-left: 1.25rem; margin-bottom: 0.5rem; }

.rich-text-content p,
.rich-text-content div,
.rich-text-content li,
.rich-text-content blockquote { margin-bottom: 0.5rem; }

.rich-text-display { word-break: break-word; }

.rich-text-display p,
.rich-text-display div,
.rich-text-display li,
.rich-text-display blockquote { margin-bottom: 0.4rem; }

.rich-text-display ul,
.rich-text-display ol { padding-left: 1.25rem; }


/* ================================================================
   15. MULTI-SELECT AUTOCOMPLETE
   ================================================================ */
.multi-select-autocomplete .selected-items-container {
  min-height: 38px;
  max-height: 120px;
  overflow-y: auto;
  border: 1px solid var(--multi-select-border);
  border-radius: 0.375rem;
  background: var(--multi-select-bg);
  padding: 0.375rem 0.75rem;
  margin-bottom: 0.5rem;
}

.multi-select-autocomplete .selected-items-container:empty {
  display: none;
}

.multi-select-autocomplete .autocomplete-input {
  border: 1px solid var(--multi-select-border);
  border-radius: 0.375rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.multi-select-autocomplete .autocomplete-input:focus {
  border-color: var(--multi-select-focus-border);
  outline: 0;
  box-shadow: 0 0 0 0.25rem var(--multi-select-focus-shadow);
}

.multi-select-autocomplete .autocomplete-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  max-height: 240px;
  overflow-y: auto;
  overflow-x: hidden;
  background-clip: padding-box;
  animation: fadeInDropdown 0.12s ease-out;
  scrollbar-width: thin;
}

.multi-select-autocomplete .autocomplete-dropdown::-webkit-scrollbar { width: 6px; }
.multi-select-autocomplete .autocomplete-dropdown::-webkit-scrollbar-track { background: var(--scrollbar-track); }
.multi-select-autocomplete .autocomplete-dropdown::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
.multi-select-autocomplete .autocomplete-dropdown::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb); }

.multi-select-autocomplete .autocomplete-dropdown.show {
  display: block;
}

.multi-select-autocomplete .autocomplete-item {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  border: none;
  background: none;
  text-align: left;
  transition: background-color 0.12s ease-out;
}

.multi-select-autocomplete .autocomplete-item .d-flex > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.multi-select-autocomplete .autocomplete-item .fw-medium,
.multi-select-autocomplete .autocomplete-item .fw-semibold {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.3;
}

.multi-select-autocomplete .autocomplete-item .text-muted {
  font-size: 0.8125rem;
  line-height: 1.25;
}

.multi-select-autocomplete .autocomplete-item:hover,
.multi-select-autocomplete .autocomplete-item.active,
.multi-select-autocomplete .autocomplete-item:focus {
  background-color: var(--multi-select-hover);
  outline: none;
}

.multi-select-autocomplete .autocomplete-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: transparent !important;
}

.multi-select-autocomplete .badge {
  font-size: 0.8125rem;
  font-weight: 500;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  animation: fadeInBadge 0.15s ease-out;
}

.multi-select-autocomplete .badge .btn-close {
  font-size: 0.65em;
  padding: 0;
  margin-left: 0.35rem;
  background: none;
  border: none;
  color: inherit;
  opacity: 0.65;
  flex-shrink: 0;
  transition: opacity 0.12s ease-out, transform 0.12s ease-out;
}

.multi-select-autocomplete .badge .btn-close:hover {
  opacity: 1;
  transform: scale(1.15);
}


/* ================================================================
   16. DELAY CODE SYSTEM
   ================================================================ */
.delay-code-entry { min-width: 0; }

.delay-code-row {
  gap: 0.5rem;
  flex-wrap: nowrap;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 0.1rem;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.delay-code-row > * {
  flex-shrink: 0;
  white-space: nowrap;
}

.delay-code-row .delay-code-label {
  flex-shrink: 1;
  min-width: 0;
}

.delay-code-minutes,
.delay-code-provider-group,
.delay-code-provider-badge,
.delay-code-sla {
  white-space: nowrap;
}

.delay-code-description {
  margin-top: 0.35rem;
  max-width: 320px;
  white-space: normal;
  word-break: break-word;
  line-height: 1.35;
}

.delay-code-description > div + div {
  margin-top: 0.1rem;
}

.delay-alloc-meta-row {
  display: flex;
  gap: 0.35rem;
  flex-wrap: nowrap;
  width: 100%;
  justify-content: center;
  align-items: center;
  margin-inline: auto;
}

.delay-alloc-meta-badge {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.delay-alloc-meta-sep {
  flex: 0 0 auto;
  align-self: center;
}

.delay-nowrap {
  white-space: nowrap;
}

.delay-scroll-sentinel,
.aog-scroll-sentinel,
.engineering-scroll-sentinel,
.publications-load-more-sentinel,
.synconnect-sentinel-1px,
.event-load-more-sentinel,
.mel-load-more-sentinel { height: 1px; }

.delay-card-sev-danger {
  border-left: 4px solid var(--bs-danger) !important;
}

.delay-card-sev-warning {
  border-left: 4px solid var(--bs-warning) !important;
}

.delay-card-sev-secondary {
  border-left: 4px solid var(--bs-secondary) !important;
}

.delay-card-sev-info {
  border-left: 4px solid var(--bs-info) !important;
}

.delay-card-sev-success {
  border-left: 4px solid var(--bs-success) !important;
}

.delay-card-animate {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .25s ease-out, transform .25s ease-out;
}

.delay-card-animate.delay-card-animate-show {
  opacity: 1;
  transform: translateY(0);
}

.delay-dropdown-scroll {
  white-space: normal;
  overflow-x: hidden;
  overflow-y: auto;
}

.delay-min-w-0 {
  min-width: 0;
}

.delay-btn-close-xs {
  font-size: 0.6rem;
}

.delay-dropdown-max-200 {
  max-height: 200px;
  overflow: auto;
  z-index: 1050;
}

.delay-dropdown-max-240 {
  max-height: 240px;
  overflow: auto;
  z-index: 1050;
}

/* Toolbar actions (shared layout for delay, MEL, AOG, engineering) */
.delay-toolbar-actions,
.mel-toolbar-actions,
.aog-toolbar-actions,
.mel-filter-actions,
.aog-request-actions,
.engineering-toolbar-actions {
  width: 100%;
}

.mel-filter-actions,
.engineering-toolbar-actions {
  flex-wrap: wrap;
  overflow: visible;
  scrollbar-width: thin;
}

.engineering-toolbar-actions > .dropdown,
.engineering-toolbar-actions > .btn {
  flex: 0 0 auto !important;
  width: auto !important;
}

.delay-toolbar-actions > .dropdown,
.delay-toolbar-actions > .btn,
.mel-toolbar-actions > .btn,
.aog-toolbar-actions > .dropdown,
.aog-toolbar-actions > .btn,
.mel-filter-actions > .dropdown,
.mel-filter-actions > .btn,
.aog-request-actions > .btn,
.engineering-toolbar-actions > .dropdown,
.engineering-toolbar-actions > .btn {
  min-width: 0;
}

/* MEL table - open slot container wrapping */
#mel-table-wrapper td div[data-opps-container="1"] {
  white-space: normal !important;
}


/* ================================================================
   17. AOG DASHBOARD
   ================================================================ */
.status-option-btn {
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
}

.status-option-btn:hover {
  box-shadow: 0 2px 8px rgba(var(--bs-black-rgb), var(--glass-opacity-shadow-extra-light));
}

.status-option-btn:disabled,
.status-option-btn.disabled {
  opacity: 1 !important;
}

.status-option-btn:disabled:not(.aog-status-active),
.status-option-btn.disabled:not(.aog-status-active) {
  border-color: var(--glass-border) !important;
}

.status-option-btn.aog-status-active {
  border-width: 2px !important;
  border-color: var(--bs-light) !important;
  box-shadow: 0 0 8px rgba(var(--bs-light-rgb), 0.35);
}

.rectifai-logo-sm {
  height: 14px;
  width: auto;
  object-fit: contain;
}

.rectifai-logo-lg {
  height: 20px;
  width: auto;
  object-fit: contain;
}

.aog-io-thead {
  background-color: rgba(255, 255, 255, 0.03) !important;
}

.aog-fade-target {
  transition: opacity .25s ease;
}

.aog-fade-target.aog-fade-hidden {
  opacity: 0;
}

.aog-fade-target.aog-fade-visible {
  opacity: 1;
}

.aog-row-dimmed {
  opacity: 0.5;
  transition: opacity .3s ease;
}

.aog-offcanvas-fallback-visible {
  visibility: visible;
}

.aog-icon-lg,
.notification-empty-icon,
.synconnect-icon-48 {
  width: 48px;
  height: 48px;
}

.aog-col-select {
  width: 50px;
}

.aog-col-actions {
  width: 140px;
}

.aog-cancel-col {
  width: 160px;
}

.aog-status-dot {
  width: 10px;
  height: 10px;
  margin-top: 5px;
}

.aog-movement-dropdown {
  margin-top: 0.125rem;
  z-index: 1055;
  min-width: 100%;
  max-height: 260px;
  overflow-y: auto;
}

.fade-in-row {
  opacity: 0;
  transform: translateY(15px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
  contain: layout style paint;
}

.fade-in-row.animated {
  opacity: 1;
  transform: translateY(0);
}

.table-responsive { scroll-behavior: smooth; }

#aog-parts-table {
  contain: layout style paint;
  table-layout: fixed;
}

#aog-parts-table tbody {
  contain: layout style;
}

#aog-parts-table tbody tr {
  transform: translateZ(0);
  backface-visibility: hidden;
}

#load-more-sentinel {
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
  will-change: opacity, transform;
}

/* Smooth appear for newly added updates */
.update-item.newly-added {
  animation: updateAppear var(--appear-duration) var(--appear-ease) both;
}


/* ================================================================
   18. TEAM MANAGEMENT
   ================================================================ */
.team-item.card {
  border: 1px solid var(--glass-border);
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.team-item.card:hover {
  border-color: var(--bs-secondary) !important;
  background-color: rgba(var(--bs-secondary-rgb), 0.07);
  box-shadow: 0 0 0 1px rgba(var(--bs-secondary-rgb), 0.35);
}

.team-item.card.is-selected {
  border-color: var(--bs-secondary) !important;
  background-color: rgba(var(--bs-secondary-rgb), 0.12);
  box-shadow: 0 0 0 1px rgba(var(--bs-secondary-rgb), 0.45), 0 0 0 3px rgba(var(--bs-secondary-rgb), 0.18);
}

.dashboard-status-dot {
  width: 8px;
}

.dashboard-welcome-title:focus,
.dashboard-welcome-title:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.dashboard-quick-action-danger {
  background: rgba(239, 68, 68, 0.1);
}

.dashboard-quick-action-warning {
  background: rgba(245, 158, 11, 0.1);
}

.dashboard-quick-action-info {
  background: rgba(6, 182, 212, 0.1);
}

.dashboard-system-row {
  border-color: var(--glass-border) !important;
}

#dashboard-events-stats .dashboard-events-layout {
  align-items: stretch;
}

#dashboard-events-stats .dashboard-main-metrics-col {
  min-height: 100%;
}

#dashboard-events-stats .dashboard-stats-row,
#dashboard-events-stats .dashboard-charts-row {
  margin-bottom: 0;
}

#dashboard-events-stats .dashboard-sticky-note-col {
  display: flex;

}

#dashboard-events-stats .dashboard-sticky-note-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

#dashboard-events-stats .dashboard-sticky-note-list-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 62vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

@media (max-width: 1199.98px) {
  #dashboard-events-stats .dashboard-sticky-note-col {
    height: auto;
  }

  #dashboard-events-stats .dashboard-sticky-note-list-scroll {
    max-height: 26rem;
  }
}

.update-item .update-header .update-actions {
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease-in-out;
}

.update-item .update-header:hover .update-actions,
.update-item .update-header:focus-within .update-actions {
  opacity: 1;
  pointer-events: auto;
}

.update-item .attachments-wrap .attachment-item .attachment-actions {
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease-in-out;
}

.update-item .attachments-wrap .attachment-item .attachment-row:hover .attachment-actions,
.update-item .attachments-wrap .attachment-item .attachment-row:focus-within .attachment-actions {
  opacity: 1;
  pointer-events: auto;
}

.dashboard-thread-col {
  width: 48px;
}

.dashboard-updates-avatar-40 {
  width: 40px;
  height: 40px;
  line-height: 40px;
  overflow: hidden;
}

.dashboard-updates-icon-xs,
.notification-method-icon,
.rectifai-icon-14,
.settings-icon-14,
.messages-muted-icon { width: 14px; height: 14px; }

.dashboard-update-thread-line {
  top: 40px;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  z-index: 0;
}

.dashboard-update-header-focus {
  outline: none;
}

.dashboard-attachment-col {
  max-width: 300px;
  min-width: 300px;
}

.dashboard-delete-icon-wrap {
  width: 64px;
  height: 64px;
}

.dashboard-attachment-meta {
  font-size: .75rem;
}

.dashboard-upload-progress {
  height: 0.75rem;
}

.engineering-cursor-not-allowed {
  cursor: not-allowed;
}

.engineering-cursor-grab {
  cursor: grab;
}

.engineering-icon-picker-menu {
  min-width: 14rem;
}

.engineering-icon-picker-grid {
  grid-template-columns: repeat(4, 1fr);
}

#global-settings-panel-container {
  position: relative;
}

.admin-members-list {
  max-height: 420px;
  overflow-y: auto;
}

.teams-sidebar-list {
  max-height: 470px;
  overflow-y: auto;
}

.admin-global-settings-form {
  min-height: 400px;
  overflow-x: hidden;
}

.settings-tab-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.5rem;
}

.settings-tab-grid .nav-item {
  min-width: 0;
}

.settings-tab-grid .nav-link {
  white-space: normal;
  line-height: 1.2;
  padding: 0.6rem 0.75rem;
}

[data-action="add-service-provider"] {
  white-space: nowrap;
}

@media (max-width: 1200px) {
  .admin-teams-tab-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: auto !important;
  }

  .admin-teams-tab-btn {
    padding-right: 1rem !important;
  }

  .admin-create-team-btn {
    position: static !important;
    transform: none !important;
    margin: 0.5rem 0.75rem 0.75rem auto;
    align-self: flex-end;
  }
}


/* ================================================================
   19. ENGINEERING ACTIONS
   (table hover rules are in §10 – consolidated hover-to-reveal)
   ================================================================ */
/* No additional rules needed — all covered by shared sections */


/* ================================================================
   20. PUBLICATIONS
   (hover rules are in §10 – consolidated hover-to-reveal)
   ================================================================ */
/* No additional rules needed */


/* ================================================================
   21. NOTIFICATIONS
   ================================================================ */
.event-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(var(--bs-black-rgb), var(--glass-opacity-shadow-light));
  transform: translateX(400px);
  opacity: 0;
  transition: all 0.3s ease-out;
  z-index: 9999;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(var(--bs-white-rgb), var(--glass-opacity-notification-border));
  background: rgba(var(--bs-success-rgb), var(--glass-opacity-notification));
}

.event-notification.show {
  transform: translateX(0);
  opacity: 1;
}

.event-notification.success { background: rgba(var(--bs-success-rgb), var(--glass-opacity-notification)); }
.event-notification.error   { background: rgba(var(--notification-error-rgb), var(--glass-opacity-notification)); }
.event-notification.warning { background: rgba(var(--notification-warning-rgb), var(--glass-opacity-notification)); }

.event-notification i {
  margin-right: 8px;
  font-size: 1.1em;
}

.notification-loader-shell { min-height: 220px; }
.notification-item-row {
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.notification-title-text {
  line-height: 1.4;
}
.notification-body-text {
  font-size: 0.8125rem;
  line-height: 1.4;
}
.notification-time-text,
.rectifai-note-text,
.rectifai-message-time,
.settings-change-phone-btn { font-size: 0.75rem; }
.notification-card-icon-wrap {
  width: 36px;
  height: 36px;
}

/* Publications helpers */
.publications-model-filter-dropdown { min-width: 16rem; }
.publications-model-filter-options {
  max-height: 18rem;
  overflow: auto;
}
.publications-rectifai-logo-sm {
  height: 14px;
  width: auto;
}
.publications-dropdown-item-wrap {
  white-space: normal;
  overflow-wrap: anywhere;
}
.publications-applicability-cell { max-width: 420px; }
.publications-table-col-tight { width: 1%; }

/* RectifAI view helpers */
.rectifai-header-logo {
  max-width: 140px;
  height: auto;
}
.rectifai-header-copy { line-height: 1.5; }
.rectifai-aircraft-dropdown { min-width: 150px; }
.rectifai-serial-input-group { min-width: 180px; }
.rectifai-chat-column {
  min-height: 0;
  order: 2;
}
.rectifai-input-card-z { z-index: 1000; }
.rectifai-sidebar-column {
  flex-shrink: 0;
  order: 1;
}
.rectifai-collapse-chevron {
  cursor: pointer;
  transition: transform 0.3s ease;
}
.rectifai-collapse-chevron.is-expanded { transform: rotate(180deg); }
.rectifai-message-body {
  font-size: 0.938rem;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.rectifai-avatar-image-fill {
  height: 100%;
  object-fit: cover;
  position: absolute;
}

/* Settings dashboard helpers */
.settings-avatar-preview-wrap {
  width: 78px;
  height: 78px;
}
.settings-avatar-preview-img { object-fit: cover; }
.settings-icon-10 {
  width: 10px;
  height: 10px;
}

@media (min-width: 992px) {
  .rectifai-chat-column { order: 1 !important; }
  .rectifai-sidebar-column {
    width: 340px !important;
    order: 2 !important;
  }
}


/* ================================================================
   22. MESSAGES & SYNCONNECT
   ================================================================ */

/* Root section fills its parent */
body.messages-route-active [data-messages-root] {
  height: 100%;
  overflow: hidden;
}

.messages-conversation {
  overscroll-behavior: contain;
}

/* Shell + column fill available height exactly */
.messages-conversation-shell {
  height: 100%;
  min-height: 0;
}

.messages-thread-column {
  height: 100%;
  min-height: 0;
}

/* Message scroll area: the ONLY element that scrolls */
.messages-conversation [data-message-scroll] {
  overflow-y: auto;
  min-height: 0;
  overscroll-behavior-y: contain;
  overscroll-behavior-x: none;
}

.messages-conversation .messages-thread-header {
  position: sticky;
  top: 0;
  z-index: 11;
  flex-shrink: 0;
}

.messages-conversation form[data-message-form] {
  margin-top: auto;
  flex-shrink: 0;
  z-index: 10;
  position: sticky;
  bottom: 0;
  background-color: rgba(var(--bs-dark-rgb), 0.98) !important;
}

.messages-content-max-width { max-width: 800px; }
.messages-bubble-max-width { max-width: 70ch; }
.messages-border-dashed { border-style: dashed !important; }
.messages-disabled-cursor { cursor: not-allowed; }
.messages-thread-avatar,
.messages-thread-avatar-img,
.messages-thread-avatar-fallback {
  width: 40px;
  height: 40px;
}
.messages-thread-avatar-fallback {
  line-height: 40px;
  color: rgba(255, 255, 255, 0.92);
  background-color: rgba(255, 255, 255, 0.08);
}

.universal-modal-no-shrink { flex-shrink: 0; }

.universal-modal-form {
  min-height: 0;
  overflow: hidden;
}

.universal-modal-body {
  overflow-y: auto;
  overflow-x: hidden;
}

.universal-flatpickr-modal-calendar {
  z-index: 9999;
  position: fixed;
}

.utils-toast-fixed-top-right {
  top: 20px;
  right: 20px;
  z-index: 9999;
  min-width: 300px;
}

.utils-logo-loader-img {
  width: 56px;
  height: 56px;
  animation: logoBlink 0.8s ease-in-out infinite;
}

.synconnect-pre-wrap {
  white-space: pre-wrap;
  word-break: break-word;
}

.synconnect-textarea-no-scroll {
  overflow: hidden;
  resize: none;
}

.synconnect-aircraft-suggestions-menu,
.synconnect-station-suggestions-menu {
  overflow-y: auto;
}

.synconnect-aircraft-suggestions-menu { max-height: 260px; }
.synconnect-station-suggestions-menu { max-height: 240px; }

.synconnect-col-sender-head {
  width: 280px;
  max-width: 280px;
}

.synconnect-col-sender-cell {
  width: 320px;
  max-width: 320px;
}

/* ================================================================
   23. RECTIFAI CHAT INTERFACE
   ================================================================ */

/* Chat area */
#rectifai-chat-area .card {
  transition: box-shadow 0.2s ease;
}

#rectifai-chat-area .card:hover {
  box-shadow: 0 0 15px rgba(13, 110, 253, 0.2);
}

/* Prompt input */
#rectifai-prompt-input { font-family: inherit; }

#rectifai-prompt-input:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Data source controls */
.data-source-control {
  padding: 0.75rem;
  border-radius: 0.375rem;
  background: rgba(255, 255, 255, 0.02);
  transition: background 0.2s ease;
}

.data-source-control:hover { background: rgba(255, 255, 255, 0.05); }

.data-source-control .form-range { height: 6px; }

.data-source-control .form-range::-webkit-slider-thumb {
  background: var(--bs-primary);
  border: 2px solid var(--bs-dark);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.data-source-control .form-range::-moz-range-thumb {
  background: var(--bs-primary);
  border: 2px solid var(--bs-dark);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.data-source-control .form-range::-webkit-slider-thumb:hover,
.data-source-control .form-range::-moz-range-thumb:hover {
  background: var(--bs-primary);
  transform: scale(1.1);
}

/* Aircraft type buttons */
#aircraft-type-group { flex-wrap: wrap; }

/* Top bar */
.rectifai-topbar { margin: 1rem 0.75rem 0 0.75rem; }

/* Chat layout */
.rectifai-main-layout { max-width: 1800px; }

/* Messages area */
.rectifai-messages-area {
  scroll-behavior: smooth;
  padding-bottom: 2rem !important;
}

.rectifai-messages-wrapper {
  min-height: min-content !important;
  height: auto !important;
}

.rectifai-messages-area::-webkit-scrollbar { width: 8px; }
.rectifai-messages-area::-webkit-scrollbar-track { background: var(--scrollbar-track); }
.rectifai-messages-area::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; }
.rectifai-messages-area::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb); }

/* Message */
.rectifai-message {
  animation: messageSlideIn 0.3s ease-out;
  margin-bottom: 0.5rem;
}

.rectifai-message > div:not(.rectifai-message-avatar) {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding-bottom: 0.25rem;
}

.rectifai-message > div:not(.rectifai-message-avatar) > div {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  line-height: 1.6 !important;
}

/* Message avatar */
.rectifai-message-avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 18px;
  margin-top: 4px;
  overflow: hidden;
}

/* Welcome icon */
.rectifai-welcome-icon {
  width: 48px;
  height: 48px;
  background: var(--bs-primary);
  border-radius: var(--bs-border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  flex-shrink: 0;
}

/* Input box */
.rectifai-input-box {
  display: flex;
  gap: 0.75rem;
  background: rgba(var(--bs-light-rgb), 0.05);
  border: 1px solid var(--bs-secondary);
  border-radius: var(--bs-border-radius);
  padding: 0.75rem;
  transition: var(--transition-cosmic);
}

.rectifai-input-box:focus-within {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

.rectifai-input-box textarea::placeholder { color: var(--bs-secondary); }

/* Button hover */
.rectifai-btn:hover:not(:disabled),
.rectifai-btn-secondary:hover:not(:disabled) {
  transform: translateY(-1px);
}

/* Sidebar */
.rectifai-sidebar {
  overflow-y: auto;
  flex-shrink: 0;
}

.rectifai-sidebar::-webkit-scrollbar { width: 6px; }
.rectifai-sidebar::-webkit-scrollbar-track { background: var(--scrollbar-track); }
.rectifai-sidebar::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }

/* Slider */
.rectifai-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: rgba(var(--bs-light-rgb), 0.1);
  outline: none;
  transition: var(--transition-cosmic);
}

.rectifai-slider:hover { background: rgba(var(--bs-light-rgb), 0.15); }

.rectifai-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bs-primary);
  cursor: pointer;
  transition: var(--transition-cosmic);
}

.rectifai-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }

.rectifai-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bs-primary);
  cursor: pointer;
  border: none;
  transition: var(--transition-cosmic);
}

.rectifai-slider::-moz-range-thumb:hover { transform: scale(1.15); }


/* ================================================================
   24. ACCESS CONTROL
   ================================================================ */
[id*="-access-control"]:not([data-access-processed="true"]),
#remove-event-btn:not([data-access-processed="true"]),
#update-etr-btn:not([data-access-processed="true"]),
#release-to-ops-btn:not([data-access-processed="true"]),
#repair-availability-btn:not([data-access-processed="true"]),
#export-event-btn:not([data-access-processed="true"]),
#aircraft-mels-section:not([data-access-processed="true"]),
#create-mel-btn:not([data-access-processed="true"]),
#engineering-actions-section:not([data-access-processed="true"]),
#add-engineering-action-btn:not([data-access-processed="true"]),
#aog-parts-section:not([data-access-processed="true"]),
#add-aog-part-btn:not([data-access-processed="true"]) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

[data-access-hidden="true"],
.access-control-hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  left: -9999px !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

.nav-item[data-access-hidden="true"],
li[data-access-hidden="true"],
.nav-link[data-access-hidden="true"],
.offcanvas-body .nav [data-access-hidden="true"],
.sidebar [data-access-hidden="true"],
nav [data-access-hidden="true"],
.mobile-nav [data-access-hidden="true"] {
  display: none !important;
  visibility: hidden !important;
}

[id*="-access-control"]:not([data-access-hidden="true"]) {
  transition: opacity 0.2s ease-in-out;
}

.event-sidebar-view-btn {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.16s ease-in-out, visibility 0.16s ease-in-out;
}

.event-sidebar-item-card:hover .event-sidebar-view-btn,
.event-sidebar-item-card:focus-within .event-sidebar-view-btn {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}


/* ================================================================
   25. FLATPICKR INTEGRATION
   ================================================================ */
.flatpickr-calendar {
  background: var(--bs-dark) !important;
  border: 1px solid var(--glass-border) !important;
  backdrop-filter: var(--glass-blur);
  z-index: 9999 !important;
}

.flatpickr-day.selected {
  background: var(--bs-primary) !important;
  color: var(--bs-dark) !important;
}

.flatpickr-current-month { color: var(--bs-light) !important; }

.modal .flatpickr-calendar {
  z-index: 9999 !important;
  position: fixed !important;
}

.flatpickr-dropdown { z-index: 9999 !important; }


/* ================================================================
   26. UTILITY CLASSES
   ================================================================ */

/* Glass */
.glass {
  background: var(--bg-glass) !important;
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border) !important;
}

.bg-glass {background: var(--bg-glass) !important;
}

/* Spinners */
.spinner {
  height: 2rem;
  border: 3px solid rgba(var(--bs-primary-rgb), var(--glass-opacity-shadow));
  border-top: 3px solid var(--bs-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Loading states */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  text-align: center;
}

.loading-state-inline {
  flex-direction: row;
  padding: 0.75rem 0;
  gap: 0.5rem;
}

.loading-message { color: var(--bs-secondary-color, rgba(255, 255, 255, 0.65)); }

/* Empty / error states */
.admin-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.5rem;
  padding: 0.75rem 0;
}

/* Icon spin / fade */
.animate-spin      { display: inline-block; animation: spin 1s linear infinite; transform-origin: center; }

.icon-fade     { transition: opacity 0.18s ease-in-out; }
.icon-fade-in  { opacity: 0; }
.icon-fade-out { opacity: 0; }

/* Fade in */
.fade-in-up { animation: fadeInVertical 0.6s ease-out; }

/* Font sizes */
.fs-7  { font-size: 0.875rem !important; font-weight: 500 !important; }
.fs-8  { font-size: 0.75rem !important;  font-weight: 500 !important; }
.fs-9  { font-size: 0.625rem !important; font-weight: 500 !important; }
.fs-10 { font-size: 0.5rem !important;   font-weight: 500 !important; }

/* Opacity */
.opacity-15 { opacity: 0.15; }
.opacity-10 { opacity: 0.1; }
.opacity-5  { opacity: 0.05; }

/* Width */
.w-0  { width: 0; }
.w-3  { width: 0.75rem; }
.w-4  { width: 1rem; }
.w-5  { width: 1.25rem; }
.w-6  { width: 1.5rem; }
.w-8  { width: 2rem; }
.w-12 { width: 3rem; }
.w-16 { width: 4rem; }

/* Height */
.h-1  { height: 4px !important; }
.h-2  { height: 8px !important; }
.h-3  { height: 12px !important; }
.h-4  { height: 1rem; }
.h-5  { height: 1.25rem; }
.h-6  { height: 1.5rem; }
.h-8  { height: 2rem; }
.h-12 { height: 3rem; }
.h-16 { height: 4rem; }

/* Z-index */
.z-0 { z-index: 0 !important; }
.z-1 { z-index: 1 !important; }
.z-2 { z-index: 2 !important; }
.z-3 { z-index: 3 !important; }

/* Page transitions */
.content-area[aria-busy="true"] { cursor: progress; }
.page-view { opacity: 0; transform: translateY(8px); }

.page-enter-active {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: opacity 0.32s var(--transition-cosmic), transform 0.32s var(--transition-cosmic);
}

.page-exit-active {
  opacity: 0 !important;
  transform: translateY(-4px) !important;
  transition: opacity 0.22s var(--transition-cosmic), transform 0.22s var(--transition-cosmic);
}

/* Accessibility: screen-reader-only route announcer */
#route-announcer {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Aircraft serial display truncation */
#create-aircraft-serial-display {
  max-width: 50%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Event type dropdown positioning */
#create-unified-event-type-options[data-popper-placement] {
  margin-top: 0 !important;
}

/* Event view helpers */
.event-aircraft-input { padding-left: 1.9rem; }
.event-dropdown-scroll { max-height: 300px; overflow-y: auto; }
.event-dropdown-top-offset {
  top: 40%;
  left: 0;
  overflow-x: hidden;
}
.event-dropdown-auto-disabled {
  pointer-events: none;
  opacity: 0.6;
}
.event-rectifai-logo-lg { height: 28px; width: auto; }
.event-rectifai-logo-sm { height: 16px; width: auto; object-fit: contain; }
.event-rectifai-min-height { min-height: 60vh; }
.event-list-caret {
  display: inline-block;
  width: 16px;
  min-width: 16px;
  text-align: center;
  margin-top: 1px;
}
.event-subscription-dropdown { min-width: 280px; }
.event-invite-provider-list {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1050;
  margin-top: 0;
}
.event-risk-checkbox { transform: scale(1.5); }
.event-inline-mels-table-wrap { max-height: 240px; overflow: auto; }

/* MEL view/helpers */
.mel-resources-loading-wrap { min-height: 320px; }
.mel-autocomplete-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1050;
  max-height: 260px;
  overflow-y: auto;
}
.mel-station-code {
  white-space: nowrap;
}
.mel-station-name {
  display: block;
  max-width: 100%;
}
.mel-station-name-display {
  max-width: min(40vw, 18rem);
}
.mel-station-name-display-value {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mel-table-col-tight { width: 1%; }
.mel-rectifai-logo-sm { height: 14px; width: auto; }
.mel-rectifai-logo-md { height: 18px; width: auto; }
.mel-progress-thin { height: 6px; }
.mel-progress-bar-zero { width: 0%; }
.mel-progress-native {
  height: 6px;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background-color: rgba(var(--bs-secondary-rgb), 0.25);
}
.mel-progress-native::-webkit-progress-bar {
  background-color: rgba(var(--bs-secondary-rgb), 0.25);
}
.mel-progress-native::-webkit-progress-value {
  background-color: var(--bs-info);
}
.mel-progress-native::-moz-progress-bar {
  background-color: var(--bs-info);
}
.mel-status-filter-dropdown {
  min-width: 18rem;
  max-width: 28rem;
}
.mel-ata-filter-dropdown {
  min-width: 12rem;
  max-height: 18rem;
  overflow: auto;
}
.mel-ac-type-filter-dropdown {
  min-width: 16rem;
  max-height: 18rem;
  overflow: auto;
}
.mel-sortable-head-default { cursor: default; }
.mel-opportunities-col { min-width: 14rem; }

/* Event timeline helpers */
.timeline-flag-active { z-index: 5000 !important; }
.timeline-pointer-active {
  z-index: 5000 !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}
.event-timeline-popover {
  max-width: 60vw;
  z-index: 20001;
  pointer-events: auto;
  word-break: break-word;
}


/* ================================================================
   27. ANIMATIONS & KEYFRAMES
   ================================================================ */
@keyframes fadeInVertical {
  from { opacity: 0; transform: translateY(var(--fade-in-distance, 20px)); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes fadeInDropdown {
  from { opacity: 0; transform: translateY(-0.5rem); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInBadge {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes updateAppear {
  0%   { opacity: 0; transform: translateY(8px) scale(0.98); filter: saturate(0.8); }
  60%  { opacity: 1; transform: translateY(0) scale(1.005); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: saturate(1); }
}

@keyframes currentTimePulse {
  0%, 100% { box-shadow: 0 0 1px 0.5px rgba(255, 90, 90, 0.30), 0 0 3px 1px rgba(255, 0, 0, 0.15); opacity: 0.80; }
  50%      { box-shadow: 0 0 3px 1px rgba(255, 80, 80, 0.45), 0 0 5px 2px rgba(255, 0, 0, 0.22); opacity: 0.92; }
}

@keyframes timelineUpdateSweep {
  0%   { left: -100%; }
  100% { left: 100%; }
}

@keyframes timelineGlow {
  0%   { box-shadow: 0 0 0 0 rgba(var(--bs-success-rgb), 0.7); }
  50%  { box-shadow: 0 0 0 15px rgba(var(--bs-success-rgb), var(--glass-opacity-border)); }
  100% { box-shadow: 0 0 0 0 rgba(var(--bs-success-rgb), 0); }
}

@keyframes logoBlink {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(2.5) saturate(0); }
}

@keyframes toggleProcessing {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

@keyframes modalUpdate {
  0%   { opacity: 0; }
  50%  { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes messageSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.logo-img.is-loading {
  animation: logoBlink 0.8s ease-in-out infinite;
}


/* ================================================================
   28. RESPONSIVE — CONSOLIDATED MEDIA QUERIES
   ================================================================ */

/* --- 2x displays --- */
@media (min-resolution: 2dppx) {
  .avatar-img { image-rendering: auto; }
}

/* --- Dark mode override for multi-select --- */
@media (prefers-color-scheme: dark) {
  .multi-select-autocomplete .selected-items-container,
  .multi-select-autocomplete .autocomplete-input {
    background-color: var(--multi-select-dark-bg);
    border-color: var(--multi-select-dark-border);
    color: #fff;
  }

  .multi-select-autocomplete .autocomplete-dropdown {
    background-color: var(--multi-select-dark-bg);
    border-color: var(--multi-select-dark-border);
  }

  .multi-select-autocomplete .autocomplete-item:hover,
  .multi-select-autocomplete .autocomplete-item.active {
    background-color: var(--multi-select-dark-hover);
  }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .current-time-line { animation: none; }

  .page-view,
  .page-enter-active,
  .page-exit-active {
    transition: none !important;
    transform: none !important;
  }

  .nav-item-link,
  .nav-item-link .nav-icon,
  .nav-item-link .active-indicator {
    transition: none !important;
  }

  .timeline-updating,
  .timeline-updated,
  .event-notification,
  .risk-toggle-label.processing .toggle-slider,
  .modal-content.updating::after {
    animation: none !important;
    transition: opacity 0.2s ease;
  }

  .timeline-updating::before { display: none; }
}

/* --- ≥992px (Desktop) --- */
@media (min-width: 992px) {
  .sidebar-width { width: var(--sidebar-width); }
  .mobile-nav    { display: none !important; }

  .content-area {
    margin-left: var(--sidebar-width) !important;
  }

  #public-main.public-main-shell .content-area {
    margin-left: 0 !important;
  }

  .event-sidebar       { max-width: 400px; }
  .engineering-sidebar { max-width: 320px; }

  .engineering-toolbar-actions #ea-status-filter-dropdown {
    width: auto !important;
  }

  .aog-toolbar-actions {
    width: auto;
    margin-left: auto;
    justify-content: flex-end;
  }

  .aog-top-toggle-row {
    width: auto;
    margin-left: auto;
  }

  .aog-top-toggle-row > .btn-group {
    width: auto !important;
    flex: 0 0 auto;
  }

  /* Data sources collapse: always open on desktop */
  #data-sources-collapse       { display: block !important; }
  #data-sources-collapse-icon  { transform: rotate(180deg); }

  /* rectifAI full-height layout */
  #main-content:has(.rectifai-page-root) {
    height: calc(100vh - 0px);
    display: flex;
  }

  #main-content:has(.rectifai-page-root) .content-area {
    height: calc(100vh - 0px);
    display: flex;
    flex-direction: column;
    padding: 0;
  }

  #main-content:has(.rectifai-page-root) .content-area .content {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  /* rectifAI sticky input */
  .rectifai-fixed-input {
    position: sticky;
    bottom: 0;
  }
}

/* --- ≤991px (Tablet & below) --- */
@media (max-width: 991.98px) {
  .sidebar-width { width: 0; }
  .content-area  { margin-left: 0 !important; }

  .d-none.d-lg-block,
  .d-none.d-lg-flex { display: none !important; }

  .engineering-toolbar-actions {
    flex-wrap: nowrap !important;
    overflow-x: auto;
  }

  /* AOG/MEL/AD table: keep column width readable on mobile via horizontal scroll */
  #aog-parts-table {
    table-layout: auto !important;
    min-width: 1100px;
  }

  #aog-parts-table th,
  #aog-parts-table td {
    white-space: nowrap;
  }

  .mel-filter-actions {
    flex-wrap: wrap !important;
    overflow-x: visible;
  }

  .mel-filter-actions > .dropdown {
    flex: 1 1 calc(50% - 0.25rem) !important;
    max-width: calc(50% - 0.25rem) !important;
  }

  body.mobile-nav-hidden .content-area {
    padding-bottom: 1.75rem;
  }

  body.messages-route-active .content-area {
    padding-bottom: 0 !important;
  }

  body.messages-route-active .page-view,
  body.messages-route-active [data-messages-root].fade-in-up {
    transform: none !important;
    animation: none !important;
  }

  body.messages-route-active .messages-conversation {
    backdrop-filter: none !important;
  }

  body.messages-route-active .messages-conversation .messages-thread-column {
    position: relative;
    top: 65px;
    height: calc(100svh - 65px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
  }

  body.messages-route-active .messages-conversation .messages-thread-header {
    position: static !important;
    top: auto !important;
  }

  /* Messages composer fixed to viewport bottom */
  body.messages-route-active .messages-conversation form[data-message-form] {
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  body.messages-route-active .messages-conversation [data-message-scroll] {
    height: 100%;
    min-height: 0;
    margin-top: 0;
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  }

  /* rectifAI sidebar stacks below */
  #rectifai-main ~ #rectifai-sidebar {
    width: 100% !important;
    border-top: 1px solid var(--bs-secondary);
    border-left: none !important;
    max-height: 400px;
  }

  #rectifai-main {
    max-height: calc(60vh - 100px);
  }

  .rectifai-main-layout {
    flex-direction: column !important;
  }

  .rectifai-sidebar {
    width: 100% !important;
    height: auto !important;
  }

  /* rectifAI mobile scroll layout */
  #main-content:has(.rectifai-page-root) {
    height: auto;
    min-height: 100vh;
  }

  #main-content:has(.rectifai-page-root) .content-area {
    height: auto;
    min-height: 100vh;
  }

  #main-content:has(.rectifai-page-root) .content-area .content {
    height: auto;
    min-height: 100vh;
  }

  .rectifai-main-layout {
    overflow: visible !important;
    padding-bottom: 160px;
  }

  .rectifai-messages-area {
    overflow: visible !important;
    height: auto !important;
    padding-bottom: 0 !important;
  }

  .rectifai-fixed-input {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1050 !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
}

/* --- ≤768px --- */
@media (max-width: 768px) {
  .event-notification {
    top: 10px;
    right: 10px;
    left: 10px;
    transform: translateY(-100px);
  }

  .event-notification.show { transform: translateY(0); }

  .flight-center-col { max-width: 140px; }

  .delay-code-row { overflow-x: visible; }

  /* rectifAI mobile avatars */
  .rectifai-message-avatar {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }

  #aircraft-type-group .btn {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
  }
}

/* --- ≥768px --- */
@media (min-width: 768px) {
  .delay-code-row { overflow-x: visible; }
}

/* --- ≤576px (Mobile) --- */
@media (max-width: 576px) {
  #create-aircraft-serial-display { max-width: 48%; }

  .subscription-dropdown-menu {
    min-width: 100vw !important;
    width: 100vw;
    max-width: 100vw;
    max-height: 70vh;
    overflow-y: auto;
    border-radius: 0;
  }

  .subscription-dropdown-menu.show {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    transform: none !important;
  }

  /* Toolbar grids */
  .delay-toolbar-actions,
  .aog-toolbar-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .mel-toolbar-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .delay-toolbar-actions > .dropdown,
  .delay-toolbar-actions > .btn,
  .mel-toolbar-actions > .btn,
  .aog-toolbar-actions > .dropdown,
  .aog-toolbar-actions > .btn {
    flex: 0 0 auto !important;
    width: 100%;
  }

  .delay-toolbar-actions .btn,
  .mel-toolbar-actions .btn,
  .aog-toolbar-actions .btn {
    width: 100% !important;
  }

  .aog-request-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .aog-request-actions .btn { width: 100% !important; }

  .engineering-toolbar-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 0.75rem;
    overflow-x: visible;
  }

  .engineering-toolbar-actions > .dropdown,
  .engineering-toolbar-actions > .btn {
    width: 100% !important;
  }

  /* Timeline vertical */
  .timeline-item { gap: 0.75rem; }
  .timeline-marker { width: 2rem; height: 2rem; }
  .timeline-line { left: 1rem; top: 2rem; }
  .timeline-marker i { font-size: 0.875rem; }

  /* Multi-select */
  .multi-select-autocomplete .selected-items-container { max-height: 80px; }
  .multi-select-autocomplete .autocomplete-dropdown { max-height: 150px; overflow-x: hidden; }
  .multi-select-autocomplete .badge { font-size: 0.75em; max-width: 150px; }
}

/* --- ≤420px --- */
@media (max-width: 420px) {
  #create-aircraft-serial-display { max-width: 42%; }
}