/* ====== Theme tokens (easy to tweak) ====== */
:root {
    --application-bg: #f7f8fb;
    --application-card: #ffffff;
    --application-border: #e6e9ef;
    --application-muted: #6b7280;
    --application-primary: #4f46e5; /* accent for focus states */
    --application-amber: #f59e0b; /* verifying */
    --application-success-soft: #e7f8ef;
    --application-warning-soft: #fff6e5;
    --application-secondary-soft: #eef2f7;
}

/* ====== Page shell ====== */
.widget-header {
    background: var(--application-card);
    border-bottom: 1px solid var(--application-border);
}

.widget-body {
    background: var(--application-bg);
}

/* ====== Breadcrumb ====== */
#global-breadcrumb a {
    text-decoration: none;
    color: #374151;
}

#global-breadcrumb .divider {
    margin: 0 .5rem;
    color: var(--application-muted);
}

/* ====== Sidebar (sections) ====== */
#sectionNav {
    background: var(--application-card);
    border: 1px solid var(--application-border);
    border-radius: .75rem;
    overflow: hidden;
}

    #sectionNav .list-group-item {
        border: 0;
        border-bottom: 1px solid var(--application-border);
        display: grid;
        grid-template-columns: 1fr auto;
        gap: .75rem;
        padding: .9rem 1rem;
    }

        #sectionNav .list-group-item:last-child {
            border-bottom: 0;
        }

        #sectionNav .list-group-item:hover {
            background: #f5f7fb;
        }

        #sectionNav .list-group-item.active,
        #sectionNav .list-group-item:focus {
            background: #eef1ff;
            color: #111827;
            outline: none;
        }

            #sectionNav .list-group-item.active .badge {
                box-shadow: 0 0 0 2px #eef1ff;
            }

/* Make sidebar stick on tall pages */
@media (min-width: 992px) {
    .col-md-4.col-lg-3 {
        position: sticky;
        top: 1rem;
        height: fit-content;
    }
}

/* ====== Soft badges (look nicer than solid blocks) ====== */
.badge.bg-success {
    background-color: #16a34a !important;
}

.badge.bg-secondary {
    background-color: #6b7280 !important;
}

.badge.bg-warning {
    background-color: var(--application-amber) !important;
    color: #111827;
}

.badge-soft-success {
    color: #065f46;
    background: var(--application-success-soft);
}

.badge-soft-warning {
    color: #92400e;
    background: var(--application-warning-soft);
}

.badge-soft-secondary {
    color: #374151;
    background: var(--application-secondary-soft);
}

.badge-soft-info {
    color: #1f3a5f;
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.25);
}

/* ====== Section panes (right side) ====== */
.section-pane {
    background: var(--application-card);
    border: 1px solid var(--application-border);
    border-radius: .75rem;
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
    padding: 1.25rem 1.25rem .75rem;
}

    /* Section title row */
    .section-pane .application-title {
        display: flex;
        align-items: center;
        gap: .5rem;
        margin: .25rem 0 1rem;
        justify-content: space-between;
    }

    /* ====== Field rows (label/value) ====== */
    .section-pane .content .row {
        align-items: start;
        padding: .6rem 0;
        border-bottom: 1px dashed var(--application-border);
    }

        .section-pane .content .row:last-child {
            border-bottom: 0;
        }

    .section-pane label {
        color: #374151;
        font-weight: 600;
        margin-bottom: .25rem;
    }

@media (min-width: 992px) {
    .section-pane label {
        text-align: right;
        padding-right: .75rem;
    }
}

.section-pane .text-muted {
    color: var(--application-muted) !important;
}

/* Keep long values tidy */
.section-pane .col-lg-8 {
    word-break: break-word;
}

/* ====== Cards below sidebar ====== */
.card {
    border: 1px solid var(--application-border);
    border-radius: .75rem;
}

.card-header {
    background: #fafbff;
    border-bottom: 1px solid var(--application-border);
}

/* Documents / lists */
.card .wi-icon {
    opacity: .7;
}

.card li {
    padding: .25rem 0;
}

    .card li:hover {
        background: #f9fafb;
        border-radius: .5rem;
    }

/* ====== Focus states for a11y ====== */
.section-link:focus-visible,
.section-pane :where(a,button,input,select,textarea):focus-visible {
    outline: 3px solid rgba(79,70,229,.35) !important;
    outline-offset: 2px;
    border-radius: .25rem;
}

/* ====== Tiny utilities ====== */
.badge.is-verifying {
    background: var(--application-amber);
    color: #111827;
}

.kv-dash .value:empty::after {
    content: "—";
    color: var(--application-muted);
}

.widget-header {
    border-bottom: none !important;
}

/* keep the badge pinned right */
.nav-sidebar .nav-link {

}

/* tiny status dot */
.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

/* prevent title from pushing badge; truncate when narrow */
.section-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* example colors if you’re mapping classes to bg-* */
.bg-success {
    background: #16a34a;
}

.bg-warning {
    background: var(--application-amber) !important;
}

.bg-secondary {
    background: #6b7280;
}

.enroll-steps .nav-link {
    position: relative;
    padding-left: 16px;
}

    .enroll-steps .nav-link::before {
        content: "";
        position: absolute;
        left: 0;
        width: 4px;
        height: 100%;
        border-radius: 0px;
        background: var(--tw-color-7);
    }

    .enroll-steps .nav-link[data-status="success"]::before {
        background: #16a34a;
    }

    .enroll-steps .nav-link[data-status="warning"]::before {
        background: #f59e0b;
    }

    .enroll-steps .nav-link[data-status="danger"]::before {
        background: #e11d48;
    }

    .enroll-steps .nav-link[data-status="secondary"]::before {
        background: #E6E9F4;
    }

#sectionNavMobile .list-group-item {
    padding-top: .6rem;
    padding-bottom: .6rem
}

.section-pane ul {
    margin: 0;
}

.section-pane li {
    margin-bottom: .25rem;
}

.child-card.card.shadow-sm.border-white.position-relative.h-100 {
    height: auto !important;
}

/* Base row stays clean */
.app-row {
    border-radius: 12px;
    padding: 12px;
    border: 2px solid var(--tw-color-8);
    background: var(--tw-color-0); /* keep neutral */
}

/* A thin separator like you wanted */
.app-divider {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--tw-color-8);
}

/* Full-width bottom strip inside app-row */
.app-bottom-strip {
    margin-top: 12px;
    padding: 12px;
    margin-left: -12px;
    margin-right: -12px;
    margin-bottom: -12px;
    border-top: 1px solid var(--tw-color-8);
    border-radius: 0 0 8px 8px; /* keep bottom corners rounded */
}

    /* Unavailable look */
    .app-bottom-strip.unavailable {
        background: var(--tw-color-8);
        color: #495057;
    }

    /* Closing soon look */
    .app-bottom-strip.closing {
        background: rgba(255, 193, 7, 0.10);
    }

    /* Opening soon look */
    .app-bottom-strip.opening {
        background: rgba(25, 135, 84, 0.08);
    }

    /* Shared title style */
    .app-bottom-strip .title {
        display: block;
        font-weight: 700;
        font-size: 13px;
        letter-spacing: .2px;
        margin-bottom: 4px;
    }

    /* CLOSED */
    .app-bottom-strip.unavailable .title {
        color: #374151; /* neutral dark gray */
    }

    /* CLOSING SOON */
    .app-bottom-strip.closing .title {
        color: #92400e; /* warm amber text */
    }


    .app-bottom-strip .details {
        font-size: 12px;
        line-height: 1.45;
        color: #6b7280; /* muted gray */
    }

.force-uppercase {
    text-transform: uppercase;
}

input[data-uppercase="true"], textarea[data-uppercase="true"] {
    text-transform: uppercase;
}