/* ==========================================================================
   New UI: Progress Tracker (classroom + course level).
   Every selector under .nui-on. Reusable pieces belong in new-ui-kit.css.
   ========================================================================== */

.nui-on .ptn {
    --asr-blue: var(--aa-blue, #0074C5);
    --asr-blue-soft: rgba(0, 116, 197, .10);
    --asr-ink: var(--dc-ink, #222831);
    --asr-muted: var(--dc-muted, #7B8E92);
    --asr-border: var(--dc-border, #E3E8EB);
    --asr-bg: var(--aa-off-white, #F7F9FA);
    --asr-white: #fff;
    --asr-font: var(--font-display, "Montserrat", sans-serif);
    font-family: var(--asr-font);
}

/* toolbar */
.nui-on .ptn .view-bar { align-items: center; }
.nui-on .ptn .ptn-btn {
    display: inline-flex; align-items: center; justify-content: center;
    height: 34px; padding: 0 12px;
    border: 1px solid var(--asr-border); border-radius: 8px;
    background: #fff; color: var(--aa-grey-700, #4A5358);
    font: 600 13px/1 var(--asr-font); cursor: pointer;
}
.nui-on .ptn .ptn-btn:hover { border-color: var(--asr-blue); color: var(--asr-blue); }
.nui-on .ptn .ptn-btn:focus-visible { outline: 2px solid var(--asr-blue); outline-offset: 1px; }
.nui-on .ptn .ptn-btn-icon { width: 34px; padding: 0; }
.nui-on .ptn .ptn-link {
    border: 0; background: transparent; padding: 0 4px;
    color: var(--asr-blue); font: 600 13px/1 var(--asr-font); cursor: pointer; white-space: nowrap;
}
.nui-on .ptn .ptn-link:hover { text-decoration: underline; }
.nui-on .ptn .ptn-link[disabled] { color: var(--asr-muted); cursor: default; text-decoration: none; }
.nui-on .ptn .panel-heading-sup select.form-control,
.nui-on .ptn .panel-heading-sup input.form-control {
    height: 34px; border: 1px solid var(--asr-border); border-radius: 8px;
    font: 500 13px/1 var(--asr-font); box-shadow: none; background-color: #fff;
}
.nui-on .ptn .panel-heading-sup input.form-control:focus { border-color: var(--asr-blue); }
.nui-on .ptn .panel-heading-sup .select2-container { min-width: 0; }
.nui-on .ptn .panel-heading-sup .select2-container .select2-selection,
.nui-on .ptn .panel-heading-sup .select2-container .select2-choice {
    height: 34px; border: 1px solid var(--asr-border); border-radius: 8px; background: #fff;
    font: 500 13px/32px var(--asr-font); box-shadow: none;
}
.nui-on .ptn .panel-heading-sup .select2-container .select2-selection__rendered { line-height: 32px; }
.nui-on .ptn .panel-heading-sup .select2-container .select2-selection__arrow { height: 32px; }
.nui-on .ptn .panel-heading-sup .input-group-clear .material-symbols-rounded { color: var(--asr-muted); font-size: 18px; }
.nui-on .ptn .panel-heading-sup .input-group-clear input { padding-left: 32px !important; }
.nui-on .ptn .asr-view > button.ng-hide { display: none; }

/* empty state */
.nui-on .ptn .asr-empty { padding: 32px 20px; text-align: center; color: var(--asr-muted); font-size: 13px; }

/* classroom cards */
.nui-on .ptn .wh-card {
    border: 1px solid var(--asr-border) !important; border-top-width: 1px !important;
    border-radius: 14px !important; box-shadow: none; background: #fff; overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.nui-on .ptn .wh-card:hover { border-color: rgba(0, 116, 197, .45) !important; box-shadow: 0 4px 14px rgba(34, 40, 49, .06); }
.nui-on .ptn .ptn-card-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.nui-on .ptn .ptn-tile { flex: 0 0 36px; width: 36px; height: 36px; font-size: 15px; align-self: center; }
.nui-on .ptn .ptn-card-titles { min-width: 0; flex: 1 1 auto; }
.nui-on .ptn .ptn-card-title { font-size: 14px; font-weight: 600; color: var(--asr-ink); }
.nui-on .ptn .ptn-card-id {
    font: 400 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--asr-muted);
}
.nui-on .ptn .ptn-card-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--asr-muted); margin-bottom: 10px; }
.nui-on .ptn .ptn-card-meta i { margin-right: 4px; }
.nui-on .ptn .ptn-stats { display: flex; border-top: 1px solid var(--asr-border); padding-top: 10px; }
.nui-on .ptn .ptn-stats > div { flex: 1 1 0; text-align: center; }
.nui-on .ptn .ptn-stats b { display: block; font-size: 16px; font-weight: 600; color: var(--asr-ink); }
.nui-on .ptn .ptn-stats span { font-size: 11px; color: var(--asr-muted); }