/*!
 * Bootstrap overrides
 */

/*
  navbar
*/

/* center nav bar */
.navbar .navbar-nav {
  display: inline-block;
/*  float: none; **/
  vertical-align: top;
}

#navbar {
/*  text-align: center; */
}


/* glyphicon sizes */

/* Funding Progress Bar */
.funding-progress-container {
  padding: 5px 0;
}

@keyframes celebrateIcon {
  0% { transform: translateY(-50%) scale(1); }
  100% { transform: translateY(-50%) scale(1.2); }
}

.funding-progress-link {
  display: block;
  text-decoration: none;
  color: #e6e6e6;
  transition: background-color 0.2s ease;
}

.funding-progress-link:hover {
  text-decoration: none;
  background-color: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.funding-progress-link.active {
  background-color: rgba(255, 255, 255, 0.1);
}

.funding-progress-label {
  font-size: 0.9em;
  margin-bottom: 5px;
  color: #e6e6e6;
  text-align: left;
  display: flex;
  align-items: center;
}

.funding-progress-header {
  font-size: 0.95em;
  font-weight: 600;
  margin-bottom: 5px;
  color: #e67e22; /* Matching orange color */
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.funding-progress-label .badge {
  margin-left: 6px;
}

.funding-progress-bar {
  height: 20px;
  background-color: #2c3e50;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #1a242f;
  position: relative;
  margin-bottom: 5px;
  flex-grow: 1;
}

.funding-progress-fill {
  height: 100%;
  background-color: #e67e22; /* Darker orange instead of gold for better contrast */
  border-radius: 4px 0 0 4px;
  transition: width 0.5s ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
}

.funding-progress-percentage {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.85em;
  font-weight: 700;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
}

.goal-met-emoji {
  display: inline-block;
  font-size: 1.1em;
  animation: celebrateIcon 1.5s infinite alternate;
  margin-left: 2px;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.funding-next-milestone {
  margin-top: 5px;
  text-align: center;
  font-size: 0.85em;
  color: #f8d486;
  font-style: italic;
}

.funding-next-milestone-marker {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  font-size: 0.8em;
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
  padding: 0 6px;
  border-radius: 0 4px 4px 0;
  border-left: 2px solid #f8d486;
  display: none; /* Hidden by default, shown via JS */
  line-height: 20px;
  font-weight: bold;
  z-index: 5;
}
span.glyphicon {
    font-size: 1.5em;
}

/* disable navbar collapse */
.navbar-nav > li {
	float:none;
    display:inline-block;
}

/* navbar stylings */
.navbar-nav {
  margin:0;
}

/*
  content
*/

.message-status input {
  float:right;
}

#pformatlist-textarea {
  width:100%;
}

.map-content {
  background-color:#000;
  overflow:scroll;
}

#map-content {
  border:0;
  width:100%;
  height:100%;
  position: absolute;
}

.navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
}

/* mobile nav */
.visible {
  display:block;
}

.table-borderless th, .table-borderless td {
  border: none !important;
}

#map-subnav {
  position: fixed;
  width:100%;
  background-color:#111;
}

#map-subnav a {
  color:#999;
}

#map-subnav a:hover {
  background-color:#CCC;
  color:#000;
}

.system img {
}

form th, form td {
  padding: 10px 0;
}

/* donate button */
@media (min-width: 768px) {
  #donate-link {
    font-size:2.25em;
  }
}

@media (max-width: 768px) {
  #donate-link {
    font-size:1.25em;
  }
}

/* planets page */
/* up to phone, hide mid */
@media (max-width: 480px) {
  .view-mid {
/*    display:none; */
  }
}

/* up to phone landscape, hide wide */
@media (max-width: 768px) {
  .view-wide {
/*    display:none; */
  }
}

/* down to phone, hide narrow */
@media (min-width: 480px) {
  .view-narrow {
/*    display:none; */
  }
}

/* down to phone landscape, hide mid */
@media (min-width: 768px) {
  .view-mid {
/*    display:none; */
  }
}

/* */
li {
  list-style:none;
}

ul {
  padding:0;
}

.nav li > a {
  padding-bottom:5px;
}


.navbar {
  min-height:0;
}

/* */

#buildform .tooltip-inner {
  font-size:1.5em;
}

/* */

.alert {
  margin-top: 20px;
}

.list-group {
  margin-bottom:0;
}

/* */
nav#nav-small .container-fluid, #map-body .container-fluid {
  padding:0;
}

.navbar-fixed-top {
  border-width:0;
}

.navbar {
  margin-bottom:0;
}

.table-responsive {
  border:none;
}
  
@media (max-width: 768px) {
  .btn-responsive {
    padding:2px 4px;
    font-size:80%;
    line-height: 1;
    border-radius:3px;
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  .btn-responsive {
    padding:4px 9px;
    font-size:90%;
    line-height: 1.2;
  }
}

/* timeline */
/*
.timeline-timestamp {
  padding-right:25px;
}
*/

.message-info {
  float:left;
}

.message-delete {
  float:right;
}

.button-message-delete {
  cursor:pointer;
}

.handler-link {
  cursor: pointer;
}

.recall-result p {
  text-align:center;
  margin:25px;
}

.empire-box {
  margin:5px 0;
}

.empire-banner {
  float:left;
  width:50px;
  height:50px;
}

.empire-status {
  margin:0 5px;
  float:left;
  display:block;
}

.empire-buff {
  color:green;
}

.empire-debuff {
  color:red;
}

.empire-warning {
  color:yellow;
}
.modal-backdrop {
  opacity: .09;
}

/* Seal icon styling */
.seal-icon-img { vertical-align: middle; margin: 0 2px; }

/* Issue #890 — the ghost label.
   Bootstrap 3 ships six label modifiers and every one of them is solid, so
   there is no way to say "this state is over" other than by saying it louder.
   Solid reads as live; an outline reads as spent, which is what a terminal
   no-fix outcome (a Closed bug, a Duplicate/Declined/Withdrawn report) has to
   read as beside an open one.
   The border is label-default's own #777, so this is visibly the unfilled
   version of the grey pill rather than a seventh colour. The text is a step
   lighter than the border for contrast: the two grounds this pill sits on are
   the info panel (themes/imperialconflict.css, rgba(20,20,60,.95) over the
   #131313 body) and the odd table stripe (#000022). #777 measures about 3.9:1
   against the lighter of those, short of AA's 4.5; #999 measures about 6.1:1
   there and 7.2:1 on the stripe, and still sits quieter than the pills that are
   white on a solid ground. */
.label-ghost {
  background-color: transparent;
  border: 1px solid #777;
  color: #999;
}

/* Issue #890 — the two visibility eye states, as colours built for a dark
   ground. BugLifecycle::VISIBILITY_TEXT_CLASSES names these two and nothing
   else does; changing a value here changes both the board's Visibility column
   and the page's own key, because both are drawn from that one map.

   WHY NOT BOOTSTRAP'S OWN UTILITIES, WHICH THESE REPLACE. `.text-success` is
   #3c763d — a green chosen for white backgrounds — and on the grounds this
   feature actually draws on it measures 3.37:1, below AA's 4.5 and, worse,
   DARKER than the muted state beside it: `.ops-chat-moderation .text-muted` is
   overridden to #a8b0c4 in templates/ops/_styles.html, so the live state was
   the dimmer of the two and the pair barely separated from each other at all.

   THE GROUNDS, COMPOSITED, because every one of them is layered and none is the
   flat colour its declaration reads as:
     - the panel body (the key, and the board's even rows):
       main.css .ic-panel-body rgba(20,20,20,.95) over
       themes/imperialconflict.css .ic-panel-info rgba(20,20,60,.95) over the
       #131313 body  =>  rgb(20,20,22)
     - the Bug detail card: templates/ops/_styles.html .ops-chat-card
       rgba(12,14,28,.92) over that  =>  rgb(13,14,28)
     - the odd table stripe: themes/imperialconflict.css #000022
   The panel body is the lightest of the three and so is the binding one.

   THE MEASUREMENTS (WCAG 2.x relative luminance; panel body / detail card /
   stripe):
     #66d966  10.24 : 1   10.64 : 1   11.42 : 1
     #858585   4.99 : 1    5.18 : 1    5.56 : 1
   Both clear 4.5 on all three. Between the two states: 2.05:1, and the live one
   is 22.6 L* points LIGHTER than the quiet one — where the pair these replace
   had the live one 27.2 points DARKER. The direction reversal is the substance
   of the rule; the hue difference (saturated green against a neutral grey,
   rather than a muddy dark green against a light blue-grey) is the rest of it.

   WHY NOT #5cb85c, THE PALETTE'S OWN SUCCESS GREEN, which was the first
   candidate and is measured rather than dismissed: 7.42 : 1 on the binding
   ground, so it clears AA comfortably — but against a grey dark enough to stay
   "quiet" it separates by only 1.49:1 and 12.0 L* points, little more than half
   of what the lighter green buys. Both states have to clear 4.5 against a ground
   this dark, which puts a floor under the quiet state (#828282 is 4.79:1); the
   only remaining lever is how bright the live state is, so it is taken.

   COLOUR REMAINS REINFORCEMENT AND NEVER THE SIGNAL. The glyphs already differ,
   and the state is carried as text three ways beside them (title, an sr-only
   word, aria-hidden on the glyph). These are `text-*` utilities rather than
   `label-*` modifiers for the reason visibility stopped being a pill: it is not
   an urgency, and a modifier would put it back in competition with the two
   columns that are. */
.text-success-on-dark {
  color: #66d966;
}

.text-muted-on-dark {
  color: #858585;
}

/* Issue #890 — the bug/report thread, as one idiom for two surfaces.

   A SUPPORT-TICKET THREAD AND DELIBERATELY NOT CHAT BUBBLES. Staff ask, the
   reporter answers, usually two or three times over days. Opposed bubbles imply
   presence and typing, which is false of this exchange — and the game already
   has a real chat surface they would be read as, which is the confusion that
   produced the borrowed `ops-chat-*` markup this replaces.

   THE TWO SIDES DIFFER BY BORDER COLOUR ALONE, and neither side carries a
   horizontal offset. The exchange is linear —
   database/schema/bug_report_messages.sql has `id, report_id, sender,
   sender_user_id, kind, body, created_at` and no parent, no reply-to and no
   thread id — so nothing here may imply nesting. A progressive inset on one
   party reads as reply-to, which is a structure the schema cannot express and
   the code never built; the `margin-left: 24px` that once sat on the
   reporter's side is gone for exactly that reason.

   WHAT IS LEFT IS ENOUGH, AND IT CARRIES NO HIERARCHY. The word is above every
   entry — `sender_label`, off ReportLifecycle::SENDER_LABELS — so a reader who
   sees no colour at all still knows who spoke; the border colour reinforces it
   without ordering the two sides. Nothing replaced the inset: a horizontal
   offset is the encoding of nesting, so any substitute for it would have to be
   one too. BugThreadRenderTest asserts the sides carry no horizontal offset.

   ONE RULE SET FOR BOTH PAGES, which is the point: templates/reports/view.html
   (the reporter, on the #131313 body under .ic-panel-body) and
   templates/ops/bug-triage.html (staff, on the .ops-chat-card) draw identical
   markup. Nothing here sets a text colour on the body of an entry — it inherits,
   so each page keeps its own — and the one colour that IS set is the timestamp's
   #999, which measures 6.5:1 on the player panel and 6.7:1 on the ops card.
   The blue is the cornflower accent the ops surfaces already use for the same
   "this is the other party" job; it is a 3px border and carries no meaning the
   words do not. */
.bug-thread {
  margin: 0 0 15px;
}

.bug-thread-entry {
  border-left: 3px solid #777;
  padding: 4px 0 4px 10px;
  margin-bottom: 12px;
}

.bug-thread-staff {
  border-left-color: #6495ed;
}

.bug-thread-reporter {
  border-left-color: #777;
}

.bug-thread-time {
  color: #999;
  margin-left: 6px;
}

.bug-thread-body {
  margin: 4px 0 0;
}