/*
 * GEM brand theme + density layer.
 * Loaded after stock Bootstrap 5.1.3 and project.css in base.html.
 *
 * Two jobs:
 *  1. Brand: align with globalenergymonitor.org — petrol #002430, teal #004a63,
 *     orange #fe4f2d CTAs, mint #9df7e5 accents, Plus Jakarta Sans, and the
 *     signature "square top-left" corner radius (0 r r r).
 *  2. Density: researchers live in spreadsheets — smaller root font scales all
 *     rem-based Bootstrap sizing down at once, then form controls, gutters and
 *     cards are tightened further.
 */

:root {
  --gem-petrol: #002430;
  --gem-teal: #004a63;
  --gem-teal-hover: #01394c;
  --gem-orange: #fe4f2d;
  --gem-orange-hover: #e13d1d;
  --gem-green: #1a936f;
  --gem-mint: #9df7e5;
  --gem-cream: #f2f2eb;
  --gem-ink: #3a4a50;
  --gem-line: #dde3e0;
  --gem-radius: 0 0.5rem 0.5rem 0.5rem;
  --gem-radius-sm: 0 0.35rem 0.35rem 0.35rem;
  --bs-body-color: var(--gem-ink);
  /* Geometry of one labelled field, so anything that has to line up with an
     input (row add/remove icons, the datasource box) tracks the density
     settings below instead of hard-coding pixels. Keep in step with the
     label and .form-control rules. */
  --gem-label-h: 1.55rem;
  --gem-input-h: calc(1.625rem + 2px);
}

/* ===== Density: shrink every rem-based size in one move ===== */
/* Reviewer feedback: 13.5px strained eyes; keep well under Bootstrap's 16px. */
html {
  font-size: 14.5px;
}

body {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--gem-ink);
}

h1, h2, h3, h4, h5, h6, .card-title {
  color: var(--gem-petrol);
  font-weight: 700;
}

a {
  color: var(--gem-teal);
}
a:hover {
  color: var(--gem-orange);
}

/* Tighter grid gutters (Bootstrap default is 1.5rem) */
.row {
  --bs-gutter-x: 0.75rem;
}

/* Most vertical rhythm in forms comes from mb-3 rows */
.mb-3 {
  margin-bottom: 0.6rem !important;
}

/* ===== Navbar ===== */
.navbar.bg-light {
  background-color: var(--gem-petrol) !important;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  /* Tracker identity: a thin rule in the current tracker's colour. */
  border-bottom: 3px solid var(--tracker-color, transparent);
}

/* ===== Tracker colours (GEM Color Guide dataviz palette) =====
   tracker-<projectType> on the <nav> sets the colour pair; the navbar rule
   and .tracker-chip pick them up. --tracker-ink is the text colour that
   keeps AA contrast on each swatch. */
.tracker-combustion { --tracker-color: #7F142A; --tracker-ink: #fff; }    /* coal plant */
.tracker-solar      { --tracker-color: #FFE366; --tracker-ink: #002430; }
.tracker-wind       { --tracker-color: #A5E9E4; --tracker-ink: #002430; }
.tracker-nuclear    { --tracker-color: #95E6AF; --tracker-ink: #002430; }
.tracker-geothermal { --tracker-color: #FF380F; --tracker-ink: #002430; }
.tracker-steel      { --tracker-color: #004F61; --tracker-ink: #fff; }
.tracker-hydro      { --tracker-color: #099ED8; --tracker-ink: #002430; }
.tracker-lng        { --tracker-color: #4A57A8; --tracker-ink: #fff; }    /* gas pipeline */
.tracker-goget      { --tracker-color: #061F5F; --tracker-ink: #fff; }    /* oil & NGL */

.tracker-chip {
  display: inline-block;
  padding: 0.1rem 0.6rem;
  border-radius: var(--gem-radius-sm);
  background-color: var(--tracker-color, rgba(255, 255, 255, 0.15));
  color: var(--tracker-ink, #fff);
  font-weight: 700;
  letter-spacing: 0.02em;
}
/* The template uses navbar-light on a dark background; Bootstrap's
   .navbar-light .navbar-nav .nav-link outranks .navbar .nav-link, so match
   its specificity or the links render dark-on-dark. */
.navbar-light .navbar-brand,
.navbar-light .navbar-brand:focus {
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.navbar-light .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .show > .nav-link {
  color: var(--gem-mint);
}
/* The brand is half wordmark, half text. A colour change on hover would move
   only the text half, so dim the pair together instead. */
.navbar-light .navbar-brand:hover {
  color: #fff;
  opacity: 0.8;
}
/* The wordmark stands alone as the brand, so it carries the weight the words
   used to. Block, not inline: with no text beside it there is no baseline to
   sit on, and an inline box would just pad the navbar with leading. Dropping
   .navbar-brand's own padding lets it run at this size without making the bar
   any taller than the nav links already do. */
.navbar-light .navbar-brand {
  padding-top: 0;
  padding-bottom: 0;
}
.navbar-logo {
  display: block;
  height: 1.8em;
  width: auto;
}
.navbar-light .navbar-text {
  color: rgba(255, 255, 255, 0.9);
}
.navbar .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.4);
}
.navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ===== Buttons ===== */
.btn {
  border-radius: var(--gem-radius-sm);
  font-weight: 600;
  padding: 0.25rem 0.65rem;
  font-size: 0.875rem;
}
.btn-sm {
  padding: 0.15rem 0.45rem;
  font-size: 0.8rem;
}
.btn-lg {
  padding: 0.4rem 0.9rem;
  font-size: 1rem;
}

.btn-primary {
  background-color: var(--gem-orange);
  border-color: var(--gem-orange);
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--gem-orange-hover) !important;
  border-color: var(--gem-orange-hover) !important;
  color: #fff;
}

.btn-info {
  background-color: var(--gem-teal);
  border-color: var(--gem-teal);
  color: #fff;
}
.btn-info:hover,
.btn-info:focus,
.btn-info:active {
  background-color: var(--gem-teal-hover) !important;
  border-color: var(--gem-teal-hover) !important;
  color: #fff;
}

.btn-success {
  background-color: var(--gem-green);
  border-color: var(--gem-green);
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active {
  background-color: #147a5b !important;
  border-color: #147a5b !important;
}

.btn-secondary {
  background-color: #5d6c7b;
  border-color: #5d6c7b;
}

.btn-light {
  background-color: var(--gem-cream);
  border-color: var(--gem-line);
  color: var(--gem-teal);
}

.btn:focus,
.btn-check:focus + .btn {
  box-shadow: 0 0 0 0.2rem rgba(157, 247, 229, 0.6);
}

/* ===== Forms: spreadsheet-grade density ===== */
.form-control,
.form-select {
  padding: 0.2rem 0.45rem;
  font-size: 0.875rem;
  min-height: calc(1.4em + 0.4rem + 2px);
  border-radius: 0.25rem;
  border-color: #ced7d3;
}
/* One-line floor (Bootstrap's own textarea min-height is taller and would
   defeat the compact sizing). The autosize JS grows them from there; without
   a floor, textareas measured while their pane is hidden (scrollHeight 0)
   render fully collapsed. */
textarea.form-control {
  min-height: calc(1.4em + 0.4rem + 2px);
}
.form-select {
  background-size: 14px 10px;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--gem-teal);
  box-shadow: 0 0 0 0.18rem rgba(157, 247, 229, 0.55);
}

label,
.form-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #5d6c7b;
  margin-bottom: 0.1rem;
}
.form-check-label {
  font-size: 0.85rem;
  font-weight: 500;
}
.form-check {
  margin-bottom: 0.15rem;
  min-height: 1.2rem;
}
.form-check-input:checked {
  background-color: var(--gem-teal);
  border-color: var(--gem-teal);
}
.form-check-input:focus {
  border-color: var(--gem-teal);
  box-shadow: 0 0 0 0.18rem rgba(157, 247, 229, 0.55);
}

.input-group-text {
  padding: 0.2rem 0.45rem;
  font-size: 0.875rem;
}

.invalid-feedback {
  font-size: 0.75rem;
  margin-top: 0.1rem;
}

/* select2 widgets, sized to match the compact inputs */
.select2-container--bootstrap-5 .select2-selection {
  min-height: calc(1.4em + 0.4rem + 2px);
  padding: 0.2rem 0.45rem;
  font-size: 0.875rem;
  border-color: #ced7d3;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
  padding: 0.1rem 0.3rem;
  font-size: 0.8rem;
}
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
  border-color: var(--gem-teal);
  box-shadow: 0 0 0 0.18rem rgba(157, 247, 229, 0.55);
}

/* ===== Cards ===== */
.card {
  border-radius: var(--gem-radius);
  border-color: var(--gem-line);
}
.card-body {
  padding: 0.6rem 0.75rem;
}
.card-header {
  padding: 0.4rem 0.75rem;
  background-color: var(--gem-cream);
  color: var(--gem-petrol);
  font-weight: 700;
  border-bottom-color: var(--gem-line);
}
/* Retint Bootstrap contextual backgrounds to GEM brand equivalents.
   Kept semantic: success stays green, warning stays yellow — these drive
   the edit-page validation header states. */
.bg-success {
  background-color: var(--gem-green) !important;
}
.bg-warning {
  background-color: #f4ca19 !important;
  color: var(--gem-petrol);
}
.card-header.bg-success,
.card-header.bg-warning {
  font-weight: 700;
}
.card-header.bg-success {
  color: #fff;
}
.card-title {
  font-size: 1rem;
  margin-bottom: 0.4rem;
}

/* ===== Tables ===== */
.table > :not(caption) > * > * {
  padding: 0.25rem 0.5rem;
}
.table {
  font-size: 0.875rem;
}
.table thead th {
  color: var(--gem-petrol);
}

/* ===== TOC rail / nav pills ===== */
.nav-pills .nav-link {
  border-radius: var(--gem-radius-sm);
  padding: 0.3rem 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gem-teal);
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--gem-teal);
  color: #fff;
}

/* ===== Sticky project header ===== */
/* project.css bleeds it -16px to span Bootstrap's default 1rem(16px)
   card-body padding; the theme's card-body padding is 0.75rem, so the
   bleed must match or the header sticks out past the card edges. */
.powerplant-header {
  background-color: var(--gem-cream);
  border-bottom: 2px solid var(--gem-teal);
  margin-left: -0.75rem;
  margin-right: -0.75rem;
  padding: 0.4rem 0.75rem 0;
}

/* ===== Misc component alignment ===== */
.alert {
  border-radius: var(--gem-radius-sm);
  padding: 0.5rem 0.75rem;
}

.badge {
  font-weight: 600;
}
/* datasource chips on every form row */
.badge.bg-secondary {
  background-color: var(--gem-teal) !important;
}
.datasource-badge {
  border-radius: var(--gem-radius-sm);
}

.dropdown-menu {
  border-radius: var(--gem-radius-sm);
  font-size: 0.875rem;
}
.dropdown-item {
  padding: 0.25rem 0.9rem;
}
.dropdown-item:active {
  background-color: var(--gem-teal);
}

.popover {
  border-radius: var(--gem-radius-sm);
  border-color: var(--gem-line);
}
.popover-header {
  background-color: var(--gem-cream);
  color: var(--gem-petrol);
  font-weight: 700;
}

.modal-content {
  border-radius: var(--gem-radius);
}

.pagination {
  --bs-pagination-color: var(--gem-teal);
  --bs-pagination-active-bg: var(--gem-teal);
  --bs-pagination-active-border-color: var(--gem-teal);
}
.page-link {
  color: var(--gem-teal);
  padding: 0.25rem 0.6rem;
}
.page-item.active .page-link {
  background-color: var(--gem-teal);
  border-color: var(--gem-teal);
}

/* Tabulator tables (project preview, conversion/history tables) ship their
   own CSS (14px font, 4px cell padding) which loads after this file, so the
   density overrides need !important. */
.tabulator {
  font-size: 0.875rem !important;
}
.tabulator-row .tabulator-cell,
.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
  padding: 2px 6px !important;
}

/* project.css sets this icon dark blue; align with brand */
.info-popover::after {
  color: var(--gem-teal);
}

/* The "Edit" shortcut beside an operator's name. It used to sit inside two
   nested <small>s and carry .position-edit's 32px downward push -- which made
   it about 9px tall and dropped it below the label, exactly what testers
   reported on three trackers. It belongs at the right-hand end of the label's
   own flex row: small enough to stay subordinate to the caption, large enough
   to read and hit, and never wrapping onto its own line. */
.operator-edit {
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  flex: 0 0 auto;
  align-self: center;
}

/* Chips in a timeline summary ("Event: 2015 H2", "no date", "current"). As
   inline elements they sit on the text baseline, and their own padding makes
   the box taller than the text, so they hang ~1.8px below the middle of the
   line they annotate. `vertical-align: middle` does not help -- it aligns to
   the baseline plus half an x-height, which lands in the same place -- so the
   chip is raised explicitly. Measured to centre it to within 0.1px; in rem so
   it tracks the root font rather than pinning a pixel. The row stays inline,
   so .text-truncate keeps working. */
.timeline-entry-view .badge {
  vertical-align: 0.125rem;
}

/* The side rail, which is an off-canvas panel below lg and a static column at lg
   and up. Bootstrap 5.2 does this with .offcanvas-lg; this runs 5.1.3, which only
   has the always-off-canvas component, so the static half is spelled out here.
   Mirrors what .offcanvas-lg does upstream: take it out of fixed positioning, drop
   the panel chrome, and neutralise the slide transform. */
@media (min-width: 992px) {
  .gem-rail.offcanvas {
    position: static;
    z-index: auto;
    width: auto;
    max-width: none;
    /* Full column height, not content height. The column is a stretched flex item
       (2108px on a typical project) but the panel inside it was only as tall as the
       pills (160px), and a sticky child can only travel within its parent's box --
       so #project-toc had nowhere to stick and scrolled away with the page. */
    height: 100%;
    flex-grow: 0;
    visibility: visible !important;
    background-color: transparent;
    border: 0;
    transform: none;
    transition: none;
  }
  .gem-rail .offcanvas-header {
    display: none;
  }
  .gem-rail .offcanvas-body {
    padding: 0;
    overflow-y: visible;
    background-color: transparent;
    /* Same reason: the sticky rail's direct parent, so it has to pass the height on. */
    height: 100%;
  }
}
/* Below lg it is a real panel: narrower than Bootstrap's 400px default, since it
   holds a single column of pills. */
@media (max-width: 991.98px) {
  .gem-rail.offcanvas {
    width: 16rem;
  }
}

/* ===== One-to-many row icons =====
   The add/remove icons of repeating rows (owners, fuels, other names, ...)
   sit in their own column next to labelled fields, so they have to clear the
   label to line up with the input rather than the caption. An inline-block of
   exactly input height, top-aligned and offset by the label, centres the
   glyph on the input; both measurements come from the tokens above, so the
   icons follow if the form density changes. */
.row-add-icon,
.row-remove-icon {
  display: inline-block;
  height: var(--gem-input-h);
  line-height: var(--gem-input-h);
  margin-top: var(--gem-label-h);
  font-size: 1.15rem;
  vertical-align: top;
}
.row-add-icon {
  color: var(--gem-green);
  margin-left: 0.3rem;
}
.row-remove-icon {
  color: var(--gem-orange);
  margin-left: -0.4rem;
}

/* Checkboxes that share a row with labelled fields ("Primary", the planned
   year flags). project.css pushes them down a flat 35px, which was tuned for
   the old label height and now lands them below the inputs; centre them on
   the input instead. 0.9rem is the rendered box size of a checkbox. */
.planned-checkbox {
  margin-top: calc(var(--gem-label-h) + (var(--gem-input-h) - 0.9rem) / 2);
}

/* ===== Datasource widget =====
   The badge list is a .form-control, so it has to match the height and
   baseline of the plain inputs beside it: project.css lays it out as a table,
   which shrink-wraps out of alignment, and its badges and plus render at full
   body size, which makes the box taller than a real input. */
.datasource-input.form-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem;
  padding: 0.1rem 0.3rem;
  min-height: var(--gem-input-h);
  height: auto;
}
.datasource-input .datasource-badge {
  font-size: 0.75rem;
  line-height: 1.25;
}
/* The chip's own remove control. Bootstrap's .badge paints its text white,
   which on the light pill left the cross invisible until a hover turned it
   the link-hover colour — so the only way to find it was to go looking. */
.datasource-input .datasource-badge.bg-light {
  color: var(--gem-petrol);
}
.datasource-input .datasource-badge.bg-light:hover {
  color: var(--gem-orange);
}
/* keep it a usable target at the smaller chip size */
.datasource-input .datasource-badge .bi-x {
  font-size: 0.95rem;
  line-height: 1;
  vertical-align: -0.1em;
}
/* The datasource "add" button (also the TOC's new-unit link). project.css
   renders it at 150% with a nudge tuned for the old spacing, which is what
   drove the box's height and left the glyph sitting low. */
.plus-icon {
  color: var(--gem-green);
  font-size: 1.05rem;
  top: 0;
  line-height: 1;
}

/* Keep the scrollbar of tall modal bodies (the datasource picker above all)
   permanently visible — overlay scrollbars hide the fact there is more list
   below the fold. */
.modal-overflow {
  overflow-y: scroll;
}
.modal-overflow::-webkit-scrollbar {
  width: 10px;
}
.modal-overflow::-webkit-scrollbar-track {
  background: var(--gem-cream);
}
.modal-overflow::-webkit-scrollbar-thumb {
  background: #b6c2c4;
  border-radius: 5px;
}
.modal-overflow::-webkit-scrollbar-thumb:hover {
  background: var(--gem-teal);
}

/* Treeflex ships a 16px font on .tf-tree, which reads as oversized next to
   the compact form it sits in. */
.tf-tree {
  font-size: 0.8rem;
}
.tf-tree .tf-nc {
  padding: 0.3rem 0.6rem;
}