@media ( prefers-color-scheme: light ) {
    :root {
        --dark-gray:var( --text-gray );
    }
}

/* PlantHub logo */
#doc-about-planthub-logo {
    background: var( --dark-gray );
    mask: url("images/planthub_logo.svg") no-repeat center;
    -webkit-mask: url("images/planthub_logo.svg") no-repeat center;
}

/* Links */
a {
    color: var( --app-color );
}

p a:hover {
    color: var( --app-color );
}

li a:hover {
    color: var( --app-color );
}

/* Text */
.doc-text-uppercase {
    color: var( --dark-gray );
    text-transform: uppercase;
    font-size: 1.0em;
    margin-bottom: 5px;
}

.doc-text-uppercase b {
    color: var( --app-color );
}

.doc-text {
    color: var( --dark-gray );
    font-size: 1.0em;
}

.doc-text-small {
    color: var( --dark-gray );
    font-size: 0.8em;
}

.doc-text-title {
    font-size: 1.1em;
    border: 1px solid var( --app-color );
    background-color: var( --app-color );
    color: white;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 1px;
    padding-left: 10px;
    border-radius: 5px;
    text-align: center;
}

.doc-text-subtitle {
    color: var( --app-color );
}

.doc-text-section {
    padding-top: 3px;
    padding-left: 5px;
    min-width: 150px;
}

.doc-text-info {
    padding-left: 5px;
    padding-top: 3px;
}

p {
    color: var( --dark-gray );
    font-size: 1.0em;
    padding-left: 10px;
}

p.caption {
    color: var( --dark-gray );
    font-size: 0.8em;
    margin: 0px;
    margin-top: -15px;
    margin-bottom: 10px;
    padding: 0px;
}

p.caution {
    color: var( --color-orange );
}

span.caution {
    color: var( --color-orange );
}

strong {
    color: var( --app-color-green );
    font-weight: 500;
}

p.closer {
    margin-top: -10px;
}

pre {
    color: var( --dark-gray );
    white-space: pre-wrap; /* Preserves formatting and allows wrapping */
    word-wrap: break-word; /* Breaks long words */
    overflow-wrap: break-word; /* Alternative for word-wrap */
}

code {
    color: var( --dark-gray );
    font-size: 0.75em;
}

/* Model syntax */
.IndependentVariable
{
/*  color: #C100BE;*/
  color: var( --dark-gray );
}

.Constant
{
/*  color: #D7004b;*/
  color: var( --dark-gray );
}

.Number
{
/*  color: #D7004b;*/
  color: var( --dark-gray );
}

.Parameter
{
/*  color: #C65F00;*/
  color: var( --dark-gray );
}

.DataVariable
{
/*  color: #5F00C3;*/
  color: var( --dark-gray );
}

.AlgebraicVariable
{
/*  color: #0000C3;*/
  color: var( --dark-gray );
}

.DerivedVariable
{
/*  color: #00A52D;*/
  color: var( --dark-gray );
}

.Function
{
/*  color: #007DFF;*/
  color: var( --dark-gray );
}

.Clear
{
  clear: both;
}

.Comment
{
/*  color: #A0A0A4;*/
  color: var( --dark-gray );
}

.Indent
{
  margin-left: 50px;
}

/* Wrap URLs by hyphenating 'words' */
.wrap {
  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;
  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* Tables */
table {
    color: var( --dark-gray );
    font-size: 1.0em;
    margin-left: 40px;
    margin-right: 40px;
    margin-bottom: 20px;
}

td {
    padding-right: 20px;
    vertical-align: top;
}

/* Lists */
li {
    color: var( --dark-gray );
    font-size: 1.0em;
}

.indented-list {
    list-style-position: outside; /* Ensure the bullet remains outside */
    padding-left: 1.1em; /* Adjust padding to give room for bullets */
}

/* Images */
.doc-image {
    width: 100%;
    padding: 10px;
    border: 2px solid var( --dark-gray );
    border-radius: 5px;
    margin-bottom: 20px;
}

.doc-link-icon {
    width: 40px;
    height: 40px;
}

/* Accordions */
.accordion-item {
    border: 0px;
    background-color: transparent;
    margin-bottom: 10px;
}

.accordion-item:first-of-type .accordion-button {
    border-radius: var(--bs-accordion-inner-border-radius);
}

.accordion-button {
    background-color: var( --light-gray-tint );
    color: var( --dark-gray );
    min-height: 40px;
    padding-right: 5px;
    padding-top: 0px;
    padding-bottom: 0px;
}

.accordion-button:hover {
    background-color: var( --app-color );
    color: var( --white );
    min-height: 40px;
    padding-right: 5px;
}

.accordion-button:hover code {
    color: var( --white );
}

.accordion-button:hover .badge {
    border: solid 1px var( --white );
}

.accordion-button:not(.collapsed) {
    background-color: var( --light-gray-tint );
    color: var( --dark-gray );
    box-shadow: none;
}

.accordion-button:not(.collapsed):hover {
    background-color: var( --app-color );
    color: var( --white );
    box-shadow: none;
}

.accordion-button:not(.collapsed)::after {
    background-image: url("images/disclosure_expanded_active.svg");
    background-size: 10px;
    transform: rotate(0deg);
}
.accordion-button::after {
    background-image: url("images/disclosure_active.svg");
    background-size: 10px;
    transform: rotate(0deg);
}
@media ( prefers-color-scheme: light ) {
    .accordion-button:not(.collapsed)::after {
        background-image: url("images/disclosure_expanded.svg");
        background-size: 10px;
        transform: rotate(0deg);
    }
    .accordion-button::after {
        background-image: url("images/disclosure.svg");
        background-size: 10px;
        transform: rotate(0deg);
    }
    .accordion-button:hover:not(.collapsed)::after {
        background-image: url("images/disclosure_expanded_active.svg");
        background-size: 10px;
        transform: rotate(0deg);
    }
    .accordion-button:hover::after {
        background-image: url("images/disclosure_active.svg");
        background-size: 10px;
        transform: rotate(0deg);
    }
}

.accordion-body {
    color: var( --dark-gray );
}

/* Badget */

.doc-badge-api-get {
    border: 1px solid var( --app-color-green );
    background-color: var( --app-color-green );
    color: white;
    margin-bottom: 5px;
    width: 65px;
}

.doc-badge-api-post {
    border: 1px solid var( --app-color-blue );
    background-color: var( --app-color-blue );
    color: white;
    margin-bottom: 5px;
    width: 65px;
}

.doc-badge-api-put {
    border: 1px solid var( --app-color-orange );
    background-color: var( --app-color-orange );
    color: white;
    margin-bottom: 5px;
    width: 65px;
}

.doc-badge-api-delete {
    border: 1px solid var( --app-color-red );
    background-color: var( --app-color-red );
    color: white;
    margin-bottom: 5px;
    width: 65px;
}

/* For light mode */
@media (prefers-color-scheme: light) {
  .dark-mode-image {
    display: none;
  }
}

/* For dark mode */
@media (prefers-color-scheme: dark) {
  .light-mode-image {
    display: none;
  }
}