/* ==========================================================================
   New UI: GC Success Center summary tiles and filter row.
   Every selector under .nui-on. Reusable pieces belong in new-ui-kit.css.
   ========================================================================== */

/* ---- Summary tiles: quiet dc-kpi look ---- */
.nui-on .gcsc-root .summary-card {
    --gcsc-accent: var(--dc-blue, #0074C5);
    background: var(--dc-white, #fff);
    color: var(--dc-ink, #1B2733);
    border: 1px solid var(--dc-border, #E6EAEE);
    border-radius: var(--dc-radius-card, 14px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    padding: 16px 18px 14px;
    overflow: hidden;
}
.nui-on .gcsc-root .summary-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    width: auto; height: 3px;
    background: var(--gcsc-accent);
    border-radius: 0;
}
.nui-on .gcsc-root .summary-card.card-insight { --gcsc-accent: var(--dc-blue, #0074C5); }
.nui-on .gcsc-root .summary-card.card-total { --gcsc-accent: var(--dc-teal, #00AEC4); }
.nui-on .gcsc-root .summary-card.card-attendance { --gcsc-accent: var(--dc-blue, #0074C5); }
.nui-on .gcsc-root .summary-card.card-online { --gcsc-accent: var(--dc-purple, #5B3F8E); }
.nui-on .gcsc-root .summary-card.card-total,
.nui-on .gcsc-root .summary-card.card-attendance,
.nui-on .gcsc-root .summary-card.card-online,
.nui-on .gcsc-root .summary-card.card-insight { background: var(--dc-white, #fff); box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.nui-on .gcsc-root .summary-card .label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: var(--dc-tracking-caps, .08em);
    text-transform: uppercase;
    color: var(--dc-muted, #5B6B7A);
    margin-bottom: 8px;
}
.nui-on .gcsc-root .summary-card .label .fa { color: var(--gcsc-accent); }
.nui-on .gcsc-root .summary-card .value {
    font-size: 30px !important;
    font-weight: 800;
    line-height: 1;
    color: var(--dc-ink, #1B2733);
    text-shadow: none;
}
.nui-on .gcsc-root .summary-card .value .fa-spinner { color: var(--dc-muted, #5B6B7A); }
.nui-on .gcsc-root .summary-card .value span[style*="opacity"] { color: var(--dc-muted, #5B6B7A); opacity: 1 !important; font-weight: 600; }
.nui-on .gcsc-root .summary-card.card-insight [ng-repeat] { color: var(--dc-body, #3C4B59); }
.nui-on .gcsc-root .summary-card.card-insight [ng-repeat]:first-child { color: var(--dc-ink, #1B2733); }
.nui-on .gcsc-root .summary-card [style*="opacity: 0.7"],
.nui-on .gcsc-root .summary-card [style*="opacity: 0.8"] { color: var(--dc-muted, #5B6B7A); opacity: 1 !important; }
.nui-on .gcsc-root .summary-card .trend-indicator { font-size: 11px; }
.nui-on .gcsc-root .summary-card .trend-indicator.up { background: rgba(0,174,196,0.12); color: #00808F; }
.nui-on .gcsc-root .summary-card .trend-indicator.down { background: rgba(210,63,49,0.10); color: var(--dc-danger, #D23F31); }
.nui-on .gcsc-root .summary-card .trend-indicator.neutral { background: var(--dc-surface-2, #F7F9FB); color: var(--dc-muted, #5B6B7A); }

/* Breakdown within attendance tile */
.nui-on .gcsc-root .card-breakdown { border-top: 1px solid var(--dc-border, #E6EAEE); }
.nui-on .gcsc-root .card-breakdown-item { background: var(--dc-surface-2, #F7F9FB); border: 1px solid var(--dc-border, #E6EAEE); }
.nui-on .gcsc-root .card-breakdown-item .breakdown-label { color: var(--dc-muted, #5B6B7A); font-size: 8px; }
.nui-on .gcsc-root .card-breakdown-item .breakdown-value { color: var(--dc-ink, #1B2733) !important; }
.nui-on .gcsc-root .summary-card [style*="rgba(255,255,255,0.1)"] { background: var(--dc-surface-2, #F7F9FB) !important; }

/* Achievement bar and status legend: dots with muted text */
.nui-on .gcsc-root .stacked-pill-bar { background: var(--dc-skeleton, #EEF1F4); height: 8px; }
.nui-on .gcsc-root .status-legend-item { color: var(--dc-muted, #5B6B7A); font-size: 11px; }
.nui-on .gcsc-root .status-legend-item:hover { background: var(--dc-surface-2, #F7F9FB); }
.nui-on .gcsc-root .status-legend-item > i {
    font-size: 0;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 8px;
}
.nui-on .gcsc-root .status-legend-item > i::before { content: none; }
.nui-on .gcsc-root .status-legend-item .status-count { color: var(--dc-ink, #1B2733); }

/* ---- Filter row ---- */
.nui-on .gcsc-root .filter-panel {
    border: 1px solid var(--dc-border, #E6EAEE);
    border-radius: var(--dc-radius-card, 14px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.nui-on .gcsc-root .filter-item label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: var(--dc-tracking-caps, .08em);
    text-transform: uppercase;
    color: var(--dc-muted, #5B6B7A);
}
.nui-on .gcsc-root .filter-control,
.nui-on .gcsc-root .filter-panel .select2-container--acadetheme .select2-selection--single {
    height: 34px !important;
    border: 1px solid var(--dc-border-control, #D5DCE3) !important;
    border-radius: var(--dc-radius-control, 8px) !important;
}
.nui-on .gcsc-root .filter-panel .select2-container--acadetheme .select2-selection--single .select2-selection__rendered {
    line-height: 32px !important;
}
.nui-on .gcsc-root .filter-btn,
.nui-on .gcsc-root .gcsc-analytics-btn {
    height: 34px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: var(--dc-radius-control, 8px) !important;
    gap: 6px !important;
}
.nui-on .gcsc-root .filter-btn-primary {
    background: var(--dc-blue, #0074C5);
    color: #fff;
}
.nui-on .gcsc-root .filter-btn-primary:hover { background: #0063AB; }
.nui-on .gcsc-root .filter-btn-secondary,
.nui-on .gcsc-root .gcsc-analytics-btn {
    background: var(--dc-white, #fff) !important;
    color: var(--dc-ink, #1B2733) !important;
    border: 1px solid var(--dc-border-control, #D5DCE3) !important;
    box-shadow: none !important;
}
.nui-on .gcsc-root .filter-btn-secondary:hover,
.nui-on .gcsc-root .gcsc-analytics-btn:hover { background: var(--dc-surface-2, #F7F9FB) !important; }
.nui-on .gcsc-root .gcsc-analytics-btn .fa { color: var(--dc-blue, #0074C5); }
/* More Filters: text-style secondary */
.nui-on .gcsc-root .filter-btn-secondary[ng-click*="showSecondaryFilters"] {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--dc-blue, #0074C5) !important;
}
.nui-on .gcsc-root .filter-btn-secondary[ng-click*="showSecondaryFilters"]:hover,
.nui-on .gcsc-root .filter-btn-secondary[ng-click*="showSecondaryFilters"].active { background: var(--dc-selected, #EAF3FB) !important; }
.nui-on .gcsc-root .filter-btn-icon {
    height: 34px; width: 34px;
    border-color: var(--dc-border-control, #D5DCE3);
    border-radius: var(--dc-radius-control, 8px);
    color: var(--dc-muted, #5B6B7A);
}