/* THEME */
:root {
  /* Core Accents & Glows */
  --neon-cyan: #63e5ff;          /* Primary links & interaction highlights */
  --cosmic-cyan: #52d4ff;        /* Bright header/brand accent */
  --faded-cyan: #52d4ff99;       /* Translucent secondary cyan */
  --glow-cyan: #52d4ffcc;        /* Strong hover/focus cyan overlay */
  
  /* Celestial Whites */
  --moon-white: #f4f6f0;         /* Soft warm lunar white */
  --lunar-blue-white: #eaf3fc;   /* Cool, crisp starry white */
  --mist-white: #e9f4ff;         /* Pale overcast background tint */
  --mist-white-alpha: #e9f4ffe2; /* Overcast tint with heavy opacity */
  --nebula-frost: #f8fafc;       /* Faint, frozen outer edge of a space cloud */
  
  /* Nebular Blues (Text & Accents) */
  --nebula-blue: #598eff;        /* Medium blue accent links */
  --constellation-blue: rgb(90 118 230); /* Muted starry headings link */
  --pale-starlight: rgb(196 196 229);    /* Soft lilac-blue heading text */
  --faded-starlight: rgba(196,196,229,0.8);/* Translucent text overlay */
  --stardust-lavender: #c3c3e4;  /* General soft lavender-blue body text */
  --faded-lavender: #c5c5e6;     /* Slightly lighter body text variation */
  --ice-blue: #bdd1ff;           /* Crisp light blue for breadcrumbs */
  --dark-void: rgb(37 37 119);         /* High-contrast alert text */
  
  /* Deep Space Backgrounds */
  --bg-space: #161a36;           /* Main content canvas backdrop */
  --bg-abyss: #0a091a;           /* Deep dense navbar & headers */
  --bg-eclipse: #121630;         /* Primary container/card base */
  --bg-nebula-core: #232b54;     /* Medium dark blue for tab content */
  --bg-cosmic-dust: #242b54;     /* Deep canvas blue for list components */
  --bg-constellation: #141933;   /* Accent block fill for blocks & sidebar */
  --bg-constellation-alpha: #141933aa; /* Translucent frame borders */
  --bg-void-core: #0f132e;       /* Dense shortcut image base */
  --bg-deep-void: #1c2143;       /* Contrast text fill on progress meters */
  
  /* Utility & Structural Grays */
  --space-dust: #80848a;         /* Empty progress backdrop */
  --haze-gray: #c6c6e7;          /* Bare empty tracking fill */
  --abyss-border: #1a2149;       /* Fine spatial divider border line */
}

#app {
   background-image: url("https://f2.toyhou.se/file/f2-toyhou-se/images/123432676_cRn3unPDZnA3GaD.png");
   background-attachment: fixed;
   background-size: cover;
}

p {
    color: var(--faded-lavender);
}

 h1 a, h2 a, h3 a, h4 a, h5 a,
a.h1, a.h2, a.h3, a.h4, a.h5 {
    color: var(--constellation-blue);
}

 h1 , h2 , h3 , h4 , h5 ,
a.h1, a.h2, a.h3, a.h4, a.h5 {
    color: var(--pale-starlight);
}

a {
    color: var(--cosmic-cyan);
}

a:hover {
    color: var(--lunar-blue-white);
}

body {
    color: var(--stardust-lavender);
    background-color: var(--bg-space);
}

.text-muted {
    color: var(--faded-starlight) !important;
}

.site-header-image {
    background-image: none!important;
}

.navbar-dark {
    background-color: var(--bg-abyss)!important;
}

.main-content {
    background-color: var(--bg-space);
}

.card {
    background-color: var(--bg-eclipse);
}

.card-body .tab-content {
    background-color: var(--bg-nebula-core);
}

.card .border-bottom {
    border-bottom: 1px solid var(--abyss-border) !important;
}

.form-control {
    background-color: var(--mist-white-alpha);
}

.list-group, .list-group-item {
    background-color: var(--bg-cosmic-dust);
}

.list-group-item a {
    color: var(--faded-starlight);
}

.list-group-item a:hover {
    color: var(--moon-white);
}

.list-group-item p, .list-group-item label {
    color: var(--moon-white);
}

.dropdown-menu {
    background-color: var(--mist-white-alpha);
}

/* Modal Dialogs */
.modal-content {
    color: var(--ice-blue);
    background-color: var(--bg-abyss);
}

.modal-content h3, .modal-content h4, .modal-content h5, .modal-content p {
    color: var(--ice-blue);
}

.modal-content .card {
    background-color: var(--bg-abyss);
}

/*.modal-content .list-group, .modal-content .list-group-item {
    background-color: var(--space-dust);
}*/

.modal-header .modal-title {
    color: var(--ice-blue);
}

.alert-secondary {
    color: var(--faded-starlight);
    background-color: var(--bg-nebula-core);
}

.progress {
    background-color: var(--haze-gray);
}

.progress-fill {
    background-color: var(--constellation-blue);
}

.img-thumbnail {
    background-color: var(--bg-constellation);
    border: 3px solid var(--bg-constellation-alpha);
}

/* --------Sidebar background-------- */
.sidebar .sidebar-header {
    background-color: var(--bg-abyss);
}

.sidebar .sidebar-header a {
    color: var(--lunar-blue-white);
}

.sidebar-section, .sidebar ul li {
    background-color: var(--bg-constellation);
}

.sidebar-section-header {
    color: var(--moon-white);
    background-color: var(--bg-abyss);
}

.sidebar a {
    color: var(--faded-starlight);
}

.sidebar a:hover {
    color: var(--moon-white);
    background-color: #346ac099; /* Left un-themed as a unique component state */
}

.sidebar a.active, .sidebar a.active:hover {
    color: var(--moon-white);
    background-color: #346ac0;   /* Left un-themed as a unique component state */
}

/* ----------Nav and Footer custom color-------- */
.navbar-dark .navbar-brand, .navbar-dark .navbar-brand:focus, .navbar-dark .navbar-brand:hover {
    color: var(--cosmic-cyan);
}

.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
    color: var(--glow-cyan);
}

.navbar-dark .navbar-nav .nav-link {
    color: var(--faded-cyan);
}

.nav-tabs .nav-link.active {
    color: var(--moon-white);
}

.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
    color: var(--neon-cyan);
}

.navbar-light .navbar-nav .nav-link {
    color: var(--glow-cyan);
}

.site-footer .copyright {
    color: var(--glow-cyan);
}

.breadcrumb a {
    color: var(--glow-cyan);
}

.breadcrumb a:focus, .breadcrumb a:hover {
    color: var(--cosmic-cyan);
}

.breadcrumb-item.active {
    color: var(--ice-blue);
}

/* DASHBOARD CSS, PLEASE DO NOT REMOVE */

.dashboard-title{
    text-align:center;
    font-size:3rem;
    font-weight:500;
    margin:15px 0 30px;
}

.dashboard-shortcuts{
    display:flex;
    justify-content:space-between;
    gap:18px;
    flex-wrap:wrap;
}

.shortcut{
    text-align:center;
    flex:1;
    min-width:95px;
}

.shortcut img{
    max-width:180px;
    max-height:180px;
    border-radius:12px;
    background: var(--bg-void-core);
    padding:10px;
    transition:.2s;
}

.shortcut img:hover{
    transform:translateY(-3px);
}

.shortcut span{
    display:block;
    margin-top:10px;
    font-size: 1.2rem;
    font-weight:bolder;
}

.quote-display{
    min-height:160px;
    border-radius:12px;
}

.quote-display .card-body{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px;
}

.quote{
    font-size:1.2rem;
    text-align:center;
    line-height:1.8;
    font-style:italic;
}

/* BOSS BAR CSS, DO NOT REMOVE */

.timestamp{
    max-width:350px;
    margin:0 auto 30px;
}

.boss-banner{
    border-radius:5px;
    padding: 10px 10px;
    color: var(--moon-white);
}

.boss-banner-header{
    display:flex;
    align-items:center;
    margin-bottom:8px;
}

.boss-name{
    flex:1;
    text-align:left;
    font-size:18px;
    font-weight:bold;
}

.boss-clock{
    flex:1;
    text-align:right;
    font-size:14px;
    opacity:.8;
}

.boss-name a{
    color: var(--moon-white);
}

.boss-clock{
    font-size:14px;
    opacity:.8;
}

.boss-progress{
    width:100%;
    height:28px;
    background: var(--haze-gray);
    border-radius:20px;
    overflow:hidden;
}

.boss-progress-fill{
    height:100%;
    background-color: var(--constellation-blue);
    display:flex;
    justify-content:center;
    align-items:center;
    color: var(--bg-deep-void);
    font-weight:bold;
    transition:width .3s;
}

.dashboard-shortcuts{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:18px;
}

.shortcut{
    text-align:center;
}

/* DASHBOARD RESPONSIVE, PLEASE DO NOT REMOVE */

@media (max-width: 1750px){
    .shortcut img {
        height: 110px;
    }
}

@media (max-width:1600px){
    .dashboard-shortcuts{
        grid-template-columns:repeat(6,1fr);
    }
}

@media (max-width:1550px){
    .shortcut img {
        height: 100px;
    }
    .dashboard-shortcuts {
        gap: 14px;
    }
}

@media (max-width:1500px){
    .shortcut img {
        height: 90px;
    }
    .dashboard-shortcuts {
        gap: 12px;
    }
}

@media (max-width:1470px){
    .dashboard-shortcuts{
        grid-template-columns:repeat(3,1fr);
        gap: 10px;
    }
    .shortcut img {
        height: 120px;
    }
}

@media (max-width:991px){
    .dashboard-shortcuts{
        grid-template-columns:repeat(6,1fr);
    }
}

@media (max-width:830px){
   .shortcut img {
       height: 110px;
   }
}

@media (max-width:760px){
    .shortcut img {
        height: 120px;
    }
    .dashboard-shortcuts{
        grid-template-columns:repeat(3,1fr);
    }
}

@media (max-width:440px){
    .shortcut img {
        height: 110px;
    }
}

/* BOSS BAR RESPONSIVE, PLEASE DO NOT REMOVE */
.boss-bar-desktop{
    display:block;
}

.boss-bar-mobile{
    display:none;
}

@media (max-width:991px){
    .boss-bar-desktop{
        display:none;
    }
    .boss-bar-mobile{
        display:block;
    }
}

/* Other overwrite */
.inventory-stack-name, .inventory-character-name {
    color: var(--stardust-lavender);
}

.inventory-stack-name:hover, .inventory-character-name:hover {
    color: var(--lunar-blue-white);
}

.tox :not(svg) {
    background-color: var(--mist-white);
}

.mce-content-body {
    background-color: var(--mist-white-alpha);
}

.mce-content-body p {
    color: #495057;
}

.card-header {
    border-bottom-color: var(--nebula-frost);
}

.character-bio .nav-tabs.card-header-tabs .active {
    background-color: var(--bg-space);
    border-color: var(--moon-white) var(--moon-white) var(--nebula-frost);
}

.nav-tabs .nav-link {
    background-color: var(--bg-cosmic-dust);
    border-bottom-color: var(--nebula-frost);
}

.nav-tabs .nav-link:active {
    background-color: var(--bg-space);
}

.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
    border-color: var(--moon-white);
}

.character-bio .nav-tabs.card-header-tabs {
    background-color: var(--bg-cosmic-dust);
    border-bottom-color: var(--nebula-frost);
}

tr.outflow {
    background-color: var(--bg-space);
}

/* Alerts and other customization */
/*************** INFO COLOUR *****************/
.badge-info {
    background-color: #23397d;
}

.text-info {
    color: #87bfff;
}

.alert-info, .alert-info p {
    color: #87bfff;
    background-color: #23397d;
    border-color: #1a165c;
}

/*************** SUCCESS COLOUR *****************/
.badge-success {
    background-color: #245d61;
}

.text-success {
    color: #a9ced1 !important;
}

.alert-success {
    color: #a9ced1;
    background-color: #245d61;
    border-color: #0c2022;
}

/*************** WARNING COLOUR *****************/
.badge-warning {
    background-color: #9e5e55;
}

.text-warning {
    color: #ddc5af !important;
}

.alert-warning {
    color: #ddc5af;
    background-color: #9e5e55;
    border-color: #36250b;
}

/*************** DANGER COLOUR *****************/
.badge-danger {
    background-color: #77245d;
}

.text-danger {
    color: #cdb1cd !important;
}

.alert-danger {
    color: #cdb1cd;
    background-color: #77245d;
    border-color: #310c24;
}

/* changes the colours of bootstrap buttons.
The hover states only kind of half work, I haven't been bothered to figure out why yet. */
.btn-outline-info {
    color: #75afff;
    border-color: #75afff;
}

.btn-outline-info:hover {
    color: #75afff !important;
    background-color: #1a165c;
    border-color: #75afff;
}

.btn-outline-success {
    color: #67c5b8;
    border-color: #67c5b8;
}

.btn-outline-success:hover {
    color: #67c5b8 !important;
    background-color: #0c2022;
    border-color: #67c5b8;
}

.btn-primary, .btn-secondary {
    color: #fff;
    background-color: var(--constellation-blue);
    border-color: var(--constellation-blue)
}

.btn-primary:hover, .btn-secondary:hover {
    color: #fff;
    background-color: var(--nebula-blue);
    border-color: var(--nebula-blue)
}

.btn-dark:hover {
    color: #fff;
    background-color: var(--space-dust);
    border-color: var(--space-dust)
}

.notifications-table .unread, .notifications-table .unread td {
    background-color: #275e62
}

/* ALERT LINKS */
/* .alert-info a, .alert-primary a, .alert-secondary a, .alert-danger a, .alert-success a, .alert-warning a {
    filter: brightness(0.5);
} */