/*
 * AccessGo theme
 */

/* Dark gray */
:root {
    --dark-gray: #181D27;
}

/* Extend main content width */
main:not(.fi-simple-main) {
    max-width: 90rem !important;

    /* Increase gap */
    >div>section {
        row-gap: 3rem;
    }
}

/* Change button paddings globally */
.fi-btn {
    border-radius: 999px !important;

    &:not(.fi-btn-exclude-padding) {
        padding: 12px 16px !important;
    }
    /* @todo button outline */
}

/* Custom button with primary color text */
.fi-btn-text-secondary span,
.fi-btn-text-secondary svg {
    color: var(--secondary) !important;
}

/* Sidebar navigation */
.fi-sidebar {
    background-color: white !important;

    .fi-sidebar-header {
        padding-top: 1rem;
        box-shadow: none !important;
    }

    .fi-sidebar-item-button,
    .fi-sidebar-group-button {
        padding: 12px 16px !important;
        border-radius: 999px !important;

        .fi-sidebar-group-label,
        .fi-sidebar-item-label {
            font-weight: 600;
        }

    }

    .fi-sidebar-item-label,
    .fi-sidebar-item-icon,
    .fi-sidebar-group-label,
    .fi-sidebar-group-icon {
        color: var(--dark-gray) !important;
    }

    .fi-sidebar-item-grouped-border {
        visibility: hidden;
    }
    
    .fi-active {
        > .fi-sidebar-item-button {
            background-color: var(--primary-background);
        }
    }

    .fi-sidebar-nav-groups {
        row-gap: .25rem !important;
        
        .fi-sidebar-domain-group li:nth-child(7).fi-sidebar-item span{
            color: var(--primary) !important;
        }

    }

    /* Smaller badges */
    .fi-badge {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
        min-width: 4rem !important;
    }

}

/* Badge */
.fi-badge {
    box-shadow: none !important;
    padding: 12px 16px !important;
    border-radius: 999px !important;
    min-width: 6rem !important;
    
    &.fi-color-success {
        border: 1px solid rgba(var(--success-200))
    }

    &.fi-color-gray {
        border: 1px solid rgba(var(--gray-200))
    }
    
    &.fi-color-warning {
        border: 1px solid rgba(var(--warning-200))
    }

    &.fi-color-danger {
        border: 1px solid rgba(var(--danger-200))
    }
}

/* Section component */
.fi-section,
.fi-ta-ctn {
    /* Apply border radius and shadow to all sections */
    border-radius: 1.5rem !important;
    box-shadow: 0px 0px 60px 0px #0000001A !important;

    /* Custom gray section header, make sticky */
    &.statement-section-header>.fi-section-header {
        border-top-left-radius: 1.5rem;
        border-top-right-radius: 1.5rem;
        background-color: rgba(var(--gray-50));
        border-bottom: #09090b0d 1px solid;

        position: sticky;
        top: 0;
        z-index: 20;

    }

    /* Remove padding for statement section */
    &.view-statement .fi-section-content.p-6 {
        padding: 0 !important;
    }

    /* Increase padding */
    .fi-section-header.px-6.py-4 {
        padding: 2rem;
        padding-bottom: 1rem;
    }

    /* Increase padding */
    .fi-section-content.p-6 {
        padding: 2rem;
        
        /* Remove padding */
        &.:has(trix-editor) {
            padding: 0;
        }
    }

    /* Take out padding for nested sections */
    .fi-section .fi-section-header.px-6.py-4,
    .fi-section .fi-section-content.p-6 {
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 1rem;
        padding-top: 1rem;
    }

}

/* Modal section headers padding */
.fi-modal-content .fi-section {
    .fi-section-header.px-6.py-4 {
        padding: 1.5rem;
    }
}

/* Table */
.fi-ta {
    
    /* Modify header */
    .fi-ta-header-toolbar,
    .fi-ta-actions-header-cell,
    .fi-ta-header-cell {
        background-color: white !important;
        padding: 1.5rem !important;

        .fi-ta-header-cell-label {
            color: var(--dark-gray) !important;
            font-weight: 500 !important;
        }
    }

    /* Remove border */
    .fi-ta-content {
        border: none !important;
        
    }

    /* Increase padding on left side */
    th:first-child,
    td:first-child {
        padding-left: 2rem !important;
    }

    th:not(:first-child),
    td:not(:first-child) {
        padding-left: 0 !important;
    }
    
    /* Increase padding on right side */
    th:last-child,
    td:last-child {
        padding-right: 2rem !important;
    }

    /* Remove padding on span to balance */
    .fi-ta-text:first-of-type {
        padding-left: 0 !important;
    }

    /* Alternate rows backgrounds */
    .fi-ta-row {
        &:nth-child(odd) {
            background-color: rgba(var(--gray-50)) !important;
        }

        &:hover {
            background-color: rgba(var(--gray-100)) !important;
        }
    }

    /* Custom badge used in tables */
    .custom-badge {
        .fi-badge {
            border: none;
            padding-left: 0 !important;
            padding-right: 0 !important;
            justify-content: start;
            font-size: 14px;
            font-weight: 600;
            box-shadow: none;
            background-color: transparent;

            &::before {
                content: "•";
                margin-bottom: 2.5px;
                color: currentColor;
            }
        }
    }

    
    /* Increase gap between icons */
    .fi-ta-actions {
        gap: 1rem !important;

        /* Increase icon sizes */
        .fi-link-icon {
            height: 20px !important;
            width: 20px !important;

            &.text-gray-400 {
                color: #717680 !important;
            }
        }
    }

}

/* Resource subnavigation */
.fi-page nav.fi-tabs {
    margin-left: 0px !important;
    margin-bottom: 2rem;
    border-radius: 999px !important;
    box-shadow: 0px 0px 60px 0px #0000001A !important;
    gap: 3rem;

    a.fi-tabs-item {

        padding: 12px 16px !important;
        border-radius: 999px !important;   
        
        &.fi-active {
            background-color: var(--secondary);
    
            svg,
            span {
                color: white !important;
            }
        }

    }

}

/* Toggle */

.fi-fo-field-wrp:has(button.fi-fo-toggle)>div>div {
    flex-direction: row-reverse;
    justify-content: start;
}

.fi-fo-field-wrp-label:has(button.fi-fo-toggle) {
    flex-direction: row-reverse
}

.fi-fo-toggle {
    span {
        margin-top: 1px;
        margin-left: 1px;
    }
    
    &.bg-custom-600 > span {
        background-color: #047857;
    }

    &.bg-custom-600 {
        background-color: #D1FAE5;
    }
}

/* Make page headers title & text take full width */
.fi-header>div:first-child {
    width: 100%;
    p {
        max-width: none;;
    }
}

/* Section */
.fi-ta-ctn,
section {
    .fi-section-content-ctn {
        border: none;
    }
}

/* Profile page */
.fi-profile-page {

    .img-field>div.grid {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
        height: 100%;
        gap: 2rem;

        &>div.flex {
            flex-direction: column;
        }

        .filepond--root {
            border: 1px solid rgb(var(--gray-200));
        }

        .w-32 {
            width: 10rem;
        }

        .filepond--drop-label {
            background-color: rgb(var(--gray-50));
        }
    }
}

/* Repeater */
.fi-fo-repeater-item-content {
    padding: 0 !important;
    border: none !important;
}

/* Rich editor*/
trix-editor {
    padding: 2rem !important;
    border-radius: 1.5rem !important;
}

/* Slideover modal */
.fi-modal-slide-over-window {
    >div:first-child {
        display: flex;
        justify-content: space-between;
        flex-direction: row-reverse;
        align-items: center;

        >div:first-child {
            position: initial;
        }
    }

    >div {
        padding: 2rem 3rem;
        background-color: white;
    }

    .fi-icon-btn-icon {
        width: 32px;
        height: 32px;
        color: black;
    }

    .fi-modal-heading {
        font-size: x-large;
    }

    section {
        box-shadow: none !important;
        border-radius: .25rem !important;
        border: 1px solid rgba(var(--gray-200));

        header {
            border-bottom: 1px solid rgba(var(--gray-200));
            background-color: rgba(var(--gray-50)) !important;
        }
    }

}

/* Wrap header text on tables */
th {
    .whitespace-nowrap {
        white-space: normal
    }
}