/*
  vUSAF Events - VAM visual alignment
  Updated 2026-07-12

  Uses the same restrained USAF blue, metallic gray, silver, and dark navy
  palette as /vam/css/vusaf_airforce_hud_theme.css. This file changes only
  presentation; no event, mission, permission, or database logic is altered.
*/

:root {
  /* Exact VAM palette */
  --vusaf-bg: #07111f;
  --vusaf-bg-2: #0b1b2e;
  --vusaf-bg-dark: #030914;
  --vusaf-panel: rgba(12, 24, 38, 0.96);
  --vusaf-panel-2: rgba(22, 37, 54, 0.96);
  --vusaf-metal: #6f7f8f;
  --vusaf-silver: #c9d3dc;
  --vusaf-border: rgba(150, 170, 190, 0.34);
  --vusaf-border-soft: rgba(150, 170, 190, 0.20);
  --vusaf-border-strong: rgba(185, 205, 224, 0.52);
  --vusaf-blue: #1c4f82;
  --vusaf-blue-muted: #7da7cf;
  --vusaf-blue-dark: #0b223a;
  --vusaf-cyan: #8edcff;
  --vusaf-cyan-soft: rgba(142, 220, 255, 0.10);
  --vusaf-text: #e5edf5;
  --vusaf-muted: #aebdca;
  --vusaf-white: #ffffff;
  --vusaf-success: #81d99b;
  --vusaf-warning: #ffd166;
  --vusaf-danger: #ff7a70;
  --vusaf-shadow: inset 0 0 0 1px rgba(255,255,255,0.025), 0 12px 28px rgba(0,0,0,0.30);
  --vusaf-shadow-soft: 0 8px 20px rgba(0,0,0,0.24);
  --vusaf-condensed: "Arial Black", Arial, "Segoe UI", sans-serif;
  --vusaf-body: "Segoe UI", Roboto, Arial, sans-serif;

  /* Override the brighter Events dashboard variables */
  --ops-bg: #07111f;
  --ops-bg-soft: #0b1b2e;
  --ops-panel: rgba(12, 24, 38, 0.96);
  --ops-panel-strong: rgba(7, 17, 31, 0.98);
  --ops-line: rgba(150, 170, 190, 0.28);
  --ops-line-strong: rgba(185, 205, 224, 0.46);
  --ops-glow: rgba(142, 220, 255, 0.06);
  --ops-text: #e5edf5;
  --ops-muted: #aebdca;
  --ops-blue: #7da7cf;
  --ops-cyan: #8eb8d8;
  --ops-green: #81d99b;
  --ops-amber: #ffd166;
  --ops-red: #ff7a70;
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--vusaf-body) !important;
}

html,
body,
body#page-top {
  color: var(--vusaf-text) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.022) 0 1px, transparent 1px 64px),
    radial-gradient(circle at 80% 0%, rgba(28,79,130,0.20), transparent 34%),
    linear-gradient(180deg, var(--vusaf-bg) 0%, var(--vusaf-bg-dark) 100%) fixed !important;
}

/* Remove the arcade/neon treatment while retaining subtle depth. */
body::before,
body::after {
  opacity: 0.08 !important;
  filter: none !important;
}

*,
*::before,
*::after {
  text-shadow: none !important;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6,
.navbar-brand,
.ops-brand-title,
.ops-section-title,
.ops-panel-title,
.card-title,
.panel-title,
.modal-title,
.vusaf-brand-title,
.events-brand-title {
  color: var(--vusaf-white) !important;
}

h1,
.ops-brand-title,
.ops-section-title,
.ops-panel-title,
.navbar-brand,
.vusaf-brand-title,
.events-brand-title {
  font-family: var(--vusaf-condensed) !important;
  letter-spacing: 0.045em !important;
}

p,
small,
.small,
.text-muted,
.text-black-50,
.ops-muted,
.vusaf-muted,
.events-muted,
.ops-brand-subtitle,
.ops-shell-user,
.ops-filter-note {
  color: var(--vusaf-muted) !important;
}

a {
  color: var(--vusaf-blue-muted) !important;
}

a:hover,
a:focus {
  color: #ffffff !important;
}

/* Top navigation and sidebar */
.navbar.navbar-dark,
.navbar.bg-dark,
.navbar.static-top,
.topbar,
.vusaf-topbar,
.events-topbar,
.ops-topbar,
.ops-shell,
.ops-menu,
.ops-status,
ul.sidebar,
.sidebar,
.vusaf-sidebar,
.vusaf-sidebar-nav,
.events-sidebar,
.command-sidebar,
.command-panel {
  background: linear-gradient(180deg, rgba(17,31,47,0.98), rgba(7,17,31,0.98)) !important;
  border-color: var(--vusaf-border) !important;
  box-shadow: var(--vusaf-shadow-soft) !important;
}

.navbar.navbar-dark,
.navbar.bg-dark,
.navbar.static-top,
.topbar,
.vusaf-topbar,
.events-topbar {
  border-bottom: 1px solid var(--vusaf-border) !important;
}

.sidebar .nav-link,
.vusaf-sidebar a,
.vusaf-sidebar-nav .nav-link,
.events-sidebar a,
.command-sidebar a,
.command-panel a,
.ops-nav-link,
.ops-action,
.ops-filter-chip,
.ops-home-btn {
  color: var(--vusaf-text) !important;
  background: rgba(255,255,255,0.018) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.sidebar .nav-link:hover,
.sidebar .nav-item.active .nav-link,
.vusaf-sidebar a:hover,
.vusaf-sidebar a.active,
.vusaf-sidebar-nav .nav-link:hover,
.vusaf-sidebar-nav .nav-item.active .nav-link,
.events-sidebar a:hover,
.events-sidebar a.active,
.command-panel a:hover,
.command-panel a.active,
.ops-nav-link:hover,
.ops-nav-link.is-active,
.ops-action:hover,
.ops-filter-chip:hover,
.ops-filter-chip.is-active,
.ops-home-btn:hover {
  color: #ffffff !important;
  background: linear-gradient(90deg, rgba(28,79,130,0.68), rgba(75,95,115,0.36)) !important;
  border-color: rgba(150,170,190,0.38) !important;
  transform: none !important;
  box-shadow: none !important;
}

.dropdown-menu {
  color: var(--vusaf-text) !important;
  background: var(--vusaf-bg-2) !important;
  border: 1px solid var(--vusaf-border) !important;
  box-shadow: var(--vusaf-shadow-soft) !important;
}

.dropdown-item {
  color: var(--vusaf-text) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: #ffffff !important;
  background: rgba(28,79,130,0.62) !important;
}

.dropdown-divider {
  border-color: var(--vusaf-border-soft) !important;
}

/* Shared panels and cards */
.card,
.panel,
.well,
.jumbotron,
.modal-content,
.stat-card,
.metric-card,
.operation-card,
.event-card,
.mission-card,
.vusaf-card,
.events-card,
.ops-card,
.command-card,
.dashboard-card,
.filter-card,
.tool-card,
.ops-panel,
.ops-stat,
.ops-upcoming-link,
.ops-footer,
.table-wrap,
.header {
  color: var(--vusaf-text) !important;
  background: linear-gradient(180deg, rgba(17,31,47,0.98), rgba(7,17,31,0.98)) !important;
  border-color: var(--vusaf-border) !important;
  box-shadow: var(--vusaf-shadow) !important;
}

.card:hover,
.panel:hover,
.operation-card:hover,
.event-card:hover,
.mission-card:hover,
.vusaf-card:hover,
.events-card:hover,
.ops-card:hover,
.ops-stat:hover,
.ops-upcoming-link:hover {
  transform: none !important;
  filter: none !important;
  border-color: var(--vusaf-border-strong) !important;
  box-shadow: var(--vusaf-shadow) !important;
}

.card-header,
.panel-heading,
.modal-header,
.ops-card-header,
.ops-panel-header,
.vusaf-card-header,
.events-card-header {
  color: #ffffff !important;
  background: linear-gradient(90deg, #1c4f82 0%, #263849 52%, #0b223a 100%) !important;
  border-color: var(--vusaf-border) !important;
}

.card-body,
.panel-body,
.modal-body,
.modal-footer,
.ops-card-body,
.vusaf-card-body,
.events-card-body {
  color: var(--vusaf-text) !important;
  background: rgba(6,16,29,0.92) !important;
  border-color: var(--vusaf-border-soft) !important;
}

.close {
  color: #ffffff !important;
  opacity: 0.78 !important;
}

/* Buttons */
.btn,
button,
.filter-btn,
.filter-pill,
.vusaf-btn,
.events-btn,
.ops-btn {
  border-radius: 5px !important;
  text-shadow: none !important;
  filter: none !important;
  transition: background-color .15s ease, border-color .15s ease !important;
}

.btn-primary,
button.btn-primary,
input[type="submit"].btn-primary,
.btn-success,
.btn-info,
.filter-btn.active,
.filter-pill.active,
.vusaf-btn.primary,
.events-btn.primary,
.ops-btn.primary {
  color: #ffffff !important;
  background: linear-gradient(180deg, #2f6f9f 0%, #17446f 100%) !important;
  border-color: rgba(201,211,220,0.52) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10) !important;
}

.btn-primary:hover,
.btn-success:hover,
.btn-info:hover,
.filter-btn.active:hover,
.filter-pill.active:hover {
  color: #ffffff !important;
  background: linear-gradient(180deg, #3b769f 0%, #1c4f82 100%) !important;
  border-color: var(--vusaf-border-strong) !important;
  transform: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10) !important;
}

.btn-secondary,
.btn-default,
.btn-outline-primary,
.btn-outline-secondary,
.btn-warning,
.btn-danger,
.filter-btn,
.filter-pill,
.vusaf-btn,
.events-btn,
.ops-btn {
  color: var(--vusaf-text) !important;
  background: linear-gradient(180deg, #334252 0%, #1b2836 100%) !important;
  border-color: var(--vusaf-border) !important;
  box-shadow: none !important;
}

.btn-danger {
  border-color: rgba(255,122,112,0.48) !important;
}

.btn-warning {
  border-color: rgba(255,209,102,0.44) !important;
}

/* Forms */
.form-control,
.custom-select,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
select,
textarea {
  color: #ffffff !important;
  background: #050d18 !important;
  border: 1px solid rgba(201,211,220,0.36) !important;
  box-shadow: none !important;
}

.form-control:focus,
.custom-select:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--vusaf-blue-muted) !important;
  box-shadow: 0 0 0 3px rgba(125,167,207,0.13) !important;
}

.form-control:disabled,
.form-control[readonly],
input:disabled,
select:disabled,
textarea:disabled {
  color: #91a0ad !important;
  background: #101923 !important;
}

.input-group-text {
  color: var(--vusaf-text) !important;
  background: #1b2836 !important;
  border-color: var(--vusaf-border) !important;
}

/* Tables */
table,
.table,
.dataTable {
  color: var(--vusaf-text) !important;
  background: transparent !important;
}

.table thead th,
table thead th,
.dataTable thead th,
.table-dark th {
  color: #ffffff !important;
  background: linear-gradient(180deg, #263849 0%, #182839 100%) !important;
  border-color: var(--vusaf-border) !important;
}

.table td,
.table th,
table td,
table th,
.dataTable td,
.dataTable th {
  border-color: rgba(201,211,220,0.14) !important;
}

.table-striped tbody tr:nth-of-type(odd),
.table tbody tr:nth-child(even),
table tbody tr:nth-child(even) {
  background: rgba(255,255,255,0.022) !important;
}

.table-hover tbody tr:hover,
table tbody tr:hover {
  color: #ffffff !important;
  background: rgba(125,167,207,0.10) !important;
}

.page-link {
  color: var(--vusaf-blue-muted) !important;
  background: #101d2b !important;
  border-color: var(--vusaf-border) !important;
}

.page-item.active .page-link {
  color: #ffffff !important;
  background: var(--vusaf-blue) !important;
  border-color: var(--vusaf-border-strong) !important;
}

/* Badges and status colors: retain meaning, remove glow. */
.badge,
.status-badge,
.label,
.tag,
.operation-status,
.event-status,
.ops-badge,
.ops-status-pill {
  color: var(--vusaf-text) !important;
  background: rgba(28,79,130,0.44) !important;
  border: 1px solid rgba(150,170,190,0.34) !important;
  box-shadow: none !important;
}

.badge-success,
.bg-success,
.text-success,
.status-green,
.is-green,
.success,
.ops-status-dot.is-live,
.status-dot {
  color: var(--vusaf-success) !important;
  border-color: rgba(129,217,155,0.42) !important;
  box-shadow: none !important;
}

.badge-warning,
.bg-warning,
.text-warning,
.status-yellow,
.is-amber,
.warning {
  color: var(--vusaf-warning) !important;
  border-color: rgba(255,209,102,0.42) !important;
  box-shadow: none !important;
}

.badge-danger,
.bg-danger,
.text-danger,
.status-red,
.is-red,
.danger {
  color: var(--vusaf-danger) !important;
  border-color: rgba(255,122,112,0.42) !important;
  box-shadow: none !important;
}

/* Dashboard-specific cleanup */
.ops-dashboard,
.ops-layout,
.ops-main,
.ops-right-stack,
.ops-grid,
#operations-grid {
  color: var(--vusaf-text) !important;
}

.ops-hero,
.ops-hero::before,
.ops-hero::after {
  filter: saturate(0.82) brightness(0.90) !important;
  box-shadow: none !important;
}

.ops-icon,
.ops-menu i,
.ops-panel-title i,
.ops-section-title i,
.vusaf-nav-icon,
.sidebar i {
  color: var(--vusaf-blue-muted) !important;
  filter: none !important;
}

.ops-status-light,
.ops-live-dot,
.status-dot,
[class*="status-dot"] {
  box-shadow: none !important;
  animation: none !important;
}

/* Keep operation/event emblems uniform without affecting maps or content images. */
#operations-grid .ops-card .ops-card-media,
.events-grid .event-card .card-media,
.operations-grid .operation-card .card-media {
  height: 170px !important;
  min-height: 170px !important;
  max-height: 170px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding: 0 !important;
  background: rgba(6,16,29,0.46) !important;
  border-bottom: 1px solid var(--vusaf-border-soft) !important;
}

#operations-grid .ops-card .ops-card-media > img,
.events-grid .event-card .card-media > img,
.operations-grid .operation-card .card-media > img {
  width: 150px !important;
  height: 150px !important;
  max-width: 150px !important;
  max-height: 150px !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: saturate(0.88) contrast(1.02) !important;
  transform: none !important;
}

#operations-grid .ops-card.ops-event-prefix-18naf .ops-card-media > img,
#operations-grid .ops-card.ops-event-prefix-380 .ops-card-media > img {
  width: 230px !important;
  height: 230px !important;
  max-width: 230px !important;
  max-height: 230px !important;
}

#operations-grid .ops-card.ops-event-prefix-tacc-mr .ops-card-media > img {
  width: 190px !important;
  height: 190px !important;
  max-width: 190px !important;
  max-height: 190px !important;
}

#operations-grid .ops-card.ops-event-prefix-odf20267 .ops-card-media > img,
#operations-grid .ops-card.ops-event-prefix-wt-001 .ops-card-media > img {
  width: 158px !important;
  height: 158px !important;
  max-width: 158px !important;
  max-height: 158px !important;
}

/* Leaflet/map controls should match the shell but map imagery remains untouched. */
.leaflet-control,
.leaflet-bar a,
.leaflet-control-layers,
.map-control,
.map-panel {
  color: var(--vusaf-text) !important;
  background: rgba(12,24,38,0.96) !important;
  border-color: var(--vusaf-border) !important;
  box-shadow: var(--vusaf-shadow-soft) !important;
}

.leaflet-bar a:hover {
  color: #ffffff !important;
  background: #1c4f82 !important;
}

/* Alerts and SweetAlert */
.alert,
.swal2-popup {
  color: var(--vusaf-text) !important;
  background: linear-gradient(180deg, #172635, #0b1725) !important;
  border: 1px solid var(--vusaf-border) !important;
  box-shadow: var(--vusaf-shadow) !important;
}

.alert-info {
  border-left: 4px solid var(--vusaf-blue-muted) !important;
}

.alert-success {
  border-left: 4px solid var(--vusaf-success) !important;
}

.alert-warning {
  border-left: 4px solid var(--vusaf-warning) !important;
}

.alert-danger {
  border-left: 4px solid var(--vusaf-danger) !important;
}

footer,
.sticky-footer,
.vusaf-footer,
.events-footer,
.ops-footer {
  color: var(--vusaf-muted) !important;
  background: rgba(3,9,20,0.96) !important;
  border-color: var(--vusaf-border) !important;
}

@media (max-width: 768px) {
  #operations-grid .ops-card .ops-card-media,
  .events-grid .event-card .card-media,
  .operations-grid .operation-card .card-media {
    height: 112px !important;
    min-height: 112px !important;
    max-height: 112px !important;
  }

  #operations-grid .ops-card .ops-card-media > img,
  .events-grid .event-card .card-media > img,
  .operations-grid .operation-card .card-media > img {
    width: 92px !important;
    height: 92px !important;
    max-width: 92px !important;
    max-height: 92px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

/* Muted semantic fills (avoid Bootstrap's bright solid utility colors). */
.badge-success,
.bg-success,
.alert-success,
.status-green,
.is-green,
.success {
  background-color: rgba(129,217,155,0.12) !important;
}

.badge-warning,
.bg-warning,
.alert-warning,
.status-yellow,
.is-amber,
.warning {
  background-color: rgba(255,209,102,0.12) !important;
}

.badge-danger,
.bg-danger,
.alert-danger,
.status-red,
.is-red,
.danger {
  background-color: rgba(255,122,112,0.12) !important;
}

.badge-info,
.bg-info,
.alert-info,
.status-blue,
.is-blue,
.info {
  color: var(--vusaf-blue-muted) !important;
  background-color: rgba(125,167,207,0.12) !important;
  border-color: rgba(125,167,207,0.38) !important;
  box-shadow: none !important;
}