/* Student Uniform UI — mobile-first application layer */
:root {
  --su-ink: #173542;
  --su-ink-strong: #102a35;
  --su-muted: #67808a;
  --su-canvas: #f3f7f8;
  --su-surface: #fff;
  --su-surface-soft: #f8fbfc;
  --su-line: #d9e6e9;
  --su-brand: #13756c;
  --su-brand-deep: #0d4d57;
  --su-brand-soft: #e3f4ef;
  --su-blue: #3c63b9;
  --su-radius-sm: .7rem;
  --su-radius: 1rem;
  --su-radius-lg: 1.35rem;
  --su-shadow: 0 12px 30px rgba(25,58,70,.075);
  --su-shadow-lift: 0 20px 42px rgba(17,73,73,.13);
  --su-ease: cubic-bezier(.2,.8,.2,1);
}

body.student-portal-page,
body.student-tailwind-shell {
  min-height: 100vh;
  color: var(--su-ink);
  background: var(--su-canvas);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.student-portal-page::selection,
body.student-tailwind-shell::selection { color: #fff; background: var(--su-brand); }

/* Shared header and mobile navigation */
body.student-portal-page .top-header {
  padding: .55rem 0 !important;
  border: 0 !important;
  border-top: 3px solid var(--su-brand) !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 1px 0 var(--su-line);
}
body.student-portal-page .top-header img {
  width: 2.5rem !important;
  height: 2.5rem !important;
  border: 1px solid var(--su-line);
  border-radius: .72rem;
  object-fit: cover;
}
body.student-portal-page .top-header .school-title {
  color: var(--su-ink-strong) !important;
  font-size: .88rem;
  font-weight: 780;
  letter-spacing: -.018em;
}
body.student-portal-page .student-nav {
  min-height: 4rem;
  border: 0 !important;
  border-bottom: 1px solid var(--su-line) !important;
  background: rgba(255,255,255,.97) !important;
  box-shadow: 0 2px 12px rgba(17,54,65,.055) !important;
  backdrop-filter: blur(14px);
}
body.student-portal-page .student-dashboard-brand {
  display: flex;
  align-items: center;
  gap: .62rem;
  min-width: 0;
  color: var(--su-ink-strong) !important;
  font-size: .86rem;
  font-weight: 780;
}
body.student-portal-page .student-dashboard-brand img {
  width: 2.1rem !important;
  height: 2.1rem !important;
  border: 1px solid var(--su-line);
  border-radius: .67rem !important;
  object-fit: cover;
  box-shadow: none !important;
}
body.student-portal-page .student-dashboard-brand::before { display: none !important; }
body.student-portal-page .student-nav .nav-link {
  display: flex;
  align-items: center;
  gap: .42rem;
  min-height: 2.55rem;
  margin: .1rem .12rem;
  padding: .54rem .68rem !important;
  border-radius: .62rem;
  color: #49646e !important;
  font-size: .82rem;
  font-weight: 690;
}
body.student-portal-page .student-nav .nav-link:hover,
body.student-portal-page .student-nav .nav-link.active,
body.student-portal-page .student-nav .show > .nav-link {
  color: var(--su-brand) !important;
  background: var(--su-brand-soft) !important;
}
body.student-portal-page .student-nav .nav-link.text-warning { color: #9b4c12 !important; }
body.student-portal-page .student-menu-toggle {
  display: grid;
  place-items: center;
  width: 2.65rem;
  height: 2.65rem;
  padding: 0 !important;
  border: 1px solid #cbdde1 !important;
  border-radius: .67rem !important;
  box-shadow: none !important;
}
body.student-portal-page .student-menu-toggle:focus { box-shadow: 0 0 0 .23rem rgba(19,117,108,.18) !important; }
body.student-portal-page .student-menu-toggle .navbar-toggler-icon {
  width: 1.15rem;
  height: 1.15rem;
  filter: invert(36%) sepia(23%) saturate(900%) hue-rotate(144deg) brightness(88%);
}
body.student-portal-page .student-nav .dropdown-menu {
  padding: .4rem;
  border: 1px solid var(--su-line) !important;
  border-radius: .85rem;
  background: #fff;
  box-shadow: var(--su-shadow-lift) !important;
}
body.student-portal-page .student-nav .dropdown-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .62rem .7rem;
  border-radius: .55rem;
  color: #3e5964;
  font-size: .82rem;
  font-weight: 620;
}
body.student-portal-page .student-nav .dropdown-item:hover,
body.student-portal-page .student-nav .dropdown-item:focus { color: var(--su-brand); background: #eff8f5; }

/* Reusable application frame and primary visual primitives */
.student-page-frame {
  width: min(1240px,100%);
  margin: 0 auto;
  padding: 1rem .85rem 3rem;
}
body.student-portal-page .container:not(.student-experience-shell):not(.profile-shell):not(.student-dashboard) { max-width: 1240px; }

.student-ui-ready .student-icon,
body.student-portal-page .btn .bi,
body.student-portal-page .nav-link .bi,
body.student-portal-page .dropdown-item .bi,
body.student-tailwind-shell .btn .bi {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.45em;
  height: 1.45em;
  border-radius: .42em;
  color: inherit;
  font-size: 1em;
  line-height: 1;
  transition: transform .28s var(--su-ease), background-color .28s var(--su-ease), color .28s var(--su-ease);
}
body.student-portal-page .nav-link .bi,
body.student-portal-page .dropdown-item .bi { color: var(--su-brand); background: var(--su-brand-soft); font-size: .92em; }
.student-interactive:hover .student-icon,
body.student-portal-page .btn:hover .bi,
body.student-portal-page .nav-link:hover .bi,
body.student-portal-page .dropdown-item:hover .bi { transform: translateY(-1px) scale(1.08) rotate(-4deg); }

body.student-portal-page .card,
body.student-portal-page .student-surface,
body.student-tailwind-shell .student-surface {
  border: 1px solid var(--su-line) !important;
  border-radius: var(--su-radius) !important;
  color: var(--su-ink);
  background: var(--su-surface) !important;
  box-shadow: var(--su-shadow) !important;
}
body.student-portal-page .card-header {
  padding: 1rem 1.1rem;
  border-bottom: 1px solid #e5edef !important;
  color: var(--su-ink-strong);
  background: var(--su-surface-soft) !important;
}
body.student-portal-page .card-body { padding: 1.05rem; }
body.student-portal-page .card-title,
body.student-portal-page h1,
body.student-portal-page h2,
body.student-portal-page h3 { color: var(--su-ink-strong); letter-spacing: -.025em; }

body.student-portal-page .btn,
body.student-tailwind-shell .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .44rem;
  min-height: 2.72rem;
  padding: .62rem .88rem;
  border-radius: .68rem;
  font-size: .86rem;
  font-weight: 730;
  transition: transform .18s var(--su-ease), box-shadow .18s var(--su-ease), background-color .18s var(--su-ease), border-color .18s var(--su-ease);
}
body.student-portal-page .btn-primary,
body.student-tailwind-shell .btn-primary {
  border-color: var(--su-brand) !important;
  background: linear-gradient(135deg,#14786e,#0d625f) !important;
  box-shadow: 0 8px 18px rgba(19,117,108,.2);
}
body.student-portal-page .btn-primary:hover,
body.student-tailwind-shell .btn-primary:hover { box-shadow: 0 12px 24px rgba(19,117,108,.27); transform: translateY(-1px); }
body.student-portal-page .btn-outline-primary { border-color: #92bcb5; color: var(--su-brand); }
body.student-portal-page .btn-outline-primary:hover { border-color: var(--su-brand); background: var(--su-brand); }
body.student-portal-page .btn-light,
body.student-tailwind-shell .btn-light { border-color: var(--su-line); color: #385560; background: #fff; }
body.student-portal-page .btn:hover,
body.student-tailwind-shell .btn:hover { transform: translateY(-1px); }
body.student-portal-page .btn:active,
body.student-tailwind-shell .btn:active { transform: translateY(0) scale(.98); }

body.student-portal-page .form-control,
body.student-portal-page .form-select,
body.student-portal-page input:not([type="checkbox"]):not([type="radio"]),
body.student-portal-page textarea,
body.student-portal-page select,
body.student-tailwind-shell input:not([type="checkbox"]):not([type="radio"]),
body.student-tailwind-shell textarea,
body.student-tailwind-shell select {
  min-height: 2.75rem;
  border: 1px solid #cadce1;
  border-radius: .66rem;
  color: #294652;
  background: #fff;
  box-shadow: none;
  transition: border-color .18s var(--su-ease), box-shadow .18s var(--su-ease), transform .18s var(--su-ease);
}
body.student-portal-page textarea,
body.student-tailwind-shell textarea { min-height: 6.5rem; }
body.student-portal-page .form-control:focus,
body.student-portal-page .form-select:focus,
body.student-portal-page input:focus,
body.student-portal-page textarea:focus,
body.student-portal-page select:focus,
body.student-tailwind-shell input:focus,
body.student-tailwind-shell textarea:focus,
body.student-tailwind-shell select:focus {
  border-color: var(--su-brand);
  box-shadow: 0 0 0 .22rem rgba(19,117,108,.16) !important;
}
body.student-portal-page label,
body.student-tailwind-shell label { color: #425f6a; font-size: .82rem; font-weight: 700; }

body.student-portal-page .table-responsive,
body.student-portal-page .student-table-scroll,
body.student-tailwind-shell .student-table-scroll {
  overflow: auto;
  border: 1px solid #e0eaed;
  border-radius: .8rem;
  background: #fff;
  -webkit-overflow-scrolling: touch;
}
body.student-portal-page table,
body.student-tailwind-shell .student-table-scroll table { margin: 0; }
body.student-portal-page .table > :not(caption) > * > *,
body.student-tailwind-shell .student-table-scroll th,
body.student-tailwind-shell .student-table-scroll td { padding: .78rem .88rem; border-color: #e7eef0; vertical-align: middle; }
body.student-portal-page .table > thead > tr > *,
body.student-tailwind-shell .student-table-scroll th {
  color: #5d7781;
  background: #f4f9fa !important;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .075em;
  text-transform: uppercase;
}
body.student-portal-page .table-hover > tbody > tr:hover > *,
body.student-tailwind-shell .student-table-scroll tbody tr:hover > * { color: #25434e; background: #f4fbf8; }

body.student-portal-page .alert { display: flex; align-items: flex-start; gap: .65rem; padding: .85rem 1rem; border-radius: .78rem; font-size: .88rem; box-shadow: none; }
body.student-portal-page .alert-success { border-color: #bfe5cf; color: #17633e; background: #ebf8ef; }
body.student-portal-page .alert-danger { border-color: #f0c8ce; color: #963344; background: #fff1f3; }
body.student-portal-page .alert-info { border-color: #c4dfec; color: #265d75; background: #edf8fd; }
body.student-portal-page .badge:not(.status-badge),
body.student-tailwind-shell .badge { padding: .35rem .56rem; border-radius: 999px; font-size: .7rem; font-weight: 760; letter-spacing: .01em; }

/* Existing Phase 4 student services inherit the system without changing their content. */
body.student-portal-page .profile-shell,
body.student-portal-page .student-experience-shell { padding-bottom: 3rem; }
body.student-portal-page .profile-hero,
body.student-portal-page .experience-hero { border-radius: var(--su-radius-lg) !important; box-shadow: 0 18px 38px rgba(22,73,80,.15) !important; }
body.student-portal-page .experience-panel,
body.student-portal-page .profile-card,
body.student-portal-page .profile-section { border-color: var(--su-line) !important; box-shadow: var(--su-shadow) !important; }

/* Motion: short, unobtrusive feedback—not blocking animation. */
.student-ui-ready .student-motion {
  /* Visibility never depends on JavaScript or animation support. */
  opacity: 1;
  transform: none;
  animation: student-ui-enter .55s var(--su-ease) both;
  animation-delay: calc(var(--student-motion-index,0) * 55ms);
}
.student-ui-ready .student-motion:nth-child(2n) .student-icon { animation: student-icon-breathe 3.8s ease-in-out infinite; }
.student-ui-ready .student-interactive { position: relative; overflow: hidden; }
.student-ui-ready .student-interactive::after {
  content: "";
  position: absolute;
  width: 8rem;
  height: 8rem;
  right: -5.8rem;
  bottom: -5.8rem;
  border-radius: 50%;
  opacity: 0;
  background: rgba(19,117,108,.1);
  transform: scale(.25);
  transition: opacity .35s var(--su-ease), transform .35s var(--su-ease);
  pointer-events: none;
}
.student-ui-ready .student-interactive:hover::after,
.student-ui-ready .student-interactive:focus-visible::after { opacity: 1; transform: scale(1); }
.student-ui-ready .student-interactive > * { position: relative; z-index: 1; }
.student-ui-ready .student-status-pulse { animation: student-status-pulse 2.2s ease-in-out infinite; }
@keyframes student-ui-enter { from { opacity: .01; transform: translateY(.65rem); } to { opacity: 1; transform: translateY(0); } }
@keyframes student-icon-breathe { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-2px) scale(1.07); } }
@keyframes student-status-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(19,117,108,.22); } 50% { box-shadow: 0 0 0 .34rem rgba(19,117,108,0); } }

/* Formal result/exam/placement documents retain a paper presentation with modern controls. */
body.student-tailwind-shell .toolbar,
body.student-tailwind-shell .filter-card,
body.student-tailwind-shell .no-print .btn { border-color: var(--su-line) !important; box-shadow: var(--su-shadow); }
body.student-tailwind-shell .toolbar,
body.student-tailwind-shell .filter-card { border-radius: var(--su-radius) !important; background: rgba(255,255,255,.96) !important; }
body.student-tailwind-shell .result-slip,
body.student-tailwind-shell .exam-card,
body.student-tailwind-shell .siwes-letter { border-color: var(--su-line) !important; border-radius: var(--su-radius-lg) !important; box-shadow: var(--su-shadow-lift) !important; }

body.student-portal-page :is(a,button,input,select,textarea,[tabindex]):focus-visible,
body.student-tailwind-shell :is(a,button,input,select,textarea,[tabindex]):focus-visible { outline: 3px solid var(--su-brand) !important; outline-offset: 3px; }

@media (min-width:640px) {
  .student-page-frame { padding: 1.35rem 1.2rem 3.5rem; }
  body.student-portal-page .card-body { padding: 1.3rem; }
}
@media (max-width:991.98px) {
  body.student-portal-page .student-nav .navbar-collapse { margin-top: .55rem; padding: .55rem; border: 1px solid var(--su-line); border-radius: .82rem; background: #fff; box-shadow: var(--su-shadow); }
  body.student-portal-page .student-nav .nav-link { margin: 0; }
  body.student-portal-page .student-nav .dropdown-menu { margin: .2rem 0; box-shadow: none !important; }
}
@media (max-width:575px) {
  body.student-portal-page .student-dashboard-brand span { max-width: 12.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .student-page-frame { padding-right: .8rem; padding-left: .8rem; }
  body.student-portal-page .card-body { padding: 1rem; }
  body.student-portal-page .table > :not(caption) > * > *,
  body.student-tailwind-shell .student-table-scroll th,
  body.student-tailwind-shell .student-table-scroll td { padding: .68rem .7rem; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .student-ui-ready .student-motion { opacity: 1; transform: none; }
}
@media print {
  body.student-portal-page,body.student-tailwind-shell { background: #fff !important; }
  .student-ui-ready .student-motion { opacity: 1 !important; transform: none !important; animation: none !important; }
  .student-ui-ready .student-interactive::after { display: none !important; }
}