@font-face { font-family: 'Inter'; src: url('../font/Inter-Light.ttf'); font-weight: 300 }
@font-face { font-family: 'Inter'; src: url('../font/Inter-Regular.ttf'); font-weight: 400 }
@font-face { font-family: 'Inter'; src: url('../font/Inter-SemiBold.ttf'); font-weight: 600 }
@font-face { font-family: 'Inter'; src: url('../font/Inter-Bold.ttf'); font-weight: 700 }

@font-face { font-family: 'Titillium Web'; src: url('../font/TitilliumWeb-Light.ttf'); font-weight: 300 }
@font-face { font-family: 'Titillium Web'; src: url('../font/TitilliumWeb-Regular.ttf'); font-weight: 400 }
@font-face { font-family: 'Titillium Web'; src: url('../font/TitilliumWeb-SemiBold.ttf'); font-weight: 600 }
@font-face { font-family: 'Titillium Web'; src: url('../font/TitilliumWeb-Bold.ttf'); font-weight: 700 }

@font-face { font-family: 'Fira Mono'; src: url('../font/FiraMono-Regular.ttf'); font-weight: 400 }
@font-face { font-family: 'Fira Mono'; src: url('../font/FiraMono-Medium.ttf'); font-weight: 500 }
@font-face { font-family: 'Fira Mono'; src: url('../font/FiraMono-Bold.ttf'); font-weight: 700 }


:root {
    color-scheme: dark;

    --bg-body: #4e443b;
    /*--bg-body: #1E1C1C;*/
    --bg-content: #272626;
    --bg-content-highlight:  #323131;

    --brand-primary: #d96605;
    --brand-primary-hover: #c45f0d;
    --brand-blu-team: #5B818F;
    --brand-red-team: #A75D50;

    --text-primary: #ffffff;
    --text-secondary: #A6A7AB;
    --text-teritary: #616266;

    /*
    --font-family-header: 'Titillium Web', sans-serif;
    --font-family-default: 'Inter', sans-serif;
    */
    --font-family-sans-serif: "Work Sans",sans-serif;
    --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    --font-size-h1: 46px;
    --font-size-h2: 36px;
    --font-size-h3: 28px;
    --font-size-h4: 22px;
    --font-size-h5: 18px;
    --font-size-h6: 16px;
    --font-size-body: 16px;
    --font-size-label: 12px;

    --sl-color-primary-50: rgb(253 249 244);
    --sl-color-primary-100: rgb(250 234 220);
    --sl-color-primary-200: rgb(246 217 193);
    --sl-color-primary-300: rgb(241 199 163);
    --sl-color-primary-400: rgb(235 173 121);
    --sl-color-primary-500: rgb(226 139 65);
    --sl-color-primary-600: rgb(212 100 5);
    --sl-color-primary-700: rgb(174 82 4);
    --sl-color-primary-800: rgb(144 68 3);
    --sl-color-primary-900: rgb(103 48 2);
    --sl-color-primary-950: rgb(64 30 1);

    --sl-color-danger-950: var(--sl-color-red-950);
    --sl-color-danger-900: var(--sl-color-red-900);
    --sl-color-danger-800: var(--sl-color-red-800);
    --sl-color-danger-700: var(--sl-color-red-700);
    --sl-color-danger-600: var(--sl-color-red-500);
    --sl-color-danger-500: var(--sl-color-red-400);
    --sl-color-danger-400: var(--sl-color-red-300);
    --sl-color-danger-300: var(--sl-color-red-200);
    --sl-color-danger-200: var(--sl-color-red-100);
    --sl-color-danger-100: var(--sl-color-red-50);
    --sl-color-danger-50:  var(--sl-color-red-50);
    
    --sl-color-warning-950: var(--sl-color-yellow-950);
    --sl-color-warning-900: var(--sl-color-yellow-900);
    --sl-color-warning-800: var(--sl-color-yellow-800);
    --sl-color-warning-700: var(--sl-color-yellow-700);
    --sl-color-warning-600: var(--sl-color-yellow-400);
    --sl-color-warning-500: var(--sl-color-yellow-300);
    --sl-color-warning-400: var(--sl-color-yellow-200);
    --sl-color-warning-300: var(--sl-color-yellow-100);
    --sl-color-warning-200: var(--sl-color-yellow-50);
    --sl-color-warning-100: var(--sl-color-yellow-50);
    --sl-color-warning-50:  var(--sl-color-yellow-50);
    


    --sl-toggle-size: 1.2rem;
    --sl-font-sans: 'Inter', sans-serif;
    --sl-focus-ring-color: var(--brand-primary);

    --sl-panel-background-color: var(--bg-content);
    --sl-panel-border-color: var(--bg-content-highlight);
    --sl-input-filled-background-color: var(--bg-content-highlight);
    --sl-input-filled-background-color-hover: var(--bg-content-highlight);
    --sl-input-filled-background-color-focus: var(--bg-content-highlight);

}

body {
    background-color: var(--bg-body);
    color: var(--text-primary);
    font-family: var(--sl-font-sans);
    font-size: 10px;
}

.sl-scroll-lock {
    padding-right: 16px; /* Fix bug Dialog opening pushing content right */
}


/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Titillium Web', sans-serif;
    color: var(--text-primary);
}
h1 {
    font-size: 46px;
    line-height: 1.2;
}
h2 { 
    font-size: 36px;
    line-height: 1.25;
}
h3 {
    font-size: 28px;
    line-height: 1.3;
}
h4 {
    font-size: 22px;
    line-height: 1.35;
}
h5 {
    font-size: 18px;
    line-height: 1.5;
}
h6 {
    font-size: 16px;
    line-height: 1.4;
}
p {
    font-size: 16px; 
    line-height: 1.6;
    font-weight: 400;
    color: var(--text-primary);
}
label, 
sl-select::part(form-control-label), 
sl-input::part(form-control-label), 
sl-switch::part(label), 
sl-input::part(form-control-help-text) {
    font-size: 12px; 
    line-height: 1.6;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;  
    color: var(--text-secondary);
}

sl-input::part(form-control-help-text) {
    color: var(--text-teritary); 
    font-size: 10px; 
}

/* 
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 8px;
    background: rgba(136,136,136,0.4);
}
::-webkit-scrollbar-track {
    background: rgba(136,136,136,0.1);
} */



/* Theme overrides */
sl-badge.senior-staff::part(base)       { color: #C97BFF; background-color: #402F49; }
sl-badge.senior-staff::part(base):after { content: 'S Staff'; }
sl-badge.staff::part(base)              { color: #F34FB0; background-color: #492639; }
sl-badge.staff::part(base):after        { content: 'Staff'; }
sl-badge.server-mod::part(base)         { color: #27D1BB; background-color: #20403B; }
sl-badge.server-mod::part(base):after   { content: 'Mod'; }
sl-badge.gold-star::part(base)          { color: #15ED1D; background-color: #4B4916; }
sl-badge.gold-star::part(base):after    { content: 'G Star'; }
sl-badge.vip::part(base)                { color: #12BD1E; background-color: #1C3C1C; }
sl-badge.vip::part(base):after          { content: 'VIP'; }
sl-badge::part(base) {
    padding: 2.5px 7px;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: bold;
    border-radius: 4px;
    letter-spacing: 1px;
    font-family: 'Inter';
    border: 0;
}


sl-button::part(base) {
    font-size: 12px;
    text-transform: uppercase;
    font-weight: bold;  
    padding: 10px 8px;
    font-family: 'Inter';
    height: unset;
    line-height: 12px;
    transition: background-color var(--sl-transition-fast), color var(--sl-transition-fast);
}


sl-button[variant=primary]::part(base) {
    color: var(--text-primary);
}
sl-button[variant=primary][outline]:not([disabled]):hover::part(base) {
    color: var(--text-primary);
}
sl-button[variant=warning]::part(base) {
    color: var(--text-primary);

}
sl-button[variant=danger]::part(base) {
    color: var(--text-primary);
}

sl-switch::part(thumb) {
    height: .9rem;
    width: .9rem;
    background-color: var(--text-primary);
}
sl-switch::part(base) {
    --width: calc(var(--height) * 1.75);
}

/* sl-select::part(menu) {
    max-height: calc(36 * 8);
} */
sl-menu-item::part(base) {
    padding: unset;
    font-weight: 400;
    color: var(--text-primary);
    font-size: var(--sl-font-size-small);
}
sl-menu-label::part(base) {
    text-transform: uppercase;
    color: var(--text-teritary);
    font-weight: bold; 
    font-size: 12px;
    letter-spacing: 0.5px;
}

sl-tab-group.panel::part(active-tab-indicator) { display: none; }
sl-tab-group.panel::part(tabs) { border-bottom: none;  }
sl-tab-group.panel sl-tab::part(base) {
    font-weight: bold;
    font-size: 12px;
    text-transform: uppercase;
    padding: 10px 15px;
    transition: background-color var(--sl-transition-fast), color var(--sl-transition-fast);
}
sl-tab-group.panel sl-tab[active]::part(base) {
    background: var(--bg-content);
    color: var(--text-primary);
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
sl-tab-group.panel sl-tab-panel[active]::part(base) {
    background: var(--bg-content);
    padding: 10px;
    border-radius: var(--sl-border-radius-medium);
}
sl-tab-group.panel sl-tab-panel:first-of-type[active]::part(base) {
    border-top-left-radius: 0;
}

sl-breadcrumb-item::part(label) {
    text-transform: uppercase;
    font-weight: var(--sl-font-weight-bold);
    font-size: var(--sl-font-size-x-small);
}
sl-breadcrumb {
    display: block;
    margin-bottom: var(--sl-spacing-2x-large);
}

sl-dialog::part(footer) {
    border-top: 1px solid var(--sl-panel-border-color);
}


nord-stack {
    color: var(--text-primary);
}


header {
    background-color: #272626;
    height: fit-content;
    padding: var(--sl-spacing-small) 0px;
}

header #logo {
    transform: rotate(-2.5deg);
}

header nord-stack {
    padding:1rem;
}

header sl-dropdown sl-button::part(base) {
    color: var(--text-secondary);
}

header nav a{
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: var(--sl-font-weight-bold);
    text-transform: uppercase;
    font-size: var(--sl-font-size-x-small);
    padding: 0px var(--sl-spacing-small);
    transition: color var(--sl-transition-fast);
    white-space: nowrap;
}

header nav a:hover{
    color: var(--brand-primary-hover);
}

#logo-anchor {
    display:inline-block;
}
#logo {
    width: 100%;
}


main {
    padding: var(--sl-spacing-small) 0px;
}

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

main .server-info sl-icon {
    color: var(--text-teritary);
}
main .server-info span {
    text-transform: uppercase;
    font-weight: var(--sl-font-weight-bold);
    margin-right: var(--sl-spacing-large);
    font-size: var(--sl-font-size-x-small);
    font-family: var(--font-family-default);
}

main .server-info span sl-icon {
    top: 2px;
    position: relative;
    margin-right: var(--sl-spacing-3x-small);
}

main .server-info h3 {
    font-family: var(--font-family-header);
    margin: 0px;
}


sl-dialog > p {
    display: grid; 
    grid-template-areas: "icon text";
    align-items: center;
    justify-items: center;
    column-gap: var(--sl-spacing-x-small);
    margin: 0; 
    margin-bottom: var(--sl-spacing-medium);
    color: var(--text-secondary);
}

sl-dialog > p > sl-icon { grid-area: 'icon'; }
sl-dialog > p > span { grid-area: 'text'; }

sl-input[type="date"]::part(input) {
    font-size: var(--sl-font-size-x-small);
    font-weight: var(--sl-font-weight-bold);
    color: var(--text-secondary);
}

.label-on-left {
    --label-width: 150px;
    --gap-width: 1rem;
}

.label-on-left + .label-on-left {
    margin-top: var(--sl-spacing-medium);
}

.label-on-left::part(form-control) {
    display: grid;
    grid: auto / var(--label-width) 1fr;
    gap: var(--sl-spacing-3x-small) var(--gap-width);
    align-items: center;
}

.label-on-left::part(form-control-label) {
    text-align: left;
 }

.label-on-left::part(form-control-help-text) {
    grid-column: span 2;
    /* padding-left: calc(var(--label-width) + var(--gap-width)); */
    position: relative;
    top: -13px;
}

sl-switch.label-on-left::part(base) {
    display: grid;
    grid: auto / var(--label-width) 1fr;
    gap: var(--sl-spacing-3x-small) var(--gap-width);
    align-items: center;
    grid-template-areas: "label input";
}

sl-switch.label-on-left::part(label)  {
    grid-area: label;
    margin-left: 0;
}







.players-table {
    width: 50%;
}

.players-table.blu .header {
    background-color: var(--brand-blu-team);
}

.players-table.red .header {
    background-color: var(--brand-red-team);
}

.players-table .header {
    padding:  var(--sl-spacing-x-small) var(--sl-spacing-medium);
    border-radius: var(--sl-border-radius-medium) var(--sl-border-radius-medium) 0px 0px;
    display: flex;
    justify-content: space-between;
}

.players-table .header h2{
    margin: 0px;
}

.players-table table {
    width: 100%;
    border-spacing: 0;
}

.players-table table th,
.players-table table td {
    text-align: start;
    line-height: 1.6;
    font-weight: 600;
    color: var(--text-teritary);
    padding: var(--sl-spacing-x-small);
    font-size: var(--sl-font-size-small); 
}

.players-table table tr:nth-child(even) {
    background-color: var(--bg-content-highlight);
}

.players-table table th {
    font-size: var(--sl-font-size-2x-small); 
    padding: 0px var(--sl-spacing-x-small);
    text-transform: uppercase;
    letter-spacing: 0.5px;  
}
.players-table table td {
    color: var(--text-primary);
}

.players-table table th.rank,
.players-table table td.rank {
    text-align: end;
    width: 7ch;
}

.players-table table td.username {
    width: 25ch;
    max-width: 25ch;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.players-table table td.duration {
    color: var(--text-secondary);
    font-size: var(--sl-font-size-x-small);
    width: 20ch;
}

.players-table table th.options,
.players-table table td.options {
    text-align: end;
}
.players-table table td.options sl-icon-button::part(base) {
    font-size: 2rem;
    padding: 0;
}








.server-card {
    width: 100%;
    background-color: var(--bg-content);
    border-radius: var(--sl-border-radius-medium);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--sl-spacing-small);
}
.server-card .header {
    margin: 0;
    padding: var(--sl-spacing-medium);
    text-transform: uppercase;
    line-height: 1;
}

.server-card .subheader { padding: 0 }
.server-card .metadata { padding: var(--sl-spacing-medium); }
.server-card .footer { padding: var(--sl-spacing-x-small); }

.server-card .metadata {
    color: var(--text-secondary);
    font-size: 12px; 
    font-weight: 600;
    letter-spacing: 0.5px;  

}
.server-card .footer {
    text-align: center;
    border-radius: 
        0
        0
        var(--sl-border-radius-medium)
        var(--sl-border-radius-medium)
    ;
}

.server-card .subheader span {
    font-size: 12px; 
    line-height: 1.6;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;  
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: var(--sl-spacing-2x-small);
    margin-right: var(--sl-spacing-2x-small);
}

.server-card .subheader sl-icon {
    color: var(--text-teritary);
}



.login-card {
    background-color: var(--bg-content);
    border-radius: var(--sl-border-radius-medium);

    width: 454px;

    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    box-sizing: border-box;
    padding: var(--sl-spacing-2x-large);
    padding-bottom: var(--sl-spacing-medium);

    text-align: center;
    box-shadow: var(--sl-shadow-large	);

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.login-card img#logo {
    position: absolute;
    left: 50%;
    transform: translate(-50%, calc(-100% - 10px)) rotate(-2.5deg);
    box-shadow: var(--sl-shadow-large);
}

.login-card .header {
    margin: 0;
    text-transform: uppercase;
}

.login-card .subheader {
    color: var(--text-secondary);
    margin: 0;
}

.login-card .illustration {
    max-width: 325px;
    margin: 0;

}

.login-card .action-button {
    width: 80%;
    margin: 0;
}
.login-card .action-button::part(base) {
    align-items: center;
}
.login-card .action-button::part(prefix) {
    font-size: var(--sl-font-size-large);
}

.login-card .login-button {
    width: 93.5%;
    margin: 0;

}
.login-card .login-button::part(base) {
    font-size: var(--sl-font-size-large);
    padding: var(--sl-spacing-x-small) var(--sl-spacing-large);
    line-height: var(--sl-font-size-large);
    align-items: center;
}
.login-card .login-button::part(prefix) {
    font-size: var(--sl-font-size-2x-large);
}


.login-card footer {
    font-size: 12px; 
    line-height: 1.6;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;  
    color: var(--text-teritary);  
    margin-top: var(--sl-spacing-medium);
}




.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.empty-state img {
    width: 24rem;
}





.reservation-logs {
    width: 100%;
    border-spacing: 0;
}

.reservation-logs th {
    font-size: var(--sl-font-size-x-small); 
    padding: 0px var(--sl-spacing-x-small);
    padding-bottom: var(--sl-spacing-small);
    text-transform: uppercase;
    letter-spacing: 0.5px;  
    font-weight: 600;
    color: var(--text-teritary);
    text-align: left;
}

.reservation-logs td {
    font-size: var(--sl-font-size-x-small); 
    padding: var(--sl-spacing-small);
    text-transform: uppercase;
    letter-spacing: 0.5px;  
    font-weight: 600;
    text-align: left;
    color: var(--text-secondary);

}

.reservation-logs tr:nth-child(even) {
    background-color: var(--bg-content);
    border-radius: var(--sl-border-radius-medium);
}

.reservation-logs td.id {
    color: var(--text-primary);
    width: 14ch;
}
.reservation-logs td.date {
    width: 11ch;
}
.reservation-logs td.requester {
    text-transform: none;
}
.reservation-logs td.duration {
    text-transform: lowercase;
    width: 8ch;

}
.reservation-logs td.instance-plan {
    text-transform: lowercase;
    width: 12ch;

}
.reservation-logs td.cost {
    width: 10ch;
}



#rcon_panel {
    overflow-y: auto;
    height: 540px;
}

#rcon_panel  .rcon_panel__message {
    margin: 0;
    padding: 0;
    line-height: 125%;
    display: flex;

    text-transform: uppercase;
    font-family: "Inter" !important;
    font-weight: bold; 
    font-size: 12px;
    letter-spacing: 0.5px;
}

#rcon_panel  .rcon_panel__message .rcon_panel__message__timestamp {
    color: var(--text-teritary);
    width: 20ch;
    min-width: 20ch;
    display: inline-block;
    text-align: right;
    -webkit-user-select: none;
    -ms-user-select: none; 
    user-select: none;
}

#rcon_panel  .rcon_panel__message .rcon_panel__message__message {
    padding-left: var(--sl-spacing-medium);
    font-weight: 400;
}

#rcon_panel  .rcon_panel__message .rcon_panel__message__message.orange {
    color: var(--brand-primary);
}
#rcon_panel  .rcon_panel__message .rcon_panel__message__message.white {
    color: var(--text-primary);
}
#rcon_panel  .rcon_panel__message .rcon_panel__message__message.blue {
    color: var(--brand-blu-team);
}



#rcon_tab sl-input::part(base) {
    font-family: "Fira Mono";
}


#rcon_panel {
    position: relative;
}

#rcon_panel__loading {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    display: none;
    cursor: not-allowed;
    gap: var(--sl-spacing-medium);
}

#rcon_panel__disconnected {
    position: absolute;
    top: 0;
    bottom: 150px;
    left: 0;
    right: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    display: none;
    z-index: 799;
    cursor: not-allowed;

}

.disconnected #rcon_panel__disconnected {
    display: flex;
}

.disconnected #rcon_panel {
    filter: blur(3px);
    opacity: 0.5;
}



/* The spinning part is offset without this for some reason */
#rcon_panel__loading sl-spinner {
    display: block;
}

#rcon_panel.is_loading #rcon_panel__loading{
    display: flex;
}

#rcon_panel.is_loading .rcon_panel__message {
    opacity: 0.5;
    -webkit-user-select: none;
    -ms-user-select: none; 
    user-select: none;
}




* {
    scrollbar-width: thin;
    scrollbar-color: #4e4e4e var(--bg-content-highlight);
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 8px;
}

*::-webkit-scrollbar-track {
    background: var(--bg-content-highlight);
    border-radius: 100px;

}

*::-webkit-scrollbar-thumb {
    background-color:  #4e4e4e;
    border-radius: 100px;
}

.container {
    width: 100%;
    max-width: 1140px;
    margin: 0px auto;
    justify-content: space-around;
}

/* Bot Site Specifics */
.flex {
    display: flex;
}
.text-white {
    color: #ffffff;
}
/*global cards*/
.card-header {
    border-radius: calc(.15rem - 1px) calc(.15rem - 1px) 0 0;
    font-size: 15px;
    --border-radius: 5px;
}
.card-header::part(header) {
    background: #c25027;
    border-radius: calc(.15rem - 1px) calc(.15rem - 1px) 0 0;
}

/*container shit*/
.col {
    position: relative;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #33302e;
    border-radius: 0.5rem;
}
.col-half {
    width: 50%;
}
.col-wide {
    width: 100%;
}
.row {
    display: flex;
}



table {
	margin: 0 !important;
}
.table td,
.table th {
	border: none !important;
}
.table tr:hover {
	background: none !important;
}
.table tr:nth-last-child(n + 2) {
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}