/* ============================================================
   MANOVEDH COMPONENTS (Deep Green + Mint brand family)
   ============================================================ */

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: 600;
  line-height: 1;
  min-height: var(--touch-target-min, 44px);
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
  touch-action: manipulation;
}

.btn:focus-visible {
  box-shadow: var(--shadow-focus);
  outline: none;
}

.btn:active:not(:disabled) {
  opacity: 0.8;
  transform: scale(0.98);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--color-primary-800);
  color: var(--color-primary-100);
  border-radius: var(--radius-md);
  padding: 12px 24px;
  box-shadow: var(--shadow-inset-btn);
}

.btn-primary:hover:not(:disabled) {
  background: var(--color-primary-700);
}

.btn-primary:active:not(:disabled) {
  background: var(--color-primary-500);
}

.btn-secondary {
  background: var(--color-primary-300);
  color: var(--color-primary-900);
  border-radius: var(--radius-md);
  padding: 12px 24px;
}

.btn-secondary:hover:not(:disabled) {
  opacity: 0.9;
}

.btn-outline {
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-border-ink);
  border-radius: var(--radius-md);
  padding: 12px 24px;
}

.btn-outline:hover:not(:disabled) {
  background: var(--color-ink-4);
}

.btn-ghost {
  background: transparent;
  color: var(--neutral-600);
  border-radius: var(--radius-md);
  padding: 10px 20px;
}

.btn-ghost:hover:not(:disabled) {
  background: var(--neutral-100);
}

.btn-danger {
  background: var(--color-error);
  color: white;
  border-radius: var(--radius-md);
  padding: 12px 24px;
  box-shadow: var(--shadow-inset-btn);
}

.btn-danger:hover:not(:disabled) {
  background: #DC2626;
}

.btn-sm {
  min-height: 36px;
  height: 36px;
  padding: 6px 14px;
  font-size: var(--text-body-sm);
}

.btn-lg {
  min-height: 48px;
  padding: 16px 32px;
  font-size: var(--text-body);
}

.btn-full {
  width: 100%;
}

@media (max-width: 639px) {
  .btn-full-sm {
    width: 100% !important;
    display: flex !important;
  }
}

/* ---- Cards ---- */
.card {
  background: var(--color-cream);
  border: 1px solid var(--color-border-warm);
  border-radius: var(--radius-xl);
  padding: 24px;
  transition: all var(--transition-base);
}

.card:hover {
  border-color: var(--color-primary-200);
}

.card-elevated {
  background: var(--color-surface);
  border: 1px solid var(--color-border-warm);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-soft);
  padding: 24px;
  transition: all var(--transition-base);
}

.card-elevated:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.card-metric {
  background: var(--color-cream);
  border: 1px solid var(--color-border-warm);
  border-radius: var(--radius-xl);
  padding: 20px;
}

.card-metric .metric-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  background: var(--color-primary-50);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-500);
}

.card-metric .metric-value {
  font-size: var(--text-h2);
  font-weight: 700;
  color: var(--color-ink);
  margin-top: 12px;
}

.card-metric .metric-label {
  font-size: var(--text-body-sm);
  color: var(--neutral-500);
  margin-top: 2px;
}

/* ---- Activity Card ---- */
.activity-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--color-cream);
  border: 1px solid var(--color-border-warm);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.activity-card:hover {
  border-color: var(--color-primary-200);
}

.activity-card .activity-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  background: var(--color-primary-100);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-primary-500);
}

.activity-card .activity-title {
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-ink);
}

.activity-card .activity-meta {
  font-size: var(--text-caption);
  color: var(--neutral-500);
  margin-top: 2px;
}

.activity-card .activity-arrow {
  color: var(--neutral-500);
  flex-shrink: 0;
}

/* ---- Progress Card ---- */
.progress-card {
  background: var(--color-cream);
  border: 1px solid var(--color-border-warm);
  border-radius: var(--radius-xl);
  padding: 24px;
}

.progress-card .progress-title {
  font-size: var(--text-h4);
  color: var(--color-ink);
}

.progress-card .progress-value {
  font-size: var(--text-h3);
  color: var(--color-primary-500);
}

.progress-card .progress-bar {
  height: 8px;
  background: var(--neutral-100);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.progress-card .progress-fill {
  height: 100%;
  background: var(--color-primary-500);
  border-radius: var(--radius-pill);
  transition: width 0.3s ease;
}

.progress-card .progress-label {
  font-size: var(--text-caption);
  color: var(--neutral-500);
  margin-top: 8px;
}

/* ---- Forms ---- */
.form-group { margin-bottom: 16px; }

.form-label {
  display: block;
  font-size: var(--text-body-sm);
  font-weight: 600;
  color: var(--neutral-700);
  margin-bottom: 6px;
}

.form-input,
.form-select,
.form-textarea {
  display: block;
  width: 100%;
  min-height: var(--touch-target-min, 44px);
  padding: 10px 14px;
  font-family: var(--font-sans);
  font-size: 1rem; /* >= 16px prevents iOS Safari automatic zoom */
  line-height: 1.5;
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-border-warm);
  border-radius: var(--radius-lg);
  transition: all var(--transition-fast);
  box-sizing: border-box;
}

.form-input::placeholder,
.form-textarea::placeholder { color: var(--neutral-400); }

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: var(--shadow-focus);
}

.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
  background: var(--neutral-100);
  color: var(--neutral-400);
  cursor: not-allowed;
}

.form-input.error,
.form-select.error,
.form-textarea.error {
  border-color: var(--color-error);
}

.form-textarea {
  height: auto;
  min-height: 110px;
  resize: vertical;
}

.form-hint { font-size: var(--text-caption); color: var(--neutral-500); margin-top: 4px; }
.form-error { font-size: var(--text-caption); color: var(--color-error); margin-top: 4px; }

/* ---- Responsive Tables ---- */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-warm);
  background: var(--color-surface);
  margin-bottom: 16px;
}

.table-responsive table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
}

/* ---- Alerts ---- */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius-lg);
  border: 1px solid;
  font-size: var(--text-body-sm);
}

.alert-success { background: var(--color-primary-50); border-color: var(--color-primary-200); color: var(--color-primary-800); }
.alert-warning { background: #FEF3C7; border-color: #FDE68A; color: #92400E; }
.alert-error { background: #FEF2F2; border-color: #FECACA; color: #991B1B; }
.alert-info { background: #EEF2FF; border-color: #C7D2FE; color: #3730A3; }

.alert-icon { flex-shrink: 0; font-size: 1.25rem; }

/* ---- Toast ---- */
.toast-container {
  position: fixed;
  top: max(16px, var(--safe-top, 16px));
  right: max(16px, var(--safe-right, 16px));
  left: auto;
  max-width: calc(100vw - 32px);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

@media (max-width: 639px) {
  .toast-container {
    left: 16px;
    right: 16px;
    top: max(12px, var(--safe-top, 12px));
  }
}

.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  animation: slideUp 300ms ease forwards;
  word-break: break-word;
}

.toast-success { background: var(--color-primary-700); color: var(--color-primary-100); }
.toast-error { background: #DC2626; color: white; }
.toast-info { background: var(--neutral-800); color: white; }

.toast-close {
  margin-left: auto; background: none; border: none; color: inherit;
  opacity: 0.7; cursor: pointer; padding: 4px; border-radius: var(--radius-sm);
  min-height: 32px; min-width: 32px; display: grid; place-items: center;
}
.toast-close:hover { opacity: 1; }

/* ---- Modal ---- */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(5, 31, 32, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  padding-top: max(16px, var(--safe-top, 16px));
  padding-bottom: max(16px, var(--safe-bottom, 16px));
}

.modal-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border-warm);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  width: min(100%, 512px);
  max-height: min(85vh, 85dvh);
  overflow-y: auto;
  margin: auto;
}

.modal-header {
  display: flex; align-items: center; justify-content: space-between; padding: 24px 24px 0;
}

.modal-title { font-size: var(--text-h3); color: var(--color-ink); }

.modal-close {
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md); background: none; border: none; color: var(--neutral-500); cursor: pointer;
}
.modal-close:hover { background: var(--neutral-100); }

.modal-body { padding: 24px; }

.modal-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  padding: 16px 24px; border-top: 1px solid var(--neutral-100);
  border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
}

/* ---- Chat Bubbles ---- */
.chat-bubble-user {
  max-width: 80%;
  background: var(--color-primary-500);
  color: var(--color-primary-100);
  border-radius: 20px 20px 4px 20px;
  padding: 10px 16px;
  align-self: flex-end;
}

.chat-bubble-other {
  max-width: 80%;
  background: var(--color-surface);
  color: var(--color-ink);
  border: 1px solid var(--color-border-warm);
  border-radius: 20px 20px 20px 4px;
  padding: 10px 16px;
  align-self: flex-start;
}

/* ---- Avatar ---- */
.avatar { width: 40px; height: 40px; border-radius: var(--radius-pill); object-fit: cover; background: var(--color-primary-100); }
.avatar-sm { width: 32px; height: 32px; }
.avatar-lg { width: 56px; height: 56px; }
.avatar-xl { width: 80px; height: 80px; }

/* ---- Badge ---- */
.badge {
  display: inline-flex; align-items: center; padding: 2px 10px;
  font-size: var(--text-caption); font-weight: 600; border-radius: var(--radius-pill); white-space: nowrap;
}

.badge-primary { background: var(--color-primary-100); color: var(--color-primary-800); }
.badge-success { background: var(--color-primary-100); color: var(--color-primary-800); }
.badge-warning { background: #FEF3C7; color: #92400E; }
.badge-error { background: #FEE2E2; color: #991B1B; }
.badge-neutral { background: var(--neutral-100); color: var(--neutral-600); }

/* ---- Stats / KPI Card ---- */
.stat { display: flex; align-items: center; gap: 12px; }

.stat-icon {
  width: 44px; height: 44px; border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

.stat-icon.primary { background: var(--color-primary-50); color: var(--color-primary-500); }
.stat-icon.accent { background: #FEF3C7; color: #D97706; }
.stat-icon.info { background: #DBEAFE; color: #2563EB; }

.stat-value {
  font-size: var(--text-h2); font-weight: 700; color: var(--color-ink);
  line-height: 1;
}

.stat-label { font-size: var(--text-body-sm); color: var(--neutral-500); margin-top: 2px; }

.stat-change { font-size: var(--text-caption); font-weight: 600; margin-top: 2px; }
.stat-change.positive { color: var(--color-success); }
.stat-change.negative { color: var(--color-error); }

/* ---- Header ---- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; height: 64px;
  background: rgba(5, 31, 32, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--color-primary-800);
  z-index: 50;
  display: flex; align-items: center; padding: 0 24px;
}

.site-header-inner {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; max-width: 1280px; margin: 0 auto;
}

.site-logo { font-size: 22px; font-weight: 800; color: var(--color-primary-100); text-decoration: none; }

.site-nav { display: flex; align-items: center; gap: 24px; }

.site-nav a {
  font-size: var(--text-body-sm); font-weight: 500;
  color: rgba(218,241,222,0.7); text-decoration: none; transition: color var(--transition-fast);
}
.site-nav a:hover { color: var(--color-primary-300); }
.site-nav a.active { color: var(--color-primary-300); }

/* ---- Footer ---- */
.site-footer { background: var(--color-primary-900); padding: 48px 24px; }

.site-footer-inner {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px;
}

.site-footer-logo { font-size: 20px; font-weight: 800; color: var(--color-primary-100); margin-bottom: 8px; }
.site-footer-tagline { font-size: var(--text-body-sm); color: rgba(218,241,222,0.45); max-width: 280px; }

.site-footer-heading { font-size: var(--text-body-sm); font-weight: 700; color: rgba(218,241,222,0.4); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 12px; display: block; }

.site-footer-links { display: flex; flex-direction: column; gap: 8px; }
.site-footer-links a { font-size: var(--text-body-sm); color: rgba(218,241,222,0.45); text-decoration: none; transition: color var(--transition-fast); }
.site-footer-links a:hover { color: var(--color-primary-100); }

.site-footer-bottom {
  max-width: 1280px; margin: 32px auto 0; padding-top: 24px;
  border-top: 1px solid rgba(218,241,222,0.06);
  font-size: var(--text-caption); color: rgba(218,241,222,0.3); text-align: center;
}

/* ---- Sidebar ---- */
:root {
  --sidebar-width: 240px;
}
.sidebar-collapsed {
  --sidebar-width: 72px;
}

.sidebar {
  position: fixed; left: 0; top: 0; width: var(--sidebar-width); height: 100vh;
  background: var(--color-primary-900);
  border-right: 1px solid var(--color-primary-900);
  display: flex; flex-direction: column; padding: 24px 0; z-index: 40;
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.dashboard-main {
  margin-left: 0;
  transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 1024px) {
  .dashboard-main {
    margin-left: var(--sidebar-width);
  }
}

.sidebar-header {
  padding: 0 16px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  min-width: 0;
}
.sidebar-logo a, .sidebar-logo span.brand-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--color-primary-100);
  text-decoration: none;
}

.sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 12px;
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  font-size: var(--text-body-sm);
  font-weight: 500;
  color: rgba(218,241,222,0.7);
  text-decoration: none;
  border-radius: 10px;
  transition: all var(--transition-fast);
  white-space: nowrap;
}
.sidebar-link:hover { background: var(--color-primary-800); color: var(--color-primary-100); }
.sidebar-link.active { background: var(--color-primary-500); color: var(--color-primary-100); font-weight: 600; }

.sidebar-link .icon { font-size: 1.25rem; width: 24px; text-align: center; }
.sidebar-link .icon-wrap { width: 24px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.sidebar-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(218,241,222,0.4);
  padding: 0 12px;
  margin: 18px 0 4px;
  white-space: nowrap;
}

.sidebar-footer {
  padding: 16px 16px 0;
  border-top: 1px solid var(--color-primary-800);
  margin-top: auto;
}
.sidebar-user { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }

.sidebar-user-name { font-size: var(--text-body-sm); font-weight: 600; color: var(--color-primary-100); }
.sidebar-user-role { font-size: var(--text-caption); color: var(--color-primary-300); }

/* ---- Collapsed Sidebar States ---- */
.sidebar-expand-icon { display: none !important; }
.sidebar-collapse-icon { display: inline-block !important; }

.sidebar-collapsed .sidebar-expand-icon { display: inline-block !important; }
.sidebar-collapsed .sidebar-collapse-icon { display: none !important; }

.sidebar-collapsed .sidebar .brand-text,
.sidebar-collapsed .sidebar .sidebar-label,
.sidebar-collapsed .sidebar .sidebar-user-info,
.sidebar-collapsed .sidebar .sidebar-lang-container {
  display: none !important;
}

.sidebar-collapsed .sidebar .sidebar-header {
  padding: 0 8px;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.sidebar-collapsed .sidebar .sidebar-logo {
  justify-content: center;
  padding: 0;
}

.sidebar-collapsed .sidebar .sidebar-nav {
  padding: 0 8px;
}

.sidebar-collapsed .sidebar .sidebar-link {
  justify-content: center;
  padding: 10px 0;
  position: relative;
}

.sidebar-collapsed .sidebar .sidebar-badge {
  position: absolute;
  top: 4px;
  right: 12px;
  min-width: 8px;
  height: 8px;
  padding: 0 !important;
  font-size: 0 !important;
  border-radius: 9999px;
  border: 2px solid var(--color-primary-900);
}

.sidebar-collapsed .sidebar .sidebar-section-label {
  height: 1px;
  margin: 12px 6px;
  padding: 0;
  background: var(--color-primary-800);
  text-indent: -9999px;
  overflow: hidden;
}

.sidebar-collapsed .sidebar .sidebar-footer {
  padding: 14px 8px 0;
}

.sidebar-collapsed .sidebar .sidebar-footer-row {
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.sidebar-collapsed .sidebar .sidebar-user {
  justify-content: center;
}

/* Tooltip on hover when collapsed on desktop */
@media (min-width: 1024px) {
  .sidebar-collapsed .sidebar [data-tooltip],
  .sidebar-collapsed .admin-sidebar [data-tooltip] {
    position: relative;
  }
  .sidebar-collapsed .sidebar [data-tooltip]::after,
  .sidebar-collapsed .admin-sidebar [data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%) scale(0.95);
    background: #0B2B26;
    color: #DAF1DE;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    padding: 7px 11px;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(218, 241, 222, 0.18);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 60;
  }
  .sidebar-collapsed .sidebar [data-tooltip]:hover::after,
  .sidebar-collapsed .admin-sidebar [data-tooltip]:hover::after {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
}

/* ---- Grid Helpers ---- */
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 24px; }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Animations ---- */
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.animate-fade-in { animation: fadeIn 200ms ease forwards; }
.animate-slide-up { animation: slideUp 200ms ease forwards; }
.animate-scale-in { animation: scaleIn 200ms ease forwards; }
/* ============================================================ */
/* Sidebar — scrollbar + short-viewport scaling                  */
/* ------------------------------------------------------------ */
/* .sidebar-nav is `overflow-y: auto`, so once the nav is taller  */
/* than the panel it scrolls. Two things follow from that and    */
/* both are handled here rather than in a page stylesheet,       */
/* because the sidebar is shared by every dashboard page.        */
/* ============================================================ */

/* 1. The bar itself. Left to the platform default this is a wide
      light-grey scrollbar sitting on a near-black green panel.
      Make it a 4px in-palette sliver that is barely there until
      the nav is hovered.

      The `html .sidebar` prefix is deliberate: it lifts these to
      (0,2,2) so a page stylesheet that binds scrollbar rules to
      descendants — `html:has(.x) *::-webkit-scrollbar`, (0,2,1) —
      cannot repaint the sidebar from outside the component again.

      scrollbar-color/-width are INHERITED properties, so a page
      setting them on <html> reaches the sidebar through the
      cascade. They are re-declared here instead of relied upon. */
.sidebar-nav {
  scrollbar-width: thin;
  scrollbar-color: rgba(218, 241, 222, 0.22) transparent;
}
html .sidebar .sidebar-nav::-webkit-scrollbar { width: 4px; height: 4px; }
html .sidebar .sidebar-nav::-webkit-scrollbar-track { background: transparent; }
html .sidebar .sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(218, 241, 222, 0.16);
  border-radius: 99px;
}
html .sidebar .sidebar-nav:hover::-webkit-scrollbar-thumb {
  background: rgba(218, 241, 222, 0.34);
}
html .sidebar .sidebar-nav::-webkit-scrollbar-button { display: none; }

/* 2. Scale the nav down on short viewports so it needs to scroll far
      less often. Keyed on viewport HEIGHT, not width, because height
      is what actually decides whether the nav fits: the counselor nav
      carries 8 links plus 2 "Menu"/"Account" section labels, roughly
      80px more than the user nav's 8 links and no labels, which is why
      the counselor pages are the ones that hit the scrollbar first.
      Every rule below is inside a max-height query, so tall desktops
      are untouched.

      Each tier repeats its .sidebar-collapsed counterpart where one
      exists, since those are (0,3,0) and would otherwise outrank the
      plain selectors here. */

/* Tier 1 — ~1366x768 and most laptops: trim spacing only, no type change. */
@media (max-height: 860px) {
  .sidebar { padding: 18px 0; }
  .sidebar-header { margin-bottom: 16px; }
  .sidebar-nav { gap: 3px; }
  .sidebar-link { padding: 8px 12px; }
  .sidebar-collapsed .sidebar .sidebar-link { padding: 8px 0; }
  .sidebar-section-label { margin: 12px 0 3px; }
  .sidebar-collapsed .sidebar .sidebar-section-label { margin: 10px 6px; }
  .sidebar-footer { padding: 12px 14px 0; }
}

/* Tier 2 — ~1280x720 and small laptop panels: start shrinking type. */
@media (max-height: 760px) {
  .sidebar { padding: 14px 0; }
  .sidebar-header { margin-bottom: 12px; }
  .sidebar-logo { gap: 10px; }
  .sidebar-logo img { width: 32px; height: 32px; }
  .sidebar-logo a,
  .sidebar-logo span.brand-title { font-size: 17px; }

  .sidebar-nav { gap: 2px; }
  .sidebar-link { padding: 7px 10px; gap: 10px; font-size: 0.8125rem; }
  .sidebar-collapsed .sidebar .sidebar-link { padding: 7px 0; }
  /* width AND height: Lucide renders an <svg> carrying width/height
     attributes, and setting only one letterboxes the glyph. */
  .sidebar-link .icon-wrap { width: 20px; }
  .sidebar-link .icon { width: 20px; height: 20px; font-size: 1.05rem; }

  .sidebar-footer { padding: 10px 12px 0; }
  .sidebar-lang-container { margin-bottom: 4px; }
  .sidebar-user { gap: 10px; }
  .sidebar-user img,
  .sidebar-user > span { width: 34px; height: 34px; }
  .sidebar-user-name { font-size: 0.8125rem; }
  .sidebar-user-role { font-size: 0.6875rem; }
}

/* Tier 3 — ~1024x600 netbooks and landscape tablets: tightest that stays
   comfortably tappable (link box stays ~30px). */
@media (max-height: 660px) {
  .sidebar { padding: 10px 0; }
  .sidebar-header { margin-bottom: 10px; }
  .sidebar-logo img { width: 28px; height: 28px; }
  .sidebar-logo a,
  .sidebar-logo span.brand-title { font-size: 15px; }

  .sidebar-link { padding: 6px 10px; gap: 9px; font-size: 0.78rem; }
  .sidebar-collapsed .sidebar .sidebar-link { padding: 6px 0; }
  .sidebar-link .icon-wrap { width: 18px; }
  .sidebar-link .icon { width: 18px; height: 18px; }

  .sidebar-section-label { font-size: 9px; margin: 9px 0 2px; }
  .sidebar-footer { padding: 8px 12px 0; }
  .sidebar-user img,
  .sidebar-user > span { width: 30px; height: 30px; }
  .sidebar-user-name { font-size: 0.76rem; }
  .sidebar-user-role { font-size: 0.66rem; }
}