/* Official Uniport and Information Technology Department branding.
   Original PNGs are preserved; frames account for their transparent margins. */
.serial {width:46px;min-width:46px;text-align:center;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--muted);padding-left:10px;padding-right:10px}
.result-table .serial {width:30px;min-width:30px;padding-left:8px;padding-right:8px}
.course-edit-table td.serial {width:46px;min-width:46px}
.course-edit-table td:nth-child(2) {width:auto;min-width:150px}
.course-edit-table td:nth-child(3) {width:45%;min-width:240px}
.course-edit-table td:nth-child(4) {width:auto;min-width:75px}
.course-edit-table td:nth-child(5),.course-edit-table td:nth-child(6) {width:auto;min-width:90px}
:root {
  --navy: #002050;
  --primary: #003d86;
  --primary-dark: #002050;
  --primary-pale: #edf3fc;
  --blue: #0095d9;
  --gold: #f2b426;
  --university-green: #009444;
  --ink: #172d50;
  --muted: #60718b;
  --border: #dce4ef;
  --bg: #f4f7fc;
  --shadow: 0 12px 40px #00205007;
}
.brand {gap:16px;letter-spacing:-.4px;color:var(--navy)}
.brand-logos {display:flex;align-items:center;gap:12px;flex-shrink:0}
.logo-frame {position:relative;display:block;width:66px;height:68px;overflow:hidden;flex-shrink:0}
.logo-frame img {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);object-fit:contain;max-width:none}
.logo-frame.uniport img {width:118%;height:118%}
.logo-frame.department img {width:164%;height:164%}
.brand-name {display:block;font-size:22px;line-height:1.3}
.brand .brand-name small {font-size:8px;letter-spacing:1.3px;margin-top:5px;color:var(--primary)}
.brand-department {display:block;font-size:10px;letter-spacing:0;font-weight:500;color:var(--muted);margin-top:4px}
.public-shell {background:#f5f8fd}
.public-header {max-width:1190px;border-top:4px solid var(--navy);border-bottom:1px solid var(--border);padding-top:21px;padding-bottom:21px;gap:20px;flex-wrap:wrap;position:relative}
.public-header::after {content:"";position:absolute;top:-4px;right:0;width:23%;height:4px;background:var(--gold);border-left:32px solid var(--blue)}
.public-header>.text-link {margin-left:auto;color:var(--navy)}
.eyebrow {color:var(--primary)}
.portal-intro .eyebrow::before {content:"";display:inline-block;width:22px;height:3px;background:var(--gold);vertical-align:middle;margin-right:10px}
.portal-intro h1,.access-guide h2 {color:var(--navy)}
.access-card,.auth-card {border-color:var(--border);border-top:3px solid var(--navy);box-shadow:var(--shadow)}
.step-label span {border-color:#d5dfed}
.secure-note {border-color:#e5ebf4;color:var(--muted)}
.steps li>span {border-color:#bfcee3;color:var(--primary);background:#edf3fc}
.help-box {border-color:var(--border)}
.public-footer {color:var(--muted)}
.public-footer span {color:#7686a1}
.button.primary {background:var(--primary);border-color:var(--primary)}
.button.primary:hover {background:var(--navy);border-color:var(--navy)}
.button.secondary:hover {background:#edf3fc}
input:focus,select:focus,textarea:focus {border-color:var(--primary);box-shadow:0 0 0 3px #0095d91c}
a:focus-visible,button:focus-visible,summary:focus-visible {outline-color:var(--blue)}
.notice.info {background:#edf4fc;border-color:#d1e1f4;color:#284d7c}
.notice.success,.badge.published {color:#006a34;background:#e8f5ed;border-color:#cde8d6}
.email-confirmation {background:#edf4fc;border-color:#d4e1f1;border-left:3px solid var(--gold)}
.sidebar {border-top:4px solid var(--navy)}
.sidebar>.brand {display:flex;flex-direction:column;align-items:flex-start;gap:13px;padding:0 12px;margin-bottom:29px}
.sidebar .brand-logos {gap:10px}
.sidebar .logo-frame {width:46px;height:48px}
.sidebar .brand-name {font-size:20px}
.sidebar .brand-name small {font-size:7px;letter-spacing:.8px;line-height:1.6}
.sidebar .brand-department {font-size:9px;max-width:180px;line-height:1.5}
.nav-item {color:#62718a}
.nav-item.active {color:var(--navy);background:#eaf1fc;box-shadow:inset 3px 0 var(--gold)}
.nav-item:hover {background:#f0f5fc}
.topbar {border-top:3px solid var(--gold);background:#fff}
.avatar {background:#e7effb;color:var(--primary)}
.stat-card>small,.department-label,.breadcrumb {color:var(--muted)}
.workflow-note {background:#edf3fc;border-color:#d9e4f3;border-left:3px solid var(--gold)}
.workflow-note .eyebrow {color:var(--primary)}
.workflow-note strong {color:var(--primary)}
.workflow-note strong span {color:var(--ink)}
.activity-dot {background:var(--blue)}
.step-circle {background:#eaf1fc;color:var(--primary)}
.upload-zone {background:#f7faff;border-color:#a9c2e5}
.student-identity {background:var(--navy);border-top:3px solid var(--gold)}
.student-identity span {color:#c1d5f0}
.semester-card {border-color:var(--border)}
.semester-heading {border-top:3px solid var(--blue);background:#fff}
.semester-heading h3 {color:var(--navy)}
.semester-summary {background:#f0f5fc}
.grade:not(.fail):not(.pending) {color:#006a34;background:#e8f5ed}
th {background:#f0f4fb;color:#506482}
tbody tr:hover {background:#fafcff}
.admin-footer {color:#7585a0}
@media(max-width:850px) {
 .public-header {padding-left:28px;padding-right:28px}
 .logo-frame {width:55px;height:57px}
 .brand-name {font-size:20px}
 .sidebar>.brand {padding:0 5px}
 .sidebar .logo-frame {width:38px;height:40px}
 .sidebar .brand-name {font-size:16px}
 .sidebar .brand-name small {font-size:6px;letter-spacing:.4px}
 .sidebar .brand-department {font-size:8px}
}
@media(max-width:650px) {
 .public-header {padding:17px 20px;gap:12px}
 .brand {gap:10px}
 .brand-logos {gap:7px}
 .logo-frame {width:36px;height:39px}
 .brand-name {font-size:15px}
 .brand .brand-name small {font-size:6px;letter-spacing:.45px;margin-top:3px}
 .brand-department {font-size:7px;margin-top:3px}
 .public-header>.text-link {font-size:10px}
 .sidebar>.brand {flex-direction:row;align-items:center;gap:12px;margin-bottom:17px;padding:0}
 .sidebar .logo-frame {width:35px;height:38px}
 .sidebar .brand-name {font-size:17px}
 .sidebar .brand-name small {font-size:6px}
 .sidebar .brand-department {font-size:8px;max-width:none}
}
@media print {
 .public-header {display:flex!important;padding:0 0 12px;max-width:none;border-top:0;border-bottom:2px solid #002050;margin-bottom:20px}
 .public-header::after,.public-header>.text-link {display:none}
 .logo-frame {width:48px;height:50px}
 .brand-name {font-size:18px}
 .student-identity {background:white;color:black;border:1px solid #ccd6e6}
 .student-identity span {color:#506482}
}