/* ── Portal-specific overrides ─────────────────────────────────────────────── */

/* Hide main site footer on dashboard */
.page-home.logged-in .site-footer,
body:has(.dashboard-layout) .site-footer {
  display: none;
}

/* Fix double padding — dashboard has its own padding-top via the grid */
.page-content--dashboard {
  padding-top: 0;
}

/* Login error message */
.login-error {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 8px;
  color: #dc2626;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 24px;
}

.login-error svg {
  flex-shrink: 0;
  color: #dc2626;
}

/* ── Mobile Sidebar Overlay ─────────────────────────────────────────────── */

.dash-sidebar-overlay {
  display: none;
}

.dash-sidebar__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.dash-sidebar__close {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.55);
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.dash-sidebar__close:hover {
  background: rgba(255, 255, 255, 0.15);
  color: var(--white);
}

/* Mobile Toggle Button — hidden on desktop */
.dash-topbar__menu {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--white);
  border: 1px solid var(--gray-border);
  color: var(--navy);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.dash-topbar__menu:hover {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}

/* Topbar text wrapper */
.dash-topbar__text {
  flex: 1;
  min-width: 0;
}

/* ── Dashboard responsive — Tablet (≤1024px) ─────────────────────────── */

@media (max-width: 1024px) {
  /* Convert sidebar to mobile slide-in drawer */
  .dashboard-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    padding-top: 20px;
    height: 100vh;
    height: 100dvh;
  }

  .dashboard-sidebar.is-open {
    transform: translateX(0);
  }

  /* Overlay */
  .dash-sidebar-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 199;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  .dash-sidebar-overlay.is-visible {
    opacity: 1;
    visibility: visible;
  }

  /* Show mobile-only elements */
  .dash-sidebar__close {
    display: flex;
  }

  .dash-topbar__menu {
    display: flex;
  }

  /* Adjust main content */
  .dash-main {
    padding: 24px 20px;
  }

  /* Topbar wrapping */
  .dash-topbar {
    flex-wrap: wrap;
    gap: 12px;
  }

  .dash-topbar__cta {
    width: 100%;
    justify-content: center;
    order: 3;
  }
}

/* ── Mobile (≤768px) ─────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .dash-main {
    padding: 20px 16px;
  }

  .dash-grid {
    grid-template-columns: 1fr;
  }

  .dash-cards {
    grid-template-columns: 1fr;
  }

  .dash-topbar__greeting {
    font-size: 1.25rem;
  }

  .dash-stat {
    padding: 20px;
  }

  .dash-card {
    padding: 24px 20px;
  }

  /* Notification items — stack time below text */
  .notification-item {
    flex-wrap: wrap;
  }

  .notification-item__time {
    width: 100%;
    padding-left: 20px;
    margin-top: -4px;
  }

  /* Counsellor card — stack on small screens */
  .counsellor-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .counsellor-contact {
    justify-content: center;
  }
}

/* ── Small mobile (≤480px) ──────────────────────────────────────────── */

@media (max-width: 480px) {
  .dash-main {
    padding: 16px 12px;
  }

  .dash-topbar__menu {
    width: 40px;
    height: 40px;
  }

  .dash-stat__val {
    font-size: 1.25rem;
  }

  .dashboard-sidebar {
    width: 260px;
  }

  .dash-doc {
    flex-wrap: wrap;
    gap: 8px;
  }

  .dash-doc__status {
    margin-left: auto;
  }

  .dash-upload-btn {
    font-size: 0.8125rem;
    padding: 10px;
  }
}