/* ==========================================================
   RAW Student Manager — Premium Frontend Styles
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@400;500;600;700;800&display=swap');

* { box-sizing: border-box; }

:root {
  --raw-red: #d62828;
  --raw-red-dark: #b71c1c;
  --raw-navy: #1f2a44;
  --raw-navy-dark: #101828;
  --raw-fade: #fff8f8;
}

/* ---------- Registration Form ---------- */
.raw-sm-form-wrap {
  max-width: 920px;
  margin: 40px auto;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(16,24,40,.10);
  font-family: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif;
}
.raw-sm-header {
  background: linear-gradient(135deg, var(--raw-navy-dark), var(--raw-red-dark), var(--raw-red));
  color: #fff;
  padding: 32px;
}
.raw-sm-header h2 { margin: 0 0 6px; font-size: 26px; letter-spacing: .3px; }
.raw-sm-header span { font-size: 13px; opacity: .85; }

#raw-sm-reg-form { padding: 0 28px 30px; }

.raw-sm-section {
  color: #000;
  margin: 30px 0 30px 0;
  font-size: 14px;
  letter-spacing: .5px;
  
}
.raw-sm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.field.full { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: 13px; display: block; margin-bottom: 6px; color: #333; }
.req { color: var(--raw-red); }
.field input, .field select {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid #e7e7ea;
  border-radius: 8px;
  font-size: 14px;
  background: var(--raw-fade);
  transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--raw-red);
  box-shadow: 0 0 0 3px rgba(214,40,40,.10);
  background: #fff;
}
.field small { color: #999; font-size: 12px; display: block; margin-top: 4px; }

.chk { display: flex; gap: 8px; align-items: flex-start; padding: 0 28px; margin: 12px 0; font-size: 14px; color: #444; }
.chk.small { align-items: center; }
.chk input { margin-top: 3px; accent-color: var(--raw-red); }

.raw-sm-info {
  background: linear-gradient(135deg, var(--raw-fade), #fff);
  border: 1px solid #fbdada;
  padding: 18px 22px;
  margin: 0 28px;
  border-radius: 10px;
  font-size: 14px;
}
.raw-sm-info p { margin: 6px 0; color: #444; }

.raw-sm-declare { padding: 0 28px; }

.raw-sm-msg { margin: 10px 28px; font-size: 14px; }
.raw-sm-msg.error { color: var(--raw-red); }
.raw-sm-msg.success { color: #1a7a3c; }

/* Enroll button (registration form) — matches theme's own
   .raw-submit / #enrollBtn styling from rawacademy.in/enrollment/ */
.raw-submit {
  text-align: center;
  margin-bottom: 40px;
  margin-top: 40px;
}
#enrollBtn {
  background: linear-gradient(135deg, var(--raw-red), var(--raw-red-dark));
  color: #fff;
  border: none;
  padding: 15px 50px;
  font-size: 18px;
  font-weight: 600;
  border-radius: 50px;
  cursor: pointer;
  transition: .35s;
  letter-spacing: 1px;
  box-shadow: 0 15px 30px rgba(214,40,40,.30);
}
#enrollBtn:hover {
  transform: translateY(-4px);
  background: linear-gradient(135deg, var(--raw-navy), var(--raw-navy-dark));
  box-shadow: 0 22px 40px rgba(16,24,40,.35);
}
#enrollBtn:active { transform: scale(.98); }

/* Every OTHER submit button (login, forgot-password send, dashboard
   pay-continue) — stretched full-width, premium gradient + navy hover */
.raw-sm-submit {
  position: relative;
  display: block;
  width: 100%;
  margin: 24px 0 0;
  background: #141c2f !important;
  color: #fff !important;
  border-color: #141c2f !important;
  padding: 15px 20px;
  border-radius: 12px !important;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .4px;
  cursor: pointer;
  transition: transform .3s ease, box-shadow .3s ease;
  box-shadow: 0 10px 24px rgba(20,28,47,.25);
  overflow: hidden;
  z-index: 0;
}
.raw-sm-submit::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #b91d1d;
  opacity: 0;
  transition: opacity .3s ease;
  z-index: -1;
  border-color: #b91d1d !important;
}
.raw-sm-submit:hover {
  color: #fff;
  transform: translateY(-2px);
  border-color: #b91d1d !important;
  
}
.raw-sm-submit:hover::after {
  opacity: 1;
}
.raw-sm-submit:active { transform: scale(.98); }
.raw-sm-goto-classes {
  color: #fff !important;
}

.raw-sm-success-box { text-align: center; }
.raw-sm-success-text {
  color: #1a7a3c;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 20px;
}
.raw-sm-btn-outline {
  background: #fff !important;
  border: 1.5px solid #cc0606 !important;
  color: #cc0606 !important;
  padding: 12px 24px !important;
  border-radius: 12px !important;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  cursor: pointer;
  transition: all .25s;
}
.raw-sm-btn-outline:hover,
.raw-sm-btn-outline:active {
  background: #cc0606 !important;
  border-color: #cc0606 !important;
  color: #fff !important;
}

/* ---------- Login ---------- */
.raw-sm-login-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80vh;
  padding: 150px 16px 60px 16px;
  background: #f4f5f8;
}
.raw-sm-login-card {
  display: flex;
  align-items: stretch;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  width: 100%;
  max-width: 960px;
  min-height: 520px;
  box-shadow: 0 30px 70px rgba(16,24,40,.12);
  font-family: 'Lexend Deca', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Left: decorative info panel */
.raw-sm-login-aside {
  flex: 0 0 42%;
  background: linear-gradient(160deg, var(--raw-navy-dark), var(--raw-navy));
  color: #fff;
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.raw-sm-login-aside h2 {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 18px;
  letter-spacing: .2px;
}
.raw-sm-login-aside p {
  font-size: 14.5px;
  line-height: 1.6;
  color: #cbd2e1;
  margin: 0 0 26px;
}
.raw-sm-login-perks {
  list-style: none;
  margin: 0;
  padding: 0;
}
.raw-sm-login-perks li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 14px;
  font-size: 14.5px;
  font-weight: 500;
  color: #fff;
}
.raw-sm-login-perks li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: #3ddc84;
  font-weight: 700;
}

/* Right: form panel */
.raw-sm-login-main {
  flex: 1;
  padding: 48px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.raw-sm-login-main h2 {
  margin: 0 0 6px;
  color: var(--raw-navy-dark);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .2px;
}
.raw-sm-login-subtitle {
  margin: 0 0 28px;
  color: #8a90a2;
  font-size: 14px;
}
.raw-sm-login-main .field { margin-bottom: 18px; }
.raw-sm-login-main .field label {
  font-weight: 600;
  font-size: 12px;
  color: #333;
  display: block;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.raw-sm-login-main input[type="email"],
.raw-sm-login-main input[type="password"] {
  width: 100%;
  padding: 13px 14px;
  border: 1.5px solid #dddddd;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: #e8f0fe;
  transition: border-color .2s, box-shadow .2s;
}
.raw-sm-login-main input:focus {
  outline: none;
  border-color: var(--raw-red);
  box-shadow: 0 0 0 3px rgba(214,40,40,.10);
  background: #fff;
}
.pw-wrap { position: relative; }
.pw-eye { position: absolute; right: 14px; top: 22px; cursor: pointer; user-select: none; font-size: 15px; }

.raw-sm-keep-signed-in { padding: 0; margin: 4px 0 4px; }
.raw-sm-keep-signed-in label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #444; cursor: pointer; }
.raw-sm-keep-signed-in input { accent-color: var(--raw-navy-dark); }

.raw-sm-login-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.raw-sm-login-form {
    width: 70%;
}
.raw-sm-login-actions .raw-sm-submit { margin: 0; flex: 1; }
.raw-sm-btn-register {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--raw-navy), var(--raw-navy-dark));
  color: #fff;
  border: none;
  padding: 15px 20px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .4px;
  text-decoration: none;
  transition: transform .5s ease, box-shadow .5s ease;
  box-shadow: 0 10px 24px rgba(16,24,40,.20);
  overflow: hidden;
  z-index: 0;
}
.raw-sm-btn-register::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  transition: opacity .5s ease;
  z-index: -1;
}
.raw-sm-btn-register:hover {
  transform: translateY(-2px);
  color: #fff;
}
.raw-sm-btn-register:hover::after {
  opacity: 1;
}

.signup-line { text-align: center; font-size: 13.5px; margin-top: 22px; }
.signup-line a { color: #8a90a2; font-weight: 600; text-decoration: none; }
.signup-line a:hover { color: var(--raw-red); }

@media (max-width: 760px) {
  .raw-sm-login-card { flex-direction: column; max-width: 460px; }
  .raw-sm-login-aside { flex: none; padding: 36px 32px; }
  .raw-sm-login-main { padding: 36px 32px; }
}

.raw-sm-modal {
  display: none;
  position: fixed; inset: 0;
  background: rgba(16,24,40,.55);
  z-index: 999;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(3px);
}
.raw-sm-modal.open { display: flex; }
.raw-sm-modal-box {
  background: #fff;
  padding: 32px;
  border-radius: 16px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 30px 70px rgba(0,0,0,.25);
}
.raw-sm-modal-box h3 { color: var(--raw-navy-dark); margin-top: 0; }
.raw-sm-modal-box input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid #e7e7ea;
  border-radius: 8px;
  margin: 14px 0;
  background: var(--raw-fade);
}
.raw-sm-modal-divider { border-top: 1px solid #eee; margin: 18px 0 4px; }
.raw-sm-modal-subheading { font-size: 14px; font-weight: 700; color: var(--raw-navy-dark); margin: 14px 0 4px; }
.raw-sm-modal-hint { font-size: 12px; color: #999; margin: -6px 0 0; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }
.modal-actions .raw-sm-submit,
.modal-actions .raw-sm-btn-outline {
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: normal !important;
  margin: 0 !important;
  box-sizing: border-box;
}
.raw-sm-cash-box { text-align: center; }
.raw-sm-cash-icon { font-size: 40px; margin-bottom: 8px; }
.raw-sm-cash-box h3 { margin-bottom: 6px; }
.raw-sm-cash-box p { color: #555; margin: 0; }

/* ---------- Dashboard ---------- */
.raw-sm-dash {
  display: flex;
  height: 100vh;
  overflow: hidden;
  font-family: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif;
  background: linear-gradient(160deg, #f6f7fb, #f0f1f6);
}
.raw-sm-sidebar {
  width: 300px;
  flex-shrink: 0;
  background: #fff;
  text-align: center;
  border-right: none;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 4px 0 24px rgba(0,0,0,.25);
}

/* When viewing as a logged-in WP admin, the "Howdy, admin" toolbar adds
   32px (46px on small screens) on top of the page. Without this, our
   100vh layout runs 32px past the visible viewport and the WHOLE page
   scrolls. Shrink to match so only the sidebar/main scroll internally. */
body.admin-bar .raw-sm-dash,
body.admin-bar .raw-sm-sidebar {
  height: calc(100vh - 32px);
}

.sidebar-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 30px;
}
.avatar { display: block; width: 90px; height: 90px; margin: 0 auto; border-radius: 50%; border: 3px solid var(--raw-red); object-fit: cover; }
.raw-sm-sidebar h4 { margin: 14px 0 2px; color: #000; }
.course-tag { font-size: 13px; color: #9aa4bb; }
.student-id-tag { display: none; font-size: 11px; color: #7b859c; }
.raw-sm-sidebar nav { padding: 40px 25px 15px 25px; text-align: left; flex: 1; min-height: 0; overflow-y: auto; border-top: 1px solid #eeeeee !important;
  border-bottom: 1px solid #eeeeee !important;}
.nav-item {
  display: block;
  padding: 12px 14px;
  border-radius: 10px;
  color: #374151 !important;
  text-decoration: none;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 700;
  border-left: 3px solid transparent;
  transition: all .2s;
}
.nav-icon { margin-right: 8px; font-size: 17px; vertical-align: -3px; color: #374151 !important;}
.nav-item.active, .nav-item:hover{
  background: linear-gradient(135deg, #dc2626, #ef4444);
  border-left-color: var(--raw-red);
  color: #fff !important;
  font-weight: 700;
  transform: translateX(4px);
}
.nav-item.active .nav-icon, .nav-item:hover .nav-icon {
  color: #fff !important;
}
.raw-sm-sidebar nav.is-locked .nav-item:not(.active) {
  opacity: .4;
  pointer-events: none;
}
.raw-sm-sidebar nav.is-blocked .nav-item.nav-disabled {
  opacity: .4;
  pointer-events: none;
}
.raw-sm-blocked-notice {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #2b2b2b;
  color: #fff;
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 20px;
}
.raw-sm-blocked-notice .lock-icon { font-size: 26px; line-height: 1; }
.raw-sm-blocked-notice strong { display: block; margin-bottom: 4px; }
.raw-sm-blocked-notice p { margin: 0; font-size: 13px; color: #ddd; }
.btn-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #dc2626;
    color: #fff;
    padding: 13px;
    border-radius: 10px;
    text-decoration: none;
    text-align: center;
    font-weight: 700;
    transition: all .3s;
    box-shadow: 0 8px 18px rgba(214,40,40,.25);
    margin: 25px;
}

.btn-logout i {
    color: #fff !important;
    font-size: 20px;
    line-height: 1;
}

.btn-logout:hover {
    background: #b91c1c;
    color: #fff;
}

.raw-sm-main { flex: 1; overflow-y: auto; max-height: 100vh; padding: 50px 80px 50px 120px; background-color: #fff;}
.raw-sm-main-inner {padding: 30px; background-color: #f4f7fb; border-radius: 22px;}
.raw-sm-card {
    padding: 22px;
    border-radius: 18px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .08);
    background: #fff;
    margin-bottom: 30px;
}
.raw-sm-card .raw-sm-lockcard {
  background: #fff;
  border-radius: 16px;
  padding: 26px;
  margin-bottom: 22px;
  box-shadow: 0 10px 30px rgba(16,24,40,.05);
}
.raw-sm-card h3 {
  color: var(--raw-navy-dark);
  margin-top: 0;
  padding-bottom:7px;
  margin-bottom: 18px;
  border-bottom: 3px solid var(--raw-red);
  display: inline-block;
  font-size: 20px;
  font-weight: 800;
}
.raw-sm-section > h3:first-child {
  color: var(--raw-navy-dark);
  margin-top: 0;
  padding-bottom:7px;
  margin-bottom: 18px;
  border-bottom: 3px solid var(--raw-red);
  display: inline-block;
  font-size: 20px;
  font-weight: 800;
}
.raw-sm-live-col h3 {
  color: var(--raw-navy-dark);
  margin-top: 0;
  padding-bottom:5px;
  margin-bottom: 18px;
  border-bottom: 3px solid var(--raw-red);
  display: inline-block;
  font-size: 20px;
  font-weight: 800;
}
#section-classes > h3 {
  color: var(--raw-navy-dark);
  margin-top: 0;
  padding-bottom:5px;
  margin-bottom: 18px;
  border-bottom: 3px solid var(--raw-red);
  display: inline-block;
  font-size: 20px;
  font-weight: 800;
}
.raw-sm-greet { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding: 15px 22px 15px 22px; background-color: #fff; box-shadow: 0 8px 25px rgba(0, 0, 0, .05); border-radius: 18px;}
.greet-tag-date {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;

}
.greet-tag { color: var(--raw-red); font-weight: 700; font-size: 12px; letter-spacing: 1px; text-transform: uppercase;}
.raw-sm-greet h2 { margin: 6px 0; color: #101828; font-size: 28px; font-weight: 700;}
.date { color: #827378; font-size: 13px; font-weight: 500;}
.greet-right { display: flex; align-items: center; gap: 16px; }
.bell { position: relative; font-size: 20px; color: var(--raw-red); }
.badge {
  position: absolute; top: -4px; right: -6px;
  width: 9px; height: 9px; padding: 0;
  background: var(--raw-red); color: transparent; font-size: 0;
  border-radius: 50%; border: 2px solid #fff;
}
.profile-mini { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.profile-mini img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--raw-red); }
.profile-mini strong { color: #101828; }
.profile-mini small { color: #888; }

.raw-sm-lockcard {
  text-align: center;
  background: #fff3cd;
  border: 1px solid #ffe69c;
  border-radius: 18px;
  padding: 25px;
  margin-bottom: 25px;
}
.lock-icon { font-size: 36px; }
.progress-bar { background: #eee; border-radius: 20px; height: 10px; margin: 16px 0 8px; overflow: hidden; }
.progress-bar .fill { background: linear-gradient(90deg, var(--raw-red), var(--raw-red-dark)); height: 100%; transition: width .3s; }
.progress-label { font-size: 13px; color: #666; }

.raw-sm-table { width: 70%; border-collapse: collapse; border: 1px solid #d7d9dc; }
.raw-sm-table th, .raw-sm-table td { padding: 10px 16px; text-align: left; font-size: 14px; }
.raw-sm-table th { color: #101828; width: 40%; font-weight: 700; }
.raw-sm-table tr:nth-child(odd) { background: #fff; }
.raw-sm-table tr:nth-child(even) { background: #f7f8f9; }

.raw-sm-table tr:hover,
.raw-sm-table tr:hover td,
.raw-sm-table tr:hover th {
  background: inherit;
}

.pill { padding: 4px 12px; font-size: 12px; font-weight: 700; border-radius: 3px;}
.pill-pending { background: #fdecec; color: var(--raw-red); }
.pill-partial { background: #fff4d6; color: #b8860b; }
.pill-paid { background: #d3f5db; color: #137d41; border: 1px solid #9ad2ae; }


.raw-sm-fullaccess-card {
  background: linear-gradient(135deg, #7f1d1d 0%, #b91c1c 20%, #dc2626 55%, #ef4444 100%);
  border: none;
  padding: 25px;
  margin-top: 60px;
  width: 100%;
}
.raw-sm-fullaccess-card h3 {
  color: #fff;
  border-bottom: none;
  margin-bottom: 8px;
  font-size: 18px;
}
.raw-sm-fullaccess-card p {
  color: #fff;
  margin: 0;
  font-size: 16px;
}

.raw-sm-coupon-apply-row { display: flex; gap: 10px; }
.raw-sm-coupon-apply-row input {
  flex: 1;
  padding: 10px 14px;
  border: 1.5px solid #e7e7ea;
  border-radius: 8px;
  background: var(--raw-fade);
}
.raw-sm-fee-note .progress-label { color: var(--raw-navy-dark); font-weight: 600; }

.pay-options { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.pay-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 16px; border: 1.5px solid #eee; border-radius: 12px;
  cursor: pointer; transition: all .25s; background: var(--raw-fade);
}
.pay-opt:hover { border-color: var(--raw-red); background: #fff; box-shadow: 0 6px 16px rgba(214,40,40,.08); }

/* Coupon box revealed inline once "Pay Online" is selected */
.raw-sm-coupon-inline {
  margin: -2px 6px 2px;
  padding: 16px;
  border: 1.5px dashed #e7c2c2;
  border-radius: 12px;
  background: #fffaf9;
}
.raw-sm-coupon-inline h4 { margin: 0 0 10px; font-size: 14px; color: var(--raw-navy-dark); }

/* Tablet: sidebar still shows (only collapses below 768px), just widen the card */
/* Tablet: sidebar still shows (only collapses below 768px), just widen the card */
@media (min-width: 769px) and (max-width: 1024px) {
  .raw-sm-fullaccess-card { width: 85%; margin-top: 30px; }
  .raw-sm-table { width: 85%;}

  .sidebar-profile {
    flex-direction: row;
    align-items: center;
    text-align: left;
  }
  .sidebar-id-text {
    text-align: left;
  }
  .avatar {
    margin: 0;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .raw-sm-dash { flex-direction: column; height: auto; overflow: visible; }
  body.admin-bar .raw-sm-dash,
  body.admin-bar .raw-sm-sidebar { height: auto; }
  .greet-tag,
  .raw-sm-greet h2,
  .greet-right {
    display: none;
  }
  .raw-sm-main {
      padding: 10px;
  }
  .student-id-tag{
      display: none;
  }
  .raw-sm-main-inner {
      padding: 10px;
  }
  /* Sidebar becomes a compact top bar: profile (left) + logout (right)
     on row 1, and the nav collapses into an equal-width icon strip on row 2. */
  .raw-sm-sidebar {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "profile logout"
      "nav     nav";
    align-items: center;
    gap: 4px 14px;
    width: 100%;
    height: auto;
    position: relative;
    text-align: left;
    padding: 0;
  }

  .sidebar-profile {
    grid-area: profile;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    padding: 10px 20px;
  }
  .avatar { width: 44px; height: 44px; margin: 0; flex-shrink: 0; }
  .sidebar-id-text { text-align: left; min-width: 0; color: #000; }
  .sidebar-id-text h4 { margin: 0; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #000;}
  .sidebar-id-text .course-tag,
  .sidebar-id-text .student-id-tag { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #6b7280;}
  .sidebar-id-text .student-id-tag { font-size: 11px; color: #aaa; }

  .btn-logout {
    grid-area: logout;
    display: inline-flex;
    align-items: center;
    width: auto;
    padding: 8px 14px;
    margin-right: 10px;
    box-shadow: none;
  }

  .raw-sm-sidebar nav {
    grid-area: nav;
    display: flex;
    flex-direction: row;
    margin-top: 0;
    gap: 4px;
    text-align: center;
    background-color: #fff;
    padding: 10px 15px;
  }
  .raw-sm-sidebar nav .nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 2px;
    margin-bottom: 0;
    text-align: center;
  }
  .nav-item.active, .nav-item:hover {
    background: linear-gradient(135deg, #dc2626, #ef4444);
    border-left-color: var(--raw-red);
}
  .nav-icon { font-size: 18px; margin-right: 0;}
  .nav-label { display: none; }

  .raw-sm-main { max-height: none;}
  .raw-sm-grid { grid-template-columns: 1fr; }
  #raw-sm-reg-form { padding: 0 18px 24px; }
  .raw-sm-greet { flex-direction: row; align-items: center; }
  .raw-sm-greet h2 { font-size: 22px; }
  .raw-sm-login-card { padding: 32px 24px; }
  .raw-sm-fullaccess-card { width: 100%; margin-top: 30px; }
  .raw-sm-table { width: 100%; }
}

/* Phone: drop the name/course/ID text next to the avatar — icon only */
@media (max-width: 480px) {
  .sidebar-id-text h4 { display: none; }
}