@import url("checkbox.css");

@font-face {
	font-family: 'Monogram';
	font-style: normal;
	font-weight: bold;
	src: url('/resources/monogram.ttf') format('truetype');
}

:root {
    --primary-bg: hsl(256, 33%, 11%);
    --secondary-bg: #2f2a3f;
    --input-bg: #6d6586;
    --table-header-bg: #3f3a52;
    --separator: #4b4568;
    --primary-text: #d5d1e6;
    --secondary-text: #a69ec6;
    --disabled-text: #6d6586;
    --highlight: #e281b1;
    --hover-bg: #3f3a52;
    --button-bg: #756ca1;
    --button-bg-hover: #8a81b8;
    --button-bg-active: #5b5380;
    --alert: salmon;    
    --treasure-red-2: hsl(0, 50%, 51%);
    --treasure-red: #DC2626;
}

html {
    height: 100%;
}

body {
    margin: 0;
    background-color: var(--primary-bg);
    height: 100%;
}

a {
    color: var(--secondary-text);
}

table {
    border-collapse: collapse;  
    border: 0;    
}

table:not(.headless) tr:first-child {
    background-color: var(--table-header-bg);
}

table:not(.headless) tr:first-child td {
    font-weight: bold;
    padding-top: 0.7em;
    font-style: italic;
    color: var(--secondary-text);
}

table tr {
    border-bottom: 1px solid var(--separator);
}   

table tr:hover {
    background-color: var(--hover-bg);
}


table td {
    padding: 0.5em;
}

table img {
    margin: 0;
}

table.expand-first td:first-child {
    width: 100%;
}

table.expand-first td,
table.expand-last td {
    white-space: nowrap;
}

table.expand-last td:last-child {
    width: 100%;
    text-align: right;
}


table td:not(:first-child) {
    padding-left: 2em;
}


.monogram {
    font-family: 'Monogram', monospace;
    font-size: 32px;
    font-smooth: never;
    -webkit-font-smoothing: none;
    font-synthesis: none;
    filter: contrast(1);
}

.secondary-text {
    color: var(--secondary-text);
}

#header h1 {        
    font-size: 48px;
    margin: 0;
    display: block;    
    color: var(--highlight);
    padding-top: 3px;
}

#inline-logo {    
    margin: 12px 16px 0 16px;
    height: 36px;
    image-rendering: pixelated;
}

#header {
    background-color: var(--secondary-bg);    
    color: var(--primary-text);
    height: 55px;
    font-family: monospace;
    font-size: 11pt;  
}

#header-menu {
    position: absolute;
    right: 0;
    top: 0;
    padding: 0.4em 0.5em;
    background-color: var(--secondary-bg);
}

#content {
    background-color: var(--primary-bg);
    color: var(--primary-text);
    font-size: 11pt;   
    font-family: monospace; 
    position: relative;
    height: calc(100% - 55px);    
    width: 100%;
    max-width: 1400px;    
    margin: 0 auto;
    display: flex;
    flex-flow: column;
}

#modals {    
    color: var(--primary-text);
    font-size: 11pt;   
    font-family: monospace;         
}

div.window {
    position: relative;    
    scrollbar-color: var(--separator) var(--secondary-bg);
}

div.window .window-title {          
    position: absolute;
    top: 0;
    left: 0;
    right: 0;    
    font-size: 12pt;
    padding: 0.2em 0.2em 0.2em 0.5em;
}

div.window .window-content {
    position: absolute;
    top: 2em;    
    bottom: 0.5em;
    left: 0;
    right: 0;
    background-color: var(--secondary-bg); 
    overflow: auto;
}

h2 {    
    margin: 0.2em 0 0.8em 0;    
    color: var(--secondary-text);
    font-size: 120%;
}

.as-table  { display: table; margin: 0 0 0.7em 0; width: 98%;}
.as-table p { display: table-row; margin: 0; }
.as-table label { display: table-cell; margin: 0 0 0.7em 0; width: 100%;}
.as-table input,
.as-table select
{ display: table-cell; margin: 0 0 0.7em 0; width: 100%; }


details summary {
    cursor: pointer;
    font-style: italic;
    margin-bottom: 1em;
    color: var(--secondary-text);
    padding: 0.3em;
}

input[type="button"] {
    background-color: var(--button-bg);
    color: white;
    font-family: monospace;
    border: 0;
    font-size: 100%;
    padding: 0.3em 0.7em 0.2em 0.7em; 
    border-radius: 2px;
    margin-left: 0.5em;
    cursor: pointer;
}

input[type="checkbox"] {
    margin-left: 0.5em;
    background-color: var(--button-bg);
}

input[type="button"]:hover {
    background-color: var(--button-bg-hover);
}

input[type="button"]:active {
    background-color: var(--button-bg-active);
}

input[type="button"]:disabled {
    background-color: var(--button-bg-active);
    color: var(--secondary-text);
}

input[type="text"], 
input[type="datetime-local"],
textarea,
select {    
    box-sizing: border-box;    
    background-color: var(--input-bg);
    border: 1px solid var(--input-bg);
    color: white;
    padding: 0.3em;
    font-size: 100%;
    font-family: monospace;    
    outline: none;
}

input[type="text"]::placeholder {
    color: var(--secondary-text);
}

input[type="text"].missing::placeholder {
    color: var(--alert);
}

input[type="text"].missing {
    animation: blinker 0.5s linear 2;
}
      
@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.tab-menu {
    position: relative;
}

.tab-menu .tab-button {
    display: inline-block;
    background-color: var(--primary-bg);
    color: var(--primary-text);
    font-family: monospace;
    border: 0;
    font-size: 120%;
    padding: 0.7em 1em 0.7em 1em;     
    margin-right: 0.5em;    
    width: 10em;
    text-align: center;
    cursor: pointer;
    user-select: none;
}

.tab-menu .extra-button {
    font-size: 120%;
    padding: 0.7em 1em 0.7em 1em;     
    float: right;
}

.tab-button:hover {
    background-color: var(--hover-bg);
}

.tab-button.selected, .tab-button:active {
    background-color: var(--input-bg);
    color: white;
}

.tab-button.disabled {
    background-color: var(--primary-bg); 
    color: var(--disabled-text);
}

.tab {
    display: none;
    position: relative;
    width: 100%; 
    height: 100%;
}

.modal-dialog {  
    color: var(--primary-text);    
    background-color: var(--secondary-bg);
    padding: 4em 1em 1em 1em;
    border-radius: 5px;
    border: 0;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);        
}

.modal-dialog:focus {
    outline: none;
}

.modal-dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-dialog .modal-content {        
    overflow-y: auto;    
    height: 100%;
    scrollbar-color: var(--separator) var(--secondary-bg);
}

.modal-dialog .modal-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    font-size: 120%;    
    padding: 0.5em;
    background-color: var(--input-bg);
    text-align: center;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;    
    user-select: none;
}

.modal-header .close-button {
    position: absolute;
    top: 0;
    right: 0.2em;    
    cursor: pointer;
    font-size: 200%;
}

.modal-header .close-button:hover {
    color: white;
}

.avatar-icon {
    display: inline-block;
    vertical-align: middle;
    border-radius: 5px;
    margin-left: 0.5em;
}

.pixel-icon {
    display: inline-block;
    vertical-align: middle;
    border-radius: 5px;
    margin-left: 0.5em;
    image-rendering: pixelated;
}

#loading-spinner {
    display: inline-block;
    vertical-align: middle;
    width: 32px;
    height: 32px;
}

#connect-menu {
    margin: 0.4em 0.5em 0 0;
}

#disconnect-menu {
    margin: 0.2em 0.5em 0 0;
}

.info {
    color: #D6EAF8;
}

.success {
    color: #58D68D;
}

.warning {
    color: #F5B041;
}

.error {
    color: #EC7063;
}

#message-box-anchor {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 1em;
    z-index: 200;
}

.message {
    padding: 1em;
    margin-top: 1em;
    max-width: 40em;
}

.message.info {
    background-color: #716796;
    color: white;
}

.message.success {
    background-color: #319a5d;
    color: white;
}

.message.warning {
    background-color: #ae701b;
    color: white;
}

.message.error {
    background-color: #af2925;
    color: white;
}