@import url("alert.css");
@import url("form.css");
@import url("timeline.css");
@import url("kanban.css");

:root {
    --brand-color: #bc1418;
    --brand-rgb: 188, 20, 24;
    --bs-dark: #262626;
    --bs-dark-rgb: 38, 38, 38;

}


#brand {
    border-bottom: 8px solid #bc1418;
    padding: .4em .5em;
    width: 100%;

    img {
        width: 1em;
        margin-right: .5em;
    }

    font-size: 1.5rem;
    font-variant: small-caps;


}

#layout {
    width: 100vw;
    height: calc(100vh - 37px);
}


aside {
    > .nav-pills {
        margin-top: 1.5em;
    }

    .nav-item {
        i {
            margin-right: 1em;
        }
    }

    .sidebar-header {
        padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
        font-size: 0.75rem;
        font-weight: 500;
        text-transform: uppercase;
    }
}

main > header {
    background-color: white;
    border-bottom: 8px solid #bc1418;
    padding: .4em 1.5em;
    font-size: 1.5rem;
    font-weight: bold;
    font-variant: small-caps;

    small {
        font-size: 0.75rem;
        font-weight: initial;
    }

    #user-info {
        padding-top: 0.5em;
        font-size: 1rem;


        i:nth-child(2) {
            margin-left: .5em;
        }

        a {
            text-decoration: none;
            color: var(--bs-body-color);
        }

        a:hover {
            text-decoration: underline;
        }
    }
}


body:is(:not([data-embed]), [data-embed=""]) {
    .content {
        padding: 2em;
    }


}

body[data-embed]:not([data-embed=""]) {
    .modal-backdrop {
        --bs-backdrop-bg: white;
    }


    .content {
        padding-right: 2em;
    }

}

div#api-spinner {
    display: none;
}

div#form-errors-card {
    display: none;
}


i.delete {
    cursor: pointer
}

i.subscribe, i.unsubscribe {
    cursor: pointer;
}

div[data-subscribed='true'] i.subscribe {
    display: none;
}

div[data-subscribed='false'] i.unsubscribe {
    display: none;
}

#description-history img {
    max-width: 30vw;
}


.card:has(table) .card-header {
    font-weight: bold;
}

.card > table tr td:first-child, .card > table tr th:first-child {
    padding-left: 1em;
}