:root {
    --red: #a75858;
    --red-light: #d3abab;
    --red-dark: #643535;
    --red-dark-dark: #321a1a;
    --blue: #546aab;
    --blue-light: aab4d5;
    --blue-dark: #323f67;
    --blue-dark-dark: #192033;
    --green: #78ab54;
    --green-light: #bcd5aa;
    --green-dark: #486732;
    --green-dark-dark: #243419;
    --yellow: #aba754;
    --yellow-light: #d5d3aa;
    --yellow-dark: #676432;
    --yellow-dark-dark: #343219;
    --grey: #797a86;
    --grey-light: #bcbcc2;
    --grey-dark: #494950;
    --grey-dark-dark: #242428;
    --theme: #948979;
    --theme-light: #DFD0B8;
    --theme-dark: #393E46;
    --them-dark-dark: #222831;
}

* {
    font-family: Consolas, "Courier New", monospace;
}

html {
    font-size: 10px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
  html {
    font-size: 12px;
  }
}

/***** NAV BAR *****/
.navbar {
    background-color: #393E46 !important;
}

.navbar .nav-link, .navbar-brand {
    color: #DFD0B8 !important;
}

.navbar .nav-link:hover {
    background-color: #948979;
    color: #ffffff !important;
}

/***** BODY *****/
body {
    margin-bottom: 60px;
    background-color: #222831;
    color: #DFD0B8;
}

/***** FORMS *****/
/* Text inputs, textareas */
input {
    background-color: var(--them-dark-dark);
}

.form-control {
    background-color: var(--them-dark-dark);
    color: var(--theme-light);
    border: 1px solid var(--theme-light);
}

/* Dropdowns */
.form-select {
    background-color: var(--them-dark-dark);
    color: var(--theme-light);
    border-color: var(--theme-light);
    border: 1px solid var(--theme-light);
}

/* Checkboxes & radios */
.form-check-input {
    background-color: var(--them-dark-dark);
    border: 1px solid var(--theme-light);
}

/* Focus state */
    .form-control:focus,
    .form-select:focus,
    .form-check-input:focus {
        background-color: var(--them-dark-dark);
        color: var(--theme-light);
        border-color: var(--theme-light);
        box-shadow: 0 0 0 0.25rem rgba(148, 137, 121, 0.5); /* This creates a glow using your theme color */
    }

/* Disabled Forms */
    .form-control:disabled,
    .form-select:disabled,
    .form-check-input:disabled {
        background-color: var(--theme-dark);
        color: var(--theme-light);
        border: 1px solid var(--theme-dark);
        opacity: 1; /* IMPORTANT: Bootstrap lowers opacity by default */
        cursor: default;
    }



/***** BUTTONS *****/
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.btn-primary {
    background-color: var(--grey);
    border-color: var(--grey-light);
    color: var(--grey-dark-dark);
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--grey-dark);
    border-color: var(--grey);
    color: var(--grey-light);
}

.card-body {
    background-color: #393E46;
    color: #DFD0B8;
}

/***** Coloring (Phases) *****/
.phase-red {
    background-color: var(--red);
    color: var(--red-light);
    border-color: var(--red-dark-dark);
}

.phase-white {
    background-color: var(--grey-light);
    color: var(--grey-dark);
    border-color: var(--grey-dark);
}

.phase-purple {
    background-color: var(--blue);
    color: var(--red);
    border-color: var(--red);
}

.phase-blue {
    background-color: var(--blue); 
    color: var(--blue-light);
    border-color: var(--blue-dark);
}

.phase-green {
    background-color: var(--green);
    color: var(--green-light);
    border-color: var(--green-dark);
}

.phase-gold {
    background-color: var(--yellow);
    color: var(--yellow-dark);
    border-color: var(--yellow-dark);
}

.phase-training {
    background-color: var(--grey-dark);
    color: var(--grey-light);
    border-color: var(--grey-light);
}

.phase-loss {
    background-color: var(--grey);
    color: var(--red);
    border-color: var(--red);
}

.phase-red:disabled {
    background-color: var(--red);
    color: var(--red-light);
    border-color: var(--red-dark-dark);
}

.phase-white:disabled {
    background-color: var(--grey-light);
    color: var(--grey-dark);
    border-color: var(--grey-dark);
}

.phase-purple:disabled {
    background-color: var(--blue);
    color: var(--red);
    border-color: var(--red);
}

.phase-blue:disabled {
    background-color: var(--blue);
    color: var(--blue-light);
    border-color: var(--blue-dark);
}

.phase-green:disabled {
    background-color: var(--green);
    color: var(--green-light);
    border-color: var(--green-dark);
}

.phase-gold:disabled {
    background-color: var(--yellow);
    color: var(--yellow-dark);
    border-color: var(--yellow-dark);
}

.phase-training:disabled {
    background-color: var(--grey-dark);
    color: var(--grey-light);
    border-color: var(--grey-light);
}

.phase-loss:disabled {
    background-color: var(--grey);
    color: var(--red);
    border-color: var(--red);
}

/***** Coloring (Other) *****/
.married {
    background-color: var(--yellow);
    color: var(--yellow-dark);
    border-color: var(--yellow-dark);
}


/***** TABLES *****/
.table {
    color: #DFD0B8;
}

.table tbody tr:hover {
    background-color: #948979;
    color: #222831;
    cursor: pointer;
}

/***** OTHER *****/
.label {
    font-weight: bold;
    text-decoration: underline;
}

.box-sec {
    border-style: solid;
    border-color: #DFD0B8;
    border-width: 1px;
    padding: 5px;
    margin: 0
}

.table td.phase-red {
    background-color: var(--red) !important;
    color: var(--red-light) !important;
}

.table td.phase-white {
    background-color: var(--grey-light) !important;
    color: var(--grey-dark) !important;
}

.table td.phase-purple {
    background-color: #6f42c1 !important;
    color: #fff !important;
}

.table td.phase-blue {
    background-color: var(--blue) !important;
    color: var(--blue-light) !important;
}

.table td.phase-green {
    background-color: #2ea043 !important;
    color: #fff !important;
}

.table td.phase-gold {
    background-color: #f0a500 !important;
    color: #222831 !important;
}

.table td.phase-training {
    background-color: var(--them-dark-dark) !important;
    color: var(--theme-light) !important;
}

.table td.phase-loss {
    background-color: #6c757d !important;
    color: #fff !important;
}