/* ==========================================================================
   Suandok Imputation Server — "Confetti Navy" theme
   Palette: coolors.co/161b40-43bee5-f40058-efa500-41b853
   Drop-in override for Cloudgene 2.x (Bootstrap 4). Load AFTER the bundle CSS.
   ========================================================================== */

:root {
  --sd-navy:      #161B40;
  --sd-navy-2:    #1E2452;   /* slightly lifted navy for surfaces */
  --sd-navy-3:    #0F1330;   /* deeper navy for footer/hover */
  --sd-cyan:      #43BEE5;
  --sd-cyan-dark: #1F9FC8;
  --sd-pink:      #F40058;
  --sd-pink-dark: #C80048;
  --sd-amber:     #EFA500;
  --sd-green:     #41B853;
  --sd-ink:       #161B40;
  --sd-muted:     #5B6185;
  --sd-bg:        #F4F6FB;
  --sd-line:      #E1E4F0;
}

/* ---------- Base ---------- */
body, body.bg-light {
  background-color: var(--sd-bg) !important;
  color: var(--sd-ink);
  font-family: "Poppins", "Kanit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
h1, h2, h3, h4, h5, h6, .display-4 { color: var(--sd-navy); font-weight: 700; letter-spacing: -0.01em; }
.text-muted { color: var(--sd-muted) !important; }
a { color: var(--sd-cyan-dark); }
a:hover { color: var(--sd-pink); text-decoration: none; }
hr { border-top-color: var(--sd-line); }
::selection { background: var(--sd-cyan); color: var(--sd-navy); }

/* ---------- Navbar (also set Admin → Settings → Background color to #161B40) ---------- */
.navbar, .navbar[style] {
  background: var(--sd-navy) !important;
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--sd-cyan) 0 25%, var(--sd-pink) 25% 50%, var(--sd-amber) 50% 75%, var(--sd-green) 75% 100%) 1;
}
.navbar-dark .navbar-brand { color: #fff; font-weight: 700; }
.navbar-dark .navbar-brand:hover { color: var(--sd-cyan); }
.navbar-dark .navbar-nav .nav-link { color: rgba(255,255,255,.8); font-weight: 500; }
.navbar-dark .navbar-nav .nav-link:hover { color: var(--sd-cyan); }
.navbar-dark .navbar-nav .active > .nav-link { color: var(--sd-cyan); }
.dropdown-menu { border: 0; box-shadow: 0 10px 30px rgba(22,27,64,.18); border-radius: 10px; }
.dropdown-item:active, .dropdown-item.active { background: var(--sd-cyan); color: var(--sd-navy); }

/* ---------- Hero / jumbotron with confetti circles ---------- */
.jumbotron, .jumbotron[style] {
  position: relative;
  overflow: hidden;
  background-color: var(--sd-navy) !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='480' viewBox='0 0 1200 480'%3E%3Cg%3E%3Ccircle cx='43' cy='92' r='16' fill='%2341B853'/%3E%3Ccircle cx='274' cy='92' r='12' fill='%2343BEE5' opacity='.85'/%3E%3Ccircle cx='439' cy='45' r='7' fill='%23EFA500'/%3E%3Ccircle cx='665' cy='70' r='5' fill='%2343BEE5' opacity='.8'/%3E%3Ccircle cx='740' cy='13' r='20' fill='%23FFFFFF' opacity='.35'/%3E%3Ccircle cx='926' cy='101' r='10' fill='%2341B853'/%3E%3Ccircle cx='1052' cy='192' r='34' fill='%23EFA500'/%3E%3Ccircle cx='860' cy='290' r='16' fill='%23F40058'/%3E%3Ccircle cx='1187' cy='186' r='17' fill='%2343BEE5'/%3E%3Ccircle cx='1163' cy='313' r='10' fill='%23EFA500'/%3E%3Ccircle cx='925' cy='407' r='11' fill='%2341B853'/%3E%3Ccircle cx='1177' cy='420' r='20' fill='%23F40058'/%3E%3Ccircle cx='392' cy='428' r='15' fill='%2343BEE5' opacity='.75'/%3E%3Ccircle cx='683' cy='462' r='11' fill='%23F40058' opacity='.85'/%3E%3Ccircle cx='562' cy='342' r='8' fill='%2343BEE5' opacity='.6'/%3E%3C/g%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right center !important;
  background-size: cover !important;
  padding: 6rem 0 5rem;
}
.jumbotron .display-4 { color: #fff; font-weight: 800; font-size: 3.2rem; line-height: 1.1; }
.jumbotron .lead { color: var(--sd-cyan); font-weight: 600; font-size: 1.35rem; }
.jumbotron p { color: rgba(255,255,255,.85); max-width: 640px; }
.jumbotron hr, .jumbotron hr[style] {
  width: 80px; margin-left: 0; border: 0 !important; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--sd-cyan), var(--sd-pink));
}
.jumbotron .btn-light {
  background: var(--sd-pink); border-color: var(--sd-pink); color: #fff; font-weight: 600;
}
.jumbotron .btn-light:hover { background: var(--sd-pink-dark); border-color: var(--sd-pink-dark); color: #fff; }
.jumbotron .btn-outline-light { border-width: 2px; font-weight: 600; }
.jumbotron .btn-outline-light:hover { background: var(--sd-cyan); border-color: var(--sd-cyan); color: var(--sd-navy); }
.jumbotron .btn { border-radius: 999px; padding: .6rem 1.6rem; }

/* ---------- Replace hard-coded old blue (#004098) in page templates ---------- */
[style*="color: #004098"], [style*="color:#004098"] { color: var(--sd-cyan) !important; }
[style*="background: #004098"], [style*="background:#004098"] { background: var(--sd-navy) !important; }

/* Feature cards: each gets its own palette accent */
.card { border-radius: 14px; border: 1px solid var(--sd-line); }
.card.border-0 { border: 0; }
.card.shadow-sm { box-shadow: 0 4px 18px rgba(22,27,64,.07) !important; transition: transform .2s, box-shadow .2s; }
.card.shadow-sm:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(22,27,64,.14) !important; }
.row > [class*="col-md-3"]:nth-child(4n+1) .card { border-top: 4px solid var(--sd-cyan)  !important; }
.row > [class*="col-md-3"]:nth-child(4n+2) .card { border-top: 4px solid var(--sd-pink)  !important; }
.row > [class*="col-md-3"]:nth-child(4n+3) .card { border-top: 4px solid var(--sd-amber) !important; }
.row > [class*="col-md-3"]:nth-child(4n+4) .card { border-top: 4px solid var(--sd-green) !important; }
.row > [class*="col-md-3"]:nth-child(4n+1) .card [style*="#004098"] { color: var(--sd-cyan)  !important; }
.row > [class*="col-md-3"]:nth-child(4n+2) .card [style*="#004098"] { color: var(--sd-pink)  !important; }
.row > [class*="col-md-3"]:nth-child(4n+3) .card [style*="#004098"] { color: var(--sd-amber) !important; }
.row > [class*="col-md-3"]:nth-child(4n+4) .card [style*="#004098"] { color: var(--sd-green) !important; }

/* "How it works" step circles: cyan → pink → amber; arrows in muted navy */
.rounded-circle[style*="#004098"] { box-shadow: 0 8px 20px rgba(22,27,64,.18); }
.justify-content-center > .col-md-3:nth-of-type(1) .rounded-circle[style] { background: var(--sd-cyan)  !important; color: var(--sd-navy) !important; }
.justify-content-center > .col-md-3:nth-of-type(3) .rounded-circle[style] { background: var(--sd-pink)  !important; }
.justify-content-center > .col-md-3:nth-of-type(5) .rounded-circle[style] { background: var(--sd-amber) !important; color: var(--sd-navy) !important; }
.justify-content-center > .col-md-1[style*="#004098"] { color: #B8BDD6 !important; }

/* ---------- Buttons ---------- */
.btn { border-radius: 8px; font-weight: 500; }
.btn-primary, .btn-primary:disabled {
  background: var(--sd-cyan); border-color: var(--sd-cyan); color: var(--sd-navy); font-weight: 600;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active {
  background: var(--sd-cyan-dark); border-color: var(--sd-cyan-dark); color: #fff;
}
.btn-outline-primary { color: var(--sd-cyan-dark); border-color: var(--sd-cyan); }
.btn-outline-primary:hover { background: var(--sd-cyan); border-color: var(--sd-cyan); color: var(--sd-navy); }
.btn-secondary { background: var(--sd-navy-2); border-color: var(--sd-navy-2); }
.btn-secondary:hover { background: var(--sd-navy); border-color: var(--sd-navy); }
.btn-success { background: var(--sd-green); border-color: var(--sd-green); }
.btn-success:hover { background: #34994A; border-color: #34994A; }
.btn-danger  { background: var(--sd-pink);  border-color: var(--sd-pink); }
.btn-danger:hover { background: var(--sd-pink-dark); border-color: var(--sd-pink-dark); }
.btn-warning { background: var(--sd-amber); border-color: var(--sd-amber); color: var(--sd-navy); }
.btn-info    { background: var(--sd-cyan);  border-color: var(--sd-cyan);  color: var(--sd-navy); }
.btn:focus, .form-control:focus, .custom-select:focus {
  box-shadow: 0 0 0 .2rem rgba(67,190,229,.35) !important; border-color: var(--sd-cyan);
}

/* ---------- Utility colors ---------- */
.bg-primary   { background-color: var(--sd-navy)  !important; }
.bg-info      { background-color: var(--sd-cyan)  !important; }
.bg-success   { background-color: var(--sd-green) !important; }
.bg-warning   { background-color: var(--sd-amber) !important; }
.bg-danger    { background-color: var(--sd-pink)  !important; }
.text-primary { color: var(--sd-cyan-dark) !important; }
.text-info    { color: var(--sd-cyan-dark) !important; }
.text-success { color: var(--sd-green) !important; }
.text-warning { color: var(--sd-amber) !important; }
.text-danger  { color: var(--sd-pink)  !important; }
.badge-primary, .badge-info { background: var(--sd-cyan); color: var(--sd-navy); }
.badge-success { background: var(--sd-green); }
.badge-warning { background: var(--sd-amber); color: var(--sd-navy); }
.badge-danger  { background: var(--sd-pink); }
.badge-secondary { background: var(--sd-navy-2); }

/* Job progress / status */
.progress { background: var(--sd-line); border-radius: 999px; }
.progress-bar { background: var(--sd-cyan); }
.progress-bar.bg-success { background: var(--sd-green) !important; }
.progress-bar.bg-danger  { background: var(--sd-pink)  !important; }
.progress-bar-striped { background-image: linear-gradient(45deg, rgba(255,255,255,.2) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.2) 50%, rgba(255,255,255,.2) 75%, transparent 75%, transparent); }

/* Alerts */
.alert { border: 0; border-left: 5px solid; border-radius: 10px; }
.alert-primary, .alert-info { background: #E6F6FC; color: var(--sd-navy); border-left-color: var(--sd-cyan); }
.alert-success { background: #E7F6EA; color: #1F5E2A; border-left-color: var(--sd-green); }
.alert-warning { background: #FFF5DB; color: #6B4A00; border-left-color: var(--sd-amber); }
.alert-danger  { background: #FFE5EE; color: #8A0032; border-left-color: var(--sd-pink); }

/* ---------- Forms (login / sign-up / submit job) ---------- */
.form-control, .custom-select { border-radius: 8px; border-color: #CDD2E6; }
.custom-control-input:checked ~ .custom-control-label::before { background: var(--sd-cyan); border-color: var(--sd-cyan); }
label { color: var(--sd-navy); font-weight: 500; }

/* ---------- Tabs, pagination, tables, lists ---------- */
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
  color: var(--sd-navy); border-color: var(--sd-line) var(--sd-line) #fff; border-top: 3px solid var(--sd-pink);
}
.nav-tabs .nav-link { color: var(--sd-muted); }
.nav-pills .nav-link.active { background: var(--sd-navy); }
.page-item.active .page-link { background: var(--sd-cyan); border-color: var(--sd-cyan); color: var(--sd-navy); }
.page-link { color: var(--sd-cyan-dark); }
.list-group-item.active { background: var(--sd-navy); border-color: var(--sd-navy); }
.table thead th { background: var(--sd-navy); color: #fff; border-color: var(--sd-navy); font-weight: 600; }
.table-hover tbody tr:hover { background: #EEF8FC; }

/* ---------- Footer ---------- */
footer, footer[style] {
  background: var(--sd-navy);
  color: rgba(255,255,255,.65) !important;
  border-top: 0 !important;
  padding: 2rem 0 1.25rem;
  margin-top: 0;
}
footer a { color: var(--sd-cyan); }
footer a:hover { color: var(--sd-pink); }

/* ---------- Small screens ---------- */
@media (max-width: 767.98px) {
  .jumbotron { padding: 4.5rem 0 3.5rem; background-size: auto 100% !important; }
  .jumbotron .display-4 { font-size: 2.2rem; }
  /* Fade the confetti behind the hero text so it stays legible on narrow screens */
  .jumbotron::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(22,27,64,.85) 0%, rgba(22,27,64,.6) 100%);
  }
  .jumbotron > .container { position: relative; z-index: 1; }
}

/* ---------- Page helpers used by pages/*.stache ---------- */
.hl      { color: var(--sd-cyan); }
.hl-pink { color: var(--sd-pink); }

/* ---------- Home: "About the Reference Panel" (stat cards + composition donut) ---------- */
.sd-refpanel .sd-pink  { color: var(--sd-pink); }
.sd-refpanel .sd-cyan  { color: var(--sd-cyan); }
.sd-refpanel .sd-green { color: var(--sd-green); }
.sd-refpanel .sd-amber { color: var(--sd-amber); }
.sd-refpanel .sd-bg-pink  { background: var(--sd-pink); }
.sd-refpanel .sd-bg-cyan  { background: var(--sd-cyan); }
.sd-refpanel .sd-bg-green { background: var(--sd-green); }
.sd-refpanel .sd-bg-amber { background: var(--sd-amber); }

.sd-stat {
  height: 100%; background: #fff; border-radius: 18px; padding: 1.5rem 1rem; text-align: center;
  box-shadow: 0 4px 18px rgba(22,27,64,.07);
}
.sd-stat-num { font-size: 2.6rem; font-weight: 800; line-height: 1.1; }
.sd-stat-label { color: var(--sd-muted); font-size: 1.05rem; }

.sd-composition {
  background: var(--sd-navy); color: #fff; border-radius: 22px; padding: 2rem 2.25rem;
  box-shadow: 0 14px 34px rgba(22,27,64,.18);
}
.sd-donut { position: relative; max-width: 260px; margin: 0 auto; }
.sd-donut svg { display: block; width: 100%; height: auto; }
.sd-donut-seg { fill: none; stroke-width: 18; }
.sd-donut-seg.sd-pink  { stroke: var(--sd-pink); }
.sd-donut-seg.sd-cyan  { stroke: var(--sd-cyan); }
.sd-donut-seg.sd-green { stroke: var(--sd-green); }
.sd-donut-seg.sd-amber { stroke: var(--sd-amber); }
.sd-donut-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.sd-donut-num { font-size: 2.2rem; font-weight: 800; line-height: 1; }
.sd-donut-label { color: rgba(255,255,255,.7); font-size: 1rem; margin-top: .25rem; }

.sd-legend-item { display: flex; align-items: center; margin-bottom: 1rem; font-size: 1.05rem; }
.sd-dot { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto; margin-right: .75rem; }
.sd-legend-name { font-weight: 700; }
.sd-legend-count { margin-left: auto; padding-left: 1rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sd-legend-pct { color: rgba(255,255,255,.6); }

.sd-note {
  display: flex; gap: .9rem; margin-top: .75rem; padding: 1.1rem 1.25rem;
  background: var(--sd-navy-2); border-left: 4px solid var(--sd-cyan); border-radius: 12px;
  color: rgba(255,255,255,.88); line-height: 1.6;
}
.sd-note .fa-info-circle { color: var(--sd-cyan); margin-top: .3rem; }
.sd-note strong { color: #fff; }

@media (max-width: 767.98px) {
  .sd-composition { padding: 1.5rem 1.25rem; }
  .sd-stat-num { font-size: 2rem; }
}
.sd-map-card {
  background: #fff; border-radius: 22px; padding: 2rem 2.25rem;
  box-shadow: 0 4px 18px rgba(22,27,64,.07);
}
.sd-map-points { list-style: none; padding: 0; margin: 0; }
.sd-map-points li { display: flex; align-items: baseline; margin-bottom: .9rem; color: var(--sd-ink); }
.sd-map-points .fa-map-marker-alt { color: var(--sd-muted); width: 1rem; flex: 0 0 auto; margin-right: .75rem; }
@media (max-width: 767.98px) { .sd-map-card { padding: 1.25rem; } }

/* Sampling map (inline SVG generated by suandok-theme/refpanel-map/make_map.py) */
.sd-map { display: block; width: 100%; max-width: 360px; height: auto; margin: 0 auto; }
.sd-prov { fill: #E9ECF4; stroke: #fff; stroke-width: .6; stroke-linejoin: round; }
.sd-prov-on { fill: #C6CDE3; }
.sd-prov:hover { fill: #DADFEC; }
.sd-prov-on:hover { fill: #B4BCD8; }
.sd-site { stroke: #fff; stroke-width: 1.1; fill-opacity: .92; cursor: default;
  transition: fill-opacity .15s, stroke-width .15s; }
.sd-site:hover { fill-opacity: 1; stroke: var(--sd-navy); stroke-width: 1.4; }
.sd-site.sd-pink  { fill: var(--sd-pink); }
.sd-site.sd-cyan  { fill: var(--sd-cyan); }
.sd-site.sd-green { fill: var(--sd-green); }
.sd-site.sd-amber { fill: var(--sd-amber); }
.sd-map-legends { display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; margin-top: 1.25rem; }
.sd-map-legend-title { font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--sd-muted); margin-bottom: .5rem; }
.sd-map-legend-families { display: grid; grid-template-columns: auto auto; gap: .35rem 1.25rem; }
.sd-map-legend-families > span { display: inline-flex; align-items: center; }
.sd-map-legend-families .sd-dot { width: 12px; height: 12px; margin-right: .5rem; }
.sd-size-legend { display: block; height: 58px; width: auto; max-width: 100%; overflow: visible; }
.sd-size-legend circle { fill: #C6CDE3; stroke: #fff; }
.sd-size-legend text { font-size: 10px; fill: var(--sd-muted); text-anchor: middle; }
.sd-map-credit { font-size: .75rem; color: var(--sd-muted); margin: 1.25rem 0 0; }
.sd-map-credit a { color: inherit; text-decoration: underline; }

/* ---------- Help: reference panel population details ---------- */
.sd-help-panel .sd-dot { display: inline-block; width: 12px; height: 12px; margin-right: .5rem; vertical-align: baseline; }
.sd-family-table { max-width: 520px; }
.sd-family-table .sd-family-total td { font-weight: 700; background: var(--sd-bg); }
.sd-family-card { border: 1px solid var(--sd-line); border-left-width: 5px !important; border-radius: 12px; }
.sd-family-card.sd-family-pink  { border-left-color: var(--sd-pink)  !important; }
.sd-family-card.sd-family-cyan  { border-left-color: var(--sd-cyan)  !important; }
.sd-family-card.sd-family-green { border-left-color: var(--sd-green) !important; }
.sd-family-card.sd-family-amber { border-left-color: var(--sd-amber) !important; }
.sd-family-card .card-title small { font-size: .85rem; font-weight: 500; margin-left: .5rem; }
.sd-family-communities { font-size: .92rem; color: var(--sd-muted); }
.sd-family-communities strong { color: var(--sd-navy); }
.sd-references { font-size: .9rem; color: var(--sd-muted); padding-left: 1.25rem; }
.sd-references li { margin-bottom: .6rem; }
.sd-references a { word-break: break-all; }