@font-face {
    font-family: 'Clash Grotesk';
    src: url('../fonts/ClashGrotesk-Variable.woff2') format('woff2'),
         url('../fonts/ClashGrotesk-Variable.woff') format('woff'),
         url('../fonts/ClashGrotesk-Variable.ttf') format('truetype');
         font-weight: 200 700;
         font-display: swap;
         font-style: normal;
}

:root {
    --dark: #0F0E0C;
    --layer1: #131211;
    --layer2: #1d1b1a;
    --border1: #222120;
    --border2: #302f2d;

    --primary: #FFBC39;
    --primary-dark: #ca9730;
    --secondary: #D739FF;
    --secondary-dark: #a92db0;

    --green: #0EAE44;
    --red: #FF264D;
    --purple: #9D21FF;
    --white: #FFFFFF;
    --br-md: 1px;
    --br-lg: 3px;
    --br-xl: 5px;
    --br-sm: 3px;

    --transition: 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);

    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
}

body {
    font-family: 'Clash Grotesk', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
    background-color: var(--dark);
    color: var(--white);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--white);
    text-transform: uppercase;
    font-weight: 650;
}

h6 {
    letter-spacing: calc(1px + 0.1vw);
    font-weight: 400;
    font-size: 0.9rem;
}

.display-1, .display-2, .display-3, .display-4, .display-5 {
    font-weight: 650;
}

p, li {
    font-weight: 450;
}

.text-primary {
    color: var(--primary) !important;
}

.vh-custom {
    min-height: calc(100vh - 5rem);
}

.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.btn {
    padding: 0.5rem 1rem;
    border-radius: var(--br-sm);
    font-size: 1rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;

    &.btn-primary {
        background-color: var(--primary);
        border-color: var(--primary);
        color: var(--dark);

        &:hover, &:focus, &:active {
            background-color: var(--primary-dark);
            border-color: var(--primary-dark);
            color: var(--white);
        }
    }

    &.btn-dark {
        background-color: var(--layer2);
        border-color: var(--border2);
        color: var(--white);

        &:hover, &:focus, &:active {
            background-color: var(--border2);
            border-color: var(--border2);
            color: var(--white);
        }
    }

    &.btn-danger {
        background-color: var(--red);
        border-color: var(--red);
        color: var(--white);

        &:hover, &:focus, &:active {
            background-color: var(--red);
            border-color: var(--red);
            color: var(--white);
        }
    }

    &.btn-outline-danger {
        background-color: transparent;
        border-color: var(--red);
        color: var(--red);

        &:hover, &:focus, &:active {
            background-color: var(--red);
            border-color: var(--red);
            color: var(--white);
        }
    }

    &.btn-outline-primary {
        background-color: transparent;
        border-color: var(--primary);
        color: var(--primary);

        &:hover, &:focus, &:active {
            background-color: var(--primary);
            border-color: var(--primary);
            color: var(--dark);
        }
    }
}

.card-omluvenka {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.omluvenka-name {
    margin: 0;
    font-size: 1.5rem;
}

.omluvenka-date {
    margin: 0;
}

.omluvenka-text {
    margin: 1rem 0 0 0;
    width: 100%;
}

label {
    font-size: 1rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
    color: var(--white);
}

.form-control, .form-select {
    padding: 0.5rem 1rem;
    border-radius: var(--br-sm);
    font-size: 1rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    width: 100%;
    background-color: var(--layer2);
    border: 1px solid var(--border2);
    color: var(--white) !important;

    &:focus {
        border-color: var(--primary);
        background-color: var(--layer2);
    }

    &::placeholder {
        color: var(--border2);
    }
}

.canvas-input {
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0;
    font-size: 1.1rem;
    font-weight: 450;
    color: var(--white);
    width: 100%;
    height: fit-content;
    field-sizing: content;
    resize: none;

    &.input-title {
        font-size: calc(2rem + 1vw);
        text-transform: uppercase;
        font-weight: 650;
    }

    &:focus {
        border-color: transparent;
        background-color: transparent;
        outline: none;
    }
}

.card {
    padding: 1.5rem;
    border-radius: var(--br-lg);
    background-color: var(--layer1);
    border: 1px solid var(--border1);
}

.card-link {
    text-decoration: none;

    & * {
        color: var(--white);
        transition: color var(--transition);
    }

    &:hover h1, &:hover h2, &:hover h3, &:hover h4, &:hover h5, &:hover h6, &:hover i {
        color: var(--primary);
    }
}

.omluvenky-box {
    padding: 1.5rem;
    border-radius: var(--br-lg);
    background-color: var(--layer1);
    border: 1px solid var(--border1);
    max-height: 500px;
    height: 500px;
    overflow: hidden;
}

.omluvenky-list {
    max-height: calc(100% - 50px);
    overflow-y: auto;
}

.omluvenky-list::-webkit-scrollbar {
    width: 10px;
}

.omluvenky-list::-webkit-scrollbar-thumb {
    background-color: var(--border2);
    border-radius: var(--br-sm);
    border: 2px solid var(--dark);
}

.omluvenky-list::-webkit-scrollbar-track {
    background-color: transparent;
}

.point {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-right: 0.8rem;
}

.point-naplanovane {
    background-color: var(--layer2);
}

.point-aktivni {
    background-color: var(--green);
}

.point-dokoncene {
    background-color: var(--red);
}

.omluvenka, .card-2 {
    padding: 1rem;
    border-radius: var(--br-md);
    background-color: var(--layer2);
    border: 1px solid var(--border2);
}

.badge {
    padding: 0.3rem 0.7rem;
    border-radius: var(--br-xl);
    font-size: 1rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    min-height: 48px;
    background-color: transparent;
    border: 1px solid vt;

    &.badge-dark {
        background-color: var(--layer1);
        border: 1px solid var(--border1);
    }
}

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

.bg-dilna {
    background-color: #437eec !important;
}

.bg-bar {
    background-color: #ae43ec !important;
}

.bg-podnik {
    background-color: #ec8f43 !important;
}

.bg-cartel {
    background-color: #ec4351 !important;
}

.bg-gang {
    background-color: #ec4397 !important;
}

.bg-secondary {
    background-color: var(--layer2) !important;
}

.bg-purple {
    background-color: var(--purple) !important;
}

.frakce-box {
    max-height: 500px;
    overflow: hidden;
    height: 500px;
}

.log-list {
    max-height: 80vh;
    overflow-y: auto;
}

.btn-add, .btn-remove {
    width: 50px;
    height: 50px;
    border-radius: var(--br-md);
}

.btn-add {
    background-color: var(--border1);
    border-color: var(--green);
    color: var(--green);
}

.btn-add:hover, .btn-add:focus, .btn-add:active {
    background-color: var(--green);
    border-color: var(--green);
    color: var(--white);
}

.btn-remove {
    background-color: var(--border1);
    border-color: var(--red);
    color: var(--red);
}

.btn-remove:hover, .btn-remove:focus, .btn-remove:active {
    background-color: var(--red);
    border-color: var(--red);
    color: var(--white);
}

.btn-sidebar {
    width: 48px;
    height: 48px;
    border-radius: var(--br-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: 1px solid transparent;
    font-size: 1.5rem;
}

.btn-sidebar:hover, .btn-sidebar:focus, .btn-sidebar:active {
    border-color: var(--border2) !important;
}

.offcanvas-lg {
    background-color: var(--layer1);
    border-right: 1px solid var(--border1);
    width: calc(360px + 1vw);
    height: 100vh;
}

.offcanvas-body {
    padding: 1rem;
}

.offcanvas-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
}

.navbar-nav {
    margin-bottom: 1rem;
}

.nav-item:first-child {
    border-radius: var(--br-sm) var(--br-sm) 0 0;
}

.nav-item:last-child {
    border-radius: 0 0 var(--br-sm) var(--br-sm);
    border-bottom: 1px solid var(--border1);
}

.nav-item:last-child:first-child {
    border-radius: var(--br-sm);
}

.nav-item {
    padding: 0.2rem 1rem;
    border: 1px solid var(--border1);
    border-bottom: transparent;
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.nav-item:hover, .nav-item:focus, .nav-item:active {
    background-color: var(--layer2);
    border-color: var(--border2);
}

.nav-item:hover .nav-link, .nav-item:focus .nav-link, .nav-item:active .nav-link {
    color: var(--primary);
}

.nav-link {
    color: var(--white);
    font-size: 1rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    margin-bottom: 0;
}

.nav-link i {
    margin-right: 0.7rem;
}

.badge-2 {
    padding: 0.2rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 500;
    border-radius: var(--br-sm);
    color: var(--white) !important;
}

.markdown-editor {
    padding: 1rem;
    border-radius: var(--br-sm);
    background-color: transparent;
    border: 1px solid transparent;
    color: var(--white);
    height: 75vh;
    overflow-y: auto;
    width: 100%;
}

.h-82 {
    max-height: 82vh;
    overflow-y: auto;
    border-left: 1px solid var(--border1);
}

@media (max-width: 992px) {
    .vh-custom {
        min-height: unset;
    }
}

.scroll {
    overflow-y: auto;
    max-height: 100vh;

    @media screen and (max-width: 1144px) {
        max-height: none;
    }
}

.alert {
    padding: 1rem;
    border-radius: var(--br-sm);
    font-size: 1rem;
    font-weight: 500;
    background-color: var(--layer2);
    border: 1px solid var(--border2);
    color: var(--white);

    &.alert-primary {
        background-color: var(--primary);
        border-color: var(--primary);
        color: var(--dark);
    }

    &.alert-danger {
        background-color: var(--red);
        border-color: var(--red);
        color: var(--white);
    }

    &.alert-success {
        background-color: var(--green);
        border-color: var(--green);
        color: var(--white);
    }

    &.alert-muted {
        background-color: var(--layer2);
        border-color: var(--border2);
        color: var(--white);
        padding: 1rem;
        font-size: 0.8rem;
        line-height: 1.2;
    }
}

.row-card {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border1);
    padding: 0.5rem 0;
    align-items: center;

    & * p {
        margin-bottom: 0.1rem;
    }

    &:last-child {
        border-bottom: transparent;
    }
}

.log-action {
    &.log-vytvoreni-frakce, &.log-prihlaseni, &.log-vytvoreny-ucet {
        color: var(--green);
    }

    &.log-uvolneni-frakce, &.log-aktivovany-ucet {
        color: var(--blue);
    }

    &.log-pozastaveni-frakce, &.log-omluvenka, &.log-smazani-frakce, &.log-deaktivovany-ucet, &.log-smazany-ucet {
        color: var(--red);
    }

    &.log-uprava-frakce, &.log-upraveny-ucet  {
        color: var(--yellow);
    }
}

dialog {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}

.modal {
    transition: background-color var(--transition), opacity var(--transition), backdrop-filter var(--transition);
    backdrop-filter: blur(5px);
}

.modal.fade .modal-dialog {
    transition: transform 0.4s cubic-bezier(0.63,-0.09, 0.26, 1.17);
    transform: scale(0);
    max-width: 600px;
}

.modal.fade.show .modal-dialog {
    transform: scale(1);
}

.modal-content {
    background-color: var(--layer1);
    border: 1px solid var(--border1);
    border-radius: var(--br-xl);
    padding: calc(1rem + 0.2vw);

    & .modal-header {
        padding: 0 0.2rem 1rem 0.2rem;
        border-bottom: 1px solid transparent;

        & .modal-title {
            display: flex;
            align-items: center;
            line-height: 1.2;

            & img {
                margin-right: 0.7rem;
            }
        }
    }

    & .modal-body {
        padding: 1rem 0.2rem;
    }

    & .modal-footer {
        padding: 1rem 0 0 0;
        border-top: 1px solid transparent;
    }
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--primary);
}

.code-wrapper {
    background-color: var(--layer2);
    border: 1px solid var(--border2);
    border-radius: var(--br-sm);
    padding: 1rem;
    font-size: 0.8rem;
    line-height: 1.2;

    & code {
        color: var(--white);
    }
}