:root {
  font-size: 16px;
}


/*
--header-height: fixed height applied to the top navbar.
--content-height: height of the remaining viewport.
  Apply this height to any container that should fill the
  available window height and also have a scrollbar appear
  when the content overflows. I could never get a scrollbar
  to appear with height: 100%, even when parent has a fixed height;
*/
body {
  --invest-green: #148F68;
  --header-height: 64px;
  --content-height: calc(100vh - var(--header-height));
  min-height: 100vh;
  background-color: rgba(0,0,0,0);
  margin: 0;
  overflow-y: hidden;
}

/*Top Navigation*/

.navbar {
  border-bottom: 3px solid var(--invest-green);
  padding: 0;
  height: var(--header-height)
}

.navbar .row {
  align-items: end;
}

.navbar-brand {
  padding-bottom: 0;
  margin-right: 0;
}

.navbar-brand:hover {
  text-decoration-line: underline;
  text-decoration-thickness: 3px;
}

.navbar-middle {
  flex-shrink: 1;
  min-width: 0;
  padding-left: 0;
  padding-right: 0;
}

.navbar-right {
  max-width: fit-content;
  margin-left: 0.5rem;
  margin-right: -15px;
  padding-left: 0;
  padding-right: 0;
}

.navbar-brand .nav-link {
  color: var(--invest-green);
  font-weight: 600;
  font-size: 2.0rem;
  letter-spacing: 1px;
  padding-bottom: 0;
  padding-left: 0.7rem;
  padding-right: 0;
  display: flex;
  align-items: center;
}

/*tricky to align icon with text*/
.navbar-brand .nav-link svg {
  margin-bottom: -0.2rem;
}

/*registered trademark icon styling*/
.rtm {
  color: var(--invest-green);
  font-size: 0.5rem;
  margin-bottom: 0.3rem;
}

.navbar-nav.nav-tabs {
  border-bottom: 0;
  overflow-x: hidden;
  overflow-y: hidden;
}

.navbar-nav .nav-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: fit-content;
  white-space: nowrap;
  flex: 1; /*size by available space, not by content*/
  min-width: 0; /*and allow it to shrink to fit container*/
  background-color: transparent;
  border: 2px solid #999999;
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
}

.navbar-nav .nav-item.active {
  border: 3px solid var(--invest-green);
  border-bottom: 0;
  background-color: ghostwhite;
}

.navbar-light .navbar-nav .nav-link {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  background-color: transparent;
  color: #999999;
  border: 0;
  border-bottom: 0;
  font-size: 1.1rem;
}

.close-tab.btn {
  background-color: transparent;
  border-color: transparent;
  color: #6c757d;
  margin-left: 0.1rem;
  padding-left: 0.1rem;
  padding-right: 0.1rem;
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
  height: fit-content;
}
.close-tab:hover, .close-tab:focus, .close-tab:active {
  border-color: #6c757d;
  background-color: #6c757d;
  color: white;
}

.progress {
  display: inline-flex;
  height: 2rem;
  font-size: 1rem;
  background-color: #aeb1b3;
}

.progress-bar {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.navbar .alert {
  padding: 0.4rem;
}

.navbar .row .text-right {
  white-space: nowrap;
}

.settings-icon-btn, .settings-icon-btn:hover {
  background-color: transparent;
  border-color: transparent;
}

.settings-icon {
  color: black;
  font-size: 2rem;
  vertical-align: text-bottom;
}

.language-icon {
  color: black;
  font-size: 1rem;
  vertical-align: text-bottom;
  margin-right: 0.2rem;
}

/* add padding to accomodate the width of a scroll bar
otherwise the bar will make overall width of content
exceed 100% of window.*/
#home-tab-content {
  padding-right:  16px;
}

/* Home Tab */

.invest-list-container {
  height: var(--content-height);
  overflow-y: auto;
}

.invest-list-group {
  /*do not constrain height here because it can cause more
  columns to be created. Constrain it in parent instead.*/
  display: block;
  column-count: 2;
  white-space: nowrap;
}

.invest-list-group .list-group-item {
  border-top: none;
  border-right: none;
  border-left: none;
  border-bottom: 1px solid rgba(0,0,0,.125);
  margin-bottom: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.invest-list-group .list-group-item:last-child {
  border-radius: 0;
}

.invest-button {
  color: var(--invest-green);
  font-weight: 600;
}

.invest-button:hover {
  color: white;
  background-color: var(--invest-green);
  opacity: 75%;
  font-weight: 600;
}

.open-button-col {
  max-width: fit-content;
  padding-right: 0;
}

.recent-header-col {
  padding-left: 0;
}

.recent-header-col .default-text {
  padding-left: 0;
  text-align: right;
}

.recent-job-card-col {
  height: var(--content-height);
  overflow-y: auto;
  padding-right: 0.5rem;
}

.recent-job-card-col .container {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-right: 0.5rem;
}

.recent-job-card-col .container .row {
  align-items: center;
}

.recent-job-card {
  width: inherit;
  margin-bottom: 1rem;
  padding: 0;
  height: fit-content;
  filter: drop-shadow(2px 2px 2px grey);
}

.card-body {
  padding: 0;
  width: inherit;
}

.card-header {
  background-color: var(--invest-green);
  filter: opacity(0.75);
  margin-bottom: 1rem;
  margin-left: -0.1rem;
  margin-right: -0.05rem;
}

.card-header .header-title {
  color: white;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.card-title {
  padding-left: 1.25rem;
}

.card-title .text-heading {
  color: gray;
}

.card-title .text-mono {
  font-family: monospace;
  font-size: 1.2rem;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  white-space: nowrap;
  padding-right: 1rem;
}

.card-footer span {
  text-overflow: ellipsis;
}

.card-footer .status {
  overflow: hidden;
  font-style: italic;
  text-transform: capitalize;
}

.card-footer .status-error {
  color: red;
}

.card-footer .status-success {
  color: var(--invest-green);
}

.card-footer .timestamp {
  padding-right:  2rem;
}

/* InVEST Model Tab */

.invest-main-col {
   /* main col can grow & shrink, sidebar cannot. */
  flex:  1 1 0;
  padding-left: 0;
  padding-right: 0;
}

.invest-main-col .tab-content {
  background-color: ghostwhite;
}

.invest-sidebar-col {
  /* sidebar cannot grow or shrink, main col can.
   * sidebar width tries to be 25%.
   */
  flex: 0 0 25%;
  display: flex;
  flex-direction: column;
  padding-right: 0;
  padding-bottom: 1rem;
}

.invest-sidebar-col .nav-link {
  color: #000;
  border-right: 5px solid transparent;
  border-radius: 0;
  font-size: 1.3rem;
  font-weight: 550;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 0;
}

.invest-sidebar-col .nav-link svg {
  font-size: 2rem;
}

.invest-sidebar-col .nav-link:hover, .invest-sidebar-col .nav-link:focus {
  background-color: rgb(240, 240, 240);
  border-right: 5px solid rgb(240, 240, 240);
  border-radius: 0;
}

.invest-sidebar-col .nav-link.disabled {
  color: #888888;
}

.invest-sidebar-col .nav-link.active {
  color: #000;
  background-color: ghostwhite;
  border-right: 5px solid var(--invest-green);
  border-radius: 0;
}

.sidebar-row {
  display: flex;
  flex-direction: column;
  font-size: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.sidebar-buttons {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
}

.sidebar-buttons .btn {
  white-space: nowrap;
  background: none;
  border: none;
  color: black;
  padding-left: 0;
}

.sidebar-buttons .alert {
  margin-top: 1rem;
}

.sidebar-links a {
  padding-top: 0.5rem;
}

.sidebar-footer {
  margin-top: auto;
}

/* Model Status Alert */
.invest-sidebar-col .sidebar-footer .alert {
  display: flex;
  flex-direction: column;
  justify-content: center;
  order: -1;
  font-family: monospace;
  font-weight: bold;
}

.invest-sidebar-col .alert .btn {
  flex: 1;
  margin-top: 1rem;
  font-size: 1.1rem;
  font-family: revert;
  letter-spacing: 0.03rem;
}

/* The Run button */
.sidebar-footer .btn-primary {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.1rem;
}

.sidebar-footer .btn-primary .spinner-border {
  margin-left: 1rem;
  margin-bottom: 0.25rem;
}

/* InVEST Setup Tab */
.args-form {
  height: var(--content-height);
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding-left: 2rem;
  padding-right: 1rem;
}

/* InVEST Argument Forms */
.args-form.dragging {
  opacity: 0.2;
}

.arg-group {
  margin-top: 1.0rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dotted;
}

.arg-group:last-of-type {
  border-bottom: none;
}

.arg-hide {
  display: none;
}

.arg-disable .form-label {
  color: #a5a5a5;
}

.args-form .form-control:disabled {
  color: #888888;
}

.args-form .form-group {
  align-items: flex-start;
}

.argname {
  text-transform: capitalize;
  font-weight: 600;
}

.args-form .form-control,
.custom-select {
  font-family: monospace;
  font-size: 1.3rem;
}

.args-form {
  --form-field-padding-right: 2em;
}

.args-form .form-label {
  padding-top: 0;
  padding-bottom: 0;
}

.args-form .form-control[type=text] {
  /*always hold space for a validation mark so the rightmost
  text is never hidden by the mark when it appears.*/
  padding-right: var(--form-field-padding-right);
}

input.input-dragging {
  border: 4px dashed #cccccc;
}

input[type=text]::placeholder {
  font-style: italic;
  color: #a5a5a5;
}

/* Default sized toggle switch too small */
.form-switch {
  transform:scale(1.5);
  margin-left: 1rem;
  margin-top: 0.6rem;
}

.invalid-feedback {
  font-size: 0.9rem;
  font-family: monospace;
  white-space: pre-wrap;
  padding-left: calc(3.5rem + 2px);
}

.args-form svg {
  font-size: 1.5rem;
}

.custom-select,
.custom-select.is-valid {
  --caret-width: 1.875rem;
  padding-right: var(--form-field-padding-right);
  /* Custom dropdown icon is react-icons/md/MdKeyboardArrowDown, as a URL-encoded SVG */
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="200px" width="200px"%3E%3Cpath fill="none" d="M0 0h24v24H0V0z"%3E%3C/path%3E%3Cpath d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"%3E%3C/path%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-position: center right calc((var(--form-field-padding-right) - var(--caret-width)) / 2);
  background-size: var(--caret-width);
}

/* InVEST Log Tab */
#log-display {
  overflow: auto;
  white-space: pre-wrap;
  height: var(--content-height);
}

#log-display {
  font-family: monospace;
  font-size:1rem;
  color: #000;
  padding-right: 0;
}

#log-display .invest-log-primary {
  color: #000;
  font-weight: bold;
}

#log-display .invest-log-primary-warning {
  color: #f13232;
}

#log-display .invest-log-error {
  color: #f13232;
  font-weight: bold;
}

/* Download Data Modal */
.download-data-modal .modal-dialog {
  overflow-y: initial;
}

.download-data-modal .modal-body {
  height: 80vh;
  overflow-y: auto;
}

/* Settings Modal */
.settings-modal .modal-dialog {
  /*Hardcoding prevents dynamic resizing, which is convenient.
  And it is okay because we set the minimum electron window width
  at 800px when we create it.*/
  max-width: 600px;
}

.settings-modal .accordion:has(.show) button svg {
  transform: rotate(180deg);
}

.settings-modal .accordion button {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#metadata-form {
  /*This div toggles between a form and some help text.
  position and static height ensure no resizing to content.*/
  position: relative;
  height: 460px;
  background-color: ghostwhite;
  border: dotted;
  border-width: thin;
  padding: 0.5rem;
}

/* This button should also not move as content is toggled*/
#metadata-form .info-toggle {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

#metadata-form legend {
  font-size: 1.1rem;
  text-decoration-line: underline;
}

#metadata-form .form-group {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* Save As modal */
.save-as-modal svg {
  margin-bottom: 0.2rem;
}

.confirm-modal .modal-content {
  background-color: papayawhip;
  margin-top: 100px;
}

.error-boundary {
  max-width:600px;
  margin: 0 auto;
  margin-top: 5rem;
  border-color: black;
  border-style: dotted;
}

.error-boundary .btn {
  margin: 1rem;
}

/* Changelog modal */
.link-external {
  &:after {
    content: '';
    display: inline-block;
    width: 1rem;
    height: 1rem;
    /* Icon is react-icons/md/MdOpenInNew, as a URL-encoded SVG */
    background-image: url("data:image/svg+xml,%3Csvg stroke='currentColor' fill='currentColor' stroke-width='0' viewBox='0 0 24 24' class='mr-1' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' d='M0 0h24v24H0z'%3E%3C/path%3E%3Cpath d='M19 19H5V5h7V3H5a2 2 0 00-2 2v14a2 2 0 002 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 0.125rem top 0.125rem;
    background-size: 1rem 1rem;
  }
}

code {
  color: inherit;
}
