/* =====================================================================
 * Stellar Core — shared dashboard component layer.
 *
 * Gives every Stellar DASHBOARD page (stellar_core, knowledge_base,
 * stellar_project_manager, stellar_defender) one consistent look driven
 * by the `--stellar-*` palette tokens (see stellar-palette.css).
 *
 * Scoped to `.stellar-ui` — stellar_core's header script adds that class
 * to `#ccm-dashboard-content` on Stellar dashboard pages, so this never
 * touches Concrete's own chrome (left nav, top bar, in-context editor)
 * nor non-Stellar dashboards. Public frontend pages keep using their own
 * `.pm-fe` / `.kb-fe` component CSS (which now reads the same tokens).
 *
 * Colours + density only — no layout changes.
 * ===================================================================== */

.stellar-ui {
    color: var(--stellar-text);
}

/* Surfaces ---------------------------------------------------------- */
.stellar-ui .card,
.stellar-ui .list-group,
.stellar-ui .table {
    --bs-card-border-color: var(--stellar-border);
    border-color: var(--stellar-border);
    border-radius: var(--stellar-radius);
}

.stellar-ui .card {
    background-color: var(--stellar-surface);
    box-shadow: var(--stellar-shadow);
}

.stellar-ui .card-header {
    background-color: var(--stellar-bg);
    border-bottom-color: var(--stellar-border);
}

/* Squared, palette-aware controls ----------------------------------- */
.stellar-ui .btn,
.stellar-ui .form-control,
.stellar-ui .form-select,
.stellar-ui .input-group-text,
.stellar-ui .badge,
.stellar-ui .alert,
.stellar-ui .dropdown-menu,
.stellar-ui .nav-tabs .nav-link,
.stellar-ui .page-link,
.stellar-ui .list-group-item {
    border-radius: var(--stellar-radius);
}

/* Accent — primary buttons, links, focus, active nav ---------------- */
/* Content links only — never recolour anchors that are buttons / nav /
 * pager links (those carry their own colour and would otherwise show
 * accent-on-accent text). */
.stellar-ui a:not(.btn):not(.nav-link):not(.page-link):not(.dropdown-item) {
    color: var(--stellar-accent);
}
.stellar-ui a:not(.btn):not(.nav-link):not(.page-link):not(.dropdown-item):hover {
    color: var(--stellar-text);
}

.stellar-ui .btn-primary {
    --bs-btn-bg: var(--stellar-accent);
    --bs-btn-border-color: var(--stellar-accent);
    --bs-btn-hover-bg: var(--stellar-accent);
    --bs-btn-hover-border-color: var(--stellar-accent);
    --bs-btn-active-bg: var(--stellar-accent);
    --bs-btn-active-border-color: var(--stellar-accent);
    --bs-btn-color: var(--stellar-on-accent);
    --bs-btn-hover-color: var(--stellar-on-accent);
    --bs-btn-active-color: var(--stellar-on-accent);
}
.stellar-ui .btn-primary:hover,
.stellar-ui .btn-primary:focus {
    filter: brightness(0.93);
}

.stellar-ui .btn-outline-primary {
    --bs-btn-color: var(--stellar-accent);
    --bs-btn-border-color: var(--stellar-accent);
    --bs-btn-hover-bg: var(--stellar-accent);
    --bs-btn-hover-border-color: var(--stellar-accent);
    --bs-btn-hover-color: var(--stellar-on-accent);
    --bs-btn-active-bg: var(--stellar-accent);
    --bs-btn-active-border-color: var(--stellar-accent);
    --bs-btn-active-color: var(--stellar-on-accent);
}

.stellar-ui .form-control:focus,
.stellar-ui .form-select:focus {
    border-color: var(--stellar-accent);
    box-shadow: 0 0 0 0.2rem var(--stellar-accent-soft);
}

.stellar-ui .nav-tabs .nav-link.active {
    color: var(--stellar-accent);
    border-bottom-color: var(--stellar-surface);
}

.stellar-ui .page-item.active .page-link {
    background-color: var(--stellar-accent);
    border-color: var(--stellar-accent);
    color: var(--stellar-on-accent);
}
.stellar-ui .page-link {
    color: var(--stellar-accent);
}

/* Status badges — recolour the semantic Bootstrap variants ---------- */
.stellar-ui .badge.text-bg-primary,
.stellar-ui .badge.bg-primary {
    background-color: var(--stellar-accent) !important;
    color: var(--stellar-on-accent) !important;
}
.stellar-ui .badge.text-bg-danger,
.stellar-ui .badge.bg-danger {
    background-color: var(--stellar-danger) !important;
}
.stellar-ui .badge.text-bg-success,
.stellar-ui .badge.bg-success {
    background-color: var(--stellar-success) !important;
}
.stellar-ui .badge.text-bg-warning,
.stellar-ui .badge.bg-warning {
    background-color: var(--stellar-warn) !important;
}

/* Tables ------------------------------------------------------------ */
.stellar-ui .table {
    --bs-table-border-color: var(--stellar-border);
}
.stellar-ui .table > thead th {
    color: var(--stellar-muted);
    border-bottom-color: var(--stellar-border);
}