/* =========================================
   CONTENT CARDS
========================================= */

.content-card {
    background: #ffffff;
    border: 1px solid #edf0f5;
    border-radius: 14px;
    padding: 24px;

    box-shadow:
        0 8px 24px rgba(20, 40, 80, 0.04);
}


/* =========================================
   PAGE HEADER
========================================= */

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 24px;
}


.page-header-title {
    margin: 0;

    font-size: 1.65rem;
    font-weight: 700;

    color: #172033;
}


.page-header-subtitle {
    margin-top: 4px;
    margin-bottom: 0;

    color: #6c757d;

    font-size: 0.95rem;
}


/* =========================================
   SECTION HEADER
========================================= */

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    margin-bottom: 18px;
}


.section-title {
    margin: 0;

    font-size: 1.1rem;
    font-weight: 700;

    color: #172033;
}


.section-description {
    margin-top: 4px;
    margin-bottom: 0;

    color: #6c757d;

    font-size: 0.875rem;
}


/* =========================================
   BUTTONS
========================================= */

.btn {
    border-radius: 9px;
    font-weight: 500;
}


.btn-primary {
    box-shadow:
        0 4px 12px rgba(13, 110, 253, 0.15);
}


.btn-icon {
    width: 36px;
    height: 36px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;
}


/* =========================================
   FORMS
========================================= */

.form-label {
    font-weight: 600;
    color: #344054;
}


.form-control,
.form-select {
    min-height: 44px;

    border-radius: 9px;
    border-color: #dce2ea;

    background: #ffffff;
}


.form-control:focus,
.form-select:focus {
    border-color: #86b7fe;

    box-shadow:
        0 0 0 .2rem rgba(13, 110, 253, .12);
}


textarea.form-control {
    min-height: auto;
}


.form-text {
    color: #7b8495;
}


/* =========================================
   TABLES
========================================= */

.table {
    --bs-table-bg: transparent;
}


.table> :not(caption)>*>* {
    padding: 0.9rem 0.85rem;

    border-bottom-color: #edf0f5;
}


.table thead th {
    font-size: 0.77rem;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.04em;

    color: #7a8393;

    border-bottom-color: #e5e9ef;
}


.table tbody tr:last-child td {
    border-bottom: none;
}


.table tbody tr:hover {
    background: #fafbfd;
}


/* =========================================
   BADGES
========================================= */

.badge {
    border-radius: 7px;
    font-weight: 600;
    padding: 0.45em 0.7em;
}


/* =========================================
   EMPTY STATES
========================================= */

.empty-state {
    text-align: center;

    padding: 55px 25px;
}


.empty-state-icon {
    width: 64px;
    height: 64px;

    margin: 0 auto 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 18px;

    background: #f2f5f9;

    color: #7b8495;

    font-size: 1.7rem;
}


.empty-state-title {
    font-weight: 700;
    margin-bottom: 6px;
}


.empty-state-text {
    max-width: 450px;

    margin:
        0 auto 20px;

    color: #6c757d;
}


/* =========================================
   ALERTS / MESSAGES
========================================= */

.alert {
    border-radius: 12px;
    border-width: 1px;
}


.app-message {
    display: flex;
    align-items: flex-start;

    gap: 10px;
}


/* =========================================
   SUMMARY / KPI CARDS
========================================= */

.stat-card {
    background: #ffffff;

    border: 1px solid #edf0f5;

    border-radius: 14px;

    padding: 22px;

    height: 100%;
}


.stat-card-label {
    color: #7b8495;

    font-size: 0.82rem;
    font-weight: 600;

    margin-bottom: 8px;
}


.stat-card-value {
    font-size: 2rem;
    font-weight: 750;

    color: #172033;
}


.stat-card-icon {
    width: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: #eef5ff;

    color: #0d6efd;

    font-size: 1.2rem;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 768px) {

    .content-card {
        padding: 18px;
    }


    .page-header,
    .section-header {
        align-items: flex-start;
        flex-direction: column;
    }


    .page-header .btn,
    .section-header .btn {
        width: 100%;
    }

}



/* =========================================
   APP MESSAGES
========================================= */

.app-message {
    display: flex;
    align-items: flex-start;

    gap: 12px;

    border-radius: 12px;

    padding: 14px 16px;
}


.app-message>div:first-child {
    font-size: 1.05rem;
    line-height: 1.4;
}


.app-message .btn-close {
    margin-left: auto;
}


/* =========================================
   BREADCRUMBS
========================================= */

.app-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 7px;

    margin-bottom: 8px;

    font-size: 0.82rem;
}


.app-breadcrumb a {
    color: #7b8495;
    text-decoration: none;
}


.app-breadcrumb a:hover {
    color: #0d6efd;
}


.app-breadcrumb-separator {
    color: #c0c5ce;
}


.app-breadcrumb-current {
    color: #344054;
    font-weight: 500;
}


/* =========================================
   STANDARD PAGE TITLE
========================================= */

.page-heading {
    margin-bottom: 24px;
}


.page-heading-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 20px;
}


.page-heading-title {
    margin: 0;

    color: #172033;

    font-size: 1.65rem;
    font-weight: 750;

    letter-spacing: -0.02em;
}


.page-heading-description {
    margin-top: 5px;
    margin-bottom: 0;

    color: #7b8495;

    font-size: 0.92rem;
}


.page-heading-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;
}


@media (max-width: 768px) {

    .page-heading-row {
        flex-direction: column;
    }

    .page-heading-actions {
        width: 100%;
    }

    .page-heading-actions .btn {
        flex: 1;
    }

}

@media (max-width: 768px) {

    .topbar {
        padding: 12px 14px;
        gap: 10px;
    }


    .page-content {
        padding: 16px 12px;
    }


    .page-heading-title {
        font-size: 1.35rem;
    }


    .content-card {
        padding: 16px;
    }


    .table-responsive {
        border-radius: 10px;
    }

}


@media (max-width: 575.98px) {

    .page-heading-actions {
        width: 100%;
        flex-direction: column;
    }


    .page-heading-actions .btn {
        width: 100%;
    }


    .section-header {
        flex-direction: column;
        align-items: stretch;
    }

}


/* =========================================
   LOADING STATES
========================================= */

.btn:disabled {
    cursor: not-allowed;
    opacity: 0.75;
}

.loading-panel {
    display: none;

    margin-top: 16px;
}

form.is-loading .loading-panel {
    display: block;
}

/* Keep indicator text readable; the existing responsive wrapper scrolls on narrow screens. */
.indicator-management-table {
    min-width: 1100px;
}

.indicator-management-table .indicator-name {
    min-width: 250px;
    overflow-wrap: break-word;
}

.indicator-management-table .indicator-result {
    min-width: 220px;
}

/* Shared presentation utilities extracted from templates. */
.avatar-sm {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.text-micro {
    font-size: 11px;
}

.user-menu-panel {
    min-width: 230px;
}

.min-screen-height {
    min-height: 100vh;
}

.auth-register-width {
    width: 480px;
}

.auth-login-width {
    width: 420px;
}

.chart-height-lg {
    position: relative;
    height: 280px;
}

.chart-height-sm {
    position: relative;
    height: 220px;
}

.legend-swatch {
    width: 14px;
    height: 14px;
    margin-top: 6px;
}

.min-field-height {
    min-height: 70px;
}

.status-icon-sm {
    width: 64px;
    height: 64px;
    font-size: 1.5rem;
}

.form-width-md {
    max-width: 600px;
}

.form-width-lg {
    max-width: 620px;
}

.status-icon-lg {
    width: 72px;
    height: 72px;
    font-size: 1.8rem;
}

.form-width-xl {
    max-width: 760px;
}

.status-icon-emphasis {
    width: 72px;
    height: 72px;
    font-size: 2rem;
}

.form-width-wide {
    max-width: 650px;
}

.status-icon {
    width: 70px;
    height: 70px;
    font-size: 1.8rem;
}

.form-width-sm {
    max-width: 560px;
}

.progress-thin {
    height: 8px;
}

.width-full {
    width: 100%;
}

.metadata-label-width {
    width: 165px;
}

.report-prose {
    white-space: pre-wrap;
    line-height: 1.8;
}

.chart-min-height {
    position: relative;
    min-height: 320px;
}

.auth-register-width,
.auth-login-width {
    max-width: 100%;
}