/* =====================================================================
 * Stellar Core — shared enterprise dashboard layer (sc-*).
 *
 * One consistent, modern-enterprise look for EVERY Stellar package
 * dashboard (stellar_core, knowledge_base, project_manager, defender,
 * file_manager, restaurant_menu … and any future package that depends
 * on stellar_core).
 *
 * Two parts:
 *   1. AUTO-STYLING — scoped to `.sc-dash`, which stellar_core adds to
 *      `#ccm-dashboard-content` on Stellar dashboard paths. Restyles the
 *      standard Bootstrap markup a package already ships (.card, .table,
 *      .badge, pagination) so packages get the look with NO view edits.
 *   2. OPT-IN COMPONENTS — global `sc-*` classes (panels, header-filter
 *      dropdowns, compact icon buttons, tag/count pills, bulk bar, forms,
 *      the light/dark toggle). Packages use these in markup for the full
 *      treatment.
 *
 * Colours + density come from stellar_core's `--stellar-*` palette tokens
 * (stellar-palette.css) with Bootstrap `--bs-*` fallbacks, so both the
 * default and enterprise schemes — and light / dark (`data-bs-theme`) —
 * are handled automatically. Layout/structure only; no hard-coded brand
 * colours. Never changes functionality.
 * ===================================================================== */

.sc-dash[x-cloak],
.sc-dash [x-cloak] { display: none !important; }

.sc-dash { --sc-radius: var(--stellar-radius, .375rem); color: var(--stellar-text, inherit); }

/* =====================================================================
 * 1. AUTO-STYLING of stock Bootstrap markup within a Stellar dashboard
 * ===================================================================== */
.sc-dash .card {
    background: var(--stellar-surface, var(--bs-body-bg, #fff));
    border-color: var(--stellar-border, var(--bs-border-color, #dee2e6));
    border-radius: var(--stellar-radius, .375rem);
    box-shadow: var(--stellar-shadow, 0 1px 2px rgba(0, 0, 0, .05));
}
.sc-dash .card > .card-header,
.sc-dash .card > .card-footer {
    background: var(--stellar-bg, var(--bs-tertiary-bg, #f8f9fa));
    border-color: var(--stellar-border, var(--bs-border-color, #dee2e6));
}
.sc-dash .table > thead th {
    background: var(--stellar-bg, var(--bs-tertiary-bg, #f8f9fa));
    border-bottom: 1px solid var(--stellar-border, var(--bs-border-color, #dee2e6));
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .72rem;
    font-weight: 600;
    color: var(--stellar-muted, var(--bs-secondary-color, #6c757d));
    white-space: nowrap;
}
.sc-dash .table td,
.sc-dash .table th { vertical-align: middle; }
.sc-dash .table > tbody > tr { transition: background-color .12s ease; }
.sc-dash .table > tbody > tr:hover {
    background: var(--stellar-accent-soft, rgba(13, 110, 253, .06));
}
.sc-dash .table > tbody > tr.table-active {
    --bs-table-active-bg: var(--stellar-accent-soft, rgba(13, 110, 253, .10));
}
.sc-dash .badge { border-radius: var(--stellar-radius, .375rem); }

/* =====================================================================
 * 2. OPT-IN COMPONENTS (global, sc-* prefixed)
 * ===================================================================== */

/* Panels / cards ---------------------------------------------------- */
.sc-panel { overflow: visible; }
.sc-card {
    background: var(--stellar-surface, var(--bs-body-bg, #fff));
    border: 1px solid var(--stellar-border, var(--bs-border-color, #dee2e6));
    border-radius: var(--stellar-radius, .375rem);
    box-shadow: var(--stellar-shadow, 0 1px 2px rgba(0, 0, 0, .05));
    margin-bottom: 1rem;
}
.sc-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: .75rem; flex-wrap: wrap;
}
.sc-count { color: var(--stellar-muted, var(--bs-secondary-color, #6c757d)); font-size: .85rem; }
.sc-count strong { color: var(--stellar-text, inherit); font-weight: 600; }

/* Table wrapper — visible overflow so header filter dropdowns are not
 * clipped; narrow screens fall back to horizontal scroll. */
.sc-table-scroll { overflow: visible; }
@media (max-width: 991.98px) { .sc-table-scroll { overflow-x: auto; } }
.sc-table { margin: 0; }

/* Header cell layout + sort ----------------------------------------- */
.sc-th { display: flex; align-items: center; gap: .35rem; }
.sc-th.center { justify-content: center; }
.sc-th.end { justify-content: flex-end; }
.sc-th-label { display: inline-flex; align-items: center; gap: .25rem; }
.sc-sortable { cursor: pointer; user-select: none; }
.sc-sortable:hover { color: var(--stellar-text, var(--bs-body-color, #212529)); }
.sc-sort-ico { opacity: .5; font-size: .8em; }

/* Filter trigger + dropdown ----------------------------------------- */
.sc-facet { position: relative; display: inline-block; line-height: 0; }
.sc-filter-btn {
    position: relative;
    border: 0; background: transparent; padding: .2rem .3rem; cursor: pointer;
    color: var(--stellar-muted, var(--bs-secondary-color, #6c757d));
    border-radius: var(--sc-radius, .375rem); line-height: 1; font-size: .8rem;
}
.sc-filter-btn:hover {
    color: var(--stellar-accent, var(--bs-primary, #0d6efd));
    background: var(--stellar-accent-soft, rgba(13, 110, 253, .08));
}
.sc-filter-btn.is-active { color: var(--stellar-accent, var(--bs-primary, #0d6efd)); }
.sc-filter-btn.is-active::after {
    content: ''; position: absolute; top: 1px; right: 1px;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--stellar-accent, var(--bs-primary, #0d6efd));
    box-shadow: 0 0 0 1.5px var(--stellar-bg, #fff);
}
.sc-facet-menu {
    position: absolute; z-index: 1055; top: calc(100% + 4px); left: 0;
    min-width: 220px; max-height: 320px; overflow: auto;
    background: var(--stellar-surface, var(--bs-body-bg, #fff));
    color: var(--stellar-text, var(--bs-body-color, #212529));
    border: 1px solid var(--stellar-border, var(--bs-border-color, rgba(0, 0, 0, .15)));
    border-radius: var(--sc-radius, .375rem);
    box-shadow: var(--stellar-shadow, 0 .5rem 1rem rgba(0, 0, 0, .175));
    padding: .4rem;
    text-transform: none; letter-spacing: normal; font-weight: 400; font-size: .875rem;
}
.sc-facet-menu.sc-menu-end { left: auto; right: 0; }
.sc-facet-menu .sc-menu-title {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--stellar-muted, #6c757d); padding: .1rem .35rem .3rem;
}
.sc-facet-menu label {
    display: flex; align-items: center; gap: .5rem;
    padding: .25rem .35rem; margin: 0; cursor: pointer;
    font-weight: 400; border-radius: var(--sc-radius, .375rem); color: inherit;
}
.sc-facet-menu label:hover { background: var(--stellar-accent-soft, rgba(0, 0, 0, .05)); }
.sc-facet-foot {
    border-top: 1px solid var(--stellar-border, var(--bs-border-color, #eee));
    margin-top: .35rem; padding-top: .35rem;
    display: flex; justify-content: flex-end;
}

/* Badges ------------------------------------------------------------ */
.sc-tag-badge {
    display: inline-block; font-weight: 500; font-size: .72rem;
    padding: .18em .5em; margin: 0 .25rem .15rem 0;
    color: var(--stellar-accent, var(--bs-primary, #0d6efd));
    background: var(--stellar-accent-soft, rgba(13, 110, 253, .10));
    border: 1px solid var(--stellar-border, var(--bs-border-color, #dee2e6));
    border-radius: var(--sc-radius, .375rem);
}
.sc-sec-badge,
.sc-count-badge {
    display: inline-block; min-width: 1.6rem; text-align: center;
    background: var(--stellar-bg, var(--bs-secondary-bg, #e9ecef));
    color: var(--stellar-text, var(--bs-body-color, #212529));
    border: 1px solid var(--stellar-border, var(--bs-border-color, #dee2e6));
    font-weight: 600; border-radius: var(--sc-radius, .375rem);
    padding: .2em .45em; font-size: .75rem;
}

/* Bulk-action strip ------------------------------------------------- */
.sc-bulkbar {
    background: var(--stellar-accent-soft, rgba(13, 110, 253, .08));
    border-bottom: 1px solid var(--stellar-border, var(--bs-border-color, #dee2e6));
    padding: .5rem .75rem;
}

/* Compact icon action buttons --------------------------------------- */
.sc-actions { display: inline-flex; gap: .25rem; }
.sc-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.9rem; height: 1.9rem; padding: 0;
    border: 1px solid var(--stellar-border, var(--bs-border-color, #dee2e6));
    background: var(--stellar-surface, var(--bs-body-bg, #fff));
    color: var(--stellar-muted, var(--bs-secondary-color, #6c757d));
    border-radius: var(--sc-radius, .375rem); cursor: pointer; text-decoration: none;
    font-size: .8rem; line-height: 1; transition: color .12s ease, border-color .12s ease, background-color .12s ease;
}
.sc-icon-btn:hover,
.sc-icon-btn:focus-visible {
    color: var(--stellar-accent, var(--bs-primary, #0d6efd));
    border-color: var(--stellar-accent, var(--bs-primary, #0d6efd));
    background: var(--stellar-accent-soft, rgba(13, 110, 253, .08));
}
.sc-icon-btn.danger:hover,
.sc-icon-btn.danger:focus-visible {
    color: var(--stellar-danger, var(--bs-danger, #dc3545));
    border-color: var(--stellar-danger, var(--bs-danger, #dc3545));
    background: var(--stellar-danger-soft, rgba(220, 53, 69, .08));
}

/* Star rating ------------------------------------------------------- */
.sc-star { color: var(--stellar-warn, #ffc107); font-size: .85rem; }
.sc-star.off { color: var(--stellar-border, #dee2e6); }

/* Opt-in form cards (add `.sc-form` on the form/wrapper) ------------- */
.sc-form fieldset {
    background: var(--stellar-surface, var(--bs-body-bg, #fff));
    border: 1px solid var(--stellar-border, var(--bs-border-color, #dee2e6));
    border-radius: var(--stellar-radius, .375rem);
    box-shadow: var(--stellar-shadow, 0 1px 2px rgba(0, 0, 0, .05));
    padding: 1.1rem 1.25rem; margin: 0 0 1rem;
}
.sc-form fieldset legend {
    float: none; width: 100%; margin: 0 0 .9rem; padding: 0 0 .5rem;
    font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
    color: var(--stellar-muted, var(--bs-secondary-color, #6c757d));
    border-bottom: 1px solid var(--stellar-border, var(--bs-border-color, #dee2e6));
}
.sc-form .form-text,
.sc-dash .form-text { color: var(--stellar-muted, var(--bs-secondary-color, #6c757d)); }

/* Light / dark toggle (injected into the dashboard header) ----------- */
.sc-theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; padding: 0; line-height: 1;
}
.sc-theme-toggle i { font-size: .9rem; }
/* Fallback placement on pages without a dashboard header-buttons bar. */
.sc-theme-toggle-float { float: right; margin: 0 0 .5rem .5rem; }