/* ═══════════════════════════════════════════════════════════════════
   APLUS PLUS CRM — DASHBOARD/HOME REDESIGN (UI/UX only)
   Loaded LAST (styles.css → custom.css → sidebar-redesign.css →
   typography-bump.css) so these overrides win.

   PURPOSE: the index.php markup was already restructured into
   independent sections:

       .dashboard-v2
         section.welcome-banner
         section.stats-grid   (5 × .stat-card)
         section.attendance-card
         section.dashboard-two-column
         (email reminders)
         (quick alerts)

   This sheet makes each section its own visual card with visible
   page-background gaps between them. NO outer white container.
   ZERO PHP / SQL / AJAX / logic / permission / data changes.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 0. PAGE CANVAS ─────────────────────────────────────────────────── */
body {
  background: #F7F9FC;
}

/* the dashboard column is a TRANSPARENT layout container */
.dashboard-v2 {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;               /* 16px page-background gap between sections */
}

/* ═══ 0. TOP HEADER — 66px, 280×40 search (spec §3) ═══ */
.app-header {
  min-height: 66px;
}
.app-header-inner {
  min-height: 66px;
  width: 100%;
}

/* main content width + padding (spec §10)
   NOTE: the page already offsets .app-wrapper via
   `margin-left: var(--app-menubar-tabs)` (sidebar-redesign.css), so we
   must NOT hard-code a width here or content overflows. We only set
   the content padding and let the shared sidebar variable drive width. */
.app-wrapper > .container-fluid {
  padding-left: 20px;
  padding-right: 24px;
  padding-top: 20px;
  padding-bottom: 30px;
  max-width: none;
}

/* no section is allowed to inherit a card look from a generic rule */
.dashboard-v2 .card {
  border: 1px solid #E7EBF2;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(20,40,80,0.04);
  background: #FFFFFF;
}

/* ═══ 1. WELCOME BANNER — 130px lavender hero (spec §5) ═══ */
.dashboard-v2 .welcome-banner {
  background: #EEF1FF;
  border: 1px solid #E0E5FF;
  border-radius: 16px;
  box-shadow: none;
  width: 100%;
  min-height: 130px;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
}
.dashboard-v2 .welcome-banner .card-body {
  width: 100%;
  padding: 22px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.dashboard-v2 .welcome-banner .welcome-greeting {
  font-size: 18px;
  font-weight: 600;
  color: #4F46D8;
  margin-bottom: 2px;
  line-height: 1.2;
}
.dashboard-v2 .welcome-banner h4 {
  font-size: 28px;
  font-weight: 700;
  color: #123B68;
  margin-bottom: 4px;
  line-height: 1.15;
}
.dashboard-v2 .welcome-banner small {
  font-size: 13px;
  color: #5B6B8C;
}
/* center education illustration — banner image */
.dashboard-v2 .welcome-banner .welcome-illustration {
  flex: 1 1 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 100%;
}
.dashboard-v2 .welcome-banner .welcome-illustration .wi-banner-img {
  max-width: 100%;
  max-height: 100px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.dashboard-v2 .welcome-banner .welcome-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.dashboard-v2 .welcome-banner .btn {
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 13.5px;
  font-weight: 600;
}
.dashboard-v2 .welcome-banner .welcome-actions .btn-light {
  --bs-btn-color: #E11D48;
  --bs-btn-bg: #FFF0F3;
  --bs-btn-border-color: #F7C6D0;
  --bs-btn-hover-color: #BE123C;
  --bs-btn-hover-bg: #FFE3EA;
  --bs-btn-hover-border-color: #F3AEBB;
  --bs-btn-active-color: #BE123C;
  --bs-btn-active-bg: #FFE3EA;
  --bs-btn-active-border-color: #F3AEBB;
  --bs-btn-focus-shadow-rgb: 225, 29, 72;
  background-color: #FFF0F3 !important;
  border-color: #F7C6D0 !important;
  color: #E11D48 !important;
}
.dashboard-v2 .welcome-banner .welcome-actions .btn-light:hover,
.dashboard-v2 .welcome-banner .welcome-actions .btn-light:focus,
.dashboard-v2 .welcome-banner .welcome-actions .btn-light:active {
  background-color: #FFE3EA !important;
  border-color: #F3AEBB !important;
  color: #BE123C !important;
}

/* ═══ 2. STATS — 5 cards, 200px, white, icon / value / label / meta / area chart ═══ */
.dashboard-v2 .stats-grid {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.dashboard-v2 .stats-grid .statistics-grid {
  display: contents;      /* old bootstrap .row becomes a pass-through */
}
.dashboard-v2 .stats-grid .stat-card-wrap {
  padding: 0;
  min-width: 0;
  width: 100%;
}
.dashboard-v2 .stat-card {
  background: #FFFFFF !important;
  border: 1px solid #E6EAF2;
  border-radius: 14px !important;
  box-shadow: 0 3px 12px rgba(20,40,80,0.05);
  width: 100%;
  height: 200px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.dashboard-v2 .stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(20,40,80,0.09);
}
/* ICON + TEXT SIDE BY SIDE */
.dashboard-v2 .stat-card .stat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
}
.dashboard-v2 .stat-card .stat-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* 1. ICON — 50px accent circle, left of the text */
.dashboard-v2 .stat-icon {
  width: 50px !important;
  height: 50px !important;
  flex: 0 0 auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
}
.dashboard-v2 .stat-icon i { font-size: 1.4rem !important; line-height: 1; }
/* 2. VALUE — 29px / 700, accent colour (set inline per card) */
.dashboard-v2 .stat-card .stat-value {
  font-size: 29px !important;
  font-weight: 700 !important;
  line-height: 1.1;
  margin: 0 !important;
}
/* 3. LABEL — 13.5px / 500 */
.dashboard-v2 .stat-card .stat-label {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  letter-spacing: .03em;
  color: #52627A !important;
  margin-top: 3px;
  display: block;
  line-height: 1.25;
}
/* 4. (no trend / meta row) */
/* 5. (no chart — area charts removed by request) */

/* ═══ 2b. STAT CARD BACKGROUNDS — tinted gradient per accent ═══
   Each card publishes its own accent colour as custom properties, and the
   background, border, glow blob and base bar are all derived from those.
   That keeps index.php free of markup changes (the accent colours already
   exist there as inline styles on .stat-icon / .stat-value) and means a
   card's whole look still only has to be edited in one place.

   --ac      the accent hex (base bar, glow)
   --ac-rgb  the same colour as "R,G,B" so we can vary opacity (rgba())
   --ac-soft the pale tint already used behind the icon in index.php
   ═══════════════════════════════════════════════════════════════ */
.dashboard-v2 .stats-grid .stat-card-wrap:nth-child(1) { --ac:#4F46D8; --ac-rgb:79,70,216;  --ac-soft:#EEF0FF; }
.dashboard-v2 .stats-grid .stat-card-wrap:nth-child(2) { --ac:#16A34A; --ac-rgb:22,163,74;  --ac-soft:#EAF9F1; }
.dashboard-v2 .stats-grid .stat-card-wrap:nth-child(3) { --ac:#F59E0B; --ac-rgb:245,158,11;  --ac-soft:#FFF4DE; }
.dashboard-v2 .stats-grid .stat-card-wrap:nth-child(4) { --ac:#7C3AED; --ac-rgb:124,58,237;  --ac-soft:#F1EAFE; }
.dashboard-v2 .stats-grid .stat-card-wrap:nth-child(5) { --ac:#EF4444; --ac-rgb:239,68,68;   --ac-soft:#FDECEF; }

/* The card itself: diagonal tint fading to white, plus a soft accent wash
   bleeding in from the top-right corner. Both stay very light so the
   accent-coloured .stat-value keeps its contrast. */
.dashboard-v2 .stat-card {
  background:
    radial-gradient(115% 95% at 108% -8%, rgba(var(--ac-rgb),.13) 0%, rgba(var(--ac-rgb),0) 60%),
    linear-gradient(158deg, var(--ac-soft) 0%, #FFFFFF 62%) !important;
  /* index.php marks the card `border-0`, whose Bootstrap rule is
     `border:0!important` and so outranks a plain `border-color`. The
     width has to be restated here for the accent border to be visible. */
  border: 1px solid rgba(var(--ac-rgb),.16) !important;
}

/* soft glow disc in the corner — clipped by the card's overflow:hidden */
.dashboard-v2 .stat-card::before {
  content: "";
  position: absolute;
  top: -46px;
  right: -46px;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(var(--ac-rgb),.16) 0%,
    rgba(var(--ac-rgb),.07) 45%,
    rgba(var(--ac-rgb),0) 72%);
  pointer-events: none;
  transition: transform .25s ease;
}

/* thin accent bar along the bottom edge */
.dashboard-v2 .stat-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg,
    rgba(var(--ac-rgb),0) 0%,
    var(--ac) 55%,
    rgba(var(--ac-rgb),0) 100%);
  opacity: .85;
  pointer-events: none;
}

/* content sits above the decoration */
.dashboard-v2 .stat-card .stat-head {
  position: relative;
  z-index: 1;
}

/* the icon circle is the same tint as the card's corner, so give it a white
   ring to lift it off the background */
.dashboard-v2 .stat-card .stat-icon {
  box-shadow: 0 0 0 4px rgba(255,255,255,.85) !important;
}

.dashboard-v2 .stat-card:hover {
  border-color: rgba(var(--ac-rgb),.32) !important;
  box-shadow: 0 10px 26px rgba(20,40,80,.10);
}
.dashboard-v2 .stat-card:hover::before {
  transform: scale(1.07);
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-v2 .stat-card,
  .dashboard-v2 .stat-card::before {
    transition: none;
  }
  .dashboard-v2 .stat-card:hover,
  .dashboard-v2 .stat-card:hover::before {
    transform: none;
  }
}

/* ═══ 3. ATTENDANCE — its own card, 4 horizontal status tiles (§6/§7) ═══ */
.dashboard-v2 .attendance-card {
  background: #FFFFFF;
  border: 1px solid #E7EBF2;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(20,40,80,0.04);
  padding: 16px;
}
.dashboard-v2 .attendance-card .card-body {
  padding: 0;
}
.dashboard-v2 .attendance-card .row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 0 !important;
}
.dashboard-v2 .attendance-card .row > div {
  padding: 0;
  max-width: none;
  width: auto;
}
.dashboard-v2 .attendance-card .row .card {
  height: 82px;
  border: none;
  border-radius: 12px;
  box-shadow: none;
}
.dashboard-v2 .attendance-card .row .card-body {
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.dashboard-v2 .attendance-card .row .rounded-circle {
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 auto;
}
.dashboard-v2 .attendance-card .row h4 {
  font-size: 20px;
  line-height: 1.1;
}
.dashboard-v2 .attendance-card .row small {
  font-size: 10px;
  letter-spacing: .05em;
}
.dashboard-v2 .attendance-card .text-end.mt-1 {
  margin-top: 6px !important;
}

/* ═══ 4. TODAY'S CLASSES 2fr + ANNOUNCEMENTS 1fr (spec §12) ═══ */
.dashboard-v2 .dashboard-two-column {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
.dashboard-v2 .dashboard-two-column > .row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 14px;
  align-items: stretch;
}
.dashboard-v2 .dashboard-two-column > .row > .col-lg-8,
.dashboard-v2 .dashboard-two-column > .row > .col-lg-4 {
  padding: 0;
  width: auto;
  max-width: none;
  flex: none;
  display: flex;
}
.dashboard-v2 .dashboard-two-column .card {
  height: 300px;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid #F7DCE3;
  border-radius: 14px;
  background: #FFF0F3;
}
.dashboard-v2 .dashboard-two-column .card > .card-header {
  flex: 0 0 auto;
  background: #FFE3EA !important;
  border-bottom: 1px solid #F7DCE3;
}
.dashboard-v2 .dashboard-two-column .card > .card-body {
  flex: 1 1 auto;
  overflow-y: auto;
}
/* rows inside the tinted cards pick up the same pink separator */
.dashboard-v2 .dashboard-two-column .card > .card-body > .border-bottom {
  border-bottom-color: #F7DCE3 !important;
}
.dashboard-v2 .dashboard-two-column .class-item:hover {
  background: #FFE8EE;
}

/* empty state vertically centered */
.dashboard-v2 .dashboard-two-column .card > .card-body > .text-center.py-5,
.dashboard-v2 .dashboard-two-column .card .text-center.py-4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0;
  padding: 20px;
}

/* ═══ 5. EMAIL REMINDERS — own full-width card (spec §18) ═══ */
.dashboard-v2 .reminders-card {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
.dashboard-v2 .reminders-card > .row {
  display: block;
}

/* ═══ 6. QUICK ALERTS — 2-column grid (§15) ═══ */
.dashboard-v2 .quick-alerts-card {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
.dashboard-v2 .quick-alerts-card > .row {
  display: block;
}
.dashboard-v2 .quick-alerts-card .col-12 {
  padding: 0;
}
.dashboard-v2 .quick-alerts-card .card {
  border: 1px solid #E7EBF2;
  border-radius: 14px;
}
.dashboard-v2 .quick-alerts-card .card > .card-body {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 14px;
}

/* ── Alert row ───────────────────────────────────────────────────────
   Each alert is one horizontal band: icon | text | amount | action.
   The old version stacked the amount into the title line and left a
   fixed 100px block, which made a single short alert look like a big
   empty box. */
.dashboard-v2 .quick-alerts-card .qa-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--qa-line, #E7EBF2);
  border-left: 3px solid var(--qa-accent, #94A3B8);
  border-radius: 10px;
  background: var(--qa-bg, #FFFFFF);
  transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.dashboard-v2 .quick-alerts-card .qa-item:hover {
  transform: translateY(-1px);
  background: var(--qa-bg-hover, #FCFCFE);
}
/* severity tints — money overdue reads red, a hold ending reads amber */
.dashboard-v2 .quick-alerts-card .qa-danger {
  --qa-accent: #E11D48;
  --qa-line: #F7C6D0;
  --qa-bg: #FFF7F8;
  --qa-bg-hover: #FFF0F2;
}
.dashboard-v2 .quick-alerts-card .qa-warn {
  --qa-accent: #D97706;
  --qa-line: #F7DFB4;
  --qa-bg: #FFFBF2;
  --qa-bg-hover: #FFF7E8;
}

.dashboard-v2 .quick-alerts-card .qa-ico {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--qa-accent);
  background: rgba(255, 255, 255, .85);
  box-shadow: 0 0 0 1px var(--qa-line);
}

/* text block truncates so a long student/subject string can't push the
   amount and View button off the row */
.dashboard-v2 .quick-alerts-card .qa-txt {
  flex: 1 1 auto;
  min-width: 0;
}
.dashboard-v2 .quick-alerts-card .qa-title {
  font-size: 13px;
  font-weight: 600;
  color: #1C1835;
  line-height: 1.3;
}
.dashboard-v2 .quick-alerts-card .qa-meta {
  font-size: 11.5px;
  color: #6E6C86;
  line-height: 1.35;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* amount only on the money alert — it is the reason the alert exists */
.dashboard-v2 .quick-alerts-card .qa-amt {
  flex: 0 0 auto;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--qa-accent);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* action is a plain chevron link rather than a full Bootstrap button, so
   it stops competing with the amount for attention */
.dashboard-v2 .quick-alerts-card .qa-go {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 11.5px;
  font-weight: 600;
  color: #5B4AE8;
  text-decoration: none;
  padding: 5px 8px;
  border-radius: 8px;
  transition: background-color .13s ease;
}
.dashboard-v2 .quick-alerts-card .qa-go i {
  font-size: .7rem;
  transition: transform .13s ease;
}
.dashboard-v2 .quick-alerts-card .qa-go:hover,
.dashboard-v2 .quick-alerts-card .qa-go:focus {
  background: #F0EEFD;
  color: #4A3AD0;
}
.dashboard-v2 .quick-alerts-card .qa-go:hover i { transform: translateX(2px); }

/* empty state sits inline instead of a tall centred block */
.dashboard-v2 .quick-alerts-card .qa-empty {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border: 1px dashed #CFE8D8;
  border-radius: 10px;
  background: #F6FDF9;
}
.dashboard-v2 .quick-alerts-card .qa-empty > i {
  font-size: 1.5rem;
  color: #16A34A;
  opacity: .8;
}
.dashboard-v2 .quick-alerts-card .qa-empty-title {
  font-size: 13.5px;
  font-weight: 600;
  color: #14532D;
}
.dashboard-v2 .quick-alerts-card .qa-empty-sub {
  font-size: 11.5px;
  color: #4B7A5E;
}

/* header: badge was a tall pill that pulled focus off the list */
.dashboard-v2 .quick-alerts-card .card-header {
  padding: 13px 16px;
  border-bottom: 1px solid #EEF1F7;
}
.dashboard-v2 .quick-alerts-card .card-header h6 {
  font-size: 14px;
  font-weight: 600;
  color: #1C1835;
}
.dashboard-v2 .quick-alerts-card .card-header .badge {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
}

/* ═══ 5. EMAIL REMINDERS — fit content, capped (§14) ═══ */
.dashboard-v2 .reminders-card {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
.dashboard-v2 .reminders-card > .row {
  display: block;
}
.dashboard-v2 .reminders-card .col-12 {
  padding: 0;
}
.dashboard-v2 .reminders-card .card {
  border: 1px solid #E7EBF2;
  border-radius: 14px;
  /* Was a hard height:130px with overflow:hidden. That left an 80px window
     for a ~101px table, so with a single class the row was clipped behind an
     internal scrollbar. Grow with the content instead, and only cap it so a
     busy day scrolls inside the card rather than running off the dashboard. */
  height: auto;
  max-height: 420px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.dashboard-v2 .reminders-card .card > .card-header {
  flex: 0 0 auto;
}
.dashboard-v2 .reminders-card .card > .card-body {
  flex: 1 1 auto;
  overflow-y: auto;
}
.dashboard-v2 .reminders-card .text-center.py-4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0;
}

/* ═══ RESPONSIVE ═══ */
/* desktop >=1200px keeps 5 cards in one row (default grid above) */
@media (max-width: 1199px) {
  .dashboard-v2 .stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .dashboard-v2 .dashboard-two-column > .row {
    grid-template-columns: 1fr;
  }
  .dashboard-v2 .attendance-card .row {
    grid-template-columns: repeat(2, 1fr);
  }
  .dashboard-v2 .dashboard-two-column .card {
    height: auto;
    min-height: 300px;
  }
}
@media (max-width: 767px) {
  .dashboard-v2 .stats-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .dashboard-v2 .attendance-card .row {
    grid-template-columns: repeat(1, 1fr);
  }
  .dashboard-v2 .quick-alerts-card .card > .card-body {
    grid-template-columns: 1fr;
  }
  /* stack the band on phones so the amount and View stay on their own line */
  .dashboard-v2 .quick-alerts-card .qa-item {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .dashboard-v2 .quick-alerts-card .qa-txt {
    flex: 1 1 100%;
    order: 1;
  }
  .dashboard-v2 .quick-alerts-card .qa-ico { order: 0; }
  .dashboard-v2 .quick-alerts-card .qa-amt { order: 2; margin-left: 46px; }
  .dashboard-v2 .quick-alerts-card .qa-go { order: 3; margin-left: auto; }
  .dashboard-v2 .reminders-card .card {
    height: auto;
    /* Phones keep the uncapped behaviour they had before: the stacked rows
       are ~184px each, so a 420px cap would hide all but two of them. */
    max-height: none;
  }
  .dashboard-v2 .welcome-banner .card-body {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
  .dashboard-v2 .welcome-banner h4 {
    font-size: 22px;
  }
  .dashboard-v2 .welcome-banner .welcome-illustration {
    align-self: center;
    padding-top: 8px;
  }
  .dashboard-v2 .welcome-banner .welcome-illustration .wi-banner-img {
    max-height: 72px;
  }
}
/* ═══ 7. REGISTERED STUDENTS / TEACHERS — two bold roster cards ═══ */
.dashboard-v2 .roster-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}
/* Both cards stretch to the taller sibling, and the body flexes so the
   "+N more" footer sits at the bottom rather than mid-card. */
.dashboard-v2 .roster-grid > .newstu-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.dashboard-v2 .roster-grid > .newstu-card > .newstu-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.dashboard-v2 .roster-grid > .newstu-card > .newstu-body > .newstu-more { margin-top: auto; }
@media (max-width: 991px) {
  .dashboard-v2 .roster-grid { grid-template-columns: minmax(0, 1fr); }
}
.dashboard-v2 .newstu-card {
  background: #FFFFFF;
  border: none;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(20,40,80,0.08);
  overflow: hidden;
}

/* ── Coloured header bar. Each card carries its own accent so the two are
   distinguishable at a glance: indigo for students, teal for teacher registrations. ── */
.dashboard-v2 .newstu-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  color: #fff;
  overflow: hidden;
}
.dashboard-v2 .roster-stu .newstu-head { background: linear-gradient(135deg, #5B4AE8 0%, #4F46D8 55%, #3F35B8 100%); }
.dashboard-v2 .roster-tea .newstu-head { background: linear-gradient(135deg, #14B8A6 0%, #0D9488 55%, #0F766E 100%); }
/* Soft glow so the bar is not a flat slab. */
.dashboard-v2 .newstu-head::after {
  content: ""; position: absolute; right: -30px; top: -60px;
  width: 160px; height: 160px; border-radius: 50%;
  background: rgba(255,255,255,0.10); pointer-events: none;
}
.dashboard-v2 .newstu-htxt {
  min-width: 0; flex: 1 1 auto;
  display: flex; flex-direction: column; gap: 3px;
}
.dashboard-v2 .newstu-kicker {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: rgba(255,255,255,0.92);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dashboard-v2 .newstu-kicker i { font-size: .95rem; line-height: 1; flex: 0 0 auto; }
.dashboard-v2 .newstu-count {
  display: flex; align-items: baseline; gap: 7px;
  white-space: nowrap; overflow: hidden;
}
.dashboard-v2 .newstu-count b {
  font-size: 30px; font-weight: 800; line-height: 1;
  letter-spacing: -.02em; color: #fff;
}
.dashboard-v2 .newstu-count em {
  font-style: normal; font-size: 11.5px; font-weight: 500;
  color: rgba(255,255,255,0.80);
}
.dashboard-v2 .newstu-all {
  position: relative; z-index: 1;
  flex: 0 0 auto; font-size: 12.5px; font-weight: 600;
  color: #fff; text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 13px; border-radius: 999px;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.28);
  transition: background .14s, border-color .14s, transform .14s;
}
.dashboard-v2 .newstu-all:hover {
  background: rgba(255,255,255,0.30);
  border-color: rgba(255,255,255,0.50);
  color: #fff; transform: translateX(1px);
}

/* ── Rows ── */
.dashboard-v2 .newstu-body { padding: 6px 0; }
.dashboard-v2 .newstu-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 20px; text-decoration: none; color: inherit;
  border-bottom: 1px solid #F1F4F9; transition: background .13s;
}
.dashboard-v2 .newstu-row:last-child { border-bottom: none; }
.dashboard-v2 .newstu-row:hover { background: #F7F9FD; }
.dashboard-v2 .newstu-av {
  width: 38px; height: 38px; flex: 0 0 auto;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
}
.dashboard-v2 .roster-stu .newstu-av { background: #EEF0FF; color: #4F46D8; }
.dashboard-v2 .roster-tea .newstu-av { background: #E6F7F5; color: #0F766E; }
.dashboard-v2 .newstu-meta { min-width: 0; flex: 1 1 auto; }
.dashboard-v2 .newstu-meta b {
  display: block; font-size: 13.5px; font-weight: 600; color: #1C1835;
  line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dashboard-v2 .newstu-meta small {
  display: block; margin-top: 1px;
  font-size: 11.5px; color: #7A8699; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Date over time on two lines: a single "01 Oct 2026 - 10:52 AM" pill is wide
   enough to squeeze the name and contact columns on a phone. */
.dashboard-v2 .newstu-date {
  flex: 0 0 auto; font-size: 11.5px; color: #52627A; text-align: center;
  background: #F1F4F9; border-radius: 20px; padding: 4px 11px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.dashboard-v2 .newstu-date b { display: block; font-weight: 700; line-height: 1.25; }
.dashboard-v2 .newstu-date i {
  display: block; font-style: normal; font-weight: 600; font-size: 10px;
  color: #8493A8; line-height: 1.25; margin-top: 1px;
}
.dashboard-v2 .newstu-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 34px 18px; color: #9AA5B5; font-size: 13px;
}
.dashboard-v2 .newstu-empty i { font-size: 1.6rem; color: #C7CFDB; }
.dashboard-v2 .newstu-more {
  padding: 11px 20px; font-size: 12px; font-weight: 700;
  letter-spacing: .01em; text-align: center;
}
.dashboard-v2 .roster-stu .newstu-more { color: #4F46D8; background: #F6F6FF; }
.dashboard-v2 .roster-tea .newstu-more { color: #0F766E; background: #F2FBF8; }

@media (max-width:575px) {
  .dashboard-v2 .newstu-head { flex-wrap: wrap; }
  .dashboard-v2 .newstu-all { align-self: flex-start; }
}