/* Toast container — grid stacks all toasts in one cell */
.Toastify__toast-container--top-right {
    top: 3em !important;
    right: 1em !important;
    z-index: 99999 !important;
    width: 280px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
}

/* Hover — switch to normal vertical list with scroll */
.Toastify__toast-container--top-right:hover {
    max-height: 30vh !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(0, 0, 0, 0.3) transparent !important;
}

.Toastify__toast-container--top-right:hover::-webkit-scrollbar {
    width: 4px !important;
}

.Toastify__toast-container--top-right:hover::-webkit-scrollbar-track {
    background: transparent !important;
}

.Toastify__toast-container--top-right:hover::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3) !important;
    border-radius: 4px !important;
}

/* ===== SOP Module Toast Styles ===== */
.toast-sop {
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: relative !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    transition: top 0.3s ease, opacity 0.3s ease, width 0.3s ease !important;
    min-height: 40px !important;
    padding: 4px 8px !important;
    font-size: 0.75rem !important;
    line-height: 1.3 !important;
    background-color: #ffffff !important;
    -webkit-backdrop-filter: blur(12px) !important;
            backdrop-filter: blur(12px) !important;
    border-radius: 12px !important;
    font-weight: 400 !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    color: #000000 !important;
    margin: 0 auto !important;
    width: 100% !important;
    top: 0 !important;
}

/* Front card (newest): fully visible */
.toast-sop:nth-child(1) {
    z-index: 20 !important;
    opacity: 1 !important;
}

/* Cards behind: peek below via top offset, narrower for depth effect */
.toast-sop:nth-child(2) {
    z-index: 19 !important;
    top: 10px !important;
    width: 96% !important;
    opacity: 0.85 !important;
}

.toast-sop:nth-child(3) {
    z-index: 18 !important;
    top: 20px !important;
    width: 92% !important;
    opacity: 0.65 !important;
}

.toast-sop:nth-child(4) {
    z-index: 17 !important;
    top: 28px !important;
    width: 88% !important;
    opacity: 0.5 !important;
}

.toast-sop:nth-child(n + 5) {
    z-index: 16 !important;
    top: 34px !important;
    width: 84% !important;
    opacity: 0.35 !important;
}

.toast-sop .Toastify__toast-body {
    padding: 2px 0 !important;
    font-size: 0.75rem !important;
}

.toast-sop .Toastify__toast-icon {
    width: 16px !important;
    margin-right: 6px !important;
}

.toast-sop .Toastify__close-button {
    align-self: center !important;
    opacity: 0.6 !important;
}

/* Hover — unstack into normal scrollable list */
.Toastify__toast-container--top-right:hover .toast-sop {
    grid-row: auto !important;
    top: 0 !important;
    width: 100% !important;
    opacity: 1 !important;
    margin-bottom: 4px !important;
}

@media (prefers-reduced-transparency: reduce) {
    .toast-sop {
        -webkit-backdrop-filter: none !important;
                backdrop-filter: none !important;
        background-color: #ffffff !important;
    }
}

/* ===== Airmind Notification Toast ===== */
.toast-airmind {
    grid-column: auto !important;
    grid-row: auto !important;
    overflow: visible !important;
    width: 100% !important;
    opacity: 1 !important;
    top: 0 !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

.toast-airmind.Toastify__toast--close-on-click:active {
    opacity: 0.7 !important;
}

/* Prevent container from showing scrollbar but clip horizontal drag properly */
.Toastify__toast-container--top-right:has(.toast-airmind) {
    overflow-x: clip !important;
    overflow-y: visible !important;
}

.toast-airmind .Toastify__progress-bar {
    background: #fb8c00 !important;
}

.toast-airmind .Toastify__toast-icon {
    background-color: #fff3e0 !important;
    border-radius: 10px !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 12px !important;
}

/* reset */
button {
  all: unset;
}

.DropdownMenuContent {
  z-index: 8000; /* Adjust the value as needed */
}

.DropdownMenuContent,
.DropdownMenuSubContent {
  min-width: 220px;
  background-color: white;
  border-radius: 6px;
  padding: 5px;
  box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2);
  animation-duration: 400ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
  z-index: 8001;
}
.DropdownMenuContent[data-side='top'],
.DropdownMenuSubContent[data-side='top'] {
  animation-name: slideDownAndFade;
}
.DropdownMenuContent[data-side='right'],
.DropdownMenuSubContent[data-side='right'] {
  animation-name: slideLeftAndFade;
}
.DropdownMenuContent[data-side='bottom'],
.DropdownMenuSubContent[data-side='bottom'] {
  animation-name: slideUpAndFade;
}
.DropdownMenuContent[data-side='left'],
.DropdownMenuSubContent[data-side='left'] {
  animation-name: slideRightAndFade;
}

.DropdownMenuItem,
.DropdownMenuCheckboxItem,
.DropdownMenuRadioItem,
.DropdownMenuSubTrigger {
  font-size: 13px;
  line-height: 1;
  color: var(--violet11);
  border-radius: 3px;
  display: flex;
  align-items: center;
  height: 25px;
  padding: 0 5px;
  position: relative;
  padding-left: 25px;
  -webkit-user-select: none;
          user-select: none;
  outline: none;
}
.DropdownMenuSubTrigger[data-state='open'] {
  background-color: var(--violet4);
  color: var(--violet11);
}
.DropdownMenuItem[data-disabled],
.DropdownMenuCheckboxItem[data-disabled],
.DropdownMenuRadioItem[data-disabled],
.DropdownMenuSubTrigger[data-disabled] {
  color: var(--mauve8);
  pointer-events: none;
}
.DropdownMenuItem[data-highlighted],
.DropdownMenuCheckboxItem[data-highlighted],
.DropdownMenuRadioItem[data-highlighted],
.DropdownMenuSubTrigger[data-highlighted] {
  background-color: var(--violet9);
  color: var(--violet1);
}

.DropdownMenuLabel {
  padding-left: 25px;
  font-size: 12px;
  line-height: 25px;
  color: var(--mauve11);
}

.DropdownMenuSeparator {
  height: 1px;
  background-color: var(--violet6);
  margin: 5px;
}

.DropdownMenuItemIndicator {
  position: absolute;
  left: 0;
  width: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.DropdownMenuArrow {
  fill: white;
}

.IconButton {
  font-family: inherit;
  border-radius: 100%;
  height: 35px;
  width: 35px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  background-color: rgb(2, 136, 209);
  box-shadow: 0 2px 10px var(--blackA7);
}
.IconButton:hover {
  background-color: rgb(1, 87, 155);
}
.IconButton:focus {
  box-shadow: 0 0 0 2px black;
}

.RightSlot {
  margin-left: auto;
  padding-left: 20px;
  color: var(--mauve11);
}
[data-highlighted] > .RightSlot {
  color: white;
}
[data-disabled] .RightSlot {
  color: var(--mauve8);
}

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

@keyframes slideRightAndFade {
  from {
    opacity: 0;
    transform: translateX(-2px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideDownAndFade {
  from {
    opacity: 0;
    transform: translateY(-2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideLeftAndFade {
  from {
    opacity: 0;
    transform: translateX(2px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.ag-theme-alpine .ag-header{background-color:#e5e9ee}.ag-theme-alpine .ag-header-cell{border-right:1px solid #ddd}.ag-theme-alpine .ag-row{background-color:#fff}.ag-theme-alpine .ag-cell{border-right:1px solid #ddd}.cursor-progress{cursor:progress !important}.filter-text-box{height:40px;width:100%;border:1px solid silver;border-radius:8px;box-sizing:border-box;padding:16px;margin-bottom:10px}.ag-root-wrapper.ag-layout-normal{border:2px solid #eef2f6;border-radius:8px !important;transition:box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}.ag-root-wrapper.ag-layout-auto-height{border:2px solid #eef2f6;border-radius:8px !important;transition:box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}.ag-theme-alpine .ofp-info-header{background-color:#bfc4c4;display:flex;justify-content:center;align-items:center;text-align:center}.ag-theme-alpine .ofp-info-children{background-color:#bfc4c4;display:flex}.ag-theme-alpine .efb-info-header{display:flex;justify-content:center;align-items:center;text-align:center}.ag-theme-alpine .atc-flight-plan-header{background-color:#c1c5c5;display:flex;justify-content:center;align-items:center;text-align:center}.ag-theme-alpine .atc-flight-plan-children{background-color:#c1c5c5;display:flex}.ag-theme-alpine .ag-filter-toolpanel-group-wrapper .std-filter-title{color:#1976d2 !important}.ag-theme-alpine .ag-set-filter{min-height:150px !important}.ag-theme-alpine .ag-set-filter-list{min-height:150px !important}
.plane-loader {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.plane-loader__icon {
  --size: 40px;
  width: var(--size);
  height: var(--size);
  position: relative;
  flex-shrink: 0;
}

.plane-loader__orbit {
  width: 100%;
  height: 100%;
  border: 3px solid #e6f0fb;
  border-top-color: #1976d2;
  border-radius: 50%;
  animation: plane-loader-spin 1.4s linear infinite;
  position: relative;
}

.plane-loader__plane {
  position: absolute;
  top: -8px;
  left: 50%;
  width: calc(var(--size) * 0.4);
  height: calc(var(--size) * 0.4);
  transform: translateX(-50%) rotate(45deg);
  filter: drop-shadow(0 1px 1px rgba(11, 74, 143, 0.25));
}

.plane-loader__label {
  font-size: 15px;
  font-weight: 500;
  color: #0b4a8f;
  letter-spacing: 0.2px;
  background: linear-gradient(
    90deg,
    #0b4a8f 0%,
    #1976d2 40%,
    #ff7a1a 70%,
    #0b4a8f 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: plane-loader-shimmer 3.5s linear infinite;
  display: inline-flex;
  align-items: baseline;
}

.plane-loader__dots {
  display: inline-flex;
  margin-left: 2px;
}

.plane-loader__dots span {
  animation: plane-loader-blink 1.4s infinite both;
  opacity: 0.3;
}
.plane-loader__dots span:nth-child(2) { animation-delay: 0.2s; }
.plane-loader__dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes plane-loader-spin {
  to { transform: rotate(360deg); }
}

@keyframes plane-loader-shimmer {
  to { background-position: -200% center; }
}

@keyframes plane-loader-blink {
  0%, 80%, 100% { opacity: 0.3; }
  40% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .plane-loader__orbit { animation-duration: 4s; }
  .plane-loader__label { animation: none; }
  .plane-loader__dots span { animation: none; opacity: 1; }
}

/* AG Grid v35 - Custom Dark Theme for Alpine */
.ag-theme-alpine-dark {
    --ag-background-color: #1e1e1e;
    --ag-foreground-color: #e0e0e0;
    --ag-header-background-color: #252525;
    --ag-odd-row-background-color: #1e1e1e;
    --ag-row-hover-color: #2a2a2a;
    --ag-border-color: #3a3a3a;
    --ag-secondary-border-color: #333333;
    --ag-data-color: #e0e0e0;
    --ag-header-foreground-color: #e8e8e8;
    --ag-secondary-foreground-color: #b0b0b0;
    --ag-disabled-foreground-color: #666666;
    --ag-selected-row-background-color: #3d2a1a;
    --ag-range-selection-background-color: rgba(255, 152, 0, 0.15);
    --ag-range-selection-border-color: #ff9800;
    --ag-checkbox-checked-color: #ff9800;
    --ag-checkbox-unchecked-color: #666666;
    --ag-checkbox-indeterminate-color: #ff9800;
    --ag-input-border-color: #4a4a4a;
    --ag-input-focus-border-color: #ff9800;
    --ag-icon-font-color: #b0b0b0;
    --ag-value-change-value-highlight-background-color: rgba(22, 160, 133, 0.3);
    --ag-value-change-delta-up-color: #43a047;
    --ag-value-change-delta-down-color: #e53935;
    --ag-header-cell-hover-background-color: #2e2e2e;
    --ag-menu-background-color: #252525;
    --ag-menu-border-color: #3a3a3a;
    --ag-chip-background-color: #3a3a3a;
    --ag-control-panel-background-color: #252525;
    --ag-side-bar-panel-background-color: #252525;
    --ag-filter-tool-panel-header-background-color: #2e2e2e;
    --ag-subheader-background-color: #2e2e2e;
    --ag-tooltip-background-color: #3a3a3a;
    --ag-modal-overlay-background-color: rgba(0, 0, 0, 0.66);
}

.ag-theme-alpine-dark .ag-header-cell { border-right: 1px solid var(--ag-border-color); }
.ag-theme-alpine-dark .ag-cell { border-right: 1px solid var(--ag-secondary-border-color); }
.ag-theme-alpine-dark .ag-row-selected { background-color: var(--ag-selected-row-background-color) !important; }
.ag-theme-alpine-dark .ag-row-hover:not(.ag-full-width-row):not(.ag-row-selected) { background-color: var(--ag-row-hover-color); }
.ag-theme-alpine-dark .ag-icon { color: var(--ag-icon-font-color); }

.ag-theme-alpine-dark .ag-input-field-input,
.ag-theme-alpine-dark .ag-picker-field-wrapper {
    background-color: #2a2a2a;
    color: var(--ag-data-color);
    border-color: var(--ag-input-border-color);
}

.ag-theme-alpine-dark .ag-input-field-input:focus {
    border-color: var(--ag-input-focus-border-color);
    box-shadow: 0 0 2px 0.1rem rgba(255, 152, 0, 0.4);
}

.ag-theme-alpine-dark .ag-filter { background-color: var(--ag-menu-background-color); }
.ag-theme-alpine-dark .ag-status-bar { background-color: var(--ag-header-background-color); border-top: 1px solid var(--ag-border-color); }

.ag-theme-alpine-dark ::-webkit-scrollbar { width: 10px; height: 10px; }
.ag-theme-alpine-dark ::-webkit-scrollbar-track { background: #1e1e1e; }
.ag-theme-alpine-dark ::-webkit-scrollbar-thumb { background: #4a4a4a; border-radius: 5px; }
.ag-theme-alpine-dark ::-webkit-scrollbar-thumb:hover { background: #5a5a5a; }

.ag-theme-alpine-dark ~ div input[id*="filter-text-box"],
.ag-theme-alpine-dark input[id*="filter-text-box"] {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: rgba(0, 0, 0, 0.23) !important;
}

.ag-theme-alpine-dark ~ div input[id*="filter-text-box"]:focus,
.ag-theme-alpine-dark input[id*="filter-text-box"]:focus {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #1976d2 !important;
}

.ag-theme-alpine-dark ~ div input[id*="filter-text-box"]::placeholder,
.ag-theme-alpine-dark input[id*="filter-text-box"]::placeholder {
    color: rgba(0, 0, 0, 0.6) !important;
}

/* AG Grid Filter Visual Indicators — filtered column headers turn blue */

.ag-theme-alpine .ag-header-cell-filtered .ag-header-cell-label { color: #1976d2 !important; }
.ag-theme-alpine-dark .ag-header-cell-filtered .ag-header-cell-label { color: #1976d2 !important; }

/* Generic for ProGrid/BasicGrid regardless of theme: the rules above only cover alpine, but our grids
   default to quartz. `.oms-grid` marks our grid roots (master + nested detail), so a filtered column —
   header label, classic filters tool-panel group title/icon, and the new filters-panel card title —
   turns blue everywhere, with no per-page CSS. Legacy grids (no `.oms-grid`) are untouched. */
.oms-grid .ag-header-cell-filtered .ag-header-cell-label,
.oms-grid .ag-filter-toolpanel-group.ag-has-filter .ag-group-title-bar .ag-group-title,
.oms-grid .ag-filter-toolpanel-group.ag-has-filter .ag-filter-toolpanel-header .ag-icon-filter,
.oms-grid .ag-filter-card-title {
    color: #1976d2 !important;
}

.ag-theme-alpine .ag-filter-toolpanel-group-wrapper
  .ag-filter-toolpanel-group.ag-has-filter
  .ag-group-title-bar.ag-filter-toolpanel-header
  .ag-group-title { color: #1976d2 !important; }

.ag-theme-alpine-dark .ag-filter-toolpanel-group-wrapper
  .ag-filter-toolpanel-group.ag-has-filter
  .ag-group-title-bar.ag-filter-toolpanel-header
  .ag-group-title { color: #1976d2 !important; }

.ag-theme-alpine .ag-filter-toolpanel-group-wrapper
  .ag-filter-toolpanel-group.ag-has-filter
  .ag-filter-toolpanel-header .ag-icon-filter { color: #1976d2 !important; }

.ag-theme-alpine-dark .ag-filter-toolpanel-group-wrapper
  .ag-filter-toolpanel-group.ag-has-filter
  .ag-filter-toolpanel-header .ag-icon-filter { color: #1976d2 !important; }

/* Column header filter button icon — override inline color set by custom gridIcons */
.ag-header-cell-filter-button i {
    color: var(--ag-foreground-color) !important;
}

/* Quick Access Toolbar — find magnifying-glass icon: pastel blue */
.ag-toolbar-find .ag-icon-search {
    color: #90CAF9 !important;
}

/* Toolbar icon buttons — compact padding, uniform size with built-in AG Grid icons */
.ag-toolbar-button {
    padding: 2px 5px !important;
    min-width: unset !important;
    --ag-icon-size: 16px !important;
}
.ag-toolbar-button .ag-icon {
    width: 16px !important;
    height: 16px !important;
    line-height: 16px !important;
    font-size: 16px !important;
}

/* When Filters toggle bar is present, the outer container owns the border — suppress AG Grid's own outer border */
.oms-has-filter-toggle .ag-root-wrapper {
    border: none !important;
    border-radius: 0 0 8px 8px !important;
}

/* Hide AG Grid toolbar via CSS instead of removing the prop — avoids column layout recalculation */
.oms-toolbar-hidden .ag-toolbar {
    display: none !important;
}



/* Filter panel Clear/Apply buttons — compact text-link style */
.ag-filter-apply-panel-button {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 2px 4px !important;
    min-height: unset !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: #1565c0 !important;
    cursor: pointer;
    text-transform: none !important;
    line-height: 1.4 !important;
}
.ag-filter-apply-panel-button:hover {
    color: #0d47a1 !important;
    text-decoration: underline;
}

/* Pinned column indicator — filled thumbtack icon after sort icons in header label flex row */
.ag-pinned-left-header .ag-header-cell-label::after,
.ag-pinned-right-header .ag-header-cell-label::after {
    content: '';
    display: block;
    width: 13px;
    height: 13px;
    margin-left: 3px;
    flex-shrink: 0;
    align-self: center;
    background-color: #FFCC80;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M16 9V4h1c.55 0 1-.45 1-1s-.45-1-1-1H7c-.55 0-1 .45-1 1s.45 1 1 1h1v5c0 1.66-1.34 3-3 3v2h5.97v7l1 1 1-1v-7H18v-2c-1.66 0-3-1.34-3-3z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M16 9V4h1c.55 0 1-.45 1-1s-.45-1-1-1H7c-.55 0-1 .45-1 1s.45 1 1 1h1v5c0 1.66-1.34 3-3 3v2h5.97v7l1 1 1-1v-7H18v-2c-1.66 0-3-1.34-3-3z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-size: contain;
}

/*
 * Custom AG Grid Themes
 *
 * Yeni tema eklemek için:
 *   1. Buraya .tema-adi { --ag-* variable overrides } blok ekle
 *   2. shared/themeRegistry.ts içindeki GRID_THEMES dizisine tanımı ekle
 *
 * Bu CSS sınıfları AG Grid'in base temasının (ag-theme-alpine vb.) ÜSTÜNDEKİ
 * override'lardır — base temanın tüm CSS'i geçerliliğini korur.
 *
 * Dark mode için base temanın -dark varyantı zaten uygulanır. Eğer dark'a özel
 * ek override gerekiyorsa .ag-theme-alpine-dark.oms-compact { } gibi birleşik
 * selector kullan.
 *
 * Mevcut AG Grid CSS variable listesi:
 * https://www.ag-grid.com/javascript-data-grid/global-style-customisation-variables/
 */

/* ─── Page Title Gradient ─────────────────────────────────────────────────── */
.oms-page-title {
    background: linear-gradient(90deg, #3b82f6, #60a5fa, #38bdf8, #fb923c, #f97316, #3b82f6);
    background-size: 250% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: omsPageTitleGradient 4s linear infinite;
}

@keyframes omsPageTitleGradient {
    to {
        background-position: -250% center;
    }
}

/* ─── Pagination Panel ────────────────────────────────────────────────────── */
.ag-paging-panel {
    height: 36px;
    min-height: 36px;
    font-size: 12px;
    padding: 0 8px;
}

.ag-paging-panel .ag-paging-page-size {
    height: 24px;
}

.ag-paging-panel .ag-paging-page-size .ag-picker-field-wrapper {
    height: 24px;
    min-height: 24px;
}

/* ─── Bold header labels (master + nested detail) ─────────────────────────────── */
/* The AG theme's header weight (~600) isn't a face every selected font ships — e.g. a grid set to
   Roboto (which the app loads at 400/500/700, not 600) falls back to a lighter weight and the headers
   stop looking bold, while a default-font grid stays bold. Pin an always-available bold weight so every
   ProGrid/BasicGrid header is consistently bold regardless of the per-grid font family/size. Scoped to
   `.oms-grid` (our grid root) so legacy grids are untouched; the nested detail grid lives inside the
   master's `.oms-grid`, so its headers match too. */
.oms-grid .ag-header-cell-text,
.oms-grid .ag-header-group-cell-label {
    font-weight: 700;
}

/* ─── Copy flash colour ───────────────────────────────────────────────────── */
/* `flashCells` (fired from the context-menu Copy / Copy with Headers actions) paints the cell with
   --ag-value-change-value-highlight-background-color, then fades it out — mirroring the legacy grid's
   copy feedback. ProGrid/BasicGrid don't use value-change flashing, so we repurpose that var to a blue.
   A single semi-transparent blue reads correctly on both light and dark backgrounds. Scoped to
   `.oms-grid` and loaded last, so it overrides the theme default (and darkTheme.css's green) everywhere. */
.oms-grid {
    --ag-value-change-value-highlight-background-color: rgba(33, 150, 243, 0.35);
}

/* ─── OMS Compact ─────────────────────────────────────────────────────────── */
/* Alpine tabanlı, küçük satır yüksekliği — çok satırlı operasyonel ekranlar */
.oms-compact {
    --ag-font-size: 12px;
    --ag-row-height: 28px;
    --ag-header-height: 32px;
    --ag-list-item-height: 24px;
    --ag-cell-horizontal-padding: 8px;
    --ag-header-column-separator-height: 60%;
}

/* AG Grid Cell Notes (Enterprise) — medium, high-contrast corner indicator that pops in both
   light and dark themes. Only cells served a note (.ag-has-cell-notes) show it. */
[class*='ag-theme-'] {
    --ag-note-indicator-size: 12px;
    --ag-note-indicator-color: #f43f5e; /* rose — stands out on white */
}
[class*='ag-theme-'][class*='-dark'] {
    --ag-note-indicator-color: #fb7185; /* lighter rose — stands out on dark */
}

/* ─── Master / Detail — detail (child) grid border ───────────────────────────── */
/* The Theming API drives the grid's outer border via CSS vars, and our themes zero it out,
   so a detail grid inherits no edges. Frame the detail grid's OWN root-wrapper, i.e. the
   `.ag-root-wrapper` nested inside AG's `.ag-details-row` strip — bordering `.ag-details-row`
   itself frames the wider full-width strip around the grid, not the grid. Scoped to `.oms-grid`
   so only ProGrid/BasicGrid detail grids are framed; legacy grids stay untouched. */
.oms-grid .ag-details-row .ag-root-wrapper {
    border: 1px solid #babfc7 !important;
    border-radius: 4px;
    overflow: hidden;
}

/* ─── Master / Detail — collapse the auto-height detail's empty band ──────────── */
/* With `detailRowAutoHeight`, AG Grid floors the detail grid's rows viewport at a
   hardcoded min-height of 150px (https://www.ag-grid.com/javascript-data-grid/master-detail-height/).
   So a short detail (e.g. 1 row) still reserves ~150px, leaving a large empty band below
   its content. Releasing that minimum lets the detail row hug its actual content.
   Scoped to the detail grid only — master/standalone grids keep AG's default min-height. */
.oms-grid .ag-details-row .ag-center-cols-viewport {
    min-height: unset !important;
}

/* ==========================================================
   OMS Grid Action Bar — layout wrapper only.
   The buttons themselves are shadcn `Button`s (toolbar variant) rendered by GridActionBar.tsx;
   their chrome lives in shadcn/ui/button.tsx, not here.
   ========================================================== */

.oms-grid-action-bar {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

/* Leading divider between the Search Bar controls and the action buttons. */
.oms-grid-action-bar::before {
    content: '';
    display: block;
    width: 1px;
    height: 16px;
    background: var(--ag-border-color);
    margin: 0 3px;
    flex-shrink: 0;
}

.editorClass {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding-inline: 10px;
    height: 200px;
    min-height: 150px;
    overflow: auto;
    resize: vertical;
}

/* SOP Flight Watch — column-group header tints.
 *
 * Goal: tell at a glance which child columns sit under which group header
 * ("Ofp Info" / "Efb Info" / "Atc Flight Plan"). Each group gets one muted tint
 * applied to BOTH its group-header cell and its child header cells.
 *
 * The tint is mixed against the live AG theme vars (--ag-header-background-color +
 * a faint hue), so it tracks light/dark automatically without a separate dark rule.
 * Hues are kept low-contrast/desaturated on purpose — three quiet greys with a slight
 * cool / neutral / warm lean, not a colourful header.
 *
 * Class names below are unique to the SOP grid columns, so this only affects this grid.
 * `!important` overrides the theme's default header-cell background regardless of which
 * theme (Quartz / Alpine / Balham / custom) the user picks in Grid Settings.
 */

/* Ofp Info — cool slate-grey */
.oms-grid .ofp-info-header,
.oms-grid .ofp-info-children {
    background-color: color-mix(in srgb, var(--ag-header-background-color) 87%, #5f7689) !important;
}

/* Efb Info — neutral grey (toward the theme foreground, so it stays mode-correct) */
.oms-grid .efb-info-header,
.oms-grid .efb-info-children {
    background-color: color-mix(in srgb, var(--ag-header-background-color) 86%, var(--ag-foreground-color)) !important;
}

/* Atc Flight Plan — warm sand-grey */
.oms-grid .atc-flight-plan-header,
.oms-grid .atc-flight-plan-children {
    background-color: color-mix(in srgb, var(--ag-header-background-color) 86%, #8d7b5c) !important;
}

*, ::before, ::after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
    --tw-contain-size:  ;
    --tw-contain-layout:  ;
    --tw-contain-paint:  ;
    --tw-contain-style:  ;
}
::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
    --tw-contain-size:  ;
    --tw-contain-layout:  ;
    --tw-contain-paint:  ;
    --tw-contain-style:  ;
}
.container {
    width: 100%;
}
@media (min-width: 640px) {
    .container {
        max-width: 640px;
    }
}
@media (min-width: 768px) {
    .container {
        max-width: 768px;
    }
}
@media (min-width: 1024px) {
    .container {
        max-width: 1024px;
    }
}
@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
    }
}
@media (min-width: 1536px) {
    .container {
        max-width: 1536px;
    }
}
.shadcn-scope .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}
.shadcn-scope .pointer-events-none {
    pointer-events: none;
}
.shadcn-scope .visible {
    visibility: visible;
}
.shadcn-scope .invisible {
    visibility: hidden;
}
.shadcn-scope .static {
    position: static;
}
.shadcn-scope .fixed {
    position: fixed;
}
.shadcn-scope .absolute {
    position: absolute;
}
.shadcn-scope .relative {
    position: relative;
}
.shadcn-scope .inset-0 {
    inset: 0px;
}
.shadcn-scope .left-1 {
    left: 0.25rem;
}
.shadcn-scope .right-1 {
    right: 0.25rem;
}
.shadcn-scope .right-2 {
    right: 0.5rem;
}
.shadcn-scope .isolate {
    isolation: isolate;
}
.shadcn-scope .z-\[10000\] {
    z-index: 10000;
}
.shadcn-scope .z-\[10001\] {
    z-index: 10001;
}
.shadcn-scope .m-0 {
    margin: 0px;
}
.shadcn-scope .mx-auto {
    margin-left: auto;
    margin-right: auto;
}
.shadcn-scope .-mr-2 {
    margin-right: -0.5rem;
}
.shadcn-scope .mb-1 {
    margin-bottom: 0.25rem;
}
.shadcn-scope .mb-2 {
    margin-bottom: 0.5rem;
}
.shadcn-scope .mb-3 {
    margin-bottom: 0.75rem;
}
.shadcn-scope .mb-4 {
    margin-bottom: 1rem;
}
.shadcn-scope .mb-6 {
    margin-bottom: 1.5rem;
}
.shadcn-scope .ml-1 {
    margin-left: 0.25rem;
}
.shadcn-scope .ml-auto {
    margin-left: auto;
}
.shadcn-scope .mr-1 {
    margin-right: 0.25rem;
}
.shadcn-scope .mr-2 {
    margin-right: 0.5rem;
}
.shadcn-scope .mt-0\.5 {
    margin-top: 0.125rem;
}
.shadcn-scope .mt-1 {
    margin-top: 0.25rem;
}
.shadcn-scope .mt-2 {
    margin-top: 0.5rem;
}
.shadcn-scope .mt-3 {
    margin-top: 0.75rem;
}
.shadcn-scope .mt-4 {
    margin-top: 1rem;
}
.shadcn-scope .block {
    display: block;
}
.shadcn-scope .inline-block {
    display: inline-block;
}
.shadcn-scope .inline {
    display: inline;
}
.shadcn-scope .flex {
    display: flex;
}
.shadcn-scope .inline-flex {
    display: inline-flex;
}
.shadcn-scope .table {
    display: table;
}
.shadcn-scope .grid {
    display: grid;
}
.shadcn-scope .contents {
    display: contents;
}
.shadcn-scope .hidden {
    display: none;
}
.shadcn-scope .h-12 {
    height: 3rem;
}
.shadcn-scope .h-16 {
    height: 4rem;
}
.shadcn-scope .h-2 {
    height: 0.5rem;
}
.shadcn-scope .h-20 {
    height: 5rem;
}
.shadcn-scope .h-3\.5 {
    height: 0.875rem;
}
.shadcn-scope .h-4 {
    height: 1rem;
}
.shadcn-scope .h-5 {
    height: 1.25rem;
}
.shadcn-scope .h-6 {
    height: 1.5rem;
}
.shadcn-scope .h-7 {
    height: 1.75rem;
}
.shadcn-scope .h-8 {
    height: 2rem;
}
.shadcn-scope .h-9 {
    height: 2.25rem;
}
.shadcn-scope .h-\[var\(--radix-select-trigger-height\)\] {
    height: var(--radix-select-trigger-height);
}
.shadcn-scope .h-full {
    height: 100%;
}
.shadcn-scope .max-h-96 {
    max-height: 24rem;
}
.shadcn-scope .max-h-\[300px\] {
    max-height: 300px;
}
.shadcn-scope .max-h-\[360px\] {
    max-height: 360px;
}
.shadcn-scope .max-h-\[440px\] {
    max-height: 440px;
}
.shadcn-scope .max-h-\[85vh\] {
    max-height: 85vh;
}
.shadcn-scope .min-h-0 {
    min-height: 0px;
}
.shadcn-scope .min-h-8 {
    min-height: 2rem;
}
.shadcn-scope .w-14 {
    width: 3.5rem;
}
.shadcn-scope .w-16 {
    width: 4rem;
}
.shadcn-scope .w-20 {
    width: 5rem;
}
.shadcn-scope .w-3\.5 {
    width: 0.875rem;
}
.shadcn-scope .w-32 {
    width: 8rem;
}
.shadcn-scope .w-4 {
    width: 1rem;
}
.shadcn-scope .w-40 {
    width: 10rem;
}
.shadcn-scope .w-5 {
    width: 1.25rem;
}
.shadcn-scope .w-6 {
    width: 1.5rem;
}
.shadcn-scope .w-7 {
    width: 1.75rem;
}
.shadcn-scope .w-72 {
    width: 18rem;
}
.shadcn-scope .w-8 {
    width: 2rem;
}
.shadcn-scope .w-9 {
    width: 2.25rem;
}
.shadcn-scope .w-\[var\(--radix-popover-trigger-width\)\] {
    width: var(--radix-popover-trigger-width);
}
.shadcn-scope .w-auto {
    width: auto;
}
.shadcn-scope .w-full {
    width: 100%;
}
.shadcn-scope .min-w-0 {
    min-width: 0px;
}
.shadcn-scope .min-w-\[120px\] {
    min-width: 120px;
}
.shadcn-scope .min-w-\[8rem\] {
    min-width: 8rem;
}
.shadcn-scope .min-w-\[var\(--radix-select-trigger-width\)\] {
    min-width: var(--radix-select-trigger-width);
}
.shadcn-scope .max-w-3xl {
    max-width: 48rem;
}
.shadcn-scope .max-w-\[130px\] {
    max-width: 130px;
}
.shadcn-scope .max-w-\[55\%\] {
    max-width: 55%;
}
.shadcn-scope .max-w-lg {
    max-width: 32rem;
}
.shadcn-scope .max-w-sm {
    max-width: 24rem;
}
.shadcn-scope .flex-1 {
    flex: 1 1 0%;
}
.shadcn-scope .shrink {
    flex-shrink: 1;
}
.shadcn-scope .shrink-0 {
    flex-shrink: 0;
}
.shadcn-scope .border-collapse {
    border-collapse: collapse;
}
.shadcn-scope .-rotate-90 {
    --tw-rotate: -90deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.shadcn-scope .transform {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.shadcn-scope .transform-gpu {
    transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes pulse {
    50% {
        opacity: .5;
    }
}
.shadcn-scope .animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
.shadcn-scope .animate-spin {
    animation: spin 1s linear infinite;
}
.shadcn-scope .cursor-default {
    cursor: default;
}
.shadcn-scope .cursor-not-allowed {
    cursor: not-allowed;
}
.shadcn-scope .cursor-pointer {
    cursor: pointer;
}
.shadcn-scope .select-none {
    -webkit-user-select: none;
            user-select: none;
}
.shadcn-scope .select-all {
    -webkit-user-select: all;
            user-select: all;
}
.shadcn-scope .resize-y {
    resize: vertical;
}
.shadcn-scope .appearance-none {
    appearance: none;
}
.shadcn-scope .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
.shadcn-scope .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.shadcn-scope .flex-col {
    flex-direction: column;
}
.shadcn-scope .flex-wrap {
    flex-wrap: wrap;
}
.shadcn-scope .flex-nowrap {
    flex-wrap: nowrap;
}
.shadcn-scope .items-start {
    align-items: flex-start;
}
.shadcn-scope .items-end {
    align-items: flex-end;
}
.shadcn-scope .items-center {
    align-items: center;
}
.shadcn-scope .items-stretch {
    align-items: stretch;
}
.shadcn-scope .justify-end {
    justify-content: flex-end;
}
.shadcn-scope .justify-center {
    justify-content: center;
}
.shadcn-scope .justify-between {
    justify-content: space-between;
}
.shadcn-scope .gap-0\.5 {
    gap: 0.125rem;
}
.shadcn-scope .gap-1 {
    gap: 0.25rem;
}
.shadcn-scope .gap-1\.5 {
    gap: 0.375rem;
}
.shadcn-scope .gap-2 {
    gap: 0.5rem;
}
.shadcn-scope .gap-2\.5 {
    gap: 0.625rem;
}
.shadcn-scope .gap-3 {
    gap: 0.75rem;
}
.shadcn-scope .gap-4 {
    gap: 1rem;
}
.shadcn-scope .gap-6 {
    gap: 1.5rem;
}
.shadcn-scope .gap-x-4 {
    column-gap: 1rem;
}
.shadcn-scope .gap-y-1 {
    row-gap: 0.25rem;
}
.shadcn-scope :is(.space-x-1 > :not([hidden]) ~ :not([hidden])) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.25rem * var(--tw-space-x-reverse));
    margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}
.shadcn-scope :is(.space-y-1 > :not([hidden]) ~ :not([hidden])) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.shadcn-scope :is(.space-y-2 > :not([hidden]) ~ :not([hidden])) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.shadcn-scope :is(.space-y-3 > :not([hidden]) ~ :not([hidden])) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.shadcn-scope :is(.space-y-4 > :not([hidden]) ~ :not([hidden])) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.shadcn-scope :is(.space-y-5 > :not([hidden]) ~ :not([hidden])) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.shadcn-scope :is(.space-y-6 > :not([hidden]) ~ :not([hidden])) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.shadcn-scope :is(.divide-y > :not([hidden]) ~ :not([hidden])) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.shadcn-scope :is(.divide-border > :not([hidden]) ~ :not([hidden])) {
    border-color: hsl(var(--border));
}
.shadcn-scope .overflow-auto {
    overflow: auto;
}
.shadcn-scope .overflow-hidden {
    overflow: hidden;
}
.shadcn-scope .overflow-y-auto {
    overflow-y: auto;
}
.shadcn-scope .overflow-x-hidden {
    overflow-x: hidden;
}
.shadcn-scope .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.shadcn-scope .whitespace-nowrap {
    white-space: nowrap;
}
.shadcn-scope .whitespace-pre-wrap {
    white-space: pre-wrap;
}
.shadcn-scope .break-words {
    overflow-wrap: break-word;
}
.shadcn-scope .rounded {
    border-radius: 0.25rem;
}
.shadcn-scope .rounded-2xl {
    border-radius: 1rem;
}
.shadcn-scope .rounded-3xl {
    border-radius: 1.5rem;
}
.shadcn-scope .rounded-\[5px\] {
    border-radius: 5px;
}
.shadcn-scope .rounded-full {
    border-radius: 9999px;
}
.shadcn-scope .rounded-lg {
    border-radius: var(--radius);
}
.shadcn-scope .rounded-md {
    border-radius: calc(var(--radius) - 2px);
}
.shadcn-scope .rounded-none {
    border-radius: 0px;
}
.shadcn-scope .rounded-sm {
    border-radius: calc(var(--radius) - 4px);
}
.shadcn-scope .rounded-xl {
    border-radius: 0.75rem;
}
.shadcn-scope .border {
    border-width: 1px;
}
.shadcn-scope .border-2 {
    border-width: 2px;
}
.shadcn-scope .border-b {
    border-bottom-width: 1px;
}
.shadcn-scope .border-l {
    border-left-width: 1px;
}
.shadcn-scope .border-l-4 {
    border-left-width: 4px;
}
.shadcn-scope .border-r {
    border-right-width: 1px;
}
.shadcn-scope .border-dashed {
    border-style: dashed;
}
.shadcn-scope .border-\[color\:var\(--ag-border-color\)\] {
    border-color: var(--ag-border-color);
}
.shadcn-scope .border-amber-500\/30 {
    border-color: rgb(245 158 11 / 0.3);
}
.shadcn-scope .border-border {
    border-color: hsl(var(--border));
}
.shadcn-scope .border-destructive {
    border-color: hsl(var(--destructive));
}
.shadcn-scope .border-emerald-500 {
    --tw-border-opacity: 1;
    border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
}
.shadcn-scope .border-emerald-500\/30 {
    border-color: rgb(16 185 129 / 0.3);
}
.shadcn-scope .border-emerald-500\/40 {
    border-color: rgb(16 185 129 / 0.4);
}
.shadcn-scope .border-indigo-500\/30 {
    border-color: rgb(99 102 241 / 0.3);
}
.shadcn-scope .border-input {
    border-color: hsl(var(--input));
}
.shadcn-scope .border-muted {
    border-color: hsl(var(--muted));
}
.shadcn-scope .border-primary {
    border-color: hsl(var(--primary));
}
.shadcn-scope .border-primary\/30 {
    border-color: hsl(var(--primary) / 0.3);
}
.shadcn-scope .border-rose-500 {
    --tw-border-opacity: 1;
    border-color: rgb(244 63 94 / var(--tw-border-opacity, 1));
}
.shadcn-scope .border-rose-500\/30 {
    border-color: rgb(244 63 94 / 0.3);
}
.shadcn-scope .border-rose-500\/40 {
    border-color: rgb(244 63 94 / 0.4);
}
.shadcn-scope .border-sky-500\/30 {
    border-color: rgb(14 165 233 / 0.3);
}
.shadcn-scope .border-teal-500\/30 {
    border-color: rgb(20 184 166 / 0.3);
}
.shadcn-scope .border-transparent {
    border-color: transparent;
}
.shadcn-scope .border-violet-500\/30 {
    border-color: rgb(139 92 246 / 0.3);
}
.shadcn-scope .border-l-primary {
    border-left-color: hsl(var(--primary));
}
.shadcn-scope .border-t-primary {
    border-top-color: hsl(var(--primary));
}
.shadcn-scope .bg-accent {
    background-color: hsl(var(--accent));
}
.shadcn-scope .bg-amber-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}
.shadcn-scope .bg-amber-500\/10 {
    background-color: rgb(245 158 11 / 0.1);
}
.shadcn-scope .bg-background {
    background-color: hsl(var(--background));
}
.shadcn-scope .bg-black\/50 {
    background-color: rgb(0 0 0 / 0.5);
}
.shadcn-scope .bg-card {
    background-color: hsl(var(--card));
}
.shadcn-scope .bg-destructive {
    background-color: hsl(var(--destructive));
}
.shadcn-scope .bg-emerald-500\/10 {
    background-color: rgb(16 185 129 / 0.1);
}
.shadcn-scope .bg-emerald-500\/15 {
    background-color: rgb(16 185 129 / 0.15);
}
.shadcn-scope .bg-indigo-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1));
}
.shadcn-scope .bg-indigo-500\/10 {
    background-color: rgb(99 102 241 / 0.1);
}
.shadcn-scope .bg-muted {
    background-color: hsl(var(--muted));
}
.shadcn-scope .bg-muted\/40 {
    background-color: hsl(var(--muted) / 0.4);
}
.shadcn-scope .bg-popover {
    background-color: hsl(var(--popover));
}
.shadcn-scope .bg-primary {
    background-color: hsl(var(--primary));
}
.shadcn-scope .bg-primary\/10 {
    background-color: hsl(var(--primary) / 0.1);
}
.shadcn-scope .bg-primary\/5 {
    background-color: hsl(var(--primary) / 0.05);
}
.shadcn-scope .bg-rose-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(244 63 94 / var(--tw-bg-opacity, 1));
}
.shadcn-scope .bg-rose-500\/10 {
    background-color: rgb(244 63 94 / 0.1);
}
.shadcn-scope .bg-secondary {
    background-color: hsl(var(--secondary));
}
.shadcn-scope .bg-sky-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(14 165 233 / var(--tw-bg-opacity, 1));
}
.shadcn-scope .bg-sky-500\/10 {
    background-color: rgb(14 165 233 / 0.1);
}
.shadcn-scope .bg-teal-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(20 184 166 / var(--tw-bg-opacity, 1));
}
.shadcn-scope .bg-teal-500\/10 {
    background-color: rgb(20 184 166 / 0.1);
}
.shadcn-scope .bg-transparent {
    background-color: transparent;
}
.shadcn-scope .bg-violet-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(139 92 246 / var(--tw-bg-opacity, 1));
}
.shadcn-scope .bg-violet-500\/10 {
    background-color: rgb(139 92 246 / 0.1);
}
.shadcn-scope .object-cover {
    object-fit: cover;
}
.shadcn-scope .p-0 {
    padding: 0px;
}
.shadcn-scope .p-0\.5 {
    padding: 0.125rem;
}
.shadcn-scope .p-1 {
    padding: 0.25rem;
}
.shadcn-scope .p-2 {
    padding: 0.5rem;
}
.shadcn-scope .p-3 {
    padding: 0.75rem;
}
.shadcn-scope .p-4 {
    padding: 1rem;
}
.shadcn-scope .p-5 {
    padding: 1.25rem;
}
.shadcn-scope .p-6 {
    padding: 1.5rem;
}
.shadcn-scope .p-8 {
    padding: 2rem;
}
.shadcn-scope .px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.shadcn-scope .px-2\.5 {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
}
.shadcn-scope .px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}
.shadcn-scope .px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}
.shadcn-scope .py-0\.5 {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
}
.shadcn-scope .py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}
.shadcn-scope .py-1\.5 {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}
.shadcn-scope .py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.shadcn-scope .py-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}
.shadcn-scope .py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
.shadcn-scope .py-3\.5 {
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
}
.shadcn-scope .py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}
.shadcn-scope .py-px {
    padding-top: 1px;
    padding-bottom: 1px;
}
.shadcn-scope .pb-5 {
    padding-bottom: 1.25rem;
}
.shadcn-scope .pl-1\.5 {
    padding-left: 0.375rem;
}
.shadcn-scope .pl-2 {
    padding-left: 0.5rem;
}
.shadcn-scope .pr-1 {
    padding-right: 0.25rem;
}
.shadcn-scope .pr-2 {
    padding-right: 0.5rem;
}
.shadcn-scope .pr-8 {
    padding-right: 2rem;
}
.shadcn-scope .pt-0\.5 {
    padding-top: 0.125rem;
}
.shadcn-scope .pt-1 {
    padding-top: 0.25rem;
}
.shadcn-scope .pt-2 {
    padding-top: 0.5rem;
}
.shadcn-scope .text-left {
    text-align: left;
}
.shadcn-scope .text-center {
    text-align: center;
}
.shadcn-scope .text-right {
    text-align: right;
}
.shadcn-scope .font-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.shadcn-scope .text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}
.shadcn-scope .text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
}
.shadcn-scope .text-\[0\.8rem\] {
    font-size: 0.8rem;
}
.shadcn-scope .text-\[10px\] {
    font-size: 10px;
}
.shadcn-scope .text-\[11px\] {
    font-size: 11px;
}
.shadcn-scope .text-\[13px\] {
    font-size: 13px;
}
.shadcn-scope .text-\[9px\] {
    font-size: 9px;
}
.shadcn-scope .text-\[length\:inherit\] {
    font-size: inherit;
}
.shadcn-scope .text-base {
    font-size: 1rem;
    line-height: 1.5rem;
}
.shadcn-scope .text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}
.shadcn-scope .text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}
.shadcn-scope .text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}
.shadcn-scope .font-bold {
    font-weight: 700;
}
.shadcn-scope .font-extrabold {
    font-weight: 800;
}
.shadcn-scope .font-medium {
    font-weight: 500;
}
.shadcn-scope .font-normal {
    font-weight: 400;
}
.shadcn-scope .font-semibold {
    font-weight: 600;
}
.shadcn-scope .uppercase {
    text-transform: uppercase;
}
.shadcn-scope .italic {
    font-style: italic;
}
.shadcn-scope .leading-\[1\.4\] {
    line-height: 1.4;
}
.shadcn-scope .leading-none {
    line-height: 1;
}
.shadcn-scope .leading-relaxed {
    line-height: 1.625;
}
.shadcn-scope .leading-tight {
    line-height: 1.25;
}
.shadcn-scope .tracking-tight {
    letter-spacing: -0.025em;
}
.shadcn-scope .tracking-wide {
    letter-spacing: 0.025em;
}
.shadcn-scope .tracking-wider {
    letter-spacing: 0.05em;
}
.shadcn-scope .tracking-widest {
    letter-spacing: 0.1em;
}
.shadcn-scope .text-\[color\:var\(--ag-foreground-color\)\] {
    color: var(--ag-foreground-color);
}
.shadcn-scope .text-accent-foreground {
    color: hsl(var(--accent-foreground));
}
.shadcn-scope .text-amber-500 {
    --tw-text-opacity: 1;
    color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}
.shadcn-scope .text-card-foreground {
    color: hsl(var(--card-foreground));
}
.shadcn-scope .text-current {
    color: currentColor;
}
.shadcn-scope .text-destructive {
    color: hsl(var(--destructive));
}
.shadcn-scope .text-destructive-foreground {
    color: hsl(var(--destructive-foreground));
}
.shadcn-scope .text-emerald-500 {
    --tw-text-opacity: 1;
    color: rgb(16 185 129 / var(--tw-text-opacity, 1));
}
.shadcn-scope .text-emerald-600 {
    --tw-text-opacity: 1;
    color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.shadcn-scope .text-foreground {
    color: hsl(var(--foreground));
}
.shadcn-scope .text-foreground\/90 {
    color: hsl(var(--foreground) / 0.9);
}
.shadcn-scope .text-green-600 {
    --tw-text-opacity: 1;
    color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}
.shadcn-scope .text-indigo-500 {
    --tw-text-opacity: 1;
    color: rgb(99 102 241 / var(--tw-text-opacity, 1));
}
.shadcn-scope .text-muted-foreground {
    color: hsl(var(--muted-foreground));
}
.shadcn-scope .text-muted-foreground\/80 {
    color: hsl(var(--muted-foreground) / 0.8);
}
.shadcn-scope .text-popover-foreground {
    color: hsl(var(--popover-foreground));
}
.shadcn-scope .text-primary {
    color: hsl(var(--primary));
}
.shadcn-scope .text-primary-foreground {
    color: hsl(var(--primary-foreground));
}
.shadcn-scope .text-red-500 {
    --tw-text-opacity: 1;
    color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.shadcn-scope .text-rose-500 {
    --tw-text-opacity: 1;
    color: rgb(244 63 94 / var(--tw-text-opacity, 1));
}
.shadcn-scope .text-rose-600 {
    --tw-text-opacity: 1;
    color: rgb(225 29 72 / var(--tw-text-opacity, 1));
}
.shadcn-scope .text-secondary-foreground {
    color: hsl(var(--secondary-foreground));
}
.shadcn-scope .text-sky-500 {
    --tw-text-opacity: 1;
    color: rgb(14 165 233 / var(--tw-text-opacity, 1));
}
.shadcn-scope .text-teal-500 {
    --tw-text-opacity: 1;
    color: rgb(20 184 166 / var(--tw-text-opacity, 1));
}
.shadcn-scope .text-violet-500 {
    --tw-text-opacity: 1;
    color: rgb(139 92 246 / var(--tw-text-opacity, 1));
}
.shadcn-scope .underline {
    text-decoration-line: underline;
}
.shadcn-scope .opacity-0 {
    opacity: 0;
}
.shadcn-scope .opacity-100 {
    opacity: 1;
}
.shadcn-scope .opacity-50 {
    opacity: 0.5;
}
.shadcn-scope .opacity-60 {
    opacity: 0.6;
}
.shadcn-scope .opacity-70 {
    opacity: 0.7;
}
.shadcn-scope .shadow-md {
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadcn-scope .shadow-sm {
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadcn-scope .shadow-xl {
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadcn-scope .outline-none {
    outline: 2px solid transparent;
    outline-offset: 2px;
}
.shadcn-scope .outline {
    outline-style: solid;
}
.shadcn-scope .filter {
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.shadcn-scope .transition {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.shadcn-scope .transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.shadcn-scope .transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.shadcn-scope .transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.shadcn-scope .duration-500 {
    transition-duration: 500ms;
}

/*
 * Tokens are scoped to `.shadcn-scope` (never global `:root`) so they cannot leak into the
 * surrounding MUI app. Dark values live under `.shadcn-scope.dark` and are tuned to blend
 * with the AG Grid dark chrome (#1e1e1e / #e0e0e0 / #3a3a3a).
 */
.shadcn-scope {
    --background: 0 0% 100%;
    --foreground: 222 47% 11%;
    --card: 0 0% 100%;
    --card-foreground: 222 47% 11%;
    --popover: 0 0% 100%;
    --popover-foreground: 222 47% 11%;
    --primary: 217 91% 60%;
    --primary-foreground: 0 0% 100%;
    --secondary: 210 40% 96%;
    --secondary-foreground: 222 47% 11%;
    --muted: 210 40% 96%;
    --muted-foreground: 215 16% 47%;
    --accent: 210 40% 96%;
    --accent-foreground: 222 47% 11%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 214 32% 91%;
    --input: 214 32% 91%;
    --ring: 217 91% 60%;
    --radius: 0.5rem;

    color: hsl(var(--foreground));
    font-family: 'Inter', 'Roboto', sans-serif;
}

/*
 * Scoped, minimal reset (a subset of Tailwind preflight). preflight is disabled globally to
 * protect MUI, so we re-apply only what shadcn primitives need — confined to `.shadcn-scope`:
 *  - border-box so `h-8 px-3 border` measures correctly (fixes oversized / misaligned fields)
 *  - border-width:0 + border-style:solid so Tailwind `border` utilities actually render
 *    (without this, only the browser's default form borders show)
 *  - reset native button/input chrome so our styled triggers look consistent
 * Utility classes (`.shadcn-scope .border-input`) out-specify these, so they always win.
 */
.shadcn-scope,
.shadcn-scope *,
.shadcn-scope *::before,
.shadcn-scope *::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: hsl(var(--border));
}
.shadcn-scope button {
    background-color: transparent;
    background-image: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
.shadcn-scope input {
    font: inherit;
}

.shadcn-scope.dark {
    --background: 0 0% 12%;
    --foreground: 0 0% 88%;
    --card: 0 0% 12%;
    --card-foreground: 0 0% 88%;
    --popover: 0 0% 15%;
    --popover-foreground: 0 0% 88%;
    --primary: 217 91% 60%;
    --primary-foreground: 0 0% 100%;
    --secondary: 0 0% 18%;
    --secondary-foreground: 0 0% 88%;
    --muted: 0 0% 18%;
    --muted-foreground: 0 0% 63%;
    --accent: 0 0% 22%;
    --accent-foreground: 0 0% 88%;
    --destructive: 0 62% 45%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 23%;
    --input: 0 0% 23%;
    --ring: 217 91% 60%;
}

.shadcn-scope .placeholder\:text-muted-foreground::placeholder {
    color: hsl(var(--muted-foreground));
}

.shadcn-scope .focus-within\:relative:focus-within {
    position: relative;
}

.shadcn-scope .focus-within\:z-20:focus-within {
    z-index: 20;
}

.shadcn-scope .focus-within\:border-primary:focus-within {
    border-color: hsl(var(--primary));
}

.shadcn-scope .focus-within\:ring-1:focus-within {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.shadcn-scope .focus-within\:ring-destructive:focus-within {
    --tw-ring-color: hsl(var(--destructive));
}

.shadcn-scope .focus-within\:ring-ring:focus-within {
    --tw-ring-color: hsl(var(--ring));
}

.shadcn-scope .hover\:border-primary\/60:hover {
    border-color: hsl(var(--primary) / 0.6);
}

.shadcn-scope .hover\:bg-\[var\(--ag-row-hover-color\)\]:hover {
    background-color: var(--ag-row-hover-color);
}

.shadcn-scope .hover\:bg-accent:hover {
    background-color: hsl(var(--accent));
}

.shadcn-scope .hover\:bg-destructive\/90:hover {
    background-color: hsl(var(--destructive) / 0.9);
}

.shadcn-scope .hover\:bg-primary:hover {
    background-color: hsl(var(--primary));
}

.shadcn-scope .hover\:bg-primary\/90:hover {
    background-color: hsl(var(--primary) / 0.9);
}

.shadcn-scope .hover\:bg-secondary\/80:hover {
    background-color: hsl(var(--secondary) / 0.8);
}

.shadcn-scope .hover\:text-accent-foreground:hover {
    color: hsl(var(--accent-foreground));
}

.shadcn-scope .hover\:text-foreground:hover {
    color: hsl(var(--foreground));
}

.shadcn-scope .hover\:text-primary-foreground:hover {
    color: hsl(var(--primary-foreground));
}

.shadcn-scope .hover\:opacity-100:hover {
    opacity: 1;
}

.shadcn-scope .hover\:opacity-90:hover {
    opacity: 0.9;
}

.shadcn-scope .focus\:border-primary:focus {
    border-color: hsl(var(--primary));
}

.shadcn-scope .focus\:bg-accent:focus {
    background-color: hsl(var(--accent));
}

.shadcn-scope .focus\:bg-primary:focus {
    background-color: hsl(var(--primary));
}

.shadcn-scope .focus\:text-accent-foreground:focus {
    color: hsl(var(--accent-foreground));
}

.shadcn-scope .focus\:text-primary-foreground:focus {
    color: hsl(var(--primary-foreground));
}

.shadcn-scope .focus\:outline-none:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.shadcn-scope .focus\:ring-1:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.shadcn-scope .focus\:ring-destructive:focus {
    --tw-ring-color: hsl(var(--destructive));
}

.shadcn-scope .focus\:ring-ring:focus {
    --tw-ring-color: hsl(var(--ring));
}

.shadcn-scope .focus-visible\:border-primary:focus-visible {
    border-color: hsl(var(--primary));
}

.shadcn-scope .focus-visible\:outline-none:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.shadcn-scope .focus-visible\:ring-1:focus-visible {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.shadcn-scope .focus-visible\:ring-ring:focus-visible {
    --tw-ring-color: hsl(var(--ring));
}

.shadcn-scope .disabled\:pointer-events-none:disabled {
    pointer-events: none;
}

.shadcn-scope .disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed;
}

.shadcn-scope .disabled\:opacity-50:disabled {
    opacity: 0.5;
}

.shadcn-scope .disabled\:opacity-60:disabled {
    opacity: 0.6;
}

.shadcn-scope .aria-selected\:opacity-100[aria-selected="true"] {
    opacity: 1;
}

.shadcn-scope .data-\[disabled\=true\]\:pointer-events-none[data-disabled="true"] {
    pointer-events: none;
}

.shadcn-scope .data-\[disabled\]\:pointer-events-none[data-disabled] {
    pointer-events: none;
}

.shadcn-scope .data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] {
    --tw-translate-y: 0.25rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.shadcn-scope .data-\[side\=top\]\:-translate-y-1[data-side="top"] {
    --tw-translate-y: -0.25rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.shadcn-scope .data-\[state\=checked\]\:border-primary[data-state="checked"] {
    border-color: hsl(var(--primary));
}

.shadcn-scope .data-\[selected\=true\]\:bg-accent[data-selected="true"] {
    background-color: hsl(var(--accent));
}

.shadcn-scope .data-\[state\=checked\]\:bg-primary[data-state="checked"] {
    background-color: hsl(var(--primary));
}

.shadcn-scope .data-\[selected\=true\]\:text-accent-foreground[data-selected="true"] {
    color: hsl(var(--accent-foreground));
}

.shadcn-scope .data-\[state\=checked\]\:text-primary-foreground[data-state="checked"] {
    color: hsl(var(--primary-foreground));
}

.shadcn-scope .data-\[disabled\=true\]\:opacity-50[data-disabled="true"] {
    opacity: 0.5;
}

.shadcn-scope .data-\[disabled\]\:opacity-50[data-disabled] {
    opacity: 0.5;
}

@media (min-width: 640px) {
    .shadcn-scope .sm\:block {
        display: block;
    }
    .shadcn-scope .sm\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .shadcn-scope .sm\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .shadcn-scope .sm\:flex-row {
        flex-direction: row;
    }
    .shadcn-scope .sm\:gap-3 {
        gap: 0.75rem;
    }
    .shadcn-scope :is(.sm\:space-x-4 > :not([hidden]) ~ :not([hidden])) {
        --tw-space-x-reverse: 0;
        margin-right: calc(1rem * var(--tw-space-x-reverse));
        margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
    }
    .shadcn-scope :is(.sm\:space-y-0 > :not([hidden]) ~ :not([hidden])) {
        --tw-space-y-reverse: 0;
        margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(0px * var(--tw-space-y-reverse));
    }
}

@media (min-width: 768px) {
    .shadcn-scope .md\:flex {
        display: flex;
    }
    .shadcn-scope .md\:flex-row {
        flex-direction: row;
    }
    .shadcn-scope .md\:items-center {
        align-items: center;
    }
    .shadcn-scope .md\:justify-between {
        justify-content: space-between;
    }
    .shadcn-scope .md\:p-7 {
        padding: 1.75rem;
    }
}

@media (min-width: 1024px) {
    .shadcn-scope .lg\:col-span-1 {
        grid-column: span 1 / span 1;
    }
    .shadcn-scope .lg\:col-span-2 {
        grid-column: span 2 / span 2;
    }
    .shadcn-scope .lg\:col-span-5 {
        grid-column: span 5 / span 5;
    }
    .shadcn-scope .lg\:col-span-7 {
        grid-column: span 7 / span 7;
    }
    .shadcn-scope .lg\:grid-cols-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }
    .shadcn-scope .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.shadcn-scope :is(.\[\&\>span\]\:line-clamp-1>span) {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.shadcn-scope :is(.\[\&\[data-placeholder\]\>span\]\:text-muted-foreground[data-placeholder]>span) {
    color: hsl(var(--muted-foreground));
}

/*
 * Grid cell action icons — Edit / Add / Delete / Lock.
 * Animation is 100% CSS (transform, box-shadow, stroke-dashoffset): GPU-composed, no layout/paint,
 * no JS, no re-render. Safe across thousands of AG Grid rows. prefers-reduced-motion supported.
 *
 * Two consumers share these classes:
 *   - GridActionIconButton → a bare icon button `.ga-icon` (glyph + badge are its direct children).
 *   - GridActionChip       → a clickable pill `.ga-chip` whose glyph + badge live in a `.ga-glyph`
 *                            span. The whole pill is the button (cursor + hover cover it all).
 *
 * Idle colour comes from each action's `--ga-accent`; the hover glow uses the same accent.
 * Animation triggers key off `.ga-<type>:hover` — that class is on both button types, so a glyph
 * animates whether you hover the bare icon or anywhere on the chip.
 */

.ga-icon {
    --ga-size: 30px;
    --ga-accent: 46, 114, 183; /* RGB triplet — default blue (edit), light-theme value */
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ga-size);
    height: var(--ga-size);
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: rgb(var(--ga-accent));
    cursor: pointer;
    transition: background-color 0.18s, box-shadow 0.18s, color 0.18s, border-color 0.18s;
}
.ga-icon > svg {
    width: calc(var(--ga-size) * 0.54);
    height: calc(var(--ga-size) * 0.54);
    display: block;
    overflow: visible;
}
/* The edit pen draws smaller within its viewBox than the plus/trash glyphs — scale just the glyph. */
.ga-edit > svg,
.ga-edit .ga-glyph > svg {
    transform: scale(1.22);
}

/* Per-action accent — drives the idle colour AND the hover glow. Set on the type class so both the
   icon button and the chip wrapper inherit it.
   Theme-aware: base values are tuned for LIGHT grids (≥4.5:1 on white — WCAG AA for the chip label,
   well past the 3:1 floor for the glyph). The `[class*='-dark']` block below swaps in brighter
   values that hold the same ratio on the dark grid background (#1e1e1e). A single accent can't clear
   AA on both themes, so the palette is split. */
.ga-edit {
    --ga-accent: 46, 114, 183;
} /* blue (also the base default) */
.ga-add {
    --ga-accent: 27, 127, 72;
} /* green */
.ga-delete {
    --ga-accent: 206, 50, 65;
} /* red */
.ga-lock {
    --ga-accent: 111, 111, 111;
} /* neutral */
.ga-copy {
    --ga-accent: 109, 91, 208;
} /* violet */
.ga-detail {
    --ga-accent: 140, 107, 29;
} /* soft yellow */
.ga-history {
    --ga-accent: 136, 106, 73;
} /* sepia — the past */
.ga-send {
    --ga-accent: 11, 125, 115;
} /* teal */
.ga-airplane {
    --ga-accent: 168, 91, 25;
} /* orange */
.ga-download {
    --ga-accent: 184, 36, 203;
} /* fuchsia */
.ga-audio {
    --ga-accent: 20, 128, 58;
} /* spotify green */
.ga-stop {
    --ga-accent: 209, 86, 86;
} /* soft red — a calm "stop", not the harsh delete red */
.ga-upload {
    --ga-accent: 207, 37, 112;
} /* pink — pairs with download */
.ga-idcard {
    --ga-accent: 93, 95, 226;
} /* indigo */
.ga-report {
    --ga-accent: 7, 121, 149;
} /* cyan */
.ga-rules {
    --ga-accent: 21, 101, 192;
} /* blue — echoes the old Rules button */
.ga-power {
    --ga-accent: 29, 158, 117;
} /* green default; overridden per-state via .ga-accent-* */
.ga-check {
    --ga-accent: 27, 127, 72;
} /* green — confirm / mark as checked */

/* Per-instance accent overrides — let one chip type flip colour by state (e.g. power: active↔inactive).
   Higher specificity than the type accent so they always win. */
.ga-chip.ga-accent-success {
    --ga-accent: 29, 158, 117;
}
.ga-chip.ga-accent-danger {
    --ga-accent: 192, 57, 43;
}

/* Dark-theme accents — brighter so the glyph + chip label keep ≥4.5:1 on the dark grid bg (#1e1e1e). */
[class*='-dark'] .ga-edit {
    --ga-accent: 65, 144, 223;
}
[class*='-dark'] .ga-add {
    --ga-accent: 34, 160, 90;
}
[class*='-dark'] .ga-delete {
    --ga-accent: 228, 98, 111;
}
[class*='-dark'] .ga-lock {
    --ga-accent: 141, 141, 141;
}
[class*='-dark'] .ga-copy {
    --ga-accent: 143, 129, 219;
}
[class*='-dark'] .ga-detail {
    --ga-accent: 221, 169, 46;
}
[class*='-dark'] .ga-history {
    --ga-accent: 162, 136, 107;
}
[class*='-dark'] .ga-send {
    --ga-accent: 32, 157, 146;
}
[class*='-dark'] .ga-airplane {
    --ga-accent: 232, 126, 34;
}
[class*='-dark'] .ga-download {
    --ga-accent: 207, 91, 222;
}
[class*='-dark'] .ga-audio {
    --ga-accent: 29, 185, 84;
}
[class*='-dark'] .ga-stop {
    --ga-accent: 232, 122, 122;
}
[class*='-dark'] .ga-upload {
    --ga-accent: 228, 91, 152;
}
[class*='-dark'] .ga-idcard {
    --ga-accent: 126, 129, 243;
}
[class*='-dark'] .ga-report {
    --ga-accent: 26, 153, 184;
}
[class*='-dark'] .ga-rules {
    --ga-accent: 66, 165, 245;
}
[class*='-dark'] .ga-power {
    --ga-accent: 74, 222, 128;
}
[class*='-dark'] .ga-check {
    --ga-accent: 74, 222, 128;
}
[class*='-dark'] .ga-chip.ga-accent-success {
    --ga-accent: 74, 222, 128;
}
[class*='-dark'] .ga-chip.ga-accent-danger {
    --ga-accent: 248, 113, 113;
}

/* Bare icon button hover glow (GridActionIconButton only — not the chip). */
.ga-icon:not(.ga-locked):not(:disabled):hover,
.ga-icon:not(.ga-locked):not(:disabled):focus-visible {
    border-color: rgba(var(--ga-accent), 0.5);
    background: rgba(var(--ga-accent), 0.12);
    box-shadow: 0 0 0 3px rgba(var(--ga-accent), 0.22);
}
.ga-icon:focus {
    outline: none;
}
.ga-icon:not(.ga-locked):active {
    transform: scale(0.95);
}
.ga-icon:disabled {
    color: var(--ag-disabled-foreground-color, #999);
    cursor: not-allowed;
    opacity: 0.55;
}
.ga-icon:disabled:hover {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}
[class*='-dark'] .ga-icon:not(.ga-locked):not(:disabled):hover,
[class*='-dark'] .ga-icon:not(.ga-locked):not(:disabled):focus-visible {
    background: rgba(var(--ga-accent), 0.2);
    border-color: rgba(var(--ga-accent), 0.6);
}

/* ---- EDIT: pen slides right and springs back; underline draws in ---- */
.ga-pen {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ga-edit:not(.ga-locked):hover .ga-pen,
.ga-edit:not(.ga-locked):focus-visible .ga-pen {
    animation: ga-slide 1.05s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes ga-slide {
    0% {
        transform: translateX(0);
    }
    28% {
        transform: translateX(-1px);
    }
    65% {
        transform: translateX(5px);
    }
    85% {
        transform: translateX(-1px);
    }
    100% {
        transform: translateX(0);
    }
}
.ga-ink {
    stroke-dasharray: 11;
    stroke-dashoffset: 11;
}
.ga-edit:not(.ga-locked):hover .ga-ink,
.ga-edit:not(.ga-locked):focus-visible .ga-ink {
    animation: ga-draw 1s ease-out forwards;
}
@keyframes ga-draw {
    0% {
        stroke-dashoffset: 11;
    }
    28% {
        stroke-dashoffset: 11;
    }
    72% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

/* ---- ADD: plus empties then rebuilds vertical→horizontal ---- */
.ga-pv,
.ga-ph {
    transform-origin: center;
}
.ga-add:not(.ga-locked):hover .ga-pv,
.ga-add:not(.ga-locked):focus-visible .ga-pv {
    animation: ga-buildV 0.6s ease forwards;
}
.ga-add:not(.ga-locked):hover .ga-ph,
.ga-add:not(.ga-locked):focus-visible .ga-ph {
    animation: ga-buildH 0.6s ease forwards;
}
@keyframes ga-buildV {
    0% {
        transform: scaleY(1);
    }
    12% {
        transform: scaleY(0);
    }
    55% {
        transform: scaleY(1);
    }
    100% {
        transform: scaleY(1);
    }
}
@keyframes ga-buildH {
    0% {
        transform: scaleX(1);
    }
    12% {
        transform: scaleX(0);
    }
    55% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(1);
    }
}

/* ---- DELETE: lid springs open ---- */
.ga-lid {
    transform-origin: 6px 7px;
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ga-delete:not(.ga-locked):hover .ga-lid,
.ga-delete:not(.ga-locked):focus-visible .ga-lid {
    transform: rotate(-20deg) translateY(-1px);
}

/* ---- COPY: two sheets spring apart — front slides up-left, back down-right ---- */
.ga-copy-front,
.ga-copy-back {
    transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ga-copy:not(.ga-locked):hover .ga-copy-front,
.ga-copy:not(.ga-locked):focus-visible .ga-copy-front {
    transform: translate(-3px, -3px);
}
.ga-copy:not(.ga-locked):hover .ga-copy-back,
.ga-copy:not(.ga-locked):focus-visible .ga-copy-back {
    transform: translate(3px, 3px);
}

/* ---- DETAIL: the eye blinks — lid squints shut + pupil shrinks (both fade), then reopen ---- */
.ga-eye,
.ga-pupil {
    transform-origin: center;
}
.ga-detail:not(.ga-locked):hover .ga-eye,
.ga-detail:not(.ga-locked):focus-visible .ga-eye {
    animation: ga-blink 0.4s ease-in-out;
}
.ga-detail:not(.ga-locked):hover .ga-pupil,
.ga-detail:not(.ga-locked):focus-visible .ga-pupil {
    animation: ga-pupil-blink 0.4s ease-in-out;
}
@keyframes ga-blink {
    0% {
        transform: scaleY(1);
        opacity: 1;
    }
    50% {
        transform: scaleY(0.1);
        opacity: 0.3;
    }
    100% {
        transform: scaleY(1);
        opacity: 1;
    }
}
@keyframes ga-pupil-blink {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(0.3);
        opacity: 0.3;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ---- HISTORY: the clock rewinds — arrow swings back, hour hand spins a full turn, minute hand ticks back ---- */
.ga-clock-arrow,
.ga-clock-hour,
.ga-clock-minute {
    transform-origin: 12px 12px;
}
.ga-clock-arrow {
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ga-clock-hour {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.ga-clock-minute {
    transition: transform 0.5s ease-in-out;
}
.ga-history:not(.ga-locked):hover .ga-clock-arrow,
.ga-history:not(.ga-locked):focus-visible .ga-clock-arrow {
    transform: rotate(-50deg);
}
.ga-history:not(.ga-locked):hover .ga-clock-hour,
.ga-history:not(.ga-locked):focus-visible .ga-clock-hour {
    transform: rotate(-360deg);
}
.ga-history:not(.ga-locked):hover .ga-clock-minute,
.ga-history:not(.ga-locked):focus-visible .ga-clock-minute {
    transform: rotate(-45deg);
}

/* ---- SEND: the plane glides up-right and shrinks (holds), a curved trail draws in behind it ---- */
.ga-plane {
    transform-origin: center;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ga-send:not(.ga-locked):hover .ga-plane,
.ga-send:not(.ga-locked):focus-visible .ga-plane {
    transform: translate(3px, -3px) scale(0.8);
}
.ga-trail {
    stroke-dasharray: 34;
    stroke-dashoffset: 34;
    opacity: 0;
}
.ga-send:not(.ga-locked):hover .ga-trail,
.ga-send:not(.ga-locked):focus-visible .ga-trail {
    animation: ga-trail 0.65s ease-out 0.1s forwards;
}
@keyframes ga-trail {
    0% {
        stroke-dashoffset: 34;
        opacity: 0;
    }
    26% {
        opacity: 1;
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

/* ---- AIRPLANE: glides up-right and shrinks (holds); three speed lines streak in, staggered ---- */
.ga-jet {
    transform-origin: center;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ga-airplane:not(.ga-locked):hover .ga-jet,
.ga-airplane:not(.ga-locked):focus-visible .ga-jet {
    transform: translate(3px, -3px) scale(0.8);
}
.ga-speed {
    stroke-dasharray: 6;
    stroke-dashoffset: 6;
    opacity: 0;
}
.ga-airplane:not(.ga-locked):hover .ga-speed-1,
.ga-airplane:not(.ga-locked):focus-visible .ga-speed-1 {
    animation: ga-streak 0.3s ease-out 0.1s forwards;
}
.ga-airplane:not(.ga-locked):hover .ga-speed-2,
.ga-airplane:not(.ga-locked):focus-visible .ga-speed-2 {
    animation: ga-streak 0.3s ease-out 0.2s forwards;
}
.ga-airplane:not(.ga-locked):hover .ga-speed-3,
.ga-airplane:not(.ga-locked):focus-visible .ga-speed-3 {
    animation: ga-streak 0.3s ease-out 0.3s forwards;
}
@keyframes ga-streak {
    0% {
        stroke-dashoffset: 6;
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

/* ---- DOWNLOAD: the arrow springs down toward the tray on hover, then settles back ---- */
.ga-dl-arrow {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ga-download:not(.ga-locked):hover .ga-dl-arrow,
.ga-download:not(.ga-locked):focus-visible .ga-dl-arrow {
    transform: translateY(3px);
}

/* ---- AUDIO: the inner four equalizer bars pulse (scaleY) at staggered tempos while hovered ---- */
.ga-eq {
    transform-origin: center;
}
.ga-audio:not(.ga-locked):hover .ga-eq-1,
.ga-audio:not(.ga-locked):focus-visible .ga-eq-1 {
    animation: ga-eq 1.5s ease-in-out infinite;
}
.ga-audio:not(.ga-locked):hover .ga-eq-2,
.ga-audio:not(.ga-locked):focus-visible .ga-eq-2 {
    animation: ga-eq 1s ease-in-out infinite;
}
.ga-audio:not(.ga-locked):hover .ga-eq-3,
.ga-audio:not(.ga-locked):focus-visible .ga-eq-3 {
    animation: ga-eq 0.8s ease-in-out infinite;
}
.ga-audio:not(.ga-locked):hover .ga-eq-4,
.ga-audio:not(.ga-locked):focus-visible .ga-eq-4 {
    animation: ga-eq 1.5s ease-in-out infinite 0.4s;
}
@keyframes ga-eq {
    0%,
    100% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(0.4);
    }
}

/* ---- UPLOAD: the arrow springs up out of the tray on hover, then settles back ---- */
.ga-ul-arrow {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ga-upload:not(.ga-locked):hover .ga-ul-arrow,
.ga-upload:not(.ga-locked):focus-visible .ga-ul-arrow {
    transform: translateY(-3px);
}

/* ---- ID CARD: on hover the card contents redraw in — shoulders, then face, then the text lines ---- */
.ga-id-detail {
    stroke-dasharray: var(--ga-id-len);
}
.ga-id-arc {
    --ga-id-len: 10;
}
.ga-id-face {
    --ga-id-len: 14;
}
.ga-id-line {
    --ga-id-len: 3;
}
.ga-idcard:not(.ga-locked):hover .ga-id-detail,
.ga-idcard:not(.ga-locked):focus-visible .ga-id-detail {
    animation: ga-id-in 0.3s ease-out both;
}
.ga-idcard:not(.ga-locked):hover .ga-id-face,
.ga-idcard:not(.ga-locked):focus-visible .ga-id-face {
    animation-delay: 0.1s;
}
.ga-idcard:not(.ga-locked):hover .ga-id-line,
.ga-idcard:not(.ga-locked):focus-visible .ga-id-line {
    animation-delay: 0.2s;
}
@keyframes ga-id-in {
    from {
        stroke-dashoffset: var(--ga-id-len);
        opacity: 0;
    }
    to {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

/* ---- REPORT: on hover the trend line redraws itself across the static axes ---- */
.ga-report-line {
    stroke-dasharray: 17;
}
.ga-report:not(.ga-locked):hover .ga-report-line,
.ga-report:not(.ga-locked):focus-visible .ga-report-line {
    animation: ga-report-draw 0.3s ease-out 0.15s both;
}
@keyframes ga-report-draw {
    from {
        stroke-dashoffset: 17;
        opacity: 0;
    }
    to {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

/* ---- RULES: on hover the connectors draw in, then the two child nodes pop ---- */
.ga-rules-branch path {
    stroke-dasharray: 12;
}
.ga-rules:not(.ga-locked):hover .ga-rules-branch path,
.ga-rules:not(.ga-locked):focus-visible .ga-rules-branch path {
    animation: ga-rules-draw 0.3s ease-out both;
}
.ga-rules-node {
    transform-box: fill-box;
    transform-origin: center;
}
.ga-rules:not(.ga-locked):hover .ga-rules-node,
.ga-rules:not(.ga-locked):focus-visible .ga-rules-node {
    animation: ga-rules-pop 0.3s ease-out 0.18s both;
}
@keyframes ga-rules-draw {
    from {
        stroke-dashoffset: 12;
    }
    to {
        stroke-dashoffset: 0;
    }
}
@keyframes ga-rules-pop {
    0% {
        transform: scale(0.6);
        opacity: 0.4;
    }
    60% {
        transform: scale(1.12);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ---- POWER: on hover the ring sweeps closed and the stem ticks up, like flipping a switch ---- */
.ga-power-ring {
    stroke-dasharray: 44;
    transform-box: fill-box;
    transform-origin: center;
}
.ga-power:not(.ga-locked):hover .ga-power-ring,
.ga-power:not(.ga-locked):focus-visible .ga-power-ring {
    animation: ga-power-sweep 0.32s ease-out both;
}
.ga-power-stem {
    transform-box: fill-box;
    transform-origin: center bottom;
}
.ga-power:not(.ga-locked):hover .ga-power-stem,
.ga-power:not(.ga-locked):focus-visible .ga-power-stem {
    animation: ga-power-tick 0.32s ease-out both;
}
@keyframes ga-power-sweep {
    from {
        stroke-dashoffset: 44;
    }
    to {
        stroke-dashoffset: 0;
    }
}
@keyframes ga-power-tick {
    0% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(0.78);
    }
    100% {
        transform: scaleY(1);
    }
}

/* ---- LOCKED (no permission): grey the glyph, pin a red lock badge ---- */
.ga-icon.ga-locked {
    color: var(--ag-disabled-foreground-color, #8a8a8a);
    cursor: not-allowed;
}
.ga-icon.ga-locked:hover {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}
/* Badge size + offset track the button size (`--ga-size`) so it stays proportional at any scale.
   It anchors to the nearest positioned ancestor: `.ga-icon` (bare) or `.ga-glyph` (chip). */
.ga-lock-badge {
    --ga-danger: 226, 75, 74; /* #e24b4a */
    position: absolute;
    right: calc(var(--ga-size) * -0.13);
    bottom: calc(var(--ga-size) * -0.13);
    width: calc(var(--ga-size) * 0.53);
    height: calc(var(--ga-size) * 0.53);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(var(--ga-danger));
}
.ga-lock-badge svg {
    width: calc(var(--ga-size) * 0.52);
    height: calc(var(--ga-size) * 0.52);
    display: block;
    overflow: visible;
    transform-origin: center;
}
/* hover: the lock shakes "no" (works for bare icon and chip alike). */
.ga-locked:hover .ga-lock-badge svg {
    animation: ga-nono 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes ga-nono {
    0% {
        transform: rotate(0);
    }
    20% {
        transform: rotate(-14deg);
    }
    45% {
        transform: rotate(11deg);
    }
    70% {
        transform: rotate(-7deg);
    }
    88% {
        transform: rotate(3deg);
    }
    100% {
        transform: rotate(0);
    }
}

/* ---- GLYPH BOX: holds the SVG + corner badge inside a chip (the chip itself is the button) ---- */
.ga-glyph {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ga-size);
    height: var(--ga-size);
    flex: none;
}
.ga-glyph > svg {
    width: calc(var(--ga-size) * 0.54);
    height: calc(var(--ga-size) * 0.54);
    display: block;
    overflow: visible;
}

/* ---- CHIP: clickable `text + icon` pill — the WHOLE pill is the button ---- */
.ga-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* Leading icon, trailing label — tighter edge on the icon side, more room past the label. */
    padding: 3px 13px 3px 8px;
    border: 1px solid rgba(var(--ga-accent), 0.35);
    border-radius: 999px;
    background: rgba(var(--ga-accent), 0.07);
    color: rgb(var(--ga-accent));
    cursor: pointer;
    /* `font-family` only — a `font` shorthand would reset line-height to the cell's (tall) value
       and stretch the pill. Keep line-height after it so it always wins. */
    font-family: inherit;
    line-height: 1;
    transition: background-color 0.18s, border-color 0.18s, color 0.18s;
}
.ga-chip:focus {
    outline: none;
}
.ga-chip:not(.ga-locked):focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--ga-accent), 0.3);
}
.ga-chip:not(.ga-locked):hover {
    background: rgba(var(--ga-accent), 0.13);
    border-color: rgba(var(--ga-accent), 0.5);
}
.ga-chip:not(.ga-locked):active {
    transform: scale(0.97);
}
.ga-chip-label {
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    -webkit-user-select: none;
            user-select: none;
}

/* Framed text+icon pill — flat (short) + long (wide) so it reads as a horizontal pill, not a puffy
   near-circle, and fits a standard grid row height. (`--bare` / `--text` size themselves below.) */
.ga-chip:not(.ga-chip--bare):not(.ga-chip--text) {
    padding: 3px 11px 3px 9px;
    gap: 5px;
}
.ga-chip:not(.ga-chip--bare):not(.ga-chip--text) .ga-glyph {
    --ga-size: 20px;
}
/* Right-hand glyph a touch larger relative to its (small) box — overflows the box, not the pill. */
.ga-chip:not(.ga-chip--bare):not(.ga-chip--text) .ga-glyph > svg {
    width: calc(var(--ga-size) * 0.72);
    height: calc(var(--ga-size) * 0.72);
}

/* Bare (icons-only) variant: no pill frame, just the clickable glyph. With no label to balance it,
   render the glyph a touch larger — bumping `--ga-size` scales the svg, edit-scale and badge alike. */
.ga-chip--bare {
    border-color: transparent;
    background: transparent;
    padding: 2px;
}
.ga-chip--bare .ga-glyph {
    --ga-size: 36px;
}
.ga-chip--bare:not(.ga-locked):hover {
    background: transparent;
    border-color: transparent;
}

/* Text-only variant: no glyph, so centre the label in a comfortable, balanced pill. */
.ga-chip--text {
    min-height: 26px;
    padding: 0 14px;
    justify-content: center;
}
.ga-chip--text .ga-chip-label {
    line-height: 1;
}
/* No badge/glyph to make room for here → keep the label vertically centred. */
.ga-chip--text.ga-chip-locked .ga-chip-label,
.ga-chip--text.ga-chip-disabled .ga-chip-label {
    transform: none;
}

/* Disabled / locked chip → neutral grey frame + text. */
.ga-chip.ga-chip-locked,
.ga-chip.ga-chip-disabled {
    color: var(--ag-disabled-foreground-color, #8a8a8a);
    border-color: rgba(138, 138, 138, 0.4);
    background: transparent;
    cursor: not-allowed;
}
.ga-chip--bare.ga-chip-locked,
.ga-chip--bare.ga-chip-disabled {
    border-color: transparent;
}
/* Locked only: lift the glyph (and its corner lock badge) so the badge clears the bottom edge
   without making the pill taller. Plain disabled has no badge, so it stays centred. */
.ga-chip.ga-chip-locked .ga-glyph {
    transform: translateY(-3px);
}
.ga-chip.ga-chip-locked .ga-chip-label {
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .ga-icon *,
    .ga-chip * {
        animation: none !important;
        transition: none !important;
    }
}

/* MapView.css */
.marker {
    animation: bounce 1s 5;
    transform-origin: bottom;
}

@keyframes bounce {
    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-20px);
    }
    60% {
        transform: translateY(-10px);
    }
}

.custom-popup {
    background-color: #f0f0f0;
    color: #333;
    padding: 5px;
    border-radius: 4px;
}

@keyframes bounce {
    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-20px);
    }
    60% {
        transform: translateY(-10px);
    }
}

.bounce-animation {
    animation: bounce 1s infinite;
}


:export{paper:#fff;primaryLight:#e3ebeb;primary200:#84d0f0;primaryMain:#00458f;primaryDark:#011969;primary800:#012d5c;secondaryLight:#f8f0e5;secondary200:#f9b200;secondaryMain:#eb690b;secondaryDark:#c1761f;secondary800:#b36115;successLight:#b9f6ca;success200:#69f0ae;successMain:#00e676;successDark:#00c853;notamStatusNew:#2e7d32;errorLight:#ef9a9a;errorMain:#f44336;errorDark:#c62828;orangeLight:#fbe9e7;orangeMain:#ffab91;orangeDark:#d84315;warningLight:#fff8e1;warningMain:#ffe57f;warningDark:#ffc107;grey50:#f8fafc;grey100:#eef2f6;grey200:#e3e8ef;grey300:#cdd5df;grey500:#697586;grey600:#4b5565;grey700:#364152;grey900:#121926;darkPaper:#010f17;darkBackground:#010606;darkLevel1:#02131d;darkLevel2:#010f17;darkTextTitle:#fff;darkTextPrimary:#fff;darkTextSecondary:#8c8c8c;darkPrimaryLight:#eceff1;darkPrimaryMain:#eb690b;darkPrimaryDark:#b34a00;darkPrimary200:#8fbbbc;darkPrimary800:#125a5b;darkSecondaryLight:#f8f0e5;darkSecondaryMain:#c77e23;darkSecondaryDark:#c1761f;darkSecondary200:#e3bf91;darkSecondary800:#b36115}.fullscreen .react-images__blanket{z-index:1200}.apexcharts-legend-series .apexcharts-legend-marker{margin-right:8px}.scrollbar-container .ps__rail-y:hover>.ps__thumb-y,.scrollbar-container .ps__rail-y:focus>.ps__thumb-y,.scrollbar-container .ps__rail-y.ps--clicking .ps__thumb-y{background-color:#697586;width:5px}.scrollbar-container .ps__thumb-y{background-color:#697586;border-radius:6px;width:5px;right:0}.scrollbar-container.ps.ps--active-y>.ps__rail-y,.scrollbar-container>.ps.ps--active-y>.ps__rail-y{width:5px;background-color:rgba(0,0,0,0) !important;z-index:999}.scrollbar-container.ps.ps--active-y>.ps__rail-y:hover,.scrollbar-container.ps.ps--active-y>.ps__rail-y.ps--clicking,.scrollbar-container>.ps.ps--active-y>.ps__rail-y:hover,.scrollbar-container>.ps.ps--active-y>.ps__rail-y.ps--clicking{width:5px;background-color:rgba(0,0,0,0)}.scrollbar-container.ps.ps--scrolling-y>.ps__rail-y,.scrollbar-container.ps.ps--scrolling-x>.ps__rail-x,.scrollbar-container>.ps.ps--scrolling-y>.ps__rail-y,.scrollbar-container>.ps.ps--scrolling-x>.ps__rail-x{opacity:.4;background-color:rgba(0,0,0,0)}@keyframes wings{50%{transform:translateY(-40px)}100%{transform:translateY(0px)}}@keyframes blink{50%{opacity:0}100%{opacity:1}}@keyframes bounce{0%,20%,53%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translateZ(0)}40%,43%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -5px, 0)}70%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -7px, 0)}80%{transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translateZ(0)}90%{transform:translate3d(0, -2px, 0)}}@keyframes slideY{0%,50%,100%{transform:translateY(0px)}25%{transform:translateY(-10px)}75%{transform:translateY(10px)}}@keyframes slideX{0%,50%,100%{transform:translateX(0px)}25%{transform:translateX(-10px)}75%{transform:translateX(10px)}}.preBuildDashBoard-slider{overflow:hidden}.preBuildDashBoard-slider .slider .slide{opacity:.5;display:flex;justify-content:center}.preBuildDashBoard-slider .slider .slide .custom-slider{gap:40px}.preBuildDashBoard-slider .slider .slide.selected{opacity:1}.preBuildDashBoard-slider .slider .slide.selected .custom-slider{display:flex;flex-direction:column}.preBuildDashBoard-slider .slider .slide:not(.selected){transform:scale(0.7);transform-origin:top}.project-info .project-slider .slick-list{padding:0 !important}.project-info .slick-slide{opacity:.05}.project-info .slick-active{opacity:.2}.project-info .slick-current{opacity:1 !important}.project-info .slick-current .MuiTypography-root{color:#00458f}.ReactModal__Overlay{z-index:99999 !important}.MuiMultiSectionDigitalClock-root::after{height:auto !important}.disable-scroll{overflow-y:hidden !important}.MuiPickersYear-yearButton,.MuiPickersMonth-monthButton{text-align:center}* .react-colorful{width:100% !important}.filter-input-height{height:35px !important;margin-bottom:0 !important;max-width:190px !important}.filter-input-height input,.filter-input-height .MuiInputBase-root{height:35px !important;min-height:35px !important}.filter-input-height .MuiInputBase-input{height:35px !important;padding:8.5px 14px !important}.filter-input-height .MuiFormControl-root{height:35px !important;margin-bottom:0 !important;max-width:190px !important}.ag-cell-centered{display:flex !important;justify-content:center !important;align-items:center !important}.ag-cell-centered .ag-selection-checkbox{margin:0 auto !important}