/**
 * New Horisons Virtual — DisposableTheme v3 NHV Skin
 * Navy #0B1F3A | Sky #2E6FBF | White #FFFFFF
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ── Root variables ─────────────────────────────────────────────────────── */
:root {
  --navy:       #0B1F3A;
  --navy-mid:   #1A3560;
  --navy-light: #243E6A;
  --sky:        #2E6FBF;
  --sky-light:  #7A9CC8;
  --sky-pale:   #D6E4F4;
  --white:      #FFFFFF;
  --off:        #F4F7FB;
  --border:     rgba(255,255,255,0.10);
  --card-bg:    rgba(11,31,58,0.78);
  --card-head:  rgba(6,14,26,0.90);
  --radius:     10px;
  --shadow:     0 4px 24px rgba(0,0,0,0.35);
  --blur:       blur(14px);
}

/* ── Base ───────────────────────────────────────────────────────────────── */
html { height: 100%; margin: 0; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  color: #E8EDF5;
  /* Clean aviation background — deep sky gradient */
  background-color: #050D1A;
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(46,111,191,0.15) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(11,31,58,0.8) 0%, transparent 50%),
    url('/disposable/theme_bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: center center;
}

/* Dark overlay for readability */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(5,13,26,0.82) 0%,
    rgba(11,31,58,0.68) 50%,
    rgba(5,13,26,0.78) 100%
  );
  z-index: 0;
  pointer-events: none;
}

#page-container { position: relative; z-index: 1; min-height: 100vh; }
#page-contents  { width: 98% !important; padding-bottom: 3rem; }

/* ── Typography ─────────────────────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6 { font-weight: 600; color: #fff; }
a { text-decoration: none; color: var(--sky-light); font-weight: 500; transition: color 0.15s; }
a:hover  { color: #fff; }
a:active { color: var(--sky-light); }
small, .small { font-size: 0.775rem; }

/* ── Navbar ─────────────────────────────────────────────────────────────── */
#Dispo_NavBar {
  background: rgba(5,13,26,0.92);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 20px rgba(0,0,0,0.4);
  margin-bottom: 0;
  padding: 0 16px;
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Logo */
#Dispo_NavBar .navbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  text-decoration: none;
}
#Dispo_NavBar .navbar-brand img {
  height: 32px;
  width: auto;
  filter: brightness(0) invert(1);
}
.nhv-logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.nhv-logo-name {
  font-size: 0.8rem; font-weight: 700;
  letter-spacing: 3px; color: #fff;
  text-transform: uppercase;
}
.nhv-logo-sub {
  font-size: 0.5rem; letter-spacing: 3.5px;
  color: var(--sky-light); text-transform: uppercase;
}

/* Nav links */
#Dispo_NavBar .nav-link,
#Dispo_NavBar a.nav-link {
  color: rgba(255,255,255,0.65) !important;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.2px;
  padding: 10px 13px !important;
  border-radius: 6px;
  transition: all 0.15s;
}
#Dispo_NavBar .nav-link:hover { color: #fff !important; background: rgba(255,255,255,0.06); }
#Dispo_NavBar .nav-link.active { color: var(--sky-light) !important; }

/* Dropdown */
#Dispo_NavBar .dropdown-menu {
  background: rgba(6,14,26,0.97);
  backdrop-filter: var(--blur);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  padding: 6px;
  margin-top: 6px;
}
#Dispo_NavBar .dropdown-item {
  color: rgba(255,255,255,0.65);
  font-size: 0.82rem;
  border-radius: 6px;
  padding: 8px 12px;
  transition: all 0.15s;
}
#Dispo_NavBar .dropdown-item:hover {
  background: rgba(46,111,191,0.18);
  color: #fff;
}
#Dispo_NavBar .dropdown-divider { border-color: var(--border); margin: 4px 0; }

/* UTC Clock */
#utc_clock, #clock {
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 0.72rem;
  color: var(--sky-light);
  letter-spacing: 1px;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card {
  background: var(--card-bg);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 14px;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
}

.card .card-header {
  background: var(--card-head);
  border-bottom: 1px solid var(--border);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Sky accent line on card header */
.card .card-header::before {
  content: '';
  display: inline-block;
  width: 3px; height: 14px;
  background: var(--sky);
  border-radius: 2px;
  flex-shrink: 0;
}

.card .card-header h5,
.card .card-header .card-title {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0;
}
.card .card-header a { color: var(--sky-light); font-size: 0.78rem; }
.card .card-header a:hover { color: #fff; }

.card .card-body { padding: 16px; color: #D8E4F0; }
.card .card-footer {
  background: rgba(0,0,0,0.2);
  border-top: 1px solid var(--border);
  padding: 8px 16px;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.45);
}

/* ── Dashboard stat icons ───────────────────────────────────────────────── */
/* The 4-stat row at the top of the dashboard */
.card-body h3, .card-body h4 {
  color: #fff;
  font-weight: 600;
}
.card-body p { color: rgba(255,255,255,0.55); margin: 0; }
.card-body .rotate i { color: rgba(46,111,191,0.08); }

/* Make the icon stat cards more visible */
.col-6.col-md-3 .card,
.col-sm-6.col-md-3 .card,
.col-lg-3 .card {
  border-left: 2px solid var(--sky);
}

/* ── Tables ─────────────────────────────────────────────────────────────── */
.table {
  color: #C8D8EC;
  font-size: 0.82rem;
}
.table thead th {
  background: rgba(6,14,26,0.8);
  color: rgba(255,255,255,0.55);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: none;
  padding: 10px 14px;
}
.table tbody td {
  border-color: rgba(255,255,255,0.06);
  padding: 10px 14px;
  vertical-align: middle;
}
.table tbody tr { transition: background 0.1s; }
.table tbody tr:hover { background: rgba(46,111,191,0.08); }
.table-striped > tbody > tr:nth-of-type(odd) > * { background: rgba(255,255,255,0.02); }

/* ── Forms ──────────────────────────────────────────────────────────────── */
.form-control, .form-select {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 7px;
  color: #E8EDF5;
  font-size: 0.875rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-control:focus, .form-select:focus {
  background: rgba(255,255,255,0.1);
  border-color: var(--sky);
  box-shadow: 0 0 0 3px rgba(46,111,191,0.2);
  color: #fff;
}
.form-control::placeholder { color: rgba(255,255,255,0.3); }
.form-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.input-group-text {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.15);
  color: var(--sky-light);
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn { border-radius: 7px; font-weight: 500; font-size: 0.82rem; transition: all 0.15s; }
.btn-primary {
  background: var(--sky);
  border-color: var(--sky);
  color: #fff;
}
.btn-primary:hover { background: #3A7FD0; border-color: #3A7FD0; }
.btn-secondary {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
  color: #D8E4F0;
}
.btn-secondary:hover { background: rgba(255,255,255,0.14); color: #fff; border-color: rgba(255,255,255,0.25); }
.btn-success  { background: #10B981; border-color: #10B981; color: #fff; }
.btn-danger   { background: rgba(239,68,68,0.2); border-color: rgba(239,68,68,0.4); color: #FCA5A5; }
.btn-warning  { background: rgba(245,158,11,0.2); border-color: rgba(245,158,11,0.4); color: #FCD34D; }
.btn-info     { background: rgba(46,111,191,0.25); border-color: rgba(46,111,191,0.5); color: var(--sky-light); }
.btn-sm { font-size: 0.75rem; padding: 4px 10px; }
.btn-lg { padding: 11px 28px; font-size: 0.9rem; }

/* ── Badges ─────────────────────────────────────────────────────────────── */
.badge { font-weight: 600; font-size: 0.68rem; letter-spacing: 0.5px; border-radius: 5px; }
.bg-primary   { background: var(--sky) !important; }
.bg-secondary { background: rgba(255,255,255,0.12) !important; color: #D8E4F0 !important; }
.bg-success   { background: rgba(16,185,129,0.25) !important; color: #6EE7B7 !important; }
.bg-danger    { background: rgba(239,68,68,0.25) !important; color: #FCA5A5 !important; }
.bg-warning   { background: rgba(245,158,11,0.25) !important; color: #FCD34D !important; }
.bg-info      { background: rgba(46,111,191,0.25) !important; color: var(--sky-light) !important; }

/* ── Alerts ─────────────────────────────────────────────────────────────── */
.alert { border-radius: var(--radius); border: 1px solid; font-size: 0.875rem; }
.alert-info    { background: rgba(46,111,191,0.15); border-color: rgba(46,111,191,0.3); color: var(--sky-light); }
.alert-success { background: rgba(16,185,129,0.12); border-color: rgba(16,185,129,0.3); color: #6EE7B7; }
.alert-warning { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.3); color: #FCD34D; }
.alert-danger  { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.3); color: #FCA5A5; }

/* ── Nav pills & tabs ───────────────────────────────────────────────────── */
.nav-pills .nav-link {
  color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.05) !important;
  border-radius: 7px;
  font-size: 0.82rem; font-weight: 500;
  padding: 7px 16px;
  transition: all 0.15s;
}
.nav-pills .nav-link.active,
.nav-pills .nav-link:hover {
  background: rgba(46,111,191,0.25) !important;
  color: #fff !important;
}
.nav-tabs { border-color: var(--border); }
.nav-tabs .nav-link {
  color: rgba(255,255,255,0.45);
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font-size: 0.82rem;
  padding: 8px 16px;
  transition: all 0.15s;
}
.nav-tabs .nav-link.active { color: var(--sky-light); border-bottom-color: var(--sky); }
.nav-tabs .nav-link:hover  { color: #fff; }
.card .nav-tabs .nav-item .nav-link { color: rgba(255,255,255,0.45); }
.card .nav-tabs .nav-item .active   { color: var(--sky-light); border-bottom-color: var(--sky); }

/* ── Modals ─────────────────────────────────────────────────────────────── */
.modal-content {
  background: rgba(6,14,26,0.97);
  backdrop-filter: var(--blur);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
  color: #D8E4F0;
}
.modal-header {
  background: rgba(0,0,0,0.3);
  border-bottom: 1px solid var(--border);
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}
.modal-title { color: #fff; font-weight: 600; font-size: 0.9rem; }
.modal-header .btn-close { filter: invert(1); opacity: 0.5; }
.modal-body   { background: transparent; }
.modal-footer { background: rgba(0,0,0,0.2); border-top: 1px solid var(--border); }

/* ── Accordion ──────────────────────────────────────────────────────────── */
.accordion-button {
  background: rgba(6,14,26,0.8) !important;
  color: rgba(255,255,255,0.85) !important;
  box-shadow: none !important;
  font-size: 0.875rem; font-weight: 500;
}
.accordion-button.collapsed {
  background: rgba(11,31,58,0.6) !important;
  color: rgba(255,255,255,0.55) !important;
}
.accordion-button::after { filter: invert(1) opacity(0.5); }
.accordion-item  { background: transparent !important; border-color: var(--border) !important; }
.accordion-body  { background: rgba(11,31,58,0.4) !important; color: #C8D8EC; }

/* ── Sidebar offcanvas ──────────────────────────────────────────────────── */
#Dispo_SideBar .offcanvas {
  background: rgba(6,14,26,0.97);
  backdrop-filter: var(--blur);
  border-right: 1px solid var(--border);
}
#Dispo_SideBar .offcanvas-header {
  background: rgba(0,0,0,0.3);
  border-bottom: 1px solid var(--border);
}
#Dispo_SideBar .nav-link { color: rgba(255,255,255,0.6); border-radius: 6px; }
#Dispo_SideBar .nav-link:hover { background: rgba(46,111,191,0.15); color: #fff; }
#Dispo_SideBar .dropdown-item { color: rgba(255,255,255,0.55); font-size: 0.82rem; }
#Dispo_SideBar .dropdown-item:hover { background: rgba(46,111,191,0.15); color: #fff; }

/* ── Progress ───────────────────────────────────────────────────────────── */
.progress { background: rgba(255,255,255,0.08); border-radius: 20px; height: 5px; }
.progress-bar { background: var(--sky); border-radius: 20px; }

/* ── Pagination ─────────────────────────────────────────────────────────── */
.pag-items {
  background: rgba(255,255,255,0.07) !important;
  border-radius: 6px;
  color: #D8E4F0 !important;
  border-color: rgba(255,255,255,0.15) !important;
}
.pag-items-curr {
  background: var(--sky) !important;
  border-radius: 6px;
  color: #fff !important;
  border-color: var(--sky) !important;
}

/* ── Select2 ────────────────────────────────────────────────────────────── */
.select2-container { margin-top: 2px; }
.input-group .select2-container { margin: 0; width: auto; flex: 1 1 auto; }
.input-group .select2-container .select2-selection--single {
  height: 100%; line-height: inherit;
  border-radius: 0 7px 7px 0;
}
.select2-container--default .select2-selection--single {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.15);
  border-radius: 7px; height: 36px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #E8EDF5; line-height: 36px;
}
.select2-dropdown {
  background: rgba(6,14,26,0.97);
  border-color: rgba(255,255,255,0.15);
}
.select2-results__option { color: rgba(255,255,255,0.7); }
.select2-results__option--highlighted { background: var(--sky) !important; color: #fff !important; }
.select2-search--dropdown input {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.15);
  color: #E8EDF5;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
#footer { font-size: 0.78rem; }
#footer .card {
  background: rgba(5,13,26,0.92) !important;
  backdrop-filter: var(--blur);
  border-color: var(--border) !important;
  color: rgba(255,255,255,0.35) !important;
}
#footer .card * { color: rgba(255,255,255,0.35) !important; }
#footer .card a:hover { color: rgba(255,255,255,0.7) !important; }

/* ── Livemap ────────────────────────────────────────────────────────────── */
.map-info-box  { background: rgba(5,13,26,0.92); color: #E8EDF5; }
.map-info-label { background: rgba(5,13,26,0.92); color: var(--sky-light); font-size: 0.72rem; letter-spacing: 1px; }
.leaflet-popup-content-wrapper {
  background: rgba(6,14,26,0.97) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  color: #D8E4F0 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
}
.leaflet-popup-tip { background: rgba(6,14,26,0.97) !important; }

/* ── Cookie consent ─────────────────────────────────────────────────────── */
.cc-window { background: rgba(5,13,26,0.97) !important; color: rgba(255,255,255,0.8) !important; }
.cc-btn.cc-allow { background: var(--sky) !important; color: #fff !important; }

/* ── Fixed height images ────────────────────────────────────────────────── */
.img-h20{width:auto;height:20px}.img-h25{width:auto;height:25px}
.img-h30{width:auto;height:30px}.img-h35{width:auto;height:35px}
.img-h40{width:auto;height:40px}.img-h45{width:auto;height:45px}
.img-h50{width:auto;height:50px}.img-h60{width:auto;height:60px}
.img-h70{width:auto;height:70px}.img-h80{width:auto;height:80px}
.img-h100{width:auto;height:100px}.img-h125{width:auto;height:125px}
.img-h150{width:auto;height:150px}.img-h175{width:auto;height:175px}
.img-h200{width:auto;height:200px}
.img-mh20{width:auto;max-height:20px}.img-mh25{width:auto;max-height:25px}
.img-mh30{width:auto;max-height:30px}.img-mh35{width:auto;max-height:35px}
.img-mh40{width:auto;max-height:40px}.img-mh50{width:auto;max-height:50px}
.img-mh60{width:auto;max-height:60px}.img-mh80{width:auto;max-height:80px}
.img-mh100{width:auto;max-height:100px}.img-mh125{width:auto;max-height:125px}
.img-mh150{width:auto;max-height:150px}.img-mh175{width:auto;max-height:175px}
.img-mh200{width:auto;max-height:200px}

/* ── Overflow ───────────────────────────────────────────────────────────── */
.overflow-auto { max-height: 30vh; scrollbar-width: thin; scrollbar-color: var(--navy-light) transparent; }
.overflow-auto::-webkit-scrollbar { width: 4px; }
.overflow-auto::-webkit-scrollbar-thumb { background: var(--navy-light); border-radius: 2px; }

/* ── Misc ───────────────────────────────────────────────────────────────── */
.card-body .rotate i { color: rgba(46,111,191,0.06); }
.card-body .rotate { z-index:8;float:right;height:100%; }
.card-body .rotate i {
  position:absolute;left:auto;right:-10px;bottom:0;
  display:block;transform:rotate(-45deg);
}
.HoverImage{position:relative}
.HoverImage a{position:absolute;bottom:0;left:2;z-index:1978}
.HoverImage img{display:none}
.HoverImage:hover img{display:block;opacity:0.99;z-index:1978}
#stage a{position:relative}
#stage a img{border:none;background:transparent}
#stage a:nth-of-type(1){animation-name:fader;animation-duration:10s;z-index:2100}
#stage a:nth-of-type(2){z-index:2200;display:none}
@keyframes fader{0%{opacity:0}25%{opacity:1}75%{opacity:1}100%{opacity:0}}

/* ── Page container / footer fix ───────────────────────────────────────── */
#page-container{position:relative;min-height:100vh}
#footer{position:absolute;bottom:0;width:100%;height:2.2rem}

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media(max-width:768px){
  body{font-size:14px}
  .card .card-header{padding:8px 12px}
  .nhv-logo-name{font-size:0.7rem;letter-spacing:1.5px}
}