/* 
    Adding custom attributes here for use in var refs later. Should make
    changing to a different theme a little easier - just replace the entire
    spectrum here in order to shift the hue of the theme.
*/
:root {
    /* backgrounds */
    --color-step-1: #100f1d;
    --color-step-2: #161527;
    /* interactive components */
    --color-step-3: #231e4d;
    --color-step-4: #2e236b;
    --color-step-5: #372c7b;
    /* borders and seperators */
    --color-step-6: #413789;
    --color-step-7: #4e449f;
    --color-step-8: #5f52bf;
    /* solid colors */
    --color-step-9: #5937d2;
    --color-step-10: #4d22c0;
    /* text */
    --color-step-11: #aea7ff;
    --color-step-12: #dedeff;

    --color-step-a1: #0000fd0d;
    --color-step-a2: #473cfb18;
    --color-step-a3: #5844fd41;
    --color-step-a4: #5d40fd61;
    --color-step-a5: #664eff72;
    --color-step-a6: #705dff81;
    --color-step-a7: #7766fe99;
    --color-step-a8: #7b69febb;
    --color-step-a9: #6a40ffcf;
    --color-step-a10: #6329ffbc;
    --color-step-a11: #aea7ff;
    --color-step-a12: #dedeff;

    --color-contrast: #fff;
    --color-surface: #1b193d80;
    --color-indicator: #5937d2;
    --color-track: #5937d2;

    /* backgrounds */
    --gray-1: #111113;
    --gray-2: #19191b;
    /* interactive components */
    --gray-3: #222325;
    --gray-4: #292a2e;
    --gray-5: #303136;
    /* borders and seperators */
    --gray-6: #393a40;
    --gray-7: #46484f;
    --gray-8: #5f606a;
    /* solid colors */
    --gray-9: #6c6e79;
    --gray-10: #797b86;
    /* text */
    --gray-11: #b2b3bd;
    --gray-12: #eeeef0;

    --gray-a1: #1111bb03;
    --gray-a2: #cbcbf90b;
    --gray-a3: #d6e2f916;
    --gray-a4: #d1d9f920;
    --gray-a5: #d7ddfd28;
    --gray-a6: #d9defc33;
    --gray-a7: #dae2fd43;
    --gray-a8: #e0e3fd60;
    --gray-a9: #e0e4fd70;
    --gray-a10: #e3e7fd7e;
    --gray-a11: #eff0feb9;
    --gray-a12: #fdfdffef;

    --gray-contrast: #FFFFFF;
    --gray-surface: rgba(0, 0, 0, 0.05);
    --gray-indicator: #6c6e79;
    --gray-track: #6c6e79;
}

/* SITE LAYOUT */

body {
    color: var(--color-step-12);
    background-color: var(--color-step-1);
}

a {
    color: var(--color-step-11);
}

a:hover {
    color: var(--color-step-12);
}

.text-muted {
    color: var(--gray-11) !important
}

.navbar {
    background-color: var(--color-step-a1);
    color: var(--color-step-12);
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: var(--color-step-12);
}

.navbar-dark .navbar-nav .nav-link {
    color: var(--color-step-11);
}

.dropdown-menu {
    background-color: var(--color-step-3);
}

.dropdown-item {
    color: var(--color-step-12);
}

.dropdown-item:hover {
    background-color: var(--color-step-12);
    color: var(--color-step-3);
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 60px;
    line-height: 60px;
    /* Vertically center the text there */
    background-color: var(--color-step-a1);
    color: var(--color-step-12);
}

/* GENERAL BOOTSTRAP ELEMENTS */

.card-header {
    background-color: var(--color-step-2);
    border-bottom-color: var(--color-step-6);
}

.card {
    background-color: var(--color-step-3);
}

.list-group-item {
    background-color: var(--color-step-3);
    ;
    border-color: var(--color-step-a3);
    ;
}

/* kind of a hacky selector to get at nested cards, like on the help page */
.card .card .list-group-item {
    background-color: var(--color-step-2);
    ;
    border-color: var(--color-step-a3);
    ;
}

.list-group-item a {
    color: var(--color-step-11);
    font-weight: 500;
}

.list-group-item:hover a {
    color: var(--color-step-12);
}

input.form-control {
    color: var(--color-step-12);
    background-color: var(--color-step-2);
    border-color: var(--gray-6);
}

input[type=submit] {
    color: var(--gray-12);
    background-color: var(--color-step-8);
}

input.form-control:focus {
    color: var(--color-step-12);
    background-color: var(--color-step-2);
    border-width: 2px;
    border-color: var(--color-step-a6);
    box-shadow: 0 0 0 0px var(--color-step-a6);
}

textarea.form-control {
    color: var(--color-step-12);
    background-color: var(--color-step-2);
    border-color: var(--gray-6);
}

textarea.form-control:focus {
    color: var(--color-step-12);
    background-color: var(--color-step-2);
    border-width: 2px;
    border-color: var(--color-step-a6);
    box-shadow: 0 0 0 0px var(--color-step-a6);
}

.btn {
    background-color: var(--color-step-9);
}

.btn-outline-secondary {
    background-color: var(--color-step-9);
    border-width: 0px;
}

.btn-outline-secondary:hover {
    background-color: var(--color-step-10);
    border-width: 0px;
}

.btn-info {
    border-color: var(--color-step-3);
}

.btn-info:hover {
    border-color: var(--color-step-3);
    background-color: var(--color-step-6);
}

.page-item .page-link {
    color: var(--color-step-12);
    background-color: var(--color-step-6);
    border-color: var(--color-step-a10);
}

.page-item.active .page-link {
    color: var(--color-step-12);
    background-color: var(--color-step-a8);
    border-color: var(--color-step-a10);
}

.page-item.disabled .page-link {
    color: var(--color-step-12);
    background-color: var(--color-step-6);
    border-color: var(--color-step-a10);
}

.breadcrumb {
    background-color: var(--color-step-4);
    border-color: var(--color-step-6);
}

.table .thead-light th {
    background-color: var(--color-step-2);
    color: var(--color-step-11);
    border-color: var(--color-step-a2);
}

/* SPECIFIC ELEMENTS */

/*   HOME PAGE - PLAY BUTTON */

a.playbutton {
    box-shadow: 0px 0px 0px 0px var(--color-step-a11);
    background: var(--color-step-9);
    background-color: var(--color-step-9);
    border-radius: 0.25rem;
    border: 1px solid var(--color-step-a8);
    display: inline-block;
    cursor: pointer;
    font-family: Arial;
    font-size: 19px;
    font-weight: 500;
    padding: 12px 36px;
    text-decoration: none;
    text-shadow: 0px 1px 0px var(--color-step-a4);
    color: var(--color-contrast);
    margin-top: 3rem;
}

a.playbutton:hover {
    background: var(--color-step-10);
    background-color: var(--color-step-10);
    color: var(--color-contrast);
}

a.playbutton:active {
    position: relative;
    top: 1px;
}

/* Registration */

.disclaimer {
    text-align:center;
}

/* Character Creation and Details */

.character-form {
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas:
        'name color desc desc'
        'prefix suffix desc desc'
        'pronouns desccolor desc desc'
        'attraction attraction sexinterest sexinterest'
        'attraction attraction rominterest rominterest'
        'dominance dominance dominance dominance'
        'stats stats stats stats'
        'str end agi per'
        'int wil cha emp'
        'backstory backstory ooc ooc'
        'url url image image'
        'ph ph phimage phimage'
        'submit submit submit submit';
}

div:has(> #id_db_key) {grid-area:name;}
div:has(> #id_title) {grid-area:prefix;}
div:has(> #id_lastname) {grid-area:suffix;}
div:has(> #id_color) {grid-area:color;}
div:has(> #id_desc) {grid-area:desc;}
div:has(> #id_desccolor) {grid-area:desccolor;}
div:has(> #id_gender) {grid-area:pronouns;}
#attraction-container {grid-area:attraction;}
div:has(> #id_sexInterest) {grid-area:sexinterest;}
div:has(> #id_romInterest) {grid-area:rominterest;}
div:has(> #id_dominance) {grid-area:dominance;}
/*Stats*/
div:has(> #id_strength) {grid-area:str;}
div:has(> #id_endurance) {grid-area:end;}
div:has(> #id_agility) {grid-area:agi;}
div:has(> #id_perception) {grid-area:per;}
div:has(> #id_intelligence) {grid-area:int;}
div:has(> #id_will) {grid-area:wil;}
div:has(> #id_charisma) {grid-area:cha;}
div:has(> #id_empathy) {grid-area:emp;}

div:has(> #id_extended_desc) {grid-area:backstory;}
div:has(> #id_ooc_desc) {grid-area:ooc;}
div:has(> #id_awaiting_review) {grid-area:url;}
.link-check {grid-area:image;}
div:has(> .placeholder-field) {grid-area:ph;}
#placeholder-image {grid-area:phimage;}
#submit {grid-area:submit;}

input[type="range"], input[type="checkbox"], select {
  &.form-control:focus-visible {
    outline: dashed var(--color-step-12);
    outline-offset: .3rem;
  }
}

.color-div {
    display: flex;
    justify-content: center;
    width:100%;
}

.color-panel {
    width:100%;
}

.statsExplanation {
    border: 2px solid var(--color-step-10);
}

#statDesc {
    grid-area:stats;
    display:grid;
    gap:6px;
    grid-template-areas:
    'header header header'
    'summary summary summary'
    '. . .'
    '. . .';
}

#statsHeader {
    grid-area:header;
}

#statsSummary {
    grid-area:summary;
    border: none;
}

.review-img {
    max-width: 250px;
    max-height: 250px;
}

.reviewForm {
    display: grid;
    grid-template-columns: 250px 200px auto;
    grid-template-rows: auto 125px 125px;
    grid-template-areas:
        'name name account'
        'image . .'
        'image . .';
    column-gap: 10px;
}

.review-name {grid-area: name;}
.review-account {grid-area:account;}

.imageBox {
    grid-area: image;
    justify-self: center;
    align-self: center;
}

.tab {
    overflow: hidden;
}

.tab button {
    margin: 1px;
    border-radius: 5px 30px 0px 0px;
    border: 2px solid #000;
    border-bottom: none;
    padding: 12px 16px;
    cursor: pointer;
    color: var(--color-step-12);
    background-color: var(--color-step-1);
}

.tabcontent {
    display: none;
    border-top: none;
}

.tab button.activeTab {
    background-color: var(--color-step-3);
}

.activeContent {
    display: block;
}

.slider {
    width: 100%;
}

#attraction-grid {
    display: grid;
    border: 2px solid var(--color-step-10);
    justify-content: space-evenly;
    align-content: space-evenly;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-areas:
        'all masc andro femme'
        'man . . .'
        'enby . . .'
        'woman . . .';
}

#whole-grid {grid-area: all;}
#man {grid-area: man;}
#enby {grid-area: enby;}
#woman {grid-area: woman;}
#masc {grid-area: masc;}
#andro {grid-area: andro;}
#femme {grid-area: femme;}

.attraction-box {
    align-self: center;
}

.attraction-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 4px;
}

#attractionInterest {
    display: grid;
    margin: 12px 0px 0px 0px;
    gap: 20px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
        'attraction sexInt'
        'attraction romInt';
}

#sexInt {grid-area:sexInt;text-transform:capitalize;}
#romInt {grid-area:romInt;text-transform:capitalize;}
.attraction-value {
    justify-self: center;
    padding: 12px;
}
#attraction-title {
    text-align: center;
}

#review-alert {
    background-color: rgba(255, 50, 0, 0.2);
    text-align:center;
}

.closebtn {
    right: 0;
    top: 0;
    padding: 0px 4px;
    position: absolute;
    cursor: pointer;
}

.play-list {
    display: flex;
    flex-wrap: wrap;
    width:100%;
    justify-content: flex-start;
    text-align: center;
}

.detail-image {
    margin: 4px;
}

.detail-buttons {
    background-color: var(--color-step-5);
    padding: 8px 12px;
    text-align: center;
    display: inline-block;
    font-size: 1.5rem;
    width: 100%;
    border-radius: 10px;
    margin: 4px;
}

.detail-buttons:hover {
    background-color: var(--color-step-4);
}

.manage-grid {
    position: relative;
    display: grid;
    margin: 0.5%;
    padding: 0.5%;
    gap: 4px;
    width: 22%;
    grid-template-areas:
        'image image image'
        'name name name'
        'play play play'
        'home edit delete'
        'loc loc loc'
        'loc loc loc'
        'dnd dnd dnd';
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 250px 2.5rem auto auto 25px auto 25px;
    border: 2px groove var(--color-step-6);
    align-items: center;
    justify-content: space-between;
    text-align: center;
}

.manage-button {
    background-color: var(--color-step-5);
    text-align: center;
    justify-self: center;
    display: inline-block;
    width: 90%;
    font-size: 1rem;
    border-radius: 10px;
    margin: 2px;
    padding: 2px 0px;
}

.manage-image {grid-area:image;align-self:center;height:250px;display:flex;justify-content:center;align-items:center;}
.manage-name {grid-area:name;}
.manage-loc {grid-area:loc;margin: 4px 0px 0px 0px;}
.manage-dnd {grid-area:dnd;cursor:help;}
.manage-play {grid-area:play;align-self:center;width:100%;}
.manage-home {grid-area:home;align-self:center;}
.manage-edit {grid-area:edit;align-self:center;}
.manage-delete {grid-area:delete;align-self:center;}

.manage-button:hover {
    background-color: var(--color-step-4);
}

.manage-char-image {
    max-width:100%;
    max-height:100%;
}

.dnd-alert {
    display: none;
    position: absolute;
    z-index: 2;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    border: 4px solid var(--color-step-6);
    padding: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    width: 100%;
    background-color: var(--color-step-1);
}

.alert-button {
    background-color: var(--color-step-5);
    text-align: center;
    display: inline-block;
    width: 90%;
    font-size: 1rem;
    border-radius: 10px;
    margin: 2px;
    padding: 2px;
}

/* Character List tweaks */
.char-list {
    display: grid;
    width:100%;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1f 1f 1f 1f 1f;
    justify-content: space-evenly;
    align-content: space-between;
    text-align:center;
}

.charlist-item {
    display:grid;
    align-content:space-between;
    justify-content:center;
    width:100%;
    height:100%;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
}

.charlist-img {
    justify-self: center;
    align-self: center;
}

.charlist-name {
    
}

/* Help page fix */
pre {
    color: var(--color-step-12);
}

/* Front page: Highlight Characters */
#highlight-table {
    display: flex;
    flex-wrap: wrap;
    width:100%;
    justify-content: flex-start;
    text-align: center;
}

.highlight-char {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 23%;
    padding: 1%;
    margin: 1%;
    border: 2px groove var(--color-step-6);
}

.highlight-image {
    margin: 0;
    object-fit: cover;
    object-position: top;
}

/* END OF CUSTOMIZATIONS */