/* =========================================================
   SkyWest Virtual Crew Center Theme
   Full CSS Replacement
   Fixes:
   - Dark crew center styling
   - Dropdown layering
   - DBasic pages
   - Profile edit white-on-white form boxes
   - Map / Leaflet popup readability
   ========================================================= */

:root {
  --skw-bg: #050b14;
  --skw-bg-2: #081426;
  --skw-card: rgba(10, 24, 40, 0.92);
  --skw-card-alt: rgba(13, 31, 52, 0.96);
  --skw-header: #07111f;
  --skw-border: rgba(142, 199, 255, 0.12);
  --skw-border-strong: rgba(142, 199, 255, 0.22);
  --skw-text: #eaf6ff;
  --skw-muted: rgba(234, 246, 255, 0.78);
  --skw-link: #8ec7ff;
  --skw-link-hover: #ffffff;
  --skw-blue: #0e67b1;
  --skw-blue-2: #38a3ff;
}

/* =========================================================
   Global Page
   ========================================================= */

html,
body,
#page-container {
  min-height: 100%;
  background:
    radial-gradient(circle at top left, rgba(14, 103, 177, 0.22), transparent 32%),
    radial-gradient(circle at top right, rgba(56, 163, 255, 0.12), transparent 28%),
    linear-gradient(135deg, var(--skw-bg) 0%, var(--skw-bg-2) 45%, #101827 100%) !important;
  color: var(--skw-text) !important;
  font-family: "Lato", Arial, sans-serif !important;
  overflow-x: hidden !important;
}

#page-contents {
  background: transparent !important;
  color: var(--skw-text) !important;
  padding-top: 82px !important;
  padding-bottom: 70px !important;
  position: relative !important;
  z-index: 1 !important;
}

/* =========================================================
   Navbar / Dropdowns
   ========================================================= */

#Dispo_NavBar,
.skw-top-navbar,
.navbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 2147483647 !important;
  background: rgba(5, 11, 20, 0.98) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45) !important;
  overflow: visible !important;
  padding-top: 0 !important;
  padding-bottom: 4px !important;
}

#Dispo_NavBar,
#Dispo_NavBar *,
#Dispo_NavBar .container-fluid,
#Dispo_NavBar .navbar-collapse,
#Dispo_NavBar .navbar-nav,
#Dispo_NavBar .nav-item,
#Dispo_NavBar .dropdown {
  overflow: visible !important;
}

#Dispo_NavBar .navbar-brand,
#Dispo_NavBar .nav-link,
#Dispo_NavBar a {
  color: rgba(255, 255, 255, 0.90) !important;
  font-weight: 800 !important;
}

#Dispo_NavBar .nav-link:hover,
#Dispo_NavBar .nav-link.active,
#Dispo_NavBar a:hover {
  color: #ffffff !important;
}

#Dispo_NavBar .dropdown-menu,
.dropdown-menu {
  position: absolute !important;
  z-index: 2147483647 !important;
  background: #081426 !important;
  background-color: #081426 !important;
  border: 1px solid rgba(142, 199, 255, 0.18) !important;
  border-radius: 14px !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.85) !important;
  min-width: 240px !important;
  padding: 8px !important;
  color: var(--skw-text) !important;
}

.dropdown-menu.show {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.dropdown-item {
  color: rgba(255, 255, 255, 0.90) !important;
  border-radius: 10px !important;
  padding: 9px 12px !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: rgba(14, 103, 177, 0.45) !important;
  color: #ffffff !important;
}

/* =========================================================
   Cards / Panels / Widgets
   ========================================================= */

#page-contents .card,
#page-contents .card-body,
#page-contents .panel,
#page-contents .panel-body,
#page-contents .widget,
#page-contents .widget-body,
#page-contents .list-group,
#page-contents .list-group-item,
#page-contents .modal-content,
#page-contents .table-responsive,
.card,
.card-body,
.panel,
.panel-body,
.widget,
.widget-body,
.list-group,
.list-group-item,
.modal-content,
.table-responsive {
  background: var(--skw-card) !important;
  background-color: var(--skw-card) !important;
  border-color: var(--skw-border) !important;
  color: var(--skw-text) !important;
}

#page-contents .card,
#page-contents .panel,
#page-contents .widget,
#page-contents .modal-content {
  border: 1px solid var(--skw-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.30) !important;
}

#page-contents .card-header,
#page-contents .card-footer,
#page-contents .panel-heading,
#page-contents .panel-footer,
#page-contents .widget-header,
#page-contents .modal-header,
#page-contents .modal-footer,
#page-contents .bg-primary,
#page-contents .bg-info,
#page-contents .bg-secondary,
#page-contents .text-bg-primary,
#page-contents .text-bg-info,
#page-contents .text-bg-secondary {
  background: var(--skw-header) !important;
  background-color: var(--skw-header) !important;
  color: #ffffff !important;
  border-color: var(--skw-border) !important;
}

/* =========================================================
   Text / Links
   ========================================================= */

#page-contents,
#page-contents p,
#page-contents span,
#page-contents small,
#page-contents label,
#page-contents div,
#page-contents td,
#page-contents th {
  color: var(--skw-muted) !important;
}

#page-contents h1,
#page-contents h2,
#page-contents h3,
#page-contents h4,
#page-contents h5,
#page-contents h6,
#page-contents .card-title {
  color: #ffffff !important;
  font-weight: 800 !important;
}

#page-contents a,
a {
  color: var(--skw-link) !important;
  text-decoration: none !important;
}

#page-contents a:hover,
a:hover {
  color: var(--skw-link-hover) !important;
}

#page-contents .text-dark,
#page-contents .text-black,
#page-contents .text-muted,
#page-contents .text-body,
#page-contents .text-secondary {
  color: var(--skw-muted) !important;
}

/* =========================================================
   Tables / DBasic Pages
   ========================================================= */

#page-contents .table,
#page-contents table,
.table,
table {
  --bs-table-color: var(--skw-text) !important;
  --bs-table-bg: var(--skw-card) !important;
  --bs-table-striped-color: var(--skw-text) !important;
  --bs-table-striped-bg: var(--skw-card-alt) !important;
  --bs-table-hover-color: #ffffff !important;
  --bs-table-hover-bg: rgba(14, 103, 177, 0.22) !important;
  --bs-table-border-color: rgba(142, 199, 255, 0.10) !important;

  color: var(--skw-text) !important;
  background: var(--skw-card) !important;
  background-color: var(--skw-card) !important;
  border-color: rgba(142, 199, 255, 0.10) !important;
}

#page-contents .table > :not(caption) > * > *,
#page-contents table > :not(caption) > * > *,
#page-contents table td,
#page-contents table th,
.table > :not(caption) > * > *,
table > :not(caption) > * > *,
table td,
table th {
  color: var(--skw-text) !important;
  background-color: var(--skw-card) !important;
  border-color: rgba(142, 199, 255, 0.10) !important;
}

#page-contents .table thead > tr > *,
#page-contents table thead > tr > *,
#page-contents table thead th,
.table thead > tr > *,
table thead > tr > *,
table thead th {
  background: var(--skw-header) !important;
  background-color: var(--skw-header) !important;
  color: var(--skw-link) !important;
  font-weight: 800 !important;
}

#page-contents .table tbody tr:nth-child(even) > *,
#page-contents table tbody tr:nth-child(even) > *,
.table tbody tr:nth-child(even) > *,
table tbody tr:nth-child(even) > * {
  background-color: var(--skw-card-alt) !important;
}

#page-contents .table tbody tr:hover > *,
#page-contents table tbody tr:hover > *,
.table tbody tr:hover > *,
table tbody tr:hover > * {
  background-color: rgba(14, 103, 177, 0.22) !important;
  color: #ffffff !important;
}

#page-contents table *,
#page-contents .table * {
  color: inherit !important;
}

/* =========================================================
   Profile Edit / Forms
   Fixes white boxes and white-on-white text
   ========================================================= */

#page-contents form,
#page-contents fieldset {
  color: var(--skw-text) !important;
}

#page-contents .form-label,
#page-contents .form-check-label,
#page-contents label,
#page-contents legend {
  color: var(--skw-text) !important;
  font-weight: 700 !important;
}

#page-contents input,
#page-contents textarea,
#page-contents select,
#page-contents .form-control,
#page-contents .form-select,
#page-contents .form-control-lg,
#page-contents .form-control-sm,
#page-contents .custom-select,
#page-contents .custom-file-input,
#page-contents .custom-file-label {
  background: rgba(255, 255, 255, 0.08) !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  border: 1px solid var(--skw-border-strong) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

#page-contents input:focus,
#page-contents textarea:focus,
#page-contents select:focus,
#page-contents .form-control:focus,
#page-contents .form-select:focus {
  background: rgba(255, 255, 255, 0.12) !important;
  background-color: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  border-color: rgba(142, 199, 255, 0.75) !important;
  box-shadow: 0 0 0 0.20rem rgba(14, 103, 177, 0.22) !important;
}

#page-contents input::placeholder,
#page-contents textarea::placeholder,
#page-contents .form-control::placeholder {
  color: rgba(255, 255, 255, 0.48) !important;
}

#page-contents input[readonly],
#page-contents textarea[readonly],
#page-contents .form-control[readonly],
#page-contents input:disabled,
#page-contents textarea:disabled,
#page-contents select:disabled,
#page-contents .form-control:disabled,
#page-contents .form-select:disabled {
  background: rgba(255, 255, 255, 0.055) !important;
  background-color: rgba(255, 255, 255, 0.055) !important;
  color: rgba(234, 246, 255, 0.60) !important;
  border-color: rgba(142, 199, 255, 0.10) !important;
}

#page-contents .input-group-text {
  background: var(--skw-header) !important;
  background-color: var(--skw-header) !important;
  color: var(--skw-text) !important;
  border-color: var(--skw-border-strong) !important;
}

#page-contents .form-text,
#page-contents .help-block,
#page-contents .invalid-feedback,
#page-contents .valid-feedback {
  color: var(--skw-muted) !important;
}

#page-contents .form-check-input {
  background-color: rgba(255, 255, 255, 0.12) !important;
  border-color: var(--skw-border-strong) !important;
}

#page-contents .form-check-input:checked {
  background-color: var(--skw-blue) !important;
  border-color: var(--skw-blue-2) !important;
}

/* Chrome autofill fix */
#page-contents input:-webkit-autofill,
#page-contents input:-webkit-autofill:hover,
#page-contents input:-webkit-autofill:focus,
#page-contents textarea:-webkit-autofill,
#page-contents textarea:-webkit-autofill:hover,
#page-contents textarea:-webkit-autofill:focus,
#page-contents select:-webkit-autofill,
#page-contents select:-webkit-autofill:hover,
#page-contents select:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 0 0px 1000px rgba(10, 24, 40, 0.98) inset !important;
  transition: background-color 9999s ease-in-out 0s !important;
}

/* Native dropdown options */
#page-contents select option,
#page-contents .form-select option {
  background: #081426 !important;
  background-color: #081426 !important;
  color: #ffffff !important;
}

/* =========================================================
   Select2 Fix
   Profile edit often uses Select2; this fixes white boxes
   ========================================================= */

#page-contents .select2-container,
#page-contents .select2-container * {
  color: #ffffff !important;
}

#page-contents .select2-container--default .select2-selection--single,
#page-contents .select2-container--default .select2-selection--multiple {
  background: rgba(255, 255, 255, 0.08) !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid var(--skw-border-strong) !important;
  border-radius: 10px !important;
  min-height: 38px !important;
  color: #ffffff !important;
}

#page-contents .select2-container--default .select2-selection--single .select2-selection__rendered,
#page-contents .select2-container--default .select2-selection--multiple .select2-selection__rendered {
  color: #ffffff !important;
  line-height: 36px !important;
}

#page-contents .select2-container--default .select2-selection--single .select2-selection__placeholder,
#page-contents .select2-container--default .select2-selection--multiple .select2-selection__placeholder {
  color: rgba(255, 255, 255, 0.48) !important;
}

#page-contents .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: #ffffff transparent transparent transparent !important;
}

.select2-dropdown,
.select2-container--default .select2-dropdown {
  background: #081426 !important;
  background-color: #081426 !important;
  border: 1px solid var(--skw-border-strong) !important;
  color: #ffffff !important;
  z-index: 2147483647 !important;
}

.select2-search--dropdown,
.select2-search__field {
  background: #0f1f33 !important;
  background-color: #0f1f33 !important;
  color: #ffffff !important;
  border-color: var(--skw-border-strong) !important;
}

.select2-results__option {
  background: #081426 !important;
  background-color: #081426 !important;
  color: #ffffff !important;
}

.select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: rgba(14, 103, 177, 0.55) !important;
  background-color: rgba(14, 103, 177, 0.55) !important;
  color: #ffffff !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
  background: rgba(56, 163, 255, 0.22) !important;
  background-color: rgba(56, 163, 255, 0.22) !important;
  color: #ffffff !important;
}

/* =========================================================
   Date picker / Flatpickr / JQuery UI if present
   ========================================================= */

.flatpickr-calendar,
.ui-datepicker,
.datepicker,
.bootstrap-datetimepicker-widget {
  background: #081426 !important;
  background-color: #081426 !important;
  color: #ffffff !important;
  border: 1px solid var(--skw-border-strong) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45) !important;
}

.flatpickr-calendar *,
.ui-datepicker *,
.datepicker *,
.bootstrap-datetimepicker-widget * {
  color: #ffffff !important;
}

/* =========================================================
   Buttons
   ========================================================= */

#page-contents .btn,
#page-contents button,
#page-contents input[type="submit"] {
  border-radius: 999px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

#page-contents .btn-primary,
#page-contents .btn-info,
#page-contents .btn-success,
#page-contents input[type="submit"] {
  background: linear-gradient(135deg, var(--skw-blue), var(--skw-blue-2)) !important;
  border-color: rgba(142, 199, 255, 0.38) !important;
  color: #ffffff !important;
}

#page-contents .btn-primary:hover,
#page-contents .btn-info:hover,
#page-contents .btn-success:hover,
#page-contents input[type="submit"]:hover {
  background: linear-gradient(135deg, #1784df, #63b9ff) !important;
  color: #ffffff !important;
}

#page-contents .btn-secondary,
#page-contents .btn-light,
#page-contents .btn-dark,
#page-contents .btn-outline-primary,
#page-contents .btn-outline-secondary,
#page-contents .btn-outline-light {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
}

#page-contents .btn-danger {
  background: #b91c1c !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
}

#page-contents .btn-warning {
  background: #ca8a04 !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #111827 !important;
}

/* =========================================================
   Badges / Alerts / Tabs
   ========================================================= */

#page-contents .badge,
#page-contents .label {
  color: #ffffff !important;
  font-weight: 800 !important;
}

#page-contents .badge.bg-warning,
#page-contents .bg-warning {
  color: #111827 !important;
}

#page-contents .alert {
  border-radius: 14px !important;
  border-color: var(--skw-border) !important;
  color: #ffffff !important;
}

#page-contents .nav-tabs {
  border-color: var(--skw-border) !important;
}

#page-contents .nav-tabs .nav-link {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--skw-link) !important;
  border-color: var(--skw-border) !important;
}

#page-contents .nav-tabs .nav-link.active {
  background: var(--skw-header) !important;
  color: #ffffff !important;
  border-color: var(--skw-border-strong) !important;
}

/* =========================================================
   Footer
   ========================================================= */

#footer {
  background: transparent !important;
  padding-bottom: 18px !important;
}

#footer .card {
  background: rgba(5, 11, 20, 0.88) !important;
  border-radius: 16px !important;
  color: rgba(255, 255, 255, 0.78) !important;
}

/* =========================================================
   Map / Leaflet Fixes
   Fixes unreadable flight data popup/card
   ========================================================= */

/* Keep map stacking sane */
.leaflet-container,
.leaflet-pane,
.leaflet-map-pane,
.leaflet-tile-pane,
.leaflet-overlay-pane,
.leaflet-marker-pane,
.leaflet-tooltip-pane,
.leaflet-popup-pane,
.leaflet-control-container,
.leaflet-top,
.leaflet-bottom,
.leaflet-control,
#map,
.map {
  z-index: 1 !important;
}

/* Do NOT recolor map tiles/images */
#page-contents .leaflet-tile,
#page-contents .leaflet-marker-icon,
#page-contents .leaflet-marker-shadow,
#page-contents .leaflet-image-layer,
#page-contents .leaflet-tile-container img,
#page-contents .leaflet-pane img {
  filter: none !important;
  color: initial !important;
}

/* Main map background */
#page-contents .leaflet-container,
#page-contents #map,
#page-contents .map {
  background: #07111f !important;
}

/* Popup shell */
#page-contents .leaflet-popup-content-wrapper,
#page-contents .leaflet-popup-tip {
  background: #07111f !important;
  background-color: #07111f !important;
  color: #eaf6ff !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.70) !important;
}

/* Popup content */
#page-contents .leaflet-popup-content {
  background: transparent !important;
  color: #eaf6ff !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

/* Force popup text readable */
#page-contents .leaflet-popup-content,
#page-contents .leaflet-popup-content *,
#page-contents .leaflet-popup-content div,
#page-contents .leaflet-popup-content span,
#page-contents .leaflet-popup-content p,
#page-contents .leaflet-popup-content small,
#page-contents .leaflet-popup-content strong,
#page-contents .leaflet-popup-content label,
#page-contents .leaflet-popup-content td,
#page-contents .leaflet-popup-content th,
#page-contents .leaflet-popup-content h1,
#page-contents .leaflet-popup-content h2,
#page-contents .leaflet-popup-content h3,
#page-contents .leaflet-popup-content h4,
#page-contents .leaflet-popup-content h5,
#page-contents .leaflet-popup-content h6 {
  color: #eaf6ff !important;
}

/* Popup headings */
#page-contents .leaflet-popup-content h1,
#page-contents .leaflet-popup-content h2,
#page-contents .leaflet-popup-content h3,
#page-contents .leaflet-popup-content h4,
#page-contents .leaflet-popup-content h5,
#page-contents .leaflet-popup-content h6,
#page-contents .leaflet-popup-content strong {
  color: #ffffff !important;
}

/* Muted popup labels */
#page-contents .leaflet-popup-content .text-muted,
#page-contents .leaflet-popup-content .muted,
#page-contents .leaflet-popup-content small {
  color: #a9bfd6 !important;
}

/* Popup card/table areas */
#page-contents .leaflet-popup-content .card,
#page-contents .leaflet-popup-content .card-body,
#page-contents .leaflet-popup-content .card-header,
#page-contents .leaflet-popup-content .panel,
#page-contents .leaflet-popup-content .panel-body,
#page-contents .leaflet-popup-content .table,
#page-contents .leaflet-popup-content table,
#page-contents .leaflet-popup-content tbody,
#page-contents .leaflet-popup-content tr,
#page-contents .leaflet-popup-content td,
#page-contents .leaflet-popup-content th {
  background: #0b1728 !important;
  background-color: #0b1728 !important;
  color: #eaf6ff !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
}

/* Popup links/buttons */
#page-contents .leaflet-popup-content a {
  color: #8ec7ff !important;
}

#page-contents .leaflet-popup-content a:hover {
  color: #ffffff !important;
}

#page-contents .leaflet-popup-content .btn,
#page-contents .leaflet-popup-content button {
  background: #0e67b1 !important;
  color: #ffffff !important;
  border: 1px solid rgba(142, 199, 255, 0.35) !important;
}

/* Popup close button */
#page-contents .leaflet-container a.leaflet-popup-close-button {
  color: #ffffff !important;
}

#page-contents .leaflet-container a.leaflet-popup-close-button:hover {
  color: #38a3ff !important;
}

/* Leaflet zoom/layer controls */
#page-contents .leaflet-control-layers,
#page-contents .leaflet-bar a,
#page-contents .leaflet-bar a:hover {
  background: #0b1728 !important;
  background-color: #0b1728 !important;
  color: #eaf6ff !important;
  border-color: rgba(148, 163, 184, 0.25) !important;
}

/* Weather layer/card control text */
#page-contents .leaflet-control,
#page-contents .leaflet-control * {
  color: #eaf6ff !important;
}

#page-contents .leaflet-control button,
#page-contents .leaflet-control input,
#page-contents .leaflet-control select {
  color: #111827 !important;
}

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 991px) {
  #page-contents {
    padding-top: 90px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  #Dispo_NavBar .navbar-collapse {
    background: rgba(5, 11, 20, 0.98) !important;
    border-radius: 0 0 18px 18px !important;
    padding: 12px !important;
  }

  #Dispo_NavBar .dropdown-menu {
    position: static !important;
    box-shadow: none !important;
    margin: 6px 0 10px 0 !important;
  }

  #footer .row {
    display: block !important;
    text-align: center !important;
  }

  #footer .col {
    text-align: center !important;
    margin-bottom: 8px;
  }
}