@import "./vars.css";
@import "./base.css";
@import "./components.css";
@import "./utilities.css";

[x-cloak] {
    display: none !important;
}

.icon {
    padding-right: .5rem;
}

button[type="submit"].admin-submit-button {
    display: block;
    background-color: var(--main-theme-color);
    padding: .65rem 1.5rem;
    margin-top: 2rem;
    margin-left: auto;
}


.form-group {
    width: auto;
    /*

    display: grid;
    grid-template-columns: 75px auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    */
    position: relative;
    padding: .4rem 0;
}

    .form-group label {
        /*

        align-self: start;
        */
        color: var(--gray);
        position: relative;
        width: fit-content;
        white-space: break-spaces;
    }

        .form-group label.required::before {
            content: "*";
            position: absolute;
            right: -8px;
            top: -4px;
            color: red;
        }

    .form-group > div {
        width: 100%;
        /*
        position: relative;
        padding-top: .8rem;
        */
    }

    /*.form-group*/ input {
        line-height: 1.75rem;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-bottom: 1px solid var(--border-subtle);
    }

    .form-group.textarea-input {
        display: flex;
        flex-direction: column;
        justify-content: stretch;
        gap: unset;

    }

    .form-group.textarea-input,
    .form-group.textarea-input > div {
        height: 100%;
    }

    .form-group.textarea-input label {
        text-align: left;
        align-self: unset;
    }

    .form-group .control-validation {
        color: red;
        font-size: .65rem;
        position: absolute;
        top: .8rem;
        right: 0;
    }

    .form-group input[type="submit"] {
        margin-left: auto;
        border: none;
    }

    .form-group input[type="checkbox"] {
        width: fit-content;
        min-width: unset;
    }

.validation-summary-errors {
    padding: .5rem;
}

    .validation-summary-errors ul {
        padding: .5rem 0;
        list-style-type: none;
        color: red;
    }

    .validation-summary-errors li {
        font-size: .85rem;
        word-wrap: anywhere;
    }

@media ( width >= 768px ) {

    .form-group label {
        align-self: end;
        text-align: right;
        justify-self: end;
    }

    .form-group input,
    .form-group textarea {
        width: 100%;
    }
}


.dashboard-layout header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem 1.5rem;
    border-bottom: 1px solid var(--primary-color-50);
    background-color: var(--tertiary-bg);
}

    .dashboard-layout header .user-actions {
        display: flex;
        gap: .75rem
    }

        .dashboard-layout header .user-actions > * {
            display: flex;
            align-items: center;
            gap: .5rem;
        }

.dashboard-layout main {
    display: grid;
    grid-template-columns: 175px 1fr;
    /*
        padding: 1rem 0;
    */
}

    .dashboard-layout main aside nav {
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: .05rem;
        padding: .5rem;
        border-right: 1px solid var(--border-subtle);
    }

        .dashboard-layout main aside nav a {
            border-radius: 2px;
            padding: .25rem .5rem;
            display: flex;
            align-items: center;
            gap: .5rem;
        }

            .dashboard-layout main aside nav a:hover {
                background-color: var(--primary-color-50);
            }

            .dashboard-layout main aside nav a > span:first-child {
                width: 25px;
                text-align: center;
            }

.dashboard-layout .breadcrumbs {
    line-height: 1rem;
    padding: 0 .5rem;
}

    .dashboard-layout .breadcrumbs > * {
        font-size: .75rem;
    }

.dashboard-layout main > div {
    padding: 0 1rem;
    width: 100%;
    overflow-x: hidden;
    overflow-y: unset;
}

.dashboard-layout main .main-content {
    width: 100%;
    padding: 1rem;
    overflow-x: hidden;
    overflow-y: unset;
}

    .dashboard-layout main .main-content .resource-page {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        width: 100%;
        padding: 1rem 0;
    }

.panel-container {
    background-color: var(--secondary-bg);
    box-shadow: 0px 1px 5px 1px var(--box-shadow-color);
}

.panel-header {
    padding: .5rem;
    background-color: var(--tertiary-bg)
}

.resource-page-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: .5rem;
}

    .resource-page-header .resource-page-header-actions {
        display: flex;
        gap: .5rem;
        margin-left: auto;
    }

    .resource-page-header .resource-page-title {
        font-size: 1.5rem;
    }


.resource-table-actions {
    line-height: 3rem;
    width: fit-content;
    margin-left: auto;
}

    .resource-page .resource-page-content .resource-page-content-actions {
        display: flex;
        gap: .5rem;
        justify-content: flex-end;
        padding: 1rem;
    }

.resource-page-content-actions a,
.resource-page-content-actions form {
    height: 100%;
}

.resource-page-content-actions a,
.resource-page-content-actions form button {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
}

.resource-page .table-panel {
    overflow-x: auto;
    overflow-y: unset;
    white-space: nowrap;
    width: 100%;
    scrollbar-color: var(--primary-color) var(--secondary-bg);
    scrollbar-width: thin;
}

.resource-table {
    padding: 1rem;
}

    .resource-table thead {
        border-bottom: 1px solid var(--gray);
        background: var(--primary-color);
        color: white;
    }

    .resource-table tbody tr {
        border-bottom: 1px solid var(--border-subtle);
    }

    .resource-table th,
    .resource-table td {
        padding: .5rem;
        border-left-width: 1px;
        border-left-style: solid;
        max-width: 300px;
        overflow: hidden
    }

        .resource-table th:last-of-type,
        .resource-table td:last-of-type {
            border-right-width: 1px;
            border-right-style: solid;
        }

    .resource-table .row-actions {
        text-align: center;
        display: flex;
        padding-left: .5rem;
        padding-right: .5rem;
        align-items: center;
        justify-content: center;
        gap: 1rem;
    }

        .resource-table .row-actions form,
        .resource-table .row-actions form button {
            display: inline-block;
            padding: 0;
        }

            .resource-table .row-actions a:hover,
            .resource-table .row-actions form button:hover {
                color: var(--primary-hover-color) !important;
                text-decoration: underline;
                transform: scale(1.1);
            }

.panel {
    background-color: var(--tertiary-bg);
}


.detail-panel-row {
    display: flex;
    gap: 1rem;
    line-height: 2.5rem;
}

    .detail-panel-row dt {
        flex: 0 1 150px;
        text-align: right;
        color: var(--gray);
        font-size: .8rem;
        /*
        font-style: italic;
        */
    }

    .detail-panel-row dd {
        flex: 1;
    }

.form-panel {
    width: 100%;
    height: 100%;
}

.form-panel-content {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    width: 100%;
}

    .form-panel-content > div {
        flex: 1;
        width: fit-content;
    }

.form-submit {
    width: fit-content;
    margin-left: auto;
}

.login-form {
    width: 450px;
}

.login-form .form-group {
    display: block;
}