/*
 * Observatory: a second, independent layer after Orbital Plus.
 * Surface decoration is painted behind content. Never clip or mask a data panel.
 */
:root {
  --obs-page: #eaf0f8;
  --obs-panel: #f9fbff;
  --obs-panel-bottom: #edf3fa;
  --obs-border: #bacbdc;
  --obs-ink: #22374c;
  --obs-muted: #52677e;
  --obs-focus: #2a718c;
  --obs-focus-ring: rgba(42, 113, 140, .17);
  --obs-field: #eff4fa;
  --obs-field-hover: #e6eff8;
  --obs-edge: rgba(87, 121, 162, .35);
  --obs-orbit: rgba(78, 122, 165, .12);
  --obs-fiber: rgba(79, 111, 148, .025);
  --obs-dot: rgba(96, 126, 165, .055);
  --obs-star: rgba(71, 111, 163, .28);
  --obs-star-soft: rgba(109, 137, 179, .16);
  --obs-nebula-blue: rgba(104, 143, 201, .13);
  --obs-nebula-teal: rgba(99, 160, 168, .09);
  --obs-nebula-warm: rgba(211, 172, 139, .075);
  --obs-shadow: 0 8px 24px rgba(50, 77, 110, .065), inset 0 1px rgba(255, 255, 255, .95);
  --obs-scroll-thumb: #879db5;
  --obs-scroll-track: #e9f0f7;
  --obs-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.76' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  --plus-panel: var(--obs-panel);
  --plus-panel-end: var(--obs-panel-bottom);
  --plus-border: var(--obs-border);
  --plus-ink: var(--obs-ink);
  --plus-muted: var(--obs-muted);
  --plus-field: var(--obs-field);
  --plus-hover: var(--obs-field-hover);
  --plus-cyan: var(--obs-focus);
  --plus-ring: var(--obs-focus-ring);
}
html.dark {
  --obs-page: #17263b;
  --obs-panel: #21354c;
  --obs-panel-bottom: #1c2d43;
  --obs-border: #4a647c;
  --obs-ink: #edf3f8;
  --obs-muted: #bbccdd;
  --obs-focus: #9cdfe4;
  --obs-focus-ring: rgba(156, 223, 228, .19);
  --obs-field: #1a2c41;
  --obs-field-hover: #2a425b;
  --obs-edge: rgba(151, 196, 222, .44);
  --obs-orbit: rgba(162, 200, 230, .13);
  --obs-fiber: rgba(163, 198, 228, .025);
  --obs-dot: rgba(195, 218, 237, .055);
  --obs-star: rgba(190, 215, 243, .36);
  --obs-star-soft: rgba(165, 192, 225, .19);
  --obs-nebula-blue: rgba(115, 151, 214, .13);
  --obs-nebula-teal: rgba(108, 174, 182, .095);
  --obs-nebula-warm: rgba(197, 156, 135, .045);
  --obs-shadow: 0 10px 26px rgba(8, 20, 37, .16), inset 0 1px rgba(215, 235, 252, .09);
  --obs-scroll-thumb: #8aa8c3;
  --obs-scroll-track: #1b2c41;
  --plus-panel: var(--obs-panel);
  --plus-panel-end: var(--obs-panel-bottom);
  --plus-border: var(--obs-border);
  --plus-ink: var(--obs-ink);
  --plus-muted: var(--obs-muted);
  --plus-field: var(--obs-field);
  --plus-hover: var(--obs-field-hover);
  --plus-cyan: var(--obs-focus);
  --plus-ring: var(--obs-focus-ring);
}

/* Bug fix: the base theme's overflow shorthand hid the vertical scroll axis.
 * Do not change heights or the outer .table-scroll-container layout contract.
 */
html body #app .table-wrapper,
html body #app .table-container,
html body .modal-overlay .table-wrapper,
html body .modal-overlay .table-container {
  overflow-x: auto !important;
  overflow-y: auto !important;
  scrollbar-width: auto !important;
  scrollbar-color: var(--obs-scroll-thumb) var(--obs-scroll-track) !important;
}
html body #app .table-wrapper::-webkit-scrollbar,
html body #app .table-container::-webkit-scrollbar,
html body .modal-overlay .table-wrapper::-webkit-scrollbar { width: 12px !important; height: 12px !important; display: block !important; }
html body #app .table-wrapper::-webkit-scrollbar-track,
html body #app .table-container::-webkit-scrollbar-track { background: var(--obs-scroll-track) !important; border-radius: 10px; }
html body #app .table-wrapper::-webkit-scrollbar-thumb,
html body #app .table-container::-webkit-scrollbar-thumb {
  background: var(--obs-scroll-thumb) !important;
  border: 3px solid var(--obs-scroll-track);
  border-radius: 10px;
}
html body #app .table-wrapper::-webkit-scrollbar-thumb:hover,
html body #app .table-container::-webkit-scrollbar-thumb:hover { background: var(--obs-focus) !important; }
html body #app .table-wrapper::-webkit-scrollbar-corner { background: var(--obs-scroll-track) !important; }

/* Fixed, sparse sky texture: no canvas loop, moving text, or pointer overlay. */
html body:has(#app .sidebar),
html.dark body:has(#app .sidebar) {
  background-color: var(--obs-page);
  background-image:
    radial-gradient(circle at 21px 29px, var(--obs-star) 0 .8px, transparent 1.6px),
    radial-gradient(circle at 142px 90px, var(--obs-star-soft) 0 1px, transparent 2px),
    radial-gradient(circle at 57px 171px, var(--obs-star) 0 .6px, transparent 1.4px),
    radial-gradient(ellipse at 12% 8%, var(--obs-nebula-blue), transparent 57%),
    radial-gradient(ellipse at 88% 60%, var(--obs-nebula-teal), transparent 53%),
    radial-gradient(ellipse at 50% 95%, var(--obs-nebula-warm), transparent 48%);
  background-size: 263px 237px, 397px 337px, 503px 411px, 100% 100%, 100% 100%, 100% 100%;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
  background-attachment: fixed;
}

/* Cover the two real panel families: .card and utility-class surfaces used by
 * the operations views. A solid background-color remains even if images fail.
 */
html body #app main :is(
  .card,
  .stat-card,
  .card-glass,
  .bg-white.rounded-3xl.ring-1,
  .bg-white.rounded-2xl.shadow-sm,
  .bg-white.rounded-xl.shadow-sm
) {
  --obs-panel-accent: var(--obs-focus);
  background-color: var(--obs-panel) !important;
  background-image:
    radial-gradient(ellipse 126px 98px at 100% 0%, transparent 71%, var(--obs-orbit) 72%, transparent 73.5%),
    radial-gradient(ellipse 154px 123px at 100% 0%, transparent 71%, var(--obs-orbit) 72%, transparent 73%),
    linear-gradient(90deg, transparent, var(--obs-edge) 18%, var(--obs-edge) 82%, transparent),
    repeating-linear-gradient(116deg, transparent 0 11px, var(--obs-fiber) 11px 11.5px, transparent 11.5px 23px),
    var(--obs-noise),
    linear-gradient(155deg, var(--obs-panel), var(--obs-panel-bottom)) !important;
  background-size: auto, auto, calc(100% - 36px) 1px, auto, 160px 160px, auto !important;
  background-position: 0 0, 0 0, center 6px, 0 0, 0 0, 0 0 !important;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat !important;
  border: 1px solid var(--obs-border) !important;
  border-radius: 15px 21px 15px 15px !important;
  box-shadow: var(--obs-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
}
html body #app main :is(.card,.stat-card,.bg-white.rounded-3xl.ring-1,.bg-white.rounded-2xl.shadow-sm,.bg-white.rounded-xl.shadow-sm):hover {
  border-color: color-mix(in srgb, var(--obs-border) 75%, var(--obs-focus)) !important;
  box-shadow: var(--obs-shadow) !important;
  transform: none !important;
}

/* Chart cards: a perforated edge and corner arcs, without clipping the canvas.
 * A repeating background paints the edge only; it never alters the box geometry.
 */
html body #app main .grid > .card:is(.flex.items-center.gap-3,:has(> .flex.items-center.gap-3)):has(canvas),
html body #app main :is(.card,.bg-white.rounded-3xl.ring-1,.bg-white.rounded-2xl.shadow-sm):has(canvas) {
  background-color: var(--obs-panel) !important;
  background-image:
    repeating-linear-gradient(90deg, var(--obs-edge) 0 2px, transparent 2px 8px),
    radial-gradient(ellipse 130px 100px at 100% 0%, transparent 72%, var(--obs-orbit) 73%, transparent 74.5%),
    radial-gradient(ellipse 162px 126px at 100% 0%, transparent 72%, var(--obs-orbit) 73%, transparent 74%),
    var(--obs-noise),
    linear-gradient(160deg, var(--obs-panel), var(--obs-panel-bottom)) !important;
  background-size: calc(100% - 44px) 2px, auto, auto, 160px 160px, auto !important;
  background-position: center calc(100% - 7px), 0 0, 0 0, 0 0, 0 0 !important;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, no-repeat !important;
  border: 1px solid var(--obs-border) !important;
  border-top: 2px solid color-mix(in srgb, var(--obs-focus) 40%, var(--obs-border)) !important;
  border-radius: 17px !important;
}

/* Keep KPI colors, but exclude chart cards which also contain flex icon rows. */
html body #app main .grid > .card:is(.flex.items-center.gap-3,:has(> .flex.items-center.gap-3)):not(:has(canvas)),
html body #app main .stat-card:not(:has(canvas)) {
  background-color: var(--obs-panel) !important;
  background-image:
    radial-gradient(ellipse 98px 75px at 100% 0%, transparent 72%, var(--obs-orbit) 73%, transparent 75%),
    radial-gradient(ellipse at 100% 0%, var(--plus-kpi-wash), transparent 78%),
    var(--obs-noise),
    linear-gradient(145deg, var(--obs-panel), var(--obs-panel-bottom)) !important;
  background-size: auto, auto, 160px 160px, auto !important;
  background-position: 0 0, 0 0, 0 0, 0 0 !important;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat !important;
  border-top: 2px solid var(--plus-kpi, var(--obs-focus)) !important;
  border-radius: 12px 22px 12px 12px !important;
}

/* The data grid itself stays solid and plain. Only its frame has decoration. */
html body #app main .table-wrapper,
html body #app main .table-container,
html body .modal-overlay .table-wrapper {
  background-color: var(--obs-panel) !important;
  background-image: none !important;
  border-color: var(--obs-border) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.1) !important;
}
html body #app .table-wrapper thead th,
html body #app .table thead th,
html body #app .table-wrapper .table-header {
  background-color: var(--obs-field) !important;
  background-image: none !important;
  color: var(--obs-muted) !important;
  border-bottom-color: var(--obs-border) !important;
}
html body #app .table-wrapper tbody tr:hover,
html body #app .table tbody tr:hover { background-color: var(--obs-field-hover) !important; }

/* Navigation and chrome carry only a little of the sky texture. */
html body #app .sidebar,
html.dark body #app .sidebar {
  background-color: var(--obs-panel) !important;
  background-image:
    radial-gradient(circle at 30px 115px, var(--obs-star-soft) 0 1px, transparent 2px),
    linear-gradient(170deg, var(--obs-panel), var(--obs-panel-bottom)) !important;
  background-size: 157px 229px, auto !important;
  border-right-color: var(--obs-border) !important;
}
html body #app header.glass,
html.dark body #app header.glass {
  background: color-mix(in srgb, var(--obs-panel) 96%, transparent) !important;
  border-bottom-color: var(--obs-border) !important;
}

/* Controls: instrument-panel seams, inset fields and a quiet illuminated edge.
 * No geometry-changing clipping, added arrows, or generated text.
 */
html body :is(#app,.modal-overlay) :is(.btn,.select-trigger,.date-picker-trigger) {
  border-radius: 8px 13px 8px 8px !important;
  transform: none !important;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}
html body :is(#app,.modal-overlay) .btn-primary,
html body :is(#app,.modal-overlay) .btn-primary:hover:not(:disabled) {
  background-color: #ab4f2e !important;
  background-image:
    linear-gradient(115deg, transparent 0 68%, rgba(255,255,255,.1) 68% 69%, transparent 69% 74%, rgba(255,255,255,.06) 74% 75%, transparent 75%),
    linear-gradient(180deg, #b85c36, #9d4226) !important;
  color: #fff !important;
  border: 1px solid #a3482a !important;
  box-shadow: inset 0 1px rgba(255,255,255,.3), inset 0 -2px rgba(81,28,15,.16), 0 3px 9px rgba(144,69,40,.14) !important;
  filter: none !important;
}
html.dark body :is(#app,.modal-overlay) .btn-primary,
html.dark body :is(#app,.modal-overlay) .btn-primary:hover:not(:disabled) {
  background-color: #dfa976 !important;
  background-image:
    linear-gradient(115deg, transparent 0 68%, rgba(255,255,255,.22) 68% 69%, transparent 69% 74%, rgba(255,255,255,.13) 74% 75%, transparent 75%),
    linear-gradient(180deg, #f1c39a, #dfab7b) !important;
  color: #2b2018 !important;
  border-color: #eac09b !important;
  box-shadow: inset 0 1px rgba(255,255,255,.38), inset 0 -2px rgba(103,68,43,.18), 0 3px 12px rgba(8,20,37,.16) !important;
}
html body :is(#app,.modal-overlay) .btn-primary:hover:not(:disabled) { filter: brightness(1.06) !important; }
html body :is(#app,.modal-overlay) .btn-primary:active:not(:disabled) { box-shadow: inset 0 2px 5px rgba(38,24,17,.2) !important; }
html body :is(#app,.modal-overlay) .btn-secondary,
html body :is(#app,.modal-overlay) .btn-secondary:hover:not(:disabled) {
  background-color: var(--obs-panel) !important;
  background-image:
    linear-gradient(120deg, transparent 0 85%, var(--obs-orbit) 85% 86%, transparent 86%),
    linear-gradient(180deg, var(--obs-panel), var(--obs-field)) !important;
  color: var(--obs-ink) !important;
  border: 1px solid var(--obs-border) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.2), inset 0 -2px var(--obs-fiber), 0 2px 5px rgba(32,57,87,.045) !important;
}
html body :is(#app,.modal-overlay) .btn-secondary:hover:not(:disabled) {
  border-color: var(--obs-focus) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.16), 0 0 0 2px var(--obs-focus-ring) !important;
}
html body :is(#app,.modal-overlay) .btn-ghost:hover:not(:disabled) { background: var(--obs-field-hover) !important; color: var(--obs-focus) !important; }
html body :is(#app,.modal-overlay) .btn-danger { background: #a73f58 !important; color: white !important; border: 1px solid #9b3a51 !important; box-shadow: inset 0 1px rgba(255,255,255,.16) !important; }

html body #app :is(.input,input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="search"],input[type="url"],textarea,select),
html body .modal-overlay .modal-content :is(.input,input[type="text"],input[type="email"],input[type="password"],input[type="number"],textarea,select),
html body :is(.select-dropdown-portal,.select-dropdown) .select-search-input {
  background-color: var(--obs-field) !important;
  background-image: linear-gradient(180deg, rgba(44,77,110,.035), transparent 7px) !important;
  color: var(--obs-ink) !important;
  border: 1px solid var(--obs-border) !important;
  border-bottom: 2px solid color-mix(in srgb, var(--obs-border) 78%, var(--obs-focus)) !important;
  border-radius: 9px !important;
  box-shadow: inset 0 1px 3px rgba(26,54,83,.045) !important;
}
html body #app :is(.input,input,textarea,select):focus,
html body .modal-overlay .modal-content :is(.input,input,textarea,select):focus,
html body :is(.select-dropdown-portal,.select-dropdown) .select-search-input:focus {
  background-color: var(--obs-panel) !important;
  border-color: var(--obs-focus) !important;
  box-shadow: 0 0 0 3px var(--obs-focus-ring), inset 0 1px rgba(255,255,255,.12) !important;
  outline: 2px solid transparent !important;
}
html body :is(#app,.modal-overlay) :is(.select-trigger,.date-picker-trigger) {
  background-color: var(--obs-panel) !important;
  background-image: linear-gradient(90deg, transparent calc(100% - 35px), var(--obs-field-hover) calc(100% - 35px)) !important;
  color: var(--obs-ink) !important;
  border: 1px solid var(--obs-border) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.12), 0 2px 4px rgba(26,54,83,.04) !important;
}
html body :is(#app,.modal-overlay) :is(.select-trigger,.date-picker-trigger):hover:not(:disabled),
html body :is(#app,.modal-overlay) .select-trigger[aria-expanded="true"],
html body :is(#app,.modal-overlay) :is(.select-trigger,.date-picker-trigger):focus-visible {
  border-color: var(--obs-focus) !important;
  box-shadow: 0 0 0 3px var(--obs-focus-ring) !important;
}
html body .select-dropdown-portal,
html body :is(#app,.modal-overlay) :is(.select-dropdown,.dropdown,.date-picker-panel,.date-picker-dropdown) {
  background-color: var(--obs-panel) !important;
  background-image: linear-gradient(90deg, transparent, var(--obs-edge), transparent) !important;
  background-size: calc(100% - 22px) 1px !important;
  background-position: center 4px !important;
  background-repeat: no-repeat !important;
  border: 1px solid var(--obs-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 15px 36px rgba(27,49,75,.2), inset 0 1px rgba(255,255,255,.12) !important;
}
html body :is(.select-dropdown-portal,.select-dropdown) .select-option { border-radius: 8px; color: var(--obs-ink) !important; }
html body :is(.select-dropdown-portal,.select-dropdown) .select-option:hover { background: var(--obs-field-hover) !important; }
html body :is(.select-dropdown-portal,.select-dropdown) .select-option-selected {
  background: color-mix(in srgb, var(--obs-focus) 12%, var(--obs-panel)) !important;
  color: var(--obs-focus) !important;
  box-shadow: inset 3px 0 var(--obs-focus), inset 0 1px rgba(255,255,255,.08) !important;
}
html body .modal-overlay .modal-content,
html body #app .modal-content {
  background-color: var(--obs-panel) !important;
  background-image: var(--obs-noise) !important;
  border-color: var(--obs-border) !important;
  border-top-color: var(--obs-focus) !important;
  box-shadow: 0 24px 70px rgba(15,35,60,.28) !important;
}
html body :is(#app,.modal-overlay) :is(.modal-header,.modal-footer) { background-color: var(--obs-panel-bottom) !important; border-color: var(--obs-border) !important; }

/* State overrides last: validation, disabled, and keyboard focus stay distinct. */
html body :is(#app,.modal-overlay) .select-trigger.select-trigger-error,
html body :is(#app,.modal-overlay) :is(input,textarea,select,.input,.select-trigger)[aria-invalid="true"] {
  border-color: var(--cosmic-rose) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cosmic-rose) 16%, transparent) !important;
}
html body :is(#app,.modal-overlay) :is(.btn,.input,.select-trigger,input,textarea,select):disabled,
html body :is(#app,.modal-overlay) .select-trigger.select-trigger-disabled {
  opacity: .6;
  cursor: not-allowed;
  filter: none !important;
  box-shadow: none !important;
}
html body :is(#app,.modal-overlay) :is(button,a,input,select,textarea):focus-visible { outline: 2px solid var(--obs-focus) !important; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  html body :is(#app,.modal-overlay) :is(.btn,.input,.select-trigger,.date-picker-trigger) { transition: none !important; }
}
@media (forced-colors: active) {
  html body #app :is(.card,.stat-card,.table-wrapper,.bg-white.rounded-3xl.ring-1),
  html body .modal-overlay .modal-content { background-image: none !important; border: 1px solid CanvasText !important; }
}