/* Student Support Portal — built on the main site's design tokens
   (--navy, --gold, --font-heading, --font-body) from assets/css/style.v2.css */

.ss-body {
  background:
    radial-gradient(circle at 10% 0%, rgba(244, 123, 32, .07) 0%, transparent 45%),
    radial-gradient(circle at 90% 15%, rgba(46, 49, 146, .06) 0%, transparent 40%),
    var(--bg-lavender, #f3f0ff);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* ============ APP SHELL (sidebar + topbar) ============ */
.ss-body.app-mode {
  background: var(--app-bg, #f4f5f9);
}

.app-shell {
  flex: 1;
  display: flex;
  align-items: stretch;
  min-width: 0;
  max-width: 100%;
}

/* ---- Sidebar ---- */
.app-sidebar {
  --bs-offcanvas-width: 264px;
  width: 264px;
  background: var(--navy-deep) !important;
  border-right: none;
  flex-shrink: 0;
  transition: width .2s ease;
}

.app-sidebar .offcanvas-body {
  padding: 0;
}

/* Below 992px, .app-sidebar behaves as a standard Bootstrap offcanvas
   drawer (hidden off-screen until toggled — the same proven mechanism
   already used for the main site's mobile nav). At 992px and up we take
   full manual control and force it back into the normal document flow as
   a static column, rather than depending on Bootstrap's own
   `.offcanvas-lg` responsive variant (which proved unreliable in some
   real-device contexts here) — every property Bootstrap's base
   `.offcanvas`/`.offcanvas-start` rules set is explicitly reset. */
@media (min-width: 992px) {
  .app-sidebar.offcanvas.offcanvas-start {
    position: static !important;
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    z-index: auto !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
    box-shadow: none !important;
    height: auto !important;
    max-width: none !important;
  }
}

.app-sidebar-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 18px 14px;
  overflow-y: auto;
}

.app-sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 6px 18px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.app-sidebar-brand-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  min-width: 0;
}

.app-sidebar-logo {
  height: 32px;
  width: auto;
  border-radius: 6px;
  background: #fff;
  padding: 3px;
  flex-shrink: 0;
}

.app-sidebar-name {
  font-weight: 600;
  font-size: .84rem;
  letter-spacing: .2px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.app-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  color: rgba(255, 255, 255, .68);
  text-decoration: none;
  font-weight: 500;
  font-size: .87rem;
  transition: background .15s ease, color .15s ease;
  white-space: nowrap;
}

.app-nav-link i {
  font-size: 1.05rem;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.app-nav-link:hover {
  background: rgba(255, 255, 255, .06);
  color: #fff;
}

.app-nav-link.active {
  background: var(--gold);
  color: var(--navy-deep);
  font-weight: 600;
}

.app-nav-link.app-nav-primary {
  background: rgba(244, 123, 32, .16);
  color: var(--gold-light);
  border: 1px solid rgba(244, 123, 32, .3);
}

.app-nav-link.app-nav-primary:hover {
  background: rgba(244, 123, 32, .24);
  color: #fff;
}

.app-nav-section-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: none;
  background: none;
  padding: 10px 12px;
  border-radius: 10px;
  color: rgba(255, 255, 255, .68);
  font-weight: 500;
  font-size: .87rem;
  cursor: pointer;
  text-align: left;
}

.app-nav-section-toggle:hover {
  background: rgba(255, 255, 255, .06);
  color: #fff;
}

.app-nav-section-toggle i.bi-chevron-down {
  margin-left: auto;
  font-size: .72rem;
  transition: transform .2s ease;
  width: auto;
}

.app-nav-section-toggle[aria-expanded="true"] i.bi-chevron-down {
  transform: rotate(180deg);
}

.app-nav-section-toggle.active {
  color: #fff;
}

.app-nav-subitems {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 32px;
  margin: 2px 0 4px;
}

.app-nav-subitems .app-nav-link {
  padding: 8px 12px;
  font-size: .83rem;
}

.app-sidebar-footer {
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding-top: 12px;
  margin-top: 12px;
}

.app-user-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px 12px;
}

.app-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy-deep);
  font-weight: 600;
  font-size: .8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.app-user-avatar.sm {
  width: 30px;
  height: 30px;
  font-size: .72rem;
}

.app-user-name {
  font-weight: 500;
  font-size: .85rem;
  color: #fff;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-user-role {
  font-size: .73rem;
  color: rgba(255, 255, 255, .55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Collapsed (desktop icon-only) state */
.app-shell.is-collapsed .app-sidebar {
  width: 84px;
}

.app-shell.is-collapsed .app-sidebar-name,
.app-shell.is-collapsed .app-nav-link span,
.app-shell.is-collapsed .app-nav-section-toggle span,
.app-shell.is-collapsed .app-user-name,
.app-shell.is-collapsed .app-user-role,
.app-shell.is-collapsed .app-nav-subitems,
.app-shell.is-collapsed .app-nav-section-toggle i.bi-chevron-down {
  display: none;
}

.app-shell.is-collapsed .app-nav-link,
.app-shell.is-collapsed .app-nav-section-toggle,
.app-shell.is-collapsed .app-user-card {
  justify-content: center;
}

/* ---- Main column ---- */
.app-main-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.app-topbar {
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 24px;
  background: #fff;
  border-bottom: 1px solid #e6e7ee;
  position: sticky;
  top: 0;
  z-index: 900;
}

.app-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid #e6e7ee;
  background: #fff;
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
  cursor: pointer;
  transition: background .15s ease;
}

.app-icon-btn:hover {
  background: #f4f5f9;
}

.app-topbar-title {
  flex: 1 1 auto;
  min-width: 0;
}

.app-topbar-title h1 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--navy);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-topbar-title p {
  margin: 0;
  font-size: .76rem;
  color: #8b8fa3;
}

.app-search {
  position: relative;
  flex: 1;
  max-width: 340px;
}

.app-search i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #8b8fa3;
  font-size: .9rem;
}

.app-search input {
  width: 100%;
  border: 1px solid #e6e7ee;
  background: #f4f5f9;
  border-radius: 10px;
  padding: 9px 14px 9px 38px;
  font-size: .86rem;
}

.app-search input:focus {
  outline: none;
  border-color: var(--gold);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(244, 123, 32, .12);
}

/* Keyboard-visible focus ring for shell chrome (sidebar links, icon buttons,
   dropdown triggers) — these otherwise fell back to the browser default. */
.app-nav-link:focus-visible,
.app-nav-section-toggle:focus-visible,
.app-icon-btn:focus-visible,
.app-bell:focus-visible,
.app-profile-btn:focus-visible,
.app-sidebar-brand-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 8px;
}

.app-topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-shrink: 0;
}

.app-bell {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  font-size: 1.05rem;
  text-decoration: none;
  border: 1px solid #e6e7ee;
  background: #fff;
  cursor: pointer;
  flex-shrink: 0;
}

.app-bell:hover {
  background: #f4f5f9;
  color: var(--navy);
}

.app-notif-menu {
  width: 340px;
  max-width: calc(100vw - 32px);
  padding: 0;
  overflow: hidden;
}

.app-notif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  font-weight: 600;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--navy);
  border-bottom: 1px solid #f0eef8;
}

.app-notif-count {
  background: rgba(244, 123, 32, .12);
  color: var(--orange);
  font-size: .68rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  text-transform: none;
  letter-spacing: 0;
}

.app-notif-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  text-decoration: none;
  border-bottom: 1px solid #f7f6fb;
  transition: background .15s ease;
}

.app-notif-item:last-of-type {
  border-bottom: none;
}

.app-notif-item:hover {
  background: var(--navy-soft);
}

.app-notif-item i {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 9px;
  background: var(--navy-soft);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
}

.app-notif-title {
  font-weight: 500;
  font-size: .85rem;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-notif-sub {
  font-size: .78rem;
  color: #8b8fa3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-notif-empty {
  padding: 28px 16px;
  text-align: center;
  color: #8b8fa3;
  font-size: .85rem;
}

.app-notif-empty i {
  display: block;
  font-size: 1.5rem;
  margin-bottom: 8px;
  color: #cfc9e8;
}

.app-notif-footer {
  display: block;
  text-align: center;
  padding: 12px 16px;
  font-size: .82rem;
  font-weight: 500;
  color: var(--navy);
  text-decoration: none;
  background: #fbfaff;
  border-top: 1px solid #f0eef8;
}

.app-notif-footer:hover {
  color: var(--orange);
  background: var(--navy-soft);
}

.app-bell-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: var(--orange);
  color: #fff;
  font-size: .62rem;
  font-weight: 600;
  min-width: 17px;
  height: 17px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  border: 2px solid #fff;
}

.app-profile-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #e6e7ee;
  background: #fff;
  border-radius: 999px;
  padding: 4px 10px 4px 4px;
}

.app-profile-btn i {
  font-size: .7rem;
  color: #8b8fa3;
}

.app-main {
  flex: 1;
  /* padding: 28px 0; */
}

/* Reserve clearance under the last bit of page content so the fixed
   chatbot launcher (bottom-right, 60x60) never sits on top of a real
   button/link underneath it — otherwise clicks there hit the launcher
   instead of the page. */
.has-ss-chat .app-main {
  padding-bottom: 104px;
}

.app-main .container,
.app-main .container-fluid {
  max-width: 1320px;
}

@media (max-width: 991.98px) {
  .app-topbar {
    padding: 10px 16px;
    gap: 10px;
  }

  .app-topbar-title h1 {
    font-size: .95rem;
  }

  .app-main {
    padding: 20px 0;
  }
}

@media (max-width: 767.98px) {
  .app-search {
    display: none !important;
  }
}

.ss-footer {
  background: var(--navy-deep);
  color: rgba(255, 255, 255, .7);
  font-size: .82rem;
  padding: 18px 0;
}

.ss-footer a {
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
}

.ss-footer a:hover {
  color: var(--gold-light);
}

/* ---- Cards ---- */
.ss-card {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #fcfbff 100%);
  border: 1px solid #ece9f6;
  border-radius: 22px;
  padding: 28px;
  box-shadow: 0 2px 6px rgba(30, 26, 77, .04), 0 22px 44px -18px rgba(30, 26, 77, .18);
  overflow: hidden;
}

/* Shared width for stacked narrow-form cards (change password, 2FA, etc.)
   so their edges line up instead of each picking its own inline max-width. */
.ss-card-narrow {
  max-width: 560px;
}

.ss-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--navy), var(--gold-light), var(--gold));
  opacity: .9;
}

/* ---- Auth pages ---- */
.ss-auth-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 16px;
  overflow: hidden;
}

.ss-login-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: calc(100vh - 84px);
}

.ss-auth-wrap::before,
.ss-auth-wrap::after {
  content: '';
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  filter: blur(70px);
  z-index: 0;
  pointer-events: none;
}

.ss-auth-wrap::before {
  background: rgba(244, 123, 32, .16);
  top: -120px;
  left: -100px;
}

.ss-auth-wrap::after {
  background: rgba(46, 49, 146, .14);
  bottom: -140px;
  right: -100px;
}

.ss-auth-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
}

/* ---- Premium split-screen login (login.php / staff/login.php) ---- */
.ss-login-split {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 1080px;
  min-width: 0;
  min-height: 600px;
  margin: 0 auto;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(20, 16, 58, .18);
  background: #fff;
}

.ss-login-visual {
  position: relative;
  flex: 1 1 46%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 44px 40px;
  color: #fff;
  background-size: cover;
  background-position: center;
}

.ss-login-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(20, 16, 58, .92) 0%, rgba(30, 26, 77, .85) 55%, rgba(46, 49, 146, .78) 100%);
}

.ss-login-visual > * {
  position: relative;
  z-index: 1;
}

.ss-login-visual-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ss-login-visual-brand img {
  height: 40px;
  width: auto;
  border-radius: 8px;
  background: #fff;
  padding: 4px;
}

.ss-login-visual-brand span {
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .3px;
}

.ss-login-visual h2 {
  font-family: var(--font-heading);
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 10px;
}

.ss-login-visual p.ss-login-tagline {
  color: rgba(255, 255, 255, .78);
  font-size: .92rem;
  margin: 0;
}

.ss-login-features {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ss-login-features li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .88rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .92);
}

.ss-login-features i {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 9px;
  background: rgba(244, 123, 32, .22);
  border: 1px solid rgba(244, 123, 32, .4);
  color: var(--gold-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
}

.ss-login-visual-footer {
  font-size: .76rem;
  color: rgba(255, 255, 255, .5);
}

.ss-login-form-panel {
  flex: 1 1 54%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 40px;
  background: #fff;
}

.ss-login-form-inner {
  width: 100%;
  max-width: 380px;
  min-width: 0;
}

.ss-login-split-wide {
  max-width: 1180px;
}

.ss-login-form-inner.ss-login-form-wide {
  max-width: 640px;
}

.ss-login-form-inner h1 {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--navy);
}

@media (max-width: 991.98px) {
  .ss-login-visual {
    display: none;
  }

  .ss-login-split {
    box-shadow: 0 14px 40px rgba(20, 16, 58, .14);
    min-height: 0;
  }

  .ss-login-form-panel {
    padding: 36px 22px;
  }
}

@media (max-width: 420px) {
  .ss-auth-wrap {
    padding: 40px 10px;
  }

  .ss-login-form-panel {
    padding: 28px 16px;
  }
}

.ss-auth-card.ss-auth-wide {
  max-width: 720px;
}

.ss-auth-card h1 {
  font-family: var(--font-heading);
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--navy);
}

.ss-card .form-control,
.ss-card .form-select {
  border-radius: 10px;
  padding: 10px 14px;
  border-color: #e2ddf3;
}

.ss-card .form-control:focus,
.ss-card .form-select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(244, 123, 32, .15);
}

/* The main site's style.v2.css ships an UNSCOPED `.form-select` rule
   (meant for one marketing-page widget) that uses `!important` on every
   property and leaks into every dropdown on every page that loads that
   stylesheet — including this entire portal, making every <select> render
   as a bold, orange-bordered pill regardless of local styling. Since that
   file is shared with the main site and out of scope to change safely,
   restore the portal's own clean, compact select style here instead,
   matched in specificity + importance so it reliably wins. */
.ss-body .form-select {
  border: 1px solid #e2ddf3 !important;
  border-radius: 10px !important;
  padding: 8px 32px 8px 14px !important;
  font-weight: 500 !important;
  font-size: .92rem !important;
  color: var(--navy) !important;
  background-color: #fff !important;
  box-shadow: none !important;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ss-body .form-select:hover {
  border-color: var(--gold) !important;
  box-shadow: none !important;
}

.ss-body .form-select:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(244, 123, 32, .15) !important;
}

.ss-body .form-select option,
.ss-body .form-select optgroup {
  font-weight: 400 !important;
  font-size: .9rem !important;
}

.ss-auth-card .form-label {
  font-weight: 500;
  font-size: .86rem;
  color: var(--navy);
}

/* ---- Announcements ticker ---- */
.ss-announce-card {
  position: relative;
  background: #fff;
  border: 1px solid #eae7f2;
  border-radius: 18px;
  padding: 18px 22px 20px;
  margin-bottom: 28px;
  box-shadow: 0 8px 24px rgba(30, 26, 77, .06);
  overflow: hidden;
}

.ss-announce-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--navy), var(--gold-light), var(--gold));
  opacity: .9;
}

.ss-announce-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--navy);
  margin-bottom: 14px;
}

.ss-announce-heading-icon {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--navy-soft);
  color: var(--gold);
  font-size: .92rem;
  flex-shrink: 0;
}

.ss-announce-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(31, 138, 69, .1);
  color: #1f8a45;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .3px;
}

.ss-announce-live i {
  font-size: .4rem;
}

.ss-announce-viewport {
  position: relative;
  height: 136px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}

.ss-announce-track {
  display: flex;
  flex-direction: column;
  animation: ss-announce-scroll 18s linear infinite;
}

.ss-announce-viewport:hover .ss-announce-track {
  animation-play-state: paused;
}

.ss-announce-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  min-height: 44px;
  background: #fbfaff;
  border: 1px solid #f0eef8;
  border-radius: 12px;
  margin-bottom: 10px;
  font-size: .87rem;
  font-weight: 500;
  color: var(--navy);
  transition: background .2s ease, border-color .2s ease;
}

.ss-announce-item:hover {
  background: var(--navy-soft);
  border-color: #e5dffb;
}

.ss-announce-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy-soft);
  color: var(--gold);
  font-size: .95rem;
  flex-shrink: 0;
}

.ss-announce-text {
  min-width: 0;
  overflow-wrap: break-word;
}

@keyframes ss-announce-scroll {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ss-announce-track {
    animation: none;
  }
}

/* ---- Dashboard ---- */
.ss-welcome-card {
  position: relative;
  background: var(--navy-deep);
  color: #fff;
  border-radius: 18px;
  padding: 30px 34px;
  margin-bottom: 28px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(20, 16, 58, .18);
}

.ss-welcome-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(244, 123, 32, .14) 0%, transparent 55%);
  pointer-events: none;
}

.ss-welcome-card>* {
  position: relative;
}

.ss-welcome-card h1 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.9rem;
  margin-bottom: 4px;
}

.ss-welcome-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.ss-welcome-meta span {
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .22);
  padding: 7px 15px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 500;
  backdrop-filter: blur(6px);
}

.ss-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.ss-stat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: linear-gradient(165deg, #ffffff 0%, #fbfaff 100%);
  border: 1px solid #eae7f2;
  border-radius: 18px;
  padding: 22px 20px;
  box-shadow: 0 1px 3px rgba(30, 26, 77, .04), 0 14px 28px -14px rgba(30, 26, 77, .16);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, border-color .15s ease, background .2s ease;
}

.ss-stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--navy), var(--gold-light), var(--gold));
  opacity: 0;
  transition: opacity .25s ease;
}

.ss-stat-card:hover::before {
  opacity: .9;
}

.ss-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 10px rgba(30, 26, 77, .06), 0 24px 40px -16px rgba(30, 26, 77, .22);
  border-color: #ddd9ee;
  color: inherit;
}

/* Selected filter chip: a permanent top accent + soft tinted wash, so it
   reads as "part of the same row, just selected" instead of floating
   above its siblings with a mismatched glow ring. */
.ss-stat-card-active {
  background: linear-gradient(165deg, #fff9f0 0%, #fff4e2 100%);
  border-color: var(--gold);
}

.ss-stat-card-active::before {
  opacity: 1;
}

.ss-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy-soft);
  color: var(--gold);
  font-size: 1.1rem;
  margin-bottom: 14px;
  box-shadow: inset 0 0 0 1px rgba(46, 49, 146, .05);
}

/* Semantic tints — match the same colors already used for status badges
   elsewhere, so a KPI card's icon reads as the same "color" as its
   status everywhere else in the app. */
.ss-stat-icon-new { background: #e7ecff; color: #2e3192; }
.ss-stat-icon-open { background: #fff2e6; color: #d9611a; }
.ss-stat-icon-assigned { background: #eee7ff; color: #6b3fd4; }
.ss-stat-icon-progress { background: #fff8d6; color: #a17f00; }
.ss-stat-icon-waiting { background: #ffe9e9; color: #c0392b; }
.ss-stat-icon-resolved { background: #e3f7ea; color: #1f8a45; }
.ss-stat-icon-closed { background: #ececec; color: #666; }

.ss-stat-card .ss-stat-num {
  font-family: var(--font-heading);
  font-size: 2.15rem;
  font-weight: 600;
  color: var(--navy);
  display: block;
  line-height: 1.1;
  letter-spacing: .2px;
}

.ss-stat-card .ss-stat-label {
  font-size: .76rem;
  color: #6b7288;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-top: 2px;
}

/* ---- Super admin "portal overview" hero panel ---- */
.ss-overview-panel {
  position: relative;
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 60%, var(--blue-accent) 100%);
  border-radius: 22px;
  padding: 28px 30px 24px;
  overflow: hidden;
  box-shadow: 0 20px 44px rgba(20, 16, 58, .28);
}

.ss-overview-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 92% -10%, rgba(244, 123, 32, .35) 0%, transparent 46%),
    radial-gradient(circle at 4% 120%, rgba(255, 157, 69, .16) 0%, transparent 50%);
  pointer-events: none;
}

.ss-overview-head {
  position: relative;
  margin-bottom: 20px;
}

.ss-overview-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--gold-light);
}

.ss-overview-head h2 {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 500;
  color: #fff;
  margin: 4px 0 0;
}

.ss-overview-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 4px;
}

.ss-overview-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px 20px;
  border-radius: 16px;
  text-decoration: none;
  color: #fff;
  border-left: 1px solid rgba(255, 255, 255, .12);
  transition: background .2s ease, transform .2s ease;
}

.ss-overview-item:first-child {
  border-left: none;
}

.ss-overview-item:hover {
  background: rgba(255, 255, 255, .07);
  transform: translateY(-2px);
  color: #fff;
}

.ss-overview-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .14);
  color: var(--gold-light);
  font-size: 1.05rem;
  margin-bottom: 14px;
  backdrop-filter: blur(6px);
}

.ss-overview-num {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1.1;
}

.ss-overview-label {
  font-size: .8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: rgba(255, 255, 255, .65);
  margin-top: 4px;
}

.ss-overview-sub {
  font-size: .78rem;
  color: var(--gold-light);
  font-weight: 500;
  margin-top: 6px;
}

@media (max-width: 767.98px) {
  .ss-overview-item {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, .12);
  }

  .ss-overview-item:first-child {
    border-top: none;
  }
}

.ss-quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

.ss-action-card {
  position: relative;
  background: #fff;
  border: 1px solid #eae7f2;
  border-radius: 20px;
  padding: 26px 22px;
  text-decoration: none;
  color: var(--navy);
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.ss-action-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--navy), var(--gold-light), var(--gold));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}

.ss-action-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 38px rgba(30, 26, 77, .14);
  border-color: transparent;
  color: var(--navy);
}

.ss-action-card:hover::before {
  transform: scaleX(1);
}

.ss-action-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gold);
  color: var(--navy-deep);
  font-size: 1.3rem;
  box-shadow: 0 6px 14px rgba(244, 123, 32, .22);
}

/* Featured primary action — visually distinct from the secondary cards
   around it, matching the featured button style used elsewhere. */
.ss-action-card-primary {
  background: linear-gradient(135deg, var(--navy-deep), var(--navy) 65%, #2e3192);
  border-color: transparent;
}

.ss-action-card-primary::before {
  background: linear-gradient(90deg, var(--gold-light), var(--gold));
  transform: scaleX(1);
}

.ss-action-card-primary h3,
.ss-action-card-primary p {
  color: #fff;
}

.ss-action-card-primary p {
  color: rgba(255, 255, 255, .72);
}

.ss-action-card-primary .ss-action-icon {
  background: #fff;
  color: var(--navy);
}

.ss-action-card-primary:hover {
  color: #fff;
}

.ss-action-card h3 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 500;
  margin: 0;
}

.ss-action-card p {
  font-size: .88rem;
  color: #6b7288;
  margin: 0;
}

button.ss-action-card {
  font: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.ss-contact-modal {
  border-radius: 18px;
  border: none;
  box-shadow: 0 20px 50px rgba(30, 26, 77, .2);
}

.ss-contact-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid #f0eef8;
}

.ss-contact-row:last-child {
  border-bottom: none;
}

.ss-contact-row > i {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy-soft);
  color: var(--navy);
  font-size: 1rem;
}

.ss-contact-row > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ss-contact-row strong {
  color: var(--navy);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.ss-contact-row a,
.ss-contact-row span {
  color: #3a4256;
  font-weight: 500;
  text-decoration: none;
}

.ss-contact-row a:hover {
  color: var(--orange);
}

/* ---- Section headings (used above Description / Attachments / Communication / Timeline etc.) ---- */
.ss-section-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--navy);
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0eef8;
}

.ss-section-heading i {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, var(--navy-soft), #e9e4ff);
  color: var(--gold);
  font-size: .92rem;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(46, 49, 146, .06);
}

/* ---- Tables ---- */
.ss-table-card {
  background: #fff;
  border: 1px solid #eae7f2;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(30, 26, 77, .06);
}

.ss-table {
  margin: 0;
}

.ss-table thead th {
  background: var(--navy-soft);
  color: var(--navy);
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .4px;
  font-weight: 600;
  border: none;
  padding: 15px 16px;
}

.ss-table tbody td {
  padding: 15px 16px;
  vertical-align: middle;
  font-size: .92rem;
  border-color: #f1eff8;
}

.ss-table tbody tr {
  transition: background .15s ease;
}

.ss-table tbody tr:hover {
  background: #faf9fd;
}

.ss-ticket-link {
  color: var(--navy);
  font-weight: 500;
  text-decoration: none;
}

.ss-ticket-link:hover {
  color: var(--orange);
}

/* ---- Ticket number chip (ticket detail header) ---- */
.ss-ticket-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--navy-soft);
  color: var(--navy);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .3px;
  padding: 6px 14px;
  border-radius: 999px;
}

.ss-ticket-chip i {
  color: var(--gold);
}

/* ---- Badges ---- */
.ss-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
  white-space: nowrap;
  border: 1px solid transparent;
}

.ss-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.ss-badge-new { background: #e7ecff; color: #2e3192; border-color: #d3daff; }
.ss-badge-open { background: #fff2e6; color: #d9611a; border-color: #ffe0c2; }
.ss-badge-assigned { background: #eee7ff; color: #6b3fd4; border-color: #e0d4ff; }
.ss-badge-progress { background: #fff8d6; color: #a17f00; border-color: #ffefa8; }
.ss-badge-waiting { background: #ffe9e9; color: #c0392b; border-color: #ffd2d2; }
.ss-badge-resolved { background: #e3f7ea; color: #1f8a45; border-color: #c9f0d6; }
.ss-badge-closed { background: #ececec; color: #555; border-color: #dddddd; }
.ss-badge-reopened { background: #ffe3ea; color: #c2185b; border-color: #ffccdb; }

.ss-priority {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 500;
}

.ss-priority::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.ss-priority-low { color: #1f8a45; background: rgba(31, 138, 69, .1); }
.ss-priority-medium { color: #a17f00; background: rgba(217, 163, 0, .12); }
.ss-priority-high { color: #d9611a; background: rgba(217, 97, 26, .12); }
.ss-priority-urgent { color: #c0392b; background: rgba(192, 57, 43, .12); }

/* ---- Priority breakdown rows (dashboard) ---- */
.ss-priority-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 11px 8px;
  border-radius: 12px;
  transition: background .15s ease;
}

.ss-priority-row:hover {
  background: #faf9ff;
}

.ss-priority-row-urgent { --row-color: #c0392b; }
.ss-priority-row-high { --row-color: #d9611a; }
.ss-priority-row-medium { --row-color: #b8860b; }
.ss-priority-row-low { --row-color: #1f8a45; }

.ss-priority-name {
  width: 76px;
  flex-shrink: 0;
  font-size: .82rem;
  font-weight: 500;
  color: var(--row-color, var(--navy));
  display: flex;
  align-items: center;
  gap: 8px;
}

.ss-priority-name::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--row-color, var(--navy));
  flex-shrink: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--row-color, var(--navy)) 16%, transparent);
}

.ss-priority-track {
  flex: 1;
  height: 9px;
  border-radius: 999px;
  background: #f0eef8;
  overflow: hidden;
}

.ss-priority-fill {
  position: relative;
  height: 100%;
  min-width: 4px;
  border-radius: 999px;
  background: var(--row-color, var(--navy));
}

.ss-priority-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .35), transparent 65%);
}

.ss-priority-value {
  flex-shrink: 0;
  min-width: 44px;
  text-align: right;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
}

.ss-priority-value small {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: .68rem;
  color: #9a9aa8;
  margin-top: 1px;
}

/* ---- Ticket detail summary grid ---- */
.ss-summary-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.ss-summary-item {
  background: #fbfaff;
  border: 1px solid #f0eef8;
  border-radius: 12px;
  padding: 12px 14px;
  min-width: 0;
}

.ss-summary-item span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: #8b8fa3;
  font-weight: 500;
  margin-bottom: 5px;
}

.ss-summary-item span i {
  color: var(--gold);
  font-size: .82rem;
}

.ss-summary-value {
  font-weight: 500;
  color: var(--navy);
  font-size: .92rem;
  overflow-wrap: break-word;
  word-break: break-word;
}

.ss-attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--navy-soft);
  border: 1px solid #e5dffb;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: .84rem;
  font-weight: 500;
  color: var(--navy);
  text-decoration: none;
  margin: 4px 8px 4px 0;
  transition: background .2s ease, transform .2s ease;
}

.ss-attachment-chip:hover {
  background: #e7e2fb;
  color: var(--navy);
  transform: translateY(-1px);
}

/* ---- Timeline ---- */
.ss-timeline {
  position: relative;
  padding-left: 34px;
  margin: 0;
}

.ss-timeline::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--gold), #e5e1f3 80%);
}

.ss-timeline-item {
  position: relative;
  padding-bottom: 24px;
}

.ss-timeline-item:last-child {
  padding-bottom: 0;
}

.ss-timeline-item::before {
  content: '';
  position: absolute;
  left: -34px;
  top: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px #ece7fa, 0 3px 8px rgba(244, 123, 32, .2);
}

.ss-timeline-item:first-child::before {
  background: var(--navy);
  box-shadow: 0 0 0 2px #ece7fa, 0 3px 8px rgba(30, 26, 77, .25);
}

.ss-timeline-item strong {
  color: var(--navy);
  font-size: .92rem;
}

.ss-timeline-item small {
  color: #6b7288;
}

/* ---- Message thread ---- */
.ss-thread {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 460px;
  overflow-y: auto;
  padding: 4px 8px 4px 4px;
}

/* ---- Chat-style thread row: avatar + bubble + meta caption ---- */
.ss-thread-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 82%;
}

.ss-thread-row-student {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.ss-thread-row-staff {
  align-self: flex-start;
}

.ss-thread-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(30, 26, 77, .12);
}

.ss-thread-row-student .ss-thread-avatar {
  background: linear-gradient(135deg, var(--navy) 0%, var(--blue-accent) 100%);
  color: #fff;
}

.ss-thread-row-staff .ss-thread-avatar {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
  color: var(--navy-deep);
}

.ss-thread-bubble-wrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ss-thread-row-student .ss-thread-bubble-wrap {
  align-items: flex-end;
}

.ss-msg {
  padding: 12px 16px;
  border-radius: 16px;
  font-size: .9rem;
  line-height: 1.5;
  box-shadow: 0 2px 8px rgba(30, 26, 77, .06);
}

.ss-msg-student {
  background: linear-gradient(135deg, var(--navy) 0%, var(--blue-accent) 100%);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.ss-msg-staff {
  background: var(--navy-soft);
  color: var(--navy);
  border-bottom-left-radius: 4px;
}

.ss-thread-meta {
  display: block;
  margin-top: 5px;
  padding: 0 4px;
  font-size: .7rem;
  color: #9a9aa8;
}

/* ---- Reply composer ---- */
.ss-reply-box {
  background: #fbfaff;
  border: 1px solid #f0eef8;
  border-radius: 14px;
  padding: 14px;
}

.ss-reply-box textarea.form-control {
  border-radius: 10px;
  border-color: #e2ddf3;
  resize: none;
}

.ss-reply-box textarea.form-control:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(244, 123, 32, .15);
}

/* Custom file input — styles the native picker button, no JS required.
   Self-contained (not combined with Bootstrap's .form-control) so its
   ::file-selector-button rule doesn't lose the specificity fight against
   Bootstrap's own .form-control[type="file"]::file-selector-button. */
.ss-file-input {
  display: inline-block;
  font-size: .82rem;
  color: #6b7288;
  border: 1px dashed #d9d3ef;
  border-radius: 10px;
  padding: 6px;
  background: #fbfaff;
  max-width: 100%;
}

.ss-file-input::file-selector-button {
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 7px 14px;
  font-weight: 500;
  font-size: .8rem;
  margin-right: 10px;
  cursor: pointer;
  transition: opacity .2s ease;
}

.ss-file-input::file-selector-button:hover {
  opacity: .88;
}

/* ---- Empty state ---- */
.ss-empty-state {
  text-align: center;
  padding: 48px 20px;
  color: #6b7288;
}

.ss-empty-state i {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--navy-soft);
  color: var(--gold);
  font-size: 1.8rem;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ss-empty-inline {
  text-align: center;
  padding: 24px 16px;
  color: #8b8fa3;
  font-size: .88rem;
}

.ss-empty-inline i {
  font-size: 1.4rem;
  color: #cfc9e8;
  display: block;
  margin-bottom: 8px;
}

/* ---- Alerts reuse the enquiry-alert pattern from the main site ---- */
.ss-alert {
  border-radius: 12px;
  padding: 12px 16px;
  font-size: .88rem;
  font-weight: 500;
  margin-bottom: 18px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.ss-alert.is-success {
  background: rgba(31, 138, 69, .08);
  border: 1px solid rgba(31, 138, 69, .3);
  color: #1f8a45;
}

.ss-alert.is-error {
  background: rgba(192, 57, 43, .08);
  border: 1px solid rgba(192, 57, 43, .3);
  color: #c0392b;
}

@media (max-width: 575.98px) {
  .ss-msg {
    max-width: 92%;
  }

  .ss-welcome-card {
    padding: 26px 22px;
  }
}

/* ---- Sub-category pill w/ chatbot-answer + delete actions (admin-departments.php) ---- */
.ss-sub-pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 5px 6px 5px 14px;
  border-radius: 999px;
  background: #fff8ed;
  border: 1px solid #ffe6bf;
  color: #a17f00;
  font-size: .82rem;
  font-weight: 500;
}

.ss-sub-pill-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #a17f00;
  font-size: .7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.ss-sub-pill-btn:hover {
  background: rgba(161, 127, 0, .12);
}

.ss-sub-pill-btn.has-faq {
  color: #1f8a45;
}

.ss-sub-pill-btn.has-faq:hover {
  background: rgba(31, 138, 69, .12);
}

/* ============ Chatbot widget ============ */
.ss-chatbot {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  /* The panel keeps its full box in this flex column even while closed
     (only opacity/transform change, so its close animation can run), which
     inflates this wrapper's clickable area far past the visible 60px
     launcher circle. Without this, that invisible area sits on top of
     real page content (e.g. a table's "View" column) and swallows clicks
     meant for it. Re-enabled below on the two children that should
     actually be clickable. */
  pointer-events: none;
}

.ss-chat-launcher {
  position: relative;
  pointer-events: auto;
  width: 60px;
  height: 60px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 55%, var(--blue-accent) 100%);
  color: var(--gold-light);
  box-shadow: 0 12px 28px rgba(20, 16, 58, .35), 0 0 0 1px rgba(255, 255, 255, .06) inset;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
  flex-shrink: 0;
}

.ss-chat-launcher:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(20, 16, 58, .4), 0 0 0 1px rgba(255, 255, 255, .08) inset;
}

.ss-chat-launcher-icon,
.ss-chat-launcher-close {
  position: absolute;
  font-size: 1.35rem;
  transition: opacity .2s ease, transform .2s ease;
}

.ss-chat-launcher-close {
  opacity: 0;
  transform: scale(.6) rotate(-45deg);
}

.ss-chat-launcher.is-open .ss-chat-launcher-icon {
  opacity: 0;
  transform: scale(.6) rotate(45deg);
}

.ss-chat-launcher.is-open .ss-chat-launcher-close {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.ss-chat-panel {
  width: 380px;
  max-width: calc(100vw - 32px);
  height: 560px;
  max-height: calc(100vh - 120px);
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 30px 70px rgba(20, 16, 58, .28), 0 2px 8px rgba(20, 16, 58, .08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px) scale(.97);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}

.ss-chat-panel.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.ss-chat-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 18px;
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 60%, var(--blue-accent) 100%);
  overflow: hidden;
  flex-shrink: 0;
}

.ss-chat-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% -20%, rgba(244, 123, 32, .35) 0%, transparent 50%);
  pointer-events: none;
}

.ss-chat-header-avatar {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .16);
  color: var(--gold-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
}

.ss-chat-header-text {
  position: relative;
  flex: 1;
  min-width: 0;
}

.ss-chat-header-title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1rem;
  color: #fff;
  line-height: 1.2;
}

.ss-chat-header-sub {
  font-size: .74rem;
  color: rgba(255, 255, 255, .6);
  margin-top: 2px;
}

.ss-chat-close {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: none;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  flex-shrink: 0;
  transition: background .15s ease;
}

.ss-chat-close:hover {
  background: rgba(255, 255, 255, .2);
}

.ss-chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--app-bg, #f4f5f9);
}

.ss-chat-msg {
  max-width: 86%;
  padding: 11px 14px;
  border-radius: 14px;
  font-size: .86rem;
  line-height: 1.55;
}

.ss-chat-msg-bot {
  align-self: flex-start;
  background: #fff;
  border: 1px solid #eae7f2;
  color: #2c2a45;
  border-bottom-left-radius: 4px;
  box-shadow: 0 2px 6px rgba(30, 26, 77, .04);
}

.ss-chat-msg-user {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--navy) 0%, var(--blue-accent) 100%);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.ss-chat-ticket-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--navy-soft);
  color: var(--navy);
  font-weight: 500;
  font-size: .78rem;
  text-decoration: none;
}

.ss-chat-typing {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 13px 16px;
}

.ss-chat-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #b7b4c9;
  animation: ssChatTyping 1s infinite ease-in-out;
}

.ss-chat-typing span:nth-child(2) { animation-delay: .15s; }
.ss-chat-typing span:nth-child(3) { animation-delay: .3s; }

@keyframes ssChatTyping {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.ss-chat-footer {
  flex-shrink: 0;
  padding: 12px 14px;
  border-top: 1px solid #eef0f5;
  background: #fff;
}

.ss-chat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ss-chat-chip {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid #d9d5ec;
  background: #fff;
  color: var(--navy);
  font-size: .8rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.ss-chat-chip:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  transform: translateY(-1px);
}

/* Quick-action chip (e.g. "Check Ticket Status") — visually distinct from
   plain topic chips so it reads as a shortcut, not another category. */
.ss-chat-chip-action {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
  border-color: transparent;
  color: var(--navy-deep);
}

.ss-chat-chip-action:hover {
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
  color: var(--navy-deep);
  border-color: transparent;
}

/* Type-to-search row */
.ss-chat-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.ss-chat-search input {
  flex: 1;
  border: 1px solid #d9d5ec;
  border-radius: 999px;
  padding: 9px 16px;
  font-size: .84rem;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.ss-chat-search input:focus {
  border-color: var(--blue-accent);
  box-shadow: 0 0 0 3px rgba(46, 49, 146, .12);
}

.ss-chat-search button {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--navy) 0%, var(--blue-accent) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .15s ease;
}

.ss-chat-search button:hover {
  transform: scale(1.08);
}

/* Inline ticket status card rendered inside a bot message bubble */
.ss-chat-ticket-card {
  min-width: 220px;
}

.ss-chat-ticket-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.ss-chat-ticket-subject {
  font-size: .85rem;
  font-weight: 500;
  color: #2c2a45;
  margin-bottom: 4px;
}

.ss-chat-ticket-meta {
  font-size: .72rem;
  color: #8a90a6;
}

.ss-chat-compose-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.ss-chat-textarea {
  flex: 1;
  resize: none;
  border: 1px solid #d9d5ec;
  border-radius: 14px;
  padding: 10px 12px;
  font-size: .84rem;
  font-family: inherit;
  min-height: 40px;
  max-height: 90px;
}

.ss-chat-textarea:focus {
  outline: none;
  border-color: var(--blue-accent);
  box-shadow: 0 0 0 3px rgba(46, 49, 146, .12);
}

.ss-chat-send {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: none;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
  color: var(--navy-deep);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .15s ease;
}

.ss-chat-send:hover {
  transform: scale(1.06);
}

.ss-chat-priority {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.ss-chat-priority-btn {
  flex: 1;
  padding: 6px 0;
  border-radius: 999px;
  border: 1px solid #e4e1f0;
  background: #faf9fd;
  color: #6b7288;
  font-size: .72rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.ss-chat-priority-btn.active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

@media (max-width: 480px) {
  .ss-chatbot {
    right: 14px;
    bottom: 14px;
  }

  .ss-chat-panel {
    width: calc(100vw - 24px);
    height: calc(100vh - 100px);
  }
}

/* ============ Premium buttons ============
   .btn-navy / .btn-outline-navy / .btn-gold are shared with the main
   marketing site (assets/css/style.v2.css), so this is scoped to .ss-body
   (unique to this portal) rather than redefining those classes globally. */
.ss-body .btn-navy,
.ss-body .btn-outline-navy,
.ss-body .btn-gold {
  letter-spacing: .2px;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}

.ss-body .btn-navy {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  border: 1px solid rgba(255, 255, 255, .06);
  box-shadow: 0 6px 16px rgba(30, 26, 77, .28), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.ss-body .btn-navy:hover {
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--blue-accent) 100%);
  box-shadow: 0 10px 26px rgba(30, 26, 77, .38), inset 0 1px 0 rgba(255, 255, 255, .1);
  transform: translateY(-2px);
}

.ss-body .btn-navy:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(30, 26, 77, .3);
}

.ss-body .btn-outline-navy {
  border-color: #d9d5ec;
  background: #fff;
  box-shadow: 0 2px 6px rgba(30, 26, 77, .06);
}

.ss-body .btn-outline-navy:hover {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  border-color: var(--navy);
  box-shadow: 0 10px 24px rgba(30, 26, 77, .3);
  transform: translateY(-2px);
}

.ss-body .btn-outline-navy:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(30, 26, 77, .2);
}

.ss-body .btn-gold {
  box-shadow: 0 6px 18px rgba(244, 123, 32, .32), inset 0 1px 0 rgba(255, 255, 255, .28);
}

.ss-body .btn-gold:hover {
  box-shadow: 0 12px 28px rgba(244, 123, 32, .42);
}

.ss-body .btn-navy.btn-sm,
.ss-body .btn-outline-navy.btn-sm {
  padding: 6px 18px;
  font-size: .8rem;
}

/* ---- Recovery codes / manual TOTP key (staff profile 2FA) ---- */
.ss-recovery-code {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--navy-soft);
  color: var(--navy);
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: .88rem;
  font-weight: 500;
  letter-spacing: 1px;
}

/* ============ Post-resolution rating ============ */
.ss-rating-card {
  position: relative;
  background: linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 55%, var(--blue-accent) 100%);
  border-radius: 22px;
  padding: 30px 28px;
  overflow: hidden;
  color: #fff;
  box-shadow: 0 20px 44px rgba(20, 16, 58, .26);
}

.ss-rating-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 92% -10%, rgba(244, 123, 32, .32) 0%, transparent 48%);
  pointer-events: none;
}

.ss-rating-card > * {
  position: relative;
}

.ss-rating-card h2 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 500;
  margin: 0 0 4px;
}

.ss-rating-card p {
  color: rgba(255, 255, 255, .68);
  font-size: .86rem;
  margin: 0 0 18px;
}

/* Interactive picker: radios in DOM order 5,4,3,2,1 + row-reverse lets a
   plain ~ sibling selector fill "this star and everything below it". */
.ss-star-picker {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 6px;
  margin-bottom: 16px;
}

.ss-star-picker input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ss-star-picker label {
  cursor: pointer;
  font-size: 2.1rem;
  line-height: 1;
  color: rgba(255, 255, 255, .25);
  transition: color .15s ease, transform .1s ease;
}

.ss-star-picker label:hover {
  transform: scale(1.14);
}

.ss-star-picker input:checked ~ label,
.ss-star-picker label:hover,
.ss-star-picker label:hover ~ label {
  color: var(--gold-light);
}

.ss-rating-card textarea.form-control {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  resize: none;
}

.ss-rating-card textarea.form-control::placeholder {
  color: rgba(255, 255, 255, .45);
}

.ss-rating-card textarea.form-control:focus {
  border-color: var(--gold-light);
  box-shadow: 0 0 0 3px rgba(255, 157, 69, .2);
  background: rgba(255, 255, 255, .1);
  color: #fff;
}

/* Read-only display (already rated, or shown to staff as feedback) */
.ss-star-display i {
  font-size: 1.25rem;
  margin-right: 2px;
}

.ss-star-display i.bi-star-fill {
  color: var(--gold);
}

.ss-star-display i.bi-star {
  color: #e2ddf3;
}

.ss-rating-card .ss-star-display i.bi-star {
  color: rgba(255, 255, 255, .25);
}

.ss-rating-thanks {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ============ Premium pagination ============
   Overrides Bootstrap's joined-bar pagination (shared -1px borders,
   square middle items) with individual rounded chips + a gap, used
   identically on admin-students.php, staff/tickets.php, my-requests.php. */
.ss-body .pagination {
  gap: 6px;
}

.ss-body .page-item .page-link {
  min-width: 40px;
  height: 40px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid #eae7f2;
  border-radius: 12px;
  background: linear-gradient(165deg, #ffffff 0%, #fbfaff 100%);
  color: var(--navy);
  font-weight: 500;
  font-size: .86rem;
  box-shadow: 0 1px 3px rgba(30, 26, 77, .05);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}

.ss-body .page-item .page-link:hover,
.ss-body .page-item .page-link:focus {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  border-color: var(--navy);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(30, 26, 77, .22);
  z-index: 1;
}

.ss-body .page-item.active .page-link {
  background: linear-gradient(135deg, var(--navy) 0%, var(--blue-accent) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 16px rgba(30, 26, 77, .3);
}

.ss-body .page-item.active .page-link:hover {
  transform: none;
}

.ss-body .page-item.disabled .page-link {
  background: #f7f6fb;
  border-color: #eee;
  color: #c7c3d6;
  box-shadow: none;
  cursor: default;
}

.ss-body .page-item.disabled .page-link:hover {
  background: #f7f6fb;
  color: #c7c3d6;
  transform: none;
  box-shadow: none;
}

/* ============ Premium filter/search bar ============
   Additive on top of .ss-card (used identically on my-requests.php,
   admin-students.php, staff/tickets.php) — keeps the base card treatment
   and layers a tinted surface + icon-accented search on top. */
.ss-filter-bar {
  background: linear-gradient(135deg, #faf9ff 0%, #f4f2fc 100%);
  border-color: #e8e4f7;
}

.ss-filter-bar-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--navy);
  margin-bottom: 14px;
}

.ss-filter-bar-label i {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, var(--navy-soft), #e9e4ff);
  color: var(--gold);
  font-size: .85rem;
  flex-shrink: 0;
}

.ss-filter-bar .form-control,
.ss-filter-bar .form-select {
  background: #fff;
  border-color: #e2ddf3;
  font-size: .88rem;
  height: 42px;
}

.ss-filter-search {
  position: relative;
}

.ss-filter-search i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #9a9aa8;
  font-size: .88rem;
  pointer-events: none;
}

.ss-filter-search input.form-control {
  padding-left: 38px;
}

.ss-filter-bar .btn-navy,
.ss-filter-bar .btn-outline-navy {
  height: 42px;
}

/* ============ Premium table listings ============ */
.ss-table-card {
  position: relative;
  border-radius: 20px;
  box-shadow: 0 2px 6px rgba(30, 26, 77, .04), 0 20px 40px -18px rgba(30, 26, 77, .2);
}

.ss-table-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--navy), var(--gold-light), var(--gold));
  opacity: .85;
  z-index: 1;
}

.ss-table thead th {
  background: linear-gradient(180deg, #f8f7fd 0%, var(--navy-soft) 100%);
  border-bottom: 1px solid #e6e1fa;
}

.ss-table tbody tr {
  position: relative;
}

.ss-table tbody tr:hover {
  background: linear-gradient(90deg, #faf9ff 0%, #f5f3fc 100%);
}

.ss-table tbody tr:hover td:first-child::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
}

/* ---- Glassy row-action buttons ---- */
.ss-table tbody .btn-sm {
  backdrop-filter: blur(6px) saturate(160%);
  -webkit-backdrop-filter: blur(6px) saturate(160%);
  box-shadow: 0 2px 8px rgba(30, 26, 77, .07), inset 0 1px 0 rgba(255, 255, 255, .6);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}

.ss-table tbody .btn-sm:hover {
  transform: translateY(-1px);
}

.ss-table tbody .btn-outline-navy.btn-sm {
  background: rgba(46, 49, 146, .08);
  border-color: rgba(46, 49, 146, .22);
  color: var(--navy);
}

.ss-table tbody .btn-outline-navy.btn-sm:hover {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  border-color: var(--navy);
  color: #fff;
  box-shadow: 0 8px 18px rgba(30, 26, 77, .28), inset 0 1px 0 rgba(255, 255, 255, .15);
}

.ss-table tbody .btn-outline-danger.btn-sm {
  background: rgba(220, 53, 69, .08);
  border-color: rgba(220, 53, 69, .25);
  color: #c0392b;
}

.ss-table tbody .btn-outline-danger.btn-sm:hover {
  background: linear-gradient(135deg, #dc3545 0%, #c0392b 100%);
  border-color: #c0392b;
  color: #fff;
  box-shadow: 0 8px 18px rgba(220, 53, 69, .28), inset 0 1px 0 rgba(255, 255, 255, .15);
}

.ss-table tbody .btn-outline-success.btn-sm {
  background: rgba(31, 138, 69, .08);
  border-color: rgba(31, 138, 69, .25);
  color: #1f8a45;
}

.ss-table tbody .btn-outline-success.btn-sm:hover {
  background: linear-gradient(135deg, #28a745 0%, #1f8a45 100%);
  border-color: #1f8a45;
  color: #fff;
  box-shadow: 0 8px 18px rgba(31, 138, 69, .28), inset 0 1px 0 rgba(255, 255, 255, .15);
}

/* Icon-only row action buttons — a fixed square size keeps every row's
   action cell the same height/width regardless of how many buttons a
   given row has (text buttons of varying widths wrapped unevenly). */
.ss-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.ss-row-actions .btn-sm {
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ss-row-actions .btn-sm i {
  font-size: .85rem;
}

/* Landing-page announcement rows: order number + icon merged into one
   compact badge instead of two separately-padded table cells, which is
   what made the gap between them read as a layout bug. */
.ss-order-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ss-order-icon {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(244, 123, 32, .25);
}

.ss-order-num {
  color: #9b96b8;
  font-weight: 700;
  font-size: .78rem;
  min-width: 14px;
  text-align: center;
}

/* Row-divider-free variant — used on Guidelines, Circular/Announcement and
   Landing Page Announcements, where rows read cleaner without a line
   between them. */
.ss-table-flush tbody td {
  border-bottom-width: 0;
}

/* Top-aligned variant — used where a row's cells commonly wrap to
   different numbers of lines (e.g. a two-line Name next to a two-line
   Contact next to single-line Program/Received), where the default
   vertical-align: middle makes short cells look off-center relative to
   their taller neighbors. */
.ss-table-top tbody td {
  vertical-align: top;
}

/* line-clamp on a <td> itself is unreliable — table cells keep their own
   internal layout algorithm in most engines and largely ignore a
   display: -webkit-box override. Clamping an ordinary block-level <div>
   nested inside the cell instead works consistently. */
.ss-announce-cell {
  max-width: 340px;
}

.ss-announce-msg {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.45;
  max-height: 2.9em;
}

/* A status pill that's also a submit button (toggle active/hidden) —
   resets default button chrome so it reads as a badge, not a button. */
.ss-badge-btn {
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
  transition: transform .15s ease, box-shadow .15s ease;
}

.ss-badge-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(30, 26, 77, .12);
}

/* ============ Lighter type weight for Poppins ============
   Poppins reads visibly heavier than the previous fonts (Manrope/Playfair
   Display) at the same numeric weight, so what looked like normal emphasis
   before now reads as too bold. Bootstrap's .fw-bold utility ships with
   !important, so the override needs it too. */
.ss-body .fw-bold {
  font-weight: 500 !important;
}