/* GenieACS Dark Theme - Custom */
body, html {
  background-color: #121212 !important;
  color: #e0e0e0 !important;
}

table, .table, .card {
  background-color: #1e1e1e !important;
  color: #e0e0e0 !important;
}

.navbar, .sidebar, header {
  background-color: #1a1a1a !important;
  border-color: #333 !important;
}

a, a:visited {
  color: #5cb6ff !important;
}

input, select, textarea {
  background-color: #222 !important;
  color: #fff !important;
  border: 1px solid #444 !important;
}

.btn {
  background-color: #333 !important;
  color: #fff !important;
  border: none !important;
}

.btn:hover {
  background-color: #444 !important;
}

tr:nth-child(even) {
  background-color: #181818 !important;
}

h3, h2 {
    color: #fff !important;
}

#header {
    background-color: #282828 !important
}

#header > nav > ul > li > a,
#header > nav > ul > li > a:visited {
    display: inline-block;
    min-width: 140px;
    color: #cfd8dc;
    text-decoration: none;
    background: none;
    padding: 8px;
    background-color: #2b3a4d;
    transition: background-color 0.3s ease;
}

#header > nav > ul > li > a:hover {
    background-color: #046380;
    color: #fff; 
}

#header>nav>ul>li {
    margin: 0 2px;
    background-color: var(--color1);
    display: inline-block;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border-top: 1px solid var(--color1);
    border-left: 1px solid var(--color1);
    border-right: 1px solid var(--color1);
    transition: background-color var(--fade);
}

#header>nav>ul>li:is(.active,:hover) {
    background-color: #5a5a5a;
}

.overlay-wrapper>.overlay {
    max-width: 90vw;
    max-height: 90vh;
    background-color: var(--color3);
    border: 1px solid var(--color1);
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 0 15px #aaa;
    overflow: auto;
}

:is(input[type=button],button).primary {
    border: 1px solid var(--color1);
    background-color: var(--color3);
    color: white;
}

input[type=button], button {
    background: var(--color3);
    border: 0;
    color: #fff;
    border-radius: 4px;
    transition: background-color var(--fade), color var(--fade);
    display: inline-block;
    vertical-align: middle;
}

#header>.drawer-wrapper>.drawer {
    background-color: var(--color3);
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    border-bottom: 1px solid var(--color1);
    border-left: 1px solid var(--color1);
    border-right: 1px solid var(--color1);
    margin-top: -1px;
    box-shadow: 0 0 10px #ccc;
    overflow: hidden;
    transition: height var(--fade), opacity var(--fade);
}

.autocomplete {
    box-shadow: 0 0 10px #fff;
    background-color: var(--color3);
    border: 1px solid var(--color1);
    border-radius: 4px;
    max-height: 300px;
    overflow-y: auto;
    transition: opacity var(--fade)
}

.autocomplete>.suggestion {
    padding: 5px
}

.autocomplete>.suggestion:is(.selected,:hover) {
    background-color: var(--color4)
}

:root {
    --base-font-size: 13px;
    --base-line-height: 16px;
    --color1: #000000 !important;
    --color2: #535a5a !important;
    --color3: #363c41 !important;
    --color4: #046380 !important;
    --color5: #002f2f !important;
    --fade: .2s;
    --disabled: #666;
    --status-red: 0 60% 50%;
    --status-green: 130 60% 50%;
    --status-gray: 58 3% 80%;
    --status-yellow: 57 13% 26%;
}

/* Fundo geral do editor */
.CodeMirror {
  background: #1e1e1e !important;
  color: #e0e0e0 !important;
}

/* Linhas e números */
.CodeMirror-gutters {
  background: #1e1e1e !important;
  border-right: 1px solid #444 !important;
}
.CodeMirror-linenumber {
  color: #888 !important;
}

/* Seleção e cursor */
.CodeMirror-cursor {
  border-left: 2px solid #ffcc00 !important;
}
.CodeMirror-selected {
  background: #3e5773 !important;
}

/* Realce de sintaxe */
.cm-keyword { color: #c792ea !important; }
.cm-string { color: #a5e075 !important; }
.cm-number { color: #f78c6c !important; }
.cm-comment { color: #546e7a !important; font-style: italic; }
.cm-variable { color: #82aaff !important; }
.cm-def { color: #ffcb6b !important; }
.cm-s-default .cm-atom { color: #54bbd3 !important; }