/* Shared operational workspaces. Extracted from PHP templates so one cached layer controls their presentation. */

/* College operations */
/* College operations color tokens (semantic families follow OFES_DESIGN_SYSTEM.md). Change colors here, not in rules. */
    :root {
        --sec-text: #0f172a; --sec-text-2: #334155; --sec-text-3: #475569; --sec-muted: #64748b; --sec-border: #e2e8f0; --sec-border-strong: #cbd5e1;
        --sec-surface-2: #f8fafc; --sec-subtle: #f1f5f9; --sec-row-hover: #fafafa; --sec-category-bg: #fcfcfd; --sec-selected: #fff7f7; --sec-success-fg: #047857;
        --sec-success-bg: #ecfdf5; --sec-success-border: #a7f3d0; --sec-success-strong: #065f46; --sec-success-hover: #d1fae5; --sec-success-solid: #10b981; --sec-toast-success: #166534;
        --sec-warning-fg: #b45309; --sec-warning-bg: #fffbeb; --sec-warning-border: #fde68a; --sec-warning-strong: #92400e; --sec-warning-solid: #f59e0b; --sec-danger-fg: #b91c1c;
        --sec-danger-bg: #fef2f2; --sec-danger-border: #fecaca; --sec-danger-strong: #991b1b; --sec-danger-hover: #fee2e2; --sec-danger-solid: #ef4444; --sec-info-fg: #1d4ed8;
        --sec-info-bg: #eff6ff; --sec-info-border: #bfdbfe; --sec-info-strong: #1e40af; --sec-notice-fg: #0369a1; --sec-notice-bg: #f0f9ff; --sec-notice-border: #bae6fd;
        --sec-notice-strong: #075985;
    }
    .sec-card { margin-top: 1rem; background: #fff; border: 1px solid var(--sec-border); border-radius: 1rem; box-shadow: 0 8px 30px rgba(0,0,0,.05); }
    .sec-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding: .85rem 1.25rem; border-bottom: 1px solid var(--sec-border); }
    .sec-card-title { display: inline-flex; align-items: center; gap: .45rem; font-size: 15px; font-weight: 800; color: var(--csu-maroon-700); }
    .sec-card-title .material-symbols-outlined { color: var(--csu-maroon-600); font-size: 20px; }
    .sec-muted { font-size: 12px; font-weight: 600; color: var(--sec-muted); }

    .sec-filters { display: grid; gap: .75rem; padding: 1rem 1.25rem 1.1rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); align-items: end; }
    @media (min-width: 1200px) { .sec-filters { grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.25fr) auto; } }
    .sec-field { display: grid; gap: .3rem; font-size: 12px; font-weight: 700; color: var(--sec-text-2); }
    .sec-field :is(select, input) { width: 100%; min-width: 0; max-width: 100%; min-height: 40px; padding: .5rem .75rem; border: 1px solid var(--sec-border); border-radius: .75rem; background: #fff; color: var(--sec-text); font-size: 13px; font-weight: 600; }
    .sec-field input[type="file"] { overflow: hidden; padding: .4rem; }
    .sec-field input[type="checkbox"], .sec-field input[type="radio"] { width: 1.25rem; min-width: 1.25rem; max-width: 1.25rem; min-height: 1.25rem; padding: 0; border-radius: .3rem; flex: 0 0 1.25rem; }
    .sec-field input[readonly] { background: var(--sec-subtle); color: var(--sec-muted); cursor: not-allowed; }
    .sec-field :is(select, input):focus { outline: 2px solid rgba(128,0,0,.22); outline-offset: 1px; border-color: rgba(128,0,0,.35); }
    .sec-filter-actions { display: flex; gap: .5rem; }

    .sec-btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 40px; padding: .45rem .85rem; border: 1px solid var(--sec-border); border-radius: .75rem; background: #fff; color: var(--sec-text-2); font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; cursor: pointer; }
    .sec-btn:hover { background: var(--sec-surface-2); border-color: var(--sec-border-strong); }
    .sec-btn .material-symbols-outlined { font-size: 18px; }
    .sec-btn.is-primary { border-color: transparent; color: #fff; background: var(--ofes-primary-gradient, var(--csu-gradient)); }
    .sec-btn.is-primary:hover { filter: brightness(1.08); }
    .sec-btn.is-sm { min-height: 32px; padding: .3rem .65rem; font-size: 12px; border-radius: .6rem; }
    .sec-btn.is-disabled { opacity: .5; pointer-events: none; }

    .sec-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
    .sec-tab { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .85rem; border: 1px solid var(--sec-border); border-radius: .75rem; background: #fff; color: var(--sec-text-2); font-size: 13px; font-weight: 800; text-decoration: none; }
    .sec-tab:hover { border-color: var(--sec-border-strong); background: var(--sec-surface-2); }
    .sec-tab .material-symbols-outlined { font-size: 18px; }
    .sec-tab .sec-count { padding: .05rem .5rem; border-radius: 9999px; background: var(--sec-subtle); color: var(--sec-text-3); font-size: 11px; }
    .sec-tab[aria-current="page"] { border-color: transparent; color: #fff; background: var(--csu-gradient); }
    .sec-tab[aria-current="page"] .sec-count { background: rgba(255,255,255,.22); color: #fff; }

    .sec-stats { display: grid; gap: 1rem; margin-top: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
    .sec-stat { padding: 1rem; background: #fff; border: 1px solid var(--sec-border); border-radius: 1rem; }
    .sec-stat-label { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sec-muted); }
    .sec-stat-label .material-symbols-outlined { font-size: 22px; }
    .sec-stat-value { margin-top: .35rem; font-size: 1.6rem; font-weight: 800; color: var(--csu-maroon-700); font-variant-numeric: tabular-nums; }

    .sec-table-wrap { overflow-x: auto; }
    .sec-table { width: 100%; border-collapse: collapse; font-size: 13px; }
    .sec-table th { padding: .6rem .7rem; background: var(--sec-surface-2); border-bottom: 1px solid var(--sec-border); text-align: left; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--sec-text-3); white-space: nowrap; }
    .sec-table td { padding: .6rem .7rem; border-bottom: 1px solid var(--sec-subtle); color: var(--sec-text-2); vertical-align: middle; }
    .sec-table tbody tr:hover { background: var(--sec-row-hover); }
    .sec-table .is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .sec-table .is-nowrap { white-space: nowrap; }
    .sec-student { font-weight: 700; color: var(--sec-text); min-width: 150px; }
    .sec-table .is-program { min-width: 180px; }
    .sec-sub { font-size: 12px; color: var(--sec-muted); }
    .sec-empty { padding: 2.5rem 1rem; text-align: center; color: var(--sec-muted); font-weight: 600; }

    .sec-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .6rem; border: 1px solid; border-radius: 9999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
    .sec-dot { width: 6px; height: 6px; border-radius: 9999px; background: currentColor; }
    .sec-badge.is-success { color: var(--sec-success-fg); background: var(--sec-success-bg); border-color: var(--sec-success-border); }
    .sec-badge.is-warning { color: var(--sec-warning-fg); background: var(--sec-warning-bg); border-color: var(--sec-warning-border); }
    .sec-badge.is-danger { color: var(--sec-danger-fg); background: var(--sec-danger-bg); border-color: var(--sec-danger-border); }
    .sec-badge.is-muted { color: var(--sec-text-3); background: var(--sec-subtle); border-color: var(--sec-border-strong); }
    .sec-badge.is-info { color: var(--sec-info-fg); background: var(--sec-info-bg); border-color: var(--sec-info-border); }

    .sec-progress { display: flex; align-items: center; gap: .5rem; min-width: 120px; }
    .sec-progress-track { flex: 1; height: 7px; overflow: hidden; border-radius: 9999px; background: var(--sec-border); }
    .sec-progress-fill { height: 100%; border-radius: 9999px; background: var(--sec-success-solid); }
    .sec-progress-fill.is-warning { background: var(--sec-warning-solid); }
    .sec-progress-fill.is-danger { background: var(--sec-danger-solid); }
    .sec-progress-value { width: 3.2rem; text-align: right; font-size: 12px; font-weight: 700; color: var(--sec-text-2); font-variant-numeric: tabular-nums; }

    .sec-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding: .75rem 1.25rem; border-top: 1px solid var(--sec-border); font-size: 12px; font-weight: 600; color: var(--sec-muted); }
    .sec-pager-actions { display: flex; gap: .4rem; }

    .sec-dialog [hidden], .sec-card [hidden], .sec-bulkbar[hidden] { display: none !important; }
    .sec-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; }
    .sec-toolbar-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 1rem; }
    .sec-btn.is-danger { color: var(--sec-danger-fg); border-color: var(--sec-danger-border); background: var(--sec-danger-bg); }
    .sec-btn.is-danger:hover { background: var(--sec-danger-hover); }
    .sec-btn.is-success { color: var(--sec-success-fg); border-color: var(--sec-success-border); background: var(--sec-success-bg); }
    .sec-btn.is-success:hover { background: var(--sec-success-hover); }
    .sec-btn:disabled { opacity: .55; cursor: not-allowed; }

    .sec-bulkbar { position: sticky; top: 4.5rem; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin-top: 1rem; padding: .65rem 1rem; border-radius: 1rem; color: #fff; background: var(--csu-gradient); box-shadow: 0 10px 30px rgba(92,0,0,.25); }
    .sec-bulkbar[hidden] { display: none; }
    .sec-bulkbar strong { font-size: 14px; }
    .sec-bulkbar .sec-btn { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.12); color: #fff; }
    .sec-bulkbar .sec-btn:hover { background: rgba(255,255,255,.22); }

    .sec-check { width: 20px; height: 20px; accent-color: var(--csu-maroon-600); cursor: pointer; }
    .sec-table tr.is-selected td { background: var(--sec-selected); }
    .sec-row-actions { display: flex; justify-content: flex-end; gap: .3rem; }

    .sec-categories { display: grid; gap: .6rem; padding: 1rem 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 430px), 1fr)); }
    .sec-category { display: grid; gap: .45rem; padding: .65rem .8rem; border: 1px solid var(--sec-subtle); border-radius: .85rem; background: var(--sec-category-bg); }
    .sec-category .sec-chips { justify-content: flex-start; }
    .sec-categories > .sec-empty { grid-column: 1 / -1; }
    .sec-category-name { font-size: 13px; font-weight: 700; color: var(--sec-text); text-decoration: none; }
    .sec-category-name:hover { color: var(--csu-maroon-600); text-decoration: underline; }
    .sec-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }
    .sec-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .55rem; border: 1px solid var(--sec-border); border-radius: 9999px; background: #fff; color: var(--sec-text-2); font-size: 11px; font-weight: 700; text-decoration: none; white-space: nowrap; }
    .sec-chip:hover { border-color: rgba(128,0,0,.35); color: var(--csu-maroon-600); }
    .sec-chip.is-active { border-color: transparent; color: #fff; background: var(--csu-gradient); }
    .sec-chip b { font-variant-numeric: tabular-nums; }
    details.sec-card > summary { list-style: none; cursor: pointer; }
    details.sec-card > summary::-webkit-details-marker { display: none; }
    details.sec-card[open] .sec-expand { transform: rotate(180deg); }
    .sec-expand { transition: transform .15s; color: var(--sec-muted); }

    .sec-form { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
    .sec-form .is-wide { grid-column: 1 / -1; }
    .sec-form .sec-field { align-content: start; }
    .sec-choice { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: .65rem; padding: .75rem .85rem; border: 1px solid var(--sec-border); border-radius: .75rem; background: var(--sec-surface-2); color: var(--sec-text-2); }
    .sec-choice .sec-check { margin-top: .1rem; flex: 0 0 1.25rem; }
    .sec-choice-label { min-width: 0; font-size: 13px; font-weight: 700; line-height: 1.35; cursor: pointer; }
    .sec-choice-help { display: block; margin-top: .15rem; color: var(--sec-muted); font-size: 12px; font-weight: 500; }
    .sec-form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--sec-border); }
    .sec-help { font-size: 12px; font-weight: 500; color: var(--sec-muted); }
    .sec-alert { margin-bottom: .85rem; padding: .7rem .9rem; border: 1px solid var(--sec-danger-border); border-radius: .75rem; background: var(--sec-danger-bg); color: var(--sec-danger-strong); font-size: 13px; font-weight: 600; }
    .sec-alert.is-info { border-color: var(--sec-info-border); background: var(--sec-info-bg); color: var(--sec-info-strong); }
    .sec-alert.is-warning { border-color: var(--sec-warning-border); background: var(--sec-warning-bg); color: var(--sec-warning-strong); }
    .sec-summary { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); margin-bottom: .85rem; }
    .sec-summary > div { padding: .6rem .75rem; border: 1px solid var(--sec-border); border-radius: .75rem; background: var(--sec-surface-2); }
    .sec-summary dt { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--sec-muted); }
    .sec-summary dd { font-size: 1.3rem; font-weight: 800; color: var(--sec-text); font-variant-numeric: tabular-nums; }
    /* Import preview: result counts double as filters. */
    .sec-import-tiles { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); margin-bottom: .75rem; }
    .sec-import-tile { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; padding: .6rem .75rem; border: 1px solid var(--sec-border); border-radius: .75rem; background: var(--sec-surface-2); color: var(--sec-text); text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
    .sec-import-tile span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--sec-muted); }
    .sec-import-tile strong { font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; }
    .sec-import-tile:hover:not(:disabled) { border-color: var(--sec-border-strong); }
    .sec-import-tile:disabled { cursor: default; opacity: .55; }
    .sec-import-tile[aria-pressed="true"] { border-color: var(--csu-maroon-600, #8b1d2c); box-shadow: 0 0 0 2px var(--csu-maroon-600, #8b1d2c) inset; }
    .sec-import-tile.is-success strong { color: var(--sec-success-strong); }
    .sec-import-tile.is-info strong { color: var(--sec-info-strong); }
    .sec-import-tile.is-danger strong { color: var(--sec-danger-fg); }
    .sec-import-tile.is-danger:not(:disabled) { border-color: var(--sec-danger-border); background: var(--sec-danger-bg); }
    .sec-import-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: .6rem; }
    .sec-import-bar input { flex: 1 1 260px; max-width: 420px; min-height: 36px; padding: .4rem .75rem; border: 1px solid var(--sec-border); border-radius: .65rem; font-size: 13px; background: transparent; color: inherit; }
    .sec-import-bar .sec-btn { margin-left: auto; }
    .sec-import-table { margin-top: 0; max-height: 55vh; overflow: auto; }
    .sec-import-table thead th { position: sticky; top: 0; z-index: 1; background: var(--sec-surface-2); }
    .sec-import-table tr.is-error-row td { background: var(--sec-danger-bg); }
    .sec-import-error { color: var(--sec-danger-strong); font-weight: 600; font-size: 12px; }
    .sec-toast { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 200; max-width: min(420px, calc(100vw - 2.5rem)); padding: .8rem 1rem; border-radius: .9rem; color: #fff; background: var(--sec-toast-success); box-shadow: 0 16px 40px rgba(0,0,0,.25); font-size: 13px; font-weight: 700; }
    .sec-toast.is-error { background: var(--sec-danger-strong); }

    .sec-dialog { width: min(980px, calc(100vw - 2rem)); max-width: calc(100vw - 2rem); max-height: calc(100dvh - 2rem); overflow-x: hidden; overflow-y: auto; padding: 0; border: 1px solid var(--sec-border); border-radius: 1rem; background: #fff; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
    .sec-dialog::backdrop { background: rgba(15,23,42,.55); }
    .sec-dialog-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .85rem 1.25rem; color: #fff; background: var(--csu-gradient); }
    .sec-dialog-head h2 { font-size: 16px; font-weight: 800; }
    .sec-dialog-head button { display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .7rem; border: 1px solid rgba(255,255,255,.3); border-radius: .6rem; background: rgba(255,255,255,.12); color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; }
    .sec-dialog-body { padding: 1rem 1.25rem 1.25rem; }
    .sec-profile { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: 1rem; }
    .sec-profile > div { padding: .65rem .8rem; border: 1px solid var(--sec-subtle); border-radius: .75rem; background: var(--sec-surface-2); }
    .sec-profile dt { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--sec-muted); }
    .sec-profile dd { margin-top: .1rem; font-size: 14px; font-weight: 800; color: var(--sec-text); }
    @media (max-width: 640px) {
        .sec-dialog { width: calc(100vw - 1rem); max-width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); border-radius: .85rem; }
        .sec-dialog-head, .sec-dialog-body { padding-left: .85rem; padding-right: .85rem; }
        .sec-form { grid-template-columns: minmax(0, 1fr); }
        .sec-form-actions { display: grid; grid-template-columns: 1fr; }
        .sec-form-actions .sec-btn { width: 100%; }
    }

/* Unified data imports */
.dio{--dio-maroon:#7a1538;--dio-ink:#172033;--dio-line:#dbe2ea;color:var(--dio-ink)}
.dio-head{border-radius:1rem;padding:1.5rem;color:#fff;background:linear-gradient(135deg,#65102f,#8f1d49);box-shadow:0 16px 35px rgba(87,15,43,.18)}
.dio-head h1{font-size:1.55rem;font-weight:800;letter-spacing:-.02em}.dio-head p{margin-top:.35rem;color:rgba(255,255,255,.82);font-weight:600}
.dio-card{margin-top:1rem;border:1px solid var(--dio-line);border-radius:1rem;background:rgba(255,255,255,.94);box-shadow:0 10px 28px rgba(15,23,42,.06);overflow:hidden}
.dio-card-head{display:flex;gap:1rem;align-items:center;justify-content:space-between;padding:1rem 1.15rem;border-bottom:1px solid var(--dio-line)}
.dio-card-head h2{font-size:1rem;font-weight:800}.dio-body{padding:1.15rem}.dio-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:.85rem}.dio-field{grid-column:span 4;font-size:.74rem;font-weight:800;color:#475569}.dio-field.wide{grid-column:span 8}.dio-field span{display:block;margin-bottom:.35rem;text-transform:uppercase;letter-spacing:.05em}
.dio input,.dio select{width:100%;min-width:0;max-width:100%;min-height:2.75rem;border:1px solid #cbd5e1;border-radius:.75rem;background:#fff;padding:.65rem .75rem;color:#172033;font-size:.875rem;font-weight:650}.dio input[type="file"]{overflow:hidden}.dio input:focus,.dio select:focus,.dio button:focus-visible,.dio a:focus-visible{outline:3px solid rgba(122,21,56,.24);outline-offset:2px;border-color:var(--dio-maroon)}
.dio-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}.dio-btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:2.6rem;border:1px solid #cbd5e1;border-radius:.75rem;padding:.6rem .9rem;background:#fff;color:#172033;font-size:.84rem;font-weight:800;cursor:pointer}.dio-btn.primary{border-color:transparent;background:var(--ofes-primary-gradient,var(--csu-gradient));color:#fff}.dio-btn.danger{color:#9f1239;border-color:#fecdd3;background:#fff1f2}.dio-btn:disabled{opacity:.48;cursor:not-allowed}
.dio-upload{margin-top:1rem;border:1px dashed #b7c2cf;border-radius:.9rem;padding:1rem;background:#f8fafc}.dio-file-meta{margin-top:.55rem;color:#64748b;font-size:.8rem;font-weight:650}
.dio-progress{margin-top:1rem}.dio-progress progress{width:100%;height:.8rem;accent-color:var(--dio-maroon)}.dio-progress-line{display:flex;justify-content:space-between;gap:1rem;margin-bottom:.4rem;font-size:.82rem;font-weight:750}.dio-progress small{display:block;margin-top:.35rem;color:#64748b}
.dio-summary{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.6rem;margin-top:1rem}.dio-metric{border:1px solid var(--dio-line);border-radius:.75rem;padding:.7rem;background:#fff}.dio-metric b{display:block;font-size:1.25rem}.dio-metric span{color:#64748b;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.dio-tools{display:flex;flex-wrap:wrap;gap:.6rem;align-items:end;margin-top:1rem}.dio-tools label{font-size:.72rem;font-weight:800;color:#475569}.dio-tools label span{display:block;margin-bottom:.25rem}.dio-table-wrap{margin-top:.8rem;overflow:auto;border:1px solid var(--dio-line);border-radius:.8rem}.dio table{width:100%;border-collapse:collapse;font-size:.79rem}.dio th{position:sticky;top:0;background:#f8fafc;color:#475569;text-align:left;text-transform:uppercase;letter-spacing:.04em;font-size:.68rem}.dio th,.dio td{padding:.7rem;border-bottom:1px solid #edf1f5;vertical-align:top}.dio td pre{margin:0;max-width:34rem;white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;color:#334155}.dio-chip{display:inline-flex;border-radius:999px;padding:.24rem .52rem;background:#eef2f7;font-size:.68rem;font-weight:850;text-transform:uppercase}.dio-chip.new,.dio-chip.imported{background:#dcfce7;color:#166534}.dio-chip.update,.dio-chip.updated{background:#dbeafe;color:#1d4ed8}.dio-chip.invalid,.dio-chip.rejected,.dio-chip.failed{background:#ffe4e6;color:#9f1239}.dio-chip.unchanged,.dio-chip.skipped{background:#f1f5f9;color:#475569}.dio-alert{margin-top:1rem;border-radius:.8rem;padding:.8rem 1rem;background:#fff7ed;color:#9a3412;font-size:.85rem;font-weight:700}.dio-alert.error{background:#fff1f2;color:#9f1239}.dio-alert.success{background:#ecfdf5;color:#166534}.dio-empty{padding:2rem;text-align:center;color:#64748b}.dio-pagination{display:flex;justify-content:space-between;align-items:center;gap:.8rem;margin-top:.75rem;font-size:.8rem;font-weight:700;color:#64748b}.dio-history-dialog{width:min(70rem,calc(100vw - 2rem));max-width:calc(100vw - 2rem);max-height:calc(100dvh - 2rem);overflow-x:hidden;overflow-y:auto;border:0;border-radius:1rem;padding:0;background:#fff;box-shadow:0 20px 60px rgba(15,23,42,.3)}.dio-history-dialog::backdrop{background:rgba(15,23,42,.55)}
@media(max-width:900px){.dio-field,.dio-field.wide{grid-column:span 6}.dio-summary{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.dio-head{padding:1.15rem}.dio-field,.dio-field.wide{grid-column:1/-1}.dio-summary{grid-template-columns:repeat(2,1fr)}.dio-card-head{align-items:flex-start;flex-direction:column}.dio-actions>*{flex:1}.dio-history-dialog{width:calc(100vw - 1rem);max-width:calc(100vw - 1rem);max-height:calc(100dvh - 1rem);border-radius:.8rem}.dio-table-wrap{border:0}.dio table,.dio thead,.dio tbody,.dio tr,.dio th,.dio td{display:block}.dio thead{position:absolute;clip:rect(0 0 0 0)}.dio tr{margin-bottom:.75rem;border:1px solid var(--dio-line);border-radius:.75rem;padding:.35rem}.dio td{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:.5rem;border-bottom:1px solid #edf1f5;overflow-wrap:anywhere}.dio td::before{content:attr(data-label);font-weight:850;color:#64748b;text-transform:uppercase;font-size:.65rem}}
@media(prefers-reduced-motion:reduce){.dio *{scroll-behavior:auto!important;transition:none!important}}

/* Workload roster */
.wr { --wr-line: var(--ofes-border, #dce2e9); --wr-muted: var(--ofes-muted, #536174); --wr-text: var(--ofes-text, #172334); --wr-primary: var(--ofes-primary, #800000);
      --wr-soft: var(--ofes-subtle, #f8fafc); --wr-ok: var(--ofes-success, #166044); --wr-ok-bg: var(--ofes-success-soft, #edf8f2);
      --wr-warn: var(--ofes-warning, #85500c); --wr-warn-bg: var(--ofes-warning-soft, #fff7e6); --wr-bad: var(--ofes-danger, #b42332); --wr-bad-bg: var(--ofes-danger-soft, #fff1f2);
      --wr-radius: 12px; color: var(--wr-text); min-width: 0; }
.wr *, .wr *::before, .wr *::after { box-sizing: border-box; }
.wr [hidden] { display: none !important; }
.wr-head h2 { font-size: 1.25rem; font-weight: 750; letter-spacing: -.015em; text-wrap: balance; }
.wr-head p { color: var(--wr-muted); margin-top: .2rem; max-width: 70ch; }
.wr-bar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-start; justify-content: space-between; }
.wr-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4rem; margin: 1rem 0; padding: 0; list-style: none; counter-reset: wr; }
.wr-steps li { display: flex; align-items: center; gap: .5rem; min-width: 0; padding: .55rem .65rem; border: 1px solid var(--wr-line); border-radius: 10px; background: #fff; color: var(--wr-muted); font-size: 12.5px; font-weight: 650; }
.wr-steps li span.n { flex: none; display: inline-grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 999px; border: 1px solid var(--wr-line); font-variant-numeric: tabular-nums; font-size: 11.5px; }
.wr-steps li span.t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-steps li[aria-current="step"] { border-color: var(--wr-primary); color: var(--wr-primary); background: var(--ofes-primary-soft, #fbefef); }
.wr-steps li[aria-current="step"] span.n { background: var(--wr-primary); border-color: var(--wr-primary); color: #fff; }
.wr-steps li.done { color: var(--wr-ok); }
.wr-steps li.done span.n { background: var(--wr-ok-bg); border-color: transparent; color: var(--wr-ok); }
.wr-panel { border: 1px solid var(--wr-line); border-radius: var(--wr-radius); background: #fff; padding: 1.1rem 1.2rem; min-width: 0; }
.wr-panel + .wr-panel { margin-top: 1rem; }
.wr-panel h3 { font-size: 1rem; font-weight: 750; outline: none; }
/* Step headings take focus for screen readers on each step change; the global focus ring is for controls. */
.wr .wr-panel h3:focus, .wr .wr-head h2:focus { outline: none; box-shadow: none; }
.wr-panel .lede { color: var(--wr-muted); margin-top: .2rem; max-width: 72ch; }
.wr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: .8rem; margin-top: 1rem; }
.wr-field { display: grid; gap: .3rem; font-size: 12.5px; font-weight: 650; color: var(--wr-text); min-width: 0; }
.wr-field select, .wr-field input { width: 100%; min-width: 0; }
.wr-choice { display: flex; gap: .6rem; align-items: flex-start; padding: .75rem .85rem; border: 1px solid var(--wr-line); border-radius: 10px; background: #fff; cursor: pointer; }
.wr-choice:has(input:checked) { border-color: var(--wr-primary); background: var(--ofes-primary-soft, #fbefef); }
/* Host pages style every input as a full-width text box; the workspace's radios and checkboxes opt out. */
.wr .wr-choice input, .wr .wr-ack input { width: 1.05rem; min-width: 1.05rem; height: 1.05rem; min-height: 0; padding: 0; margin: .2rem 0 0; flex: none; border: 0; box-shadow: none; }
.wr-choice input { accent-color: var(--wr-primary); }
.wr-choice b { display: block; font-size: 13px; }
.wr-choice small { display: block; color: var(--wr-muted); font-size: 12px; margin-top: .1rem; }
.wr-scope-line { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin-top: .35rem; color: var(--wr-muted); font-size: 12.5px; font-weight: 600; }
.wr-scope-line b { color: var(--wr-text); font-weight: 700; }
.wr-actions { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; margin-top: 1rem; }
.wr-templates { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .9rem; }
.wr-drop { margin-top: 1rem; border: 1.5px dashed #b7c2cf; border-radius: var(--wr-radius); background: var(--wr-soft); padding: 1.4rem 1rem; text-align: center; transition: border-color .15s, background .15s; }
.wr-drop.is-over { border-color: var(--wr-primary); background: var(--ofes-primary-soft, #fbefef); }
.wr-drop p { color: var(--wr-muted); font-size: 12.5px; margin-top: .35rem; }
.wr-drop label.ofes-btn { cursor: pointer; }
/* The file input is visually hidden; keyboard focus shows on its Browse button instead. */
.wr-drop:has(input:focus-visible) label.ofes-btn { outline: 3px solid rgba(128, 0, 0, .3); outline-offset: 2px; }
.wr-file { display: flex; align-items: center; gap: .75rem; margin-top: .9rem; padding: .7rem .85rem; border: 1px solid var(--wr-line); border-radius: 10px; background: #fff; text-align: left; min-width: 0; }
.wr-file .meta { min-width: 0; flex: 1; }
.wr-file .name { font-weight: 700; overflow-wrap: anywhere; }
.wr-file .sub { color: var(--wr-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.wr-alert { margin-top: .9rem; padding: .7rem .85rem; border-radius: 10px; border: 1px solid; font-size: 13px; font-weight: 600; }
.wr-alert[data-tone="error"] { color: var(--wr-bad); background: var(--wr-bad-bg); border-color: #f5c2c7; }
.wr-alert[data-tone="warning"] { color: var(--wr-warn); background: var(--wr-warn-bg); border-color: #f3d19e; }
.wr-alert[data-tone="info"] { color: #1e3a5f; background: #eef5ff; border-color: #c9dcf5; }
.wr-alert[data-tone="success"] { color: var(--wr-ok); background: var(--wr-ok-bg); border-color: #b9e2c9; }
.wr-stages { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .7rem; }
.wr-stage { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: .15rem .6rem; align-items: start; }
.wr-stage .dot { grid-row: span 2; width: 1.6rem; height: 1.6rem; border-radius: 999px; display: grid; place-items: center; border: 1px solid var(--wr-line); color: var(--wr-muted); font-size: 15px; }
.wr-stage[data-state="done"] .dot { background: var(--wr-ok-bg); color: var(--wr-ok); border-color: transparent; }
.wr-stage[data-state="active"] .dot { border-color: var(--wr-primary); color: var(--wr-primary); }
.wr-stage .line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem .75rem; font-size: 13px; font-weight: 650; }
.wr-stage[data-state="waiting"] .line { color: var(--wr-muted); font-weight: 600; }
.wr-stage .count { color: var(--wr-muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.wr-meter { height: .5rem; border-radius: 999px; background: #edf0f4; overflow: hidden; margin-top: .3rem; }
.wr-meter > i { display: block; height: 100%; width: 100%; background: var(--wr-primary); border-radius: inherit; transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.wr-stage[data-state="done"] .wr-meter > i { background: var(--wr-ok); }
.wr-meter.is-indeterminate > i { width: 35%; transform: none; animation: wr-slide 1.3s ease-in-out infinite; }
@keyframes wr-slide { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
.wr-note { margin-top: .9rem; color: var(--wr-muted); font-size: 12.5px; max-width: 72ch; }
.wr-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: .6rem; margin-top: 1rem; }
.wr-card { border: 1px solid var(--wr-line); border-radius: 10px; padding: .7rem .8rem; background: #fff; min-width: 0; }
.wr-card b { display: block; font-size: 1.35rem; font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1.2; }
.wr-card span { display: block; color: var(--wr-muted); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.wr-card[data-tone="attention"] { border-color: #f5c2c7; background: var(--wr-bad-bg); }
.wr-card[data-tone="attention"] b { color: var(--wr-bad); }
.wr-card[data-tone="good"] b { color: var(--wr-ok); }
.wr-tools { display: flex; flex-wrap: wrap; gap: .6rem; align-items: end; margin-top: 1.1rem; }
.wr-tools .wr-field { flex: 1 1 12rem; }
.wr-list { display: grid; gap: .6rem; margin-top: .9rem; }
.wr-group { border: 1px solid var(--wr-line); border-radius: 10px; background: #fff; min-width: 0; }
.wr-group[data-status="invalid"], .wr-group[data-status="rejected"] { border-color: #f5c2c7; }
.wr-group > button.head { all: unset; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem .9rem; width: 100%; padding: .75rem .9rem; cursor: pointer; border-radius: 10px; }
.wr-group > button.head:focus-visible { outline: 3px solid rgba(128, 0, 0, .25); outline-offset: 2px; }
.wr-group .title { font-weight: 750; overflow-wrap: anywhere; }
.wr-group .title small { font-weight: 600; color: var(--wr-muted); }
.wr-group .who { color: var(--wr-muted); font-size: 12.5px; overflow-wrap: anywhere; }
.wr-group .who b { color: var(--wr-text); font-weight: 650; }
.wr-group .side { display: grid; justify-items: end; gap: .3rem; font-size: 12px; color: var(--wr-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wr-group .msg { grid-column: 1 / -1; color: var(--wr-bad); font-size: 12.5px; font-weight: 600; }
.wr-group .chev { transition: transform .15s; }
.wr-group[data-open="true"] .chev { transform: rotate(180deg); }
.wr-students { border-top: 1px solid var(--wr-line); padding: .6rem .9rem .8rem; }
.wr-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.wr-table th { text-align: left; color: var(--wr-muted); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; padding: .35rem .5rem; border-bottom: 1px solid var(--wr-line); }
.wr-table td { padding: .45rem .5rem; border-bottom: 1px solid #eef1f5; vertical-align: top; overflow-wrap: anywhere; }
.wr-table td.num { font-variant-numeric: tabular-nums; color: var(--wr-muted); white-space: nowrap; }
.wr-table td .fix { color: var(--wr-muted); font-size: 12px; margin-top: .15rem; }
.wr-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .5rem; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; border: 1px solid transparent; }
.wr-badge[data-tone="new"] { background: var(--wr-ok-bg); color: var(--wr-ok); }
.wr-badge[data-tone="update"] { background: #eef5ff; color: #1d4f91; }
.wr-badge[data-tone="same"] { background: #f1f4f8; color: #475569; }
.wr-badge[data-tone="bad"] { background: var(--wr-bad-bg); color: var(--wr-bad); }
.wr-badge[data-tone="dup"] { background: var(--wr-warn-bg); color: var(--wr-warn); }
.wr-pager { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; margin-top: .8rem; color: var(--wr-muted); font-size: 12.5px; }
.wr-ack { margin-top: .9rem; padding: .85rem; border: 1px solid #f3d19e; border-radius: 10px; background: var(--wr-warn-bg); }
.wr-ack label { display: flex; gap: .55rem; align-items: flex-start; font-weight: 650; color: #6b3f06; }
.wr-ack input { margin-top: .2rem; width: 1.05rem; height: 1.05rem; accent-color: var(--wr-primary); flex: none; }
.wr-empty { padding: 1.2rem; text-align: center; color: var(--wr-muted); }
.wr-history { list-style: none; padding: 0; margin: .6rem 0 0; display: grid; gap: .5rem; }
.wr-history li { display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: center; justify-content: space-between; padding: .6rem .75rem; border: 1px solid var(--wr-line); border-radius: 10px; }
.wr-history .when { color: var(--wr-muted); font-size: 12px; }
@media (max-width: 760px) {
  .wr-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .wr-steps li { justify-content: center; padding: .45rem .3rem; }
  /* Numbers only on narrow screens; the step names stay in the accessibility tree. */
  .wr-steps li span.t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 640px) {
  .wr-panel { padding: .95rem .85rem; }
  .wr-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wr-card b { font-size: 1.15rem; }
  .wr-actions > .ofes-btn, .wr-templates > .ofes-btn { flex: 1 1 100%; justify-content: center; }
  .wr-group > button.head { grid-template-columns: minmax(0, 1fr); }
  .wr-group .side { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; white-space: normal; }
  .wr-group .side .chev { margin-left: auto; }
  /* Students as stacked cards: no sideways scrolling at 320px. */
  .wr-table thead { display: none; }
  .wr-table, .wr-table tbody, .wr-table tr, .wr-table td { display: block; width: 100%; }
  .wr-table tr { padding: .55rem 0; border-bottom: 1px solid #eef1f5; }
  .wr-table td { border: 0; padding: .1rem 0; }
  .wr-table td[data-label]::before { content: attr(data-label) ": "; color: var(--wr-muted); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
}
@media (prefers-reduced-motion: reduce) {
  .wr-meter > i, .wr-group .chev, .wr-drop { transition: none; }
  .wr-meter.is-indeterminate > i { animation: none; width: 100%; transform: none; opacity: .45; }
}

/* MIS programs and colleges */
.mp-menu { position: relative; }
    .mp-menu summary { list-style: none; cursor: pointer; }
    .mp-menu summary::-webkit-details-marker { display: none; }
    .mp-menu > div { position: absolute; right: 0; z-index: 30; margin-top: .4rem; width: 20rem; padding: .35rem; border: 1px solid #e2e8f0; border-radius: .9rem; background: #fff; box-shadow: 0 16px 40px rgba(15,23,42,.18); }
    .mp-menu a { display: grid; gap: .1rem; padding: .55rem .7rem; border-radius: .6rem; color: #0f172a; font-size: 13px; }
    .mp-menu a:hover, .mp-menu a:focus-visible { background: #f1f5f9; }
    .mp-menu a span { font-size: 12px; font-weight: 500; color: #64748b; }
    .mp-card { margin-top: 1rem; border: 1px solid #e2e8f0; border-radius: 1rem; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
    .mp-guide { padding: .85rem 1.25rem; }
    .mp-guide summary { display: flex; align-items: center; gap: .5rem; cursor: pointer; font-size: 14px; font-weight: 800; color: #0f172a; }
    .mp-guide ol { margin: .6rem 0 0; padding-left: 1.2rem; display: grid; gap: .35rem; list-style: decimal; font-size: 13px; color: #475569; }
    .mp-tabs { display: flex; gap: .35rem; border-bottom: 1px solid #e2e8f0; }
    .mp-tabs button { padding: .6rem 1rem; border: 0; border-bottom: 3px solid transparent; background: none; font-size: 14px; font-weight: 800; color: #64748b; cursor: pointer; }
    .mp-tabs button[aria-selected="true"] { color: #0f172a; border-bottom-color: var(--csu-maroon-600, #8b1d2c); }
    .mp-tabs button span { margin-left: .25rem; padding: .05rem .45rem; border-radius: 999px; background: #f1f5f9; font-size: 11px; }
    .mp-filters { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; padding: .9rem 1.25rem; }
    .mp-filters label, .mp-form label { display: grid; gap: .3rem; min-width: 0; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #475569; }
    .mp-filters select, .mp-filters input, .mp-form select, .mp-form input { min-height: 38px; padding: .4rem .7rem; border: 1px solid #e2e8f0; border-radius: .7rem; background: #fff; font-size: 13px; font-weight: 600; color: #0f172a; text-transform: none; letter-spacing: 0; }
    /* Long college names must not widen a field past its column: fields shrink, and the text is cut instead. */
    .mp-filters select, .mp-filters input, .mp-form select, .mp-form input { box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; text-overflow: ellipsis; }
    .mp-filters label { flex: 0 1 220px; }
    .mp-filters .mp-search { flex: 1 1 240px; }
    .mp-count { margin-left: auto; font-size: 12px; font-weight: 700; color: #64748b; }
    .mp-table { max-height: 65vh; overflow: auto; border-radius: 1rem; }
    .mp-table table { width: 100%; border-collapse: collapse; font-size: 13px; }
    .mp-table th { position: sticky; top: 0; z-index: 1; padding: .6rem .75rem; background: #f8fafc; text-align: left; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #475569; white-space: nowrap; }
    .mp-table td { padding: .6rem .75rem; border-top: 1px solid #f1f5f9; vertical-align: top; }
    .mp-num { text-align: right; font-variant-numeric: tabular-nums; }
    .mp-nowrap { white-space: nowrap; }
    .mp-strong { font-weight: 700; color: #0f172a; }
    .mp-sub { font-size: 12px; color: #64748b; }
    .mp-empty { padding: 1.5rem; text-align: center; color: #64748b; }
    .mp-badge { display: inline-flex; padding: .1rem .55rem; border-radius: 999px; background: #f1f5f9; color: #475569; font-size: 11px; font-weight: 800; }
    .mp-badge.is-on { background: #dcfce7; color: #166534; }
    .mp-badge.is-none { background: #fff; border: 1px dashed #cbd5e1; color: #64748b; }
    .mp-btn { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .8rem; border: 1px solid #e2e8f0; border-radius: .7rem; background: #fff; font-size: 13px; font-weight: 800; color: #0f172a; cursor: pointer; white-space: nowrap; }
    .mp-btn.is-sm { padding: .3rem .6rem; font-size: 12px; }
    .mp-btn .material-symbols-outlined { font-size: 18px; }
    .mp-btn.is-primary { border-color: transparent; background: var(--ofes-primary-gradient, var(--csu-gradient, #8b1d2c)); color: #fff; }
    .mp-btn:disabled { opacity: .55; cursor: default; }
    .mp-dialog { box-sizing: border-box; width: min(640px, calc(100vw - 2rem)); max-width: calc(100vw - 2rem); max-height: calc(100dvh - 2rem); padding: 0; border: 0; border-radius: 1rem; overflow-x: hidden; overflow-y: auto; box-shadow: 0 20px 60px rgba(15,23,42,.3); }
    .mp-dialog::backdrop { background: rgba(15,23,42,.55); }
    .mp-dialog-head { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid #e2e8f0; }
    .mp-dialog-head h2 { font-size: 1.05rem; font-weight: 800; }
    .mp-dialog-body { padding: 1rem 1.25rem 1.25rem; }
    .mp-form { display: grid; gap: .8rem 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    @media (max-width: 560px) { .mp-form { grid-template-columns: minmax(0, 1fr); } }
    .mp-form [hidden], .mp-filters [hidden] { display: none !important; }
    /* With one campus the Campus field is hidden, so College takes the whole row. */
    .mp-form label[data-mp-scope][hidden] + label[data-mp-scope] { grid-column: 1 / -1; }
    .mp-form .mp-wide { grid-column: 1 / -1; }
    .mp-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }
    .mp-alert { margin-bottom: .8rem; padding: .65rem .85rem; border-radius: .7rem; font-size: 13px; font-weight: 600; }
    .mp-alert.is-error { background: #fef2f2; color: #991b1b; }
    .mp-alert.is-info { background: #eff6ff; color: #1e40af; }

/* Program picker */
.pms { position: relative; }
    .pms-trigger { display: flex; width: 100%; min-height: 42px; align-items: center; gap: .5rem; padding: .45rem .75rem; border: 1px solid #e2e8f0; border-radius: .75rem; background: #fff; color: #0f172a; font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; }
    .pms-trigger:focus-visible, .pms-search:focus { outline: 2px solid rgba(128,0,0,.25); outline-offset: 1px; border-color: rgba(128,0,0,.35); }
    .pms.is-open .pms-trigger { border-color: rgba(128,0,0,.35); }
    .pms-summary { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pms-summary.is-placeholder { color: #94a3b8; }
    .pms-count { padding: .05rem .5rem; border-radius: 9999px; background: var(--csu-maroon-600, #800000); color: #fff; font-size: 11px; font-weight: 800; }
    .pms-count[hidden] { display: none; }
    .pms-caret { color: #64748b; font-size: 20px !important; transition: transform .15s; }
    .pms.is-open .pms-caret { transform: rotate(180deg); }
    /* Opens in the page flow so cards with overflow hidden and dialogs never clip the list. */
    .pms-panel { margin-top: .35rem; overflow: hidden; border: 1px solid #e2e8f0; border-radius: .9rem; background: #fff; box-shadow: 0 12px 32px rgba(15,23,42,.12); }
    .pms-panel[hidden], .pms [hidden] { display: none !important; }
    .pms-head { display: grid; gap: .45rem; padding: .6rem; border-bottom: 1px solid #f1f5f9; }
    .pms-search { width: 100%; min-height: 36px; padding: .35rem .7rem; border: 1px solid #e2e8f0; border-radius: .6rem; background: #fff; color: #0f172a; font-size: 13px; }
    .pms-tools { display: flex; align-items: center; justify-content: space-between; gap: .5rem; color: #64748b; font-size: 12px; font-weight: 700; }
    .pms-link { border: 0; background: none; color: var(--csu-maroon-700, #6b0000); font-size: 12px; font-weight: 800; cursor: pointer; }
    .pms-list { max-height: 280px; overflow-y: auto; padding: .25rem .35rem .45rem; }
    .pms-group-label { position: sticky; top: 0; z-index: 1; padding: .45rem .5rem .3rem; background: #fff; color: #64748b; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
    .pms-option { display: flex; align-items: flex-start; gap: .55rem; padding: .45rem .5rem; border-radius: .55rem; color: #0f172a; font-size: 13px; font-weight: 600; cursor: pointer; }
    .pms-option:hover { background: #f8fafc; }
    .pms-option.is-checked { background: #fff5f5; }
    .pms-option input { flex: none; width: 16px; height: 16px; margin-top: .12rem; accent-color: var(--csu-maroon-600, #800000); cursor: pointer; }
    .pms-option-text { flex: 1; min-width: 0; }
    .pms-abbr { color: #64748b; font-size: 11px; font-weight: 700; }
    .pms-tag { flex: none; padding: .05rem .45rem; border-radius: 9999px; background: #dcfce7; color: #166534; font-size: 10px; font-weight: 800; }
    .pms-empty { padding: .9rem; color: #64748b; font-size: 13px; font-weight: 600; text-align: center; }
    .pms-foot { display: flex; justify-content: flex-end; padding: .5rem .6rem; border-top: 1px solid #f1f5f9; background: #f8fafc; }
    .pms-done { padding: .35rem .9rem; border: 0; border-radius: .6rem; background: var(--csu-gradient, #800000); color: #fff; font-size: 12px; font-weight: 800; cursor: pointer; }
    .pms-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
    .pms-chip { display: inline-flex; align-items: center; gap: .25rem; max-width: 100%; padding: .15rem .25rem .15rem .55rem; border: 1px solid #e2e8f0; border-radius: 9999px; background: #fff; color: #334155; font-size: 11px; font-weight: 700; }
    .pms-chip.is-primary { border-color: #fcd34d; background: #fffbeb; color: #92400e; }
    .pms-chip button { display: inline-flex; border: 0; border-radius: 9999px; background: none; color: #94a3b8; cursor: pointer; }
    .pms-chip button:hover { background: #f1f5f9; color: #0f172a; }
    .pms-primary { display: grid; gap: .3rem; max-width: 340px; margin-top: .6rem; color: #475569; font-size: 12px; font-weight: 700; }
    .pms-primary select { width: 100%; min-height: 38px; padding: .4rem .7rem; border: 1px solid #e2e8f0; border-radius: .7rem; background: #fff; color: #0f172a; font-size: 13px; font-weight: 600; }

/* College program filters */
.sec-guide { padding: .9rem 1.25rem; }
    .sec-guide summary { cursor: pointer; list-style: none; }
    .sec-guide summary::-webkit-details-marker { display: none; }
    .sec-guide ol { margin: .6rem 0 0; padding-left: 1.2rem; display: grid; gap: .35rem; list-style: decimal; font-size: 13px; }
    .sec-program-filters { padding: 0 1.25rem .75rem; align-items: center; }
    .sec-program-filters input, .sec-program-filters select { min-height: 34px; padding: .35rem .7rem; border: 1px solid var(--sec-border); border-radius: .6rem; font-size: 13px; background: var(--sec-surface, transparent); color: inherit; }
    .sec-program-filters input { flex: 1 1 220px; max-width: 360px; }

/* Shared consistency layer -------------------------------------------------
   These aliases keep the existing workflow class names while giving every
   operational screen the same control, card, table, badge and dialog rhythm. */
.ofes-app :is(.sec-card, .dio-card, .mp-card, .wr-panel) {
    border-color: var(--ofes-border);
    border-radius: var(--ofes-radius-lg);
    background: var(--ofes-surface);
    box-shadow: var(--ofes-shadow);
}
.ofes-app :is(.sec-card-head, .dio-card-head, .mp-dialog-head) {
    gap: var(--ofes-space-3);
    padding: var(--ofes-space-4) var(--ofes-space-5);
    border-color: var(--ofes-border);
}
.ofes-app :is(.sec-dialog-body, .dio-body, .mp-dialog-body, .wr-panel) {
    padding: var(--ofes-space-5);
}
.ofes-app :is(.sec-field, .dio-field, .mp-filters label, .mp-form label, .wr-field) {
    gap: var(--ofes-space-1);
    color: var(--ofes-text);
    font-size: 12px;
    font-weight: 650;
}
.ofes-app :is(
    .sec-field input:not([type="checkbox"]):not([type="radio"]),
    .sec-field select,
    .sec-field textarea,
    .sec-compact-control,
    .dio input:not([type="checkbox"]):not([type="radio"]),
    .dio select,
    .mp-filters input,
    .mp-filters select,
    .mp-form input,
    .mp-form select,
    .wr-field input:not([type="checkbox"]):not([type="radio"]),
    .wr-field select,
    .pms-trigger,
    .pms-search,
    .pms-primary select,
    .sec-program-filters input,
    .sec-program-filters select
) {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: var(--ofes-control-height);
    padding: 9px 12px;
    border: 1px solid #c6cfda;
    border-radius: var(--ofes-radius);
    background: #fff;
    color: var(--ofes-text);
    font: 400 14px/1.4 var(--ofes-font);
}
.ofes-app :is(.sec-btn, .dio-btn, .mp-btn, .dg-button, .pms-done) {
    min-height: var(--ofes-control-height);
    padding: 9px 14px;
    border-radius: var(--ofes-radius);
    font: 600 13px/1.4 var(--ofes-font);
}
.ofes-app :is(.sec-filter-actions, .sec-toolbar, .sec-form-actions, .dio-actions, .mp-actions, .wr-actions, .wr-templates) {
    gap: var(--ofes-space-2);
}
.ofes-app :is(.sec-filters, .dio-tools, .mp-filters, .sec-import-bar) {
    gap: var(--ofes-space-3);
    align-items: end;
}
.ofes-app :is(.sec-table, .dio table, .mp-table table, .wr-table) {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--ofes-text);
    font: 400 13px/1.5 var(--ofes-font);
}
.ofes-app :is(.sec-table, .dio table, .mp-table table, .wr-table) th {
    padding: 12px 14px;
    border-bottom: 1px solid var(--ofes-border);
    background: #f3f6f9;
    color: #48586c;
    font-size: 11px;
    font-weight: 650;
    line-height: 1.5;
    letter-spacing: .045em;
    text-transform: uppercase;
}
.ofes-app :is(.sec-table, .dio table, .mp-table table, .wr-table) td {
    padding: 12px 14px;
    border-bottom: 1px solid #e6ebf0;
    vertical-align: middle;
}
.ofes-app :is(.sec-table, .dio table, .mp-table table, .wr-table) tbody tr:hover {
    background: #f6f9fc;
}
.ofes-app :is(.sec-badge, .dio-chip, .mp-badge, .wr-badge, .pms-tag) {
    border-radius: var(--ofes-radius-sm);
    font-size: 11px;
    font-weight: 650;
    line-height: 1.5;
}
.ofes-app :is(.sec-empty, .dio-empty, .mp-empty) {
    padding: 36px 20px;
    color: var(--ofes-muted);
    text-align: center;
}
.ofes-app :is(.sec-dialog, .dio-history-dialog, .mp-dialog) {
    border: 1px solid var(--ofes-border);
    border-radius: var(--ofes-radius-lg);
    box-shadow: var(--ofes-shadow-dialog);
}
.ofes-app :is(.sec-tabs, .mp-tabs) {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
}
.ofes-app :is(.sec-tab, .mp-tabs button) { flex: 0 0 auto; min-height: var(--ofes-control-height); scroll-snap-align: start; }
.ofes-app .sec-program-filters {
    display: grid;
    grid-template-columns: minmax(16rem, 26rem) minmax(10rem, 14rem) minmax(0, 1fr);
    align-items: center;
    gap: var(--ofes-space-3);
    padding: var(--ofes-space-4) var(--ofes-space-5);
    border-bottom: 1px solid var(--ofes-border);
}
.ofes-app .sec-program-filters input { max-width: 26rem; }
.ofes-app .sec-program-filters .sec-muted { justify-self: end; }

@media (max-width: 767px) {
    .ofes-app :is(.sec-dialog-body, .dio-body, .mp-dialog-body, .wr-panel) { padding: var(--ofes-space-4); }
    .ofes-app :is(.sec-btn, .dio-btn, .mp-btn, .dg-button, .pms-done, .pms-trigger) { min-height: var(--ofes-touch-target); }
    .ofes-app :is(.sec-filter-actions, .sec-form-actions, .mp-actions) { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
    .ofes-app :is(.sec-filter-actions, .sec-form-actions, .mp-actions) > * { width: 100%; }
    .ofes-app :is(.sec-program-filters, .mp-filters, .dio-tools) { align-items: stretch; }
    .ofes-app .sec-program-filters { grid-template-columns: minmax(0, 1fr); padding: var(--ofes-space-3) var(--ofes-space-4); }
    .ofes-app :is(.sec-program-filters, .mp-filters, .dio-tools) > * { max-width: none; }
    .ofes-app .sec-program-filters input { max-width: none; }
    .ofes-app .sec-program-filters .sec-muted { justify-self: start; }
    .ofes-app :is(.sec-pager, .dio-pagination) { align-items: stretch; }
}