/* ============================================================================
   ACTIVITY ASSESSMENT PORTAL
   ----------------------------------------------------------------------------
   The look of Public/ActivityProviderPortal.aspx, and of the same page rendered
   inside the admin shell at /admin/activities/assessment.

   Replaces the block of inline <style> that used to sit in the page head, so it
   can be cached and cache-busted like every other stylesheet. Bump the ?v= in
   the page when editing this file or the browser serves the old copy.

   TOKENS. Public.master does not load admin-modern-shell.css, so the --acs-*
   custom properties are not guaranteed to exist here. Every value below is
   therefore read as var(--acs-x, <literal>): a tenant-themed shell wins when the
   token is defined, and the portal still renders correctly standalone. Do not
   replace these with bare hex - that is what makes the page un-themeable.

   ASCII only. These pages are not served as UTF-8; see the ascii-only-ui-strings
   skill.
   ============================================================================ */

.acs-activity-portal {
    --ap-accent: var(--acs-accent, #3377FF);
    --ap-accent-darker: var(--acs-accent-darker, #3567D4);
    --ap-accent-subtle: var(--acs-accent-subtle, #E5EEFF);
    --ap-fg: var(--acs-foreground, #020817);
    --ap-muted-fg: var(--acs-muted-foreground, #64748B);
    --ap-border: var(--acs-border, #E2E8F0);
    --ap-muted: var(--acs-muted, #F1F5F9);
    --ap-success: var(--acs-success, #06C170);
    --ap-danger: var(--acs-danger, #FF3D3D);
    --ap-warning: var(--acs-warning, #FFAB00);
    --ap-radius-sm: var(--acs-radius-sm, 4px);
    --ap-radius-md: var(--acs-radius-md, 6px);
    --ap-radius-lg: var(--acs-radius-lg, 8px);
    --ap-shadow-card: var(--acs-shadow-card, 0 1px 2px 0 rgba(145, 158, 171, 0.16));
    --ap-shadow-z8: var(--acs-shadow-z8, 0 8px 16px 0 rgba(145, 158, 171, 0.16));

    font-family: var(--acs-font-sans, "Mulish", "Helvetica Neue", Arial, sans-serif);
    font-size: 14px;
    color: var(--ap-fg);
}

/* NOTE ON UNITS. Every length here is in px, deliberately, and must stay that way.
   The masters this page renders under set html { font-size: 10px } in style.min.css,
   so a rem is 10px and not the 16px the design system's scale assumes - a 3rem input
   measured 30px instead of 48px, and the card title 12.5px instead of 20px. px is the
   only unit that means the same thing under Public.master, Registration.master,
   College.master and CBC.master alike. Verified by measuring, not by reading. */

/* The page ships its own ground. Public.master paints body #aaa inline, which is
   why this needs !important - an inline declaration is only beaten by one. */
body.page-admin.acs-activity-portal-page {
    background: #FAFCFF !important;
}

.acs-activity-portal *,
.acs-activity-portal *::before,
.acs-activity-portal *::after {
    box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
   1. SIGN IN
   A single centred card. The old login was three unlabelled-looking Bootstrap 3
   form-groups at 34px tall inside a dark-gradient header; auth screens in this
   product use 48px inputs and a real focus ring.
   --------------------------------------------------------------------------- */

.ap-auth {
    min-height: calc(100vh - 64px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
}

.ap-auth-card {
    width: 100%;
    max-width: 416px;
    background: #fff;
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius-lg);
    box-shadow: var(--ap-shadow-z8);
    padding: 32px;
}

.ap-auth-mark {
    width: 48px;
    height: 48px;
    border-radius: var(--ap-radius-lg);
    background: var(--ap-accent-subtle);
    color: var(--ap-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin: 0 auto 16px auto;
}

.ap-auth-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.025em;
    text-align: center;
    color: var(--ap-fg);
}

.ap-auth-subtitle {
    margin: 6px 0 28px 0;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    color: var(--ap-muted-fg);
}

/* ---------------------------------------------------------------------------
   2. FIELDS
   --------------------------------------------------------------------------- */

.ap-field {
    margin-bottom: 16px;
}

.ap-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ap-fg);
}

.ap-hint {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    font-weight: 400;
    color: var(--ap-muted-fg);
}

.ap-input,
.acs-activity-portal select.ap-input {
    display: block;
    width: 100%;
    height: 36px;
    padding: 0 12px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    color: var(--ap-fg);
    background: #fff;
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius-md);
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Auth screens get the taller control. */
.ap-auth .ap-input {
    height: 48px;
    font-size: 15px;
    border-radius: var(--ap-radius-lg);
}

/* Scoped through .acs-activity-portal deliberately. style.min.css carries
   input[type="email"]:focus (and every other type), which is specificity (0,2,1) and
   outranks a bare .ap-input:focus at (0,2,0) - it sets box-shadow:none and its own blue
   border, so the focus ring silently did not render. Prefixing lifts this to (0,3,0).
   The keyboard affordance is not optional, so this must not be un-scoped again. */
.acs-activity-portal .ap-input:focus,
.acs-activity-portal select.ap-input:focus {
    outline: none;
    border-color: var(--ap-accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.ap-input::-webkit-input-placeholder { color: var(--ap-muted-fg); }
.ap-input::-moz-placeholder { color: var(--ap-muted-fg); opacity: 1; }
.ap-input:-ms-input-placeholder { color: var(--ap-muted-fg); }
.ap-input::placeholder { color: var(--ap-muted-fg); }

.ap-input-wrap {
    position: relative;
}

.ap-input-wrap .ap-input {
    padding-right: 40px;
}

.ap-reveal {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    padding: 0;
    color: var(--ap-muted-fg);
    cursor: pointer;
}

.ap-reveal:hover { color: var(--ap-accent); }

.acs-activity-portal .ap-reveal:focus {
    outline: none;
    color: var(--ap-accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    border-radius: var(--ap-radius-sm);
}

@media (max-width: 640px) {
    .ap-auth .ap-input { height: 44px; }
}

/* ---------------------------------------------------------------------------
   3. BUTTONS
   --------------------------------------------------------------------------- */

.ap-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    padding: 0 16px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    border: 1px solid transparent;
    border-radius: var(--ap-radius-md);
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ap-btn i { font-size: 16px; }

/* Same scoping reason as the input focus ring above - the host stylesheets style
   button:focus and a:focus of their own. */
.acs-activity-portal .ap-btn:focus,
.acs-activity-portal .ap-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.ap-btn-primary {
    background: var(--ap-accent);
    color: #fff;
}

.ap-btn-primary:hover,
.ap-btn-primary:focus { background: var(--ap-accent-darker); color: #fff; }

.ap-btn-outline {
    background: transparent;
    border-color: var(--ap-accent);
    color: var(--ap-accent);
}

.ap-btn-outline:hover,
.ap-btn-outline:focus { background: var(--ap-accent-subtle); color: var(--ap-accent-darker); }

.ap-btn-ghost {
    background: transparent;
    border-color: var(--ap-border);
    color: var(--ap-muted-fg);
}

.ap-btn-ghost:hover,
.ap-btn-ghost:focus { background: var(--ap-muted); color: var(--ap-fg); }

.ap-btn-block {
    display: flex;
    width: 100%;
}

.ap-btn-lg {
    height: 48px;
    font-size: 15px;
    border-radius: var(--ap-radius-lg);
}

.ap-btn-sm {
    height: 28px;
    padding: 0 10px;
    font-size: 12px;
}

/* ---------------------------------------------------------------------------
   4. SIGNED-IN SHELL
   --------------------------------------------------------------------------- */

.ap-shell {
    max-width: 1152px;
    margin: 24px auto;
    padding: 0 16px;
}

.ap-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--ap-border);
}

.ap-topbar-title {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.ap-topbar-mark {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: var(--ap-radius-md);
    background: var(--ap-accent-subtle);
    color: var(--ap-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.ap-topbar h1 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--ap-fg);
}

.ap-topbar p {
    margin: 2px 0 0 0;
    font-size: 13px;
    font-weight: 400;
    color: var(--ap-muted-fg);
}

/* Tabs. Bootstrap 3's nav-tabs are kept as the markup contract (the script
   toggles .active on the <li>), but restyled into a segmented control. */
.acs-activity-portal .ap-tabs.nav-tabs {
    border-bottom: 1px solid var(--ap-border);
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.acs-activity-portal .ap-tabs.nav-tabs > li { float: none; margin: 0; }

.acs-activity-portal .ap-tabs.nav-tabs > li > a {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ap-muted-fg);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
}

.acs-activity-portal .ap-tabs.nav-tabs > li > a:hover,
.acs-activity-portal .ap-tabs.nav-tabs > li > a:focus {
    color: var(--ap-fg);
    background: var(--ap-muted);
    border-bottom-color: var(--ap-border);
}

.acs-activity-portal .ap-tabs.nav-tabs > li.active > a,
.acs-activity-portal .ap-tabs.nav-tabs > li.active > a:hover,
.acs-activity-portal .ap-tabs.nav-tabs > li.active > a:focus {
    color: var(--ap-accent);
    background: transparent;
    border: 0;
    border-bottom: 2px solid var(--ap-accent);
}

/* ---------------------------------------------------------------------------
   5. CARDS AND FILTER BAR
   --------------------------------------------------------------------------- */

.ap-card {
    background: #fff;
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius-md);
    box-shadow: var(--ap-shadow-card);
    padding: 20px;
    margin-bottom: 20px;
}

.ap-card-title {
    margin: 0 0 4px 0;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--ap-fg);
}

.ap-card-note {
    margin: 0 0 16px 0;
    font-size: 13px;
    font-weight: 400;
    color: var(--ap-muted-fg);
}

/* CSS grid rather than Bootstrap columns: the filters have to reflow from four
   across to one without the col-md-* sums that a 12-column grid demands. */
.ap-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
    gap: 14px;
    align-items: end;
}

.ap-filters .ap-field { margin-bottom: 0; }

.ap-filters .bootstrap-select { width: 100% !important; }

.ap-filters .bootstrap-select > .btn {
    height: 36px;
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius-md);
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    color: var(--ap-fg);
    box-shadow: none;
}

/* ---------------------------------------------------------------------------
   6. TABLES
   The old header was a dark charcoal gradient with white uppercase text, which
   is heavier than anything else in the product. Light header, muted label text.
   --------------------------------------------------------------------------- */

.ap-table-wrap {
    background: #fff;
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius-md);
    box-shadow: var(--ap-shadow-card);
    overflow-x: auto;
}

.acs-activity-portal .ap-table.table {
    width: 100% !important;
    margin: 0;
    border: 0;
    font-size: 14px;
}

.acs-activity-portal .ap-table.table > thead > tr > th {
    padding: 12px;
    background: var(--ap-muted);
    color: var(--ap-muted-fg);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 0;
    border-bottom: 1px solid var(--ap-border);
    vertical-align: middle;
    white-space: nowrap;
}

.acs-activity-portal .ap-table.table > tbody > tr > td {
    padding: 10px 12px;
    border: 0;
    border-top: 1px solid var(--ap-border);
    color: var(--ap-fg);
    vertical-align: middle;
}

.acs-activity-portal .ap-table.table > tbody > tr:hover > td { background: var(--ap-muted); }

.acs-activity-portal .ap-table.table > tbody > tr > td select,
.acs-activity-portal .ap-table.table > tbody > tr > td input[type="text"] {
    height: 32px;
    padding: 0 8px;
    font-family: inherit;
    font-size: 13px;
    color: var(--ap-fg);
    background: #fff;
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius-sm);
    max-width: 100%;
}

.acs-activity-portal .ap-table.table > tbody > tr > td select:focus,
.acs-activity-portal .ap-table.table > tbody > tr > td input[type="text"]:focus {
    outline: none;
    border-color: var(--ap-accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* The "select an activity first" row the script writes into an empty table. */
.acs-activity-portal .placeholder-header,
.acs-activity-portal td.placeholder-header {
    text-align: center;
    padding: 32px 12px !important;
    color: var(--ap-muted-fg) !important;
    background: #fff !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    font-style: normal;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.ap-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

/* ---------------------------------------------------------------------------
   7. INDICATORS AND LEVEL CHIPS
   --------------------------------------------------------------------------- */

.acs-activity-portal .indicator-card {
    background: #fff;
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius-md);
    box-shadow: var(--ap-shadow-card);
    padding: 20px;
    margin-bottom: 16px;
}

.acs-activity-portal .indicator-card h5 {
    margin: 0 0 8px 0;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--ap-fg);
}

.acs-activity-portal .level-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0;
}

.acs-activity-portal .level-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 9999px;
    background: var(--ap-accent-subtle);
    color: var(--ap-accent-darker);
    font-size: 12px;
    font-weight: 500;
    margin: 0;
}

.ap-scope-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 9999px;
    background: var(--ap-muted);
    color: var(--ap-muted-fg);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ---------------------------------------------------------------------------
   8. ONBOARDING / EMPTY STATE
   Shown when an activity has no Key Indicators, or an indicator has no Levels -
   the point at which assessment cannot proceed and the fastest way out is to
   copy the school's existing grading levels.
   --------------------------------------------------------------------------- */

.ap-onboarding {
    background: #fff;
    border: 1px solid var(--ap-border);
    border-left: 3px solid var(--ap-warning);
    border-radius: var(--ap-radius-md);
    box-shadow: var(--ap-shadow-card);
    padding: 24px;
    margin-bottom: 20px;
}

.ap-onboarding-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}

.ap-onboarding-mark {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: var(--ap-radius-md);
    background: rgba(255, 171, 0, 0.12);
    color: var(--ap-warning);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.ap-onboarding h4 {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--ap-fg);
}

.ap-onboarding p {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    color: var(--ap-muted-fg);
}

.ap-steps {
    counter-reset: ap-step;
    list-style: none;
    margin: 0 0 20px 0;
    padding: 0;
}

.ap-steps li {
    counter-increment: ap-step;
    position: relative;
    padding: 0 0 0 32px;
    margin-bottom: 10px;
    font-size: 14px;
    color: var(--ap-fg);
}

.ap-steps li::before {
    content: counter(ap-step);
    position: absolute;
    left: 0;
    top: -1px;
    width: 22px;
    height: 22px;
    border-radius: 9999px;
    background: var(--ap-accent-subtle);
    color: var(--ap-accent-darker);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ap-steps li.is-done { color: var(--ap-muted-fg); }

.ap-steps li.is-done::before {
    content: "\f00c";
    font-family: FontAwesome;
    background: rgba(6, 193, 112, 0.12);
    color: var(--ap-success);
}

.ap-onboarding-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ---------------------------------------------------------------------------
   9. SOURCE PICKER (copy levels from the grading system)
   --------------------------------------------------------------------------- */

.ap-source-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px;
    margin-top: 12px;
    background: var(--ap-muted);
    border-radius: var(--ap-radius-md);
    min-height: 48px;
    align-items: center;
}

.ap-source-empty {
    font-size: 13px;
    color: var(--ap-muted-fg);
}

/* ---------------------------------------------------------------------------
   10. LOADER
   --------------------------------------------------------------------------- */

.acs-activity-portal .loader,
.acs-activity-portal-page .loader {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    z-index: 10001;
    border: 3px solid var(--acs-border, #E2E8F0);
    border-top-color: var(--acs-accent, #3377FF);
    border-radius: 50%;
    animation: ap-spin 0.7s linear infinite;
}

@keyframes ap-spin {
    to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------------------------
   11. UTILITIES
   Bootstrap 3 supplies .hide, which the portal script toggles. Keep using it -
   do not introduce a second hiding class the script does not know about.
   --------------------------------------------------------------------------- */

.ap-muted-text {
    font-size: 13px;
    font-weight: 400;
    color: var(--ap-muted-fg);
}

.ap-stack > * + * { margin-top: 12px; }

.ap-inline-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(144px, 1fr));
    gap: 8px;
    align-items: end;
}

@media (max-width: 640px) {
    .ap-shell { margin: 16px auto; }
    .ap-card, .ap-onboarding { padding: 16px; }
    .ap-topbar { align-items: flex-start; }
}