/* ═══════════════════════════════════════════════════════════════════════════
   AuraCron — Global Design Layer  (ui.css v1)
   Layered on top of Tailwind CDN. Uses design tokens from index.html :root.
   Rules are mobile-first; desktop refinements are in max-width / min-width
   media queries further below.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 0. TYPOGRAPHY FOUNDATION ─────────────────────────────────────────────── */
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* tighter, slightly warmer line spacing */
  line-height: 1.5;
  letter-spacing: -0.01em;
}

/* Crisp heading scale */
h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.025em;
  line-height: 1.25;
  font-weight: 700;
}

/* Prevent iOS auto-zoom on focused inputs — critical mobile fix */
input, select, textarea {
  font-size: 16px !important;
  font-family: inherit;
}

/* Consistent focus rings everywhere — use brand color, not browser default */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── 1. CSS CUSTOM PROPERTY EXTENSIONS ────────────────────────────────────── */
:root {
  /* Shadow scale — linear / vercel-grade */
  --shadow-xs:   0 1px 2px rgba(0,0,0,.04);
  --shadow-sm:   0 1px 4px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:   0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.05);
  --shadow-lg:   0 8px 24px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.06);
  --shadow-xl:   0 16px 40px rgba(0,0,0,.12), 0 8px 16px rgba(0,0,0,.07);
  --shadow-2xl:  0 24px 64px rgba(0,0,0,.15), 0 12px 24px rgba(0,0,0,.08);

  /* Radius scale */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   18px;
  --radius-2xl:  24px;
  --radius-pill: 9999px;

  /* Spacing rhythm (8-pt grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* Type scale tokens */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */

  /* Transition presets */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 280ms;

  /* Touch target minimum */
  --touch-target: 44px;

  /* Brand glow for elevated surfaces */
  --brand-glow: 0 0 0 3px rgba(37,99,235,.15);

  /* Scrollbar */
  --scrollbar-w: 5px;
  --scrollbar-thumb: var(--app-border);
  --scrollbar-track: transparent;
}

body[data-theme='dark'] {
  --shadow-xs:   0 1px 2px rgba(0,0,0,.2);
  --shadow-sm:   0 1px 4px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);
  --shadow-md:   0 4px 12px rgba(0,0,0,.4), 0 2px 4px rgba(0,0,0,.3);
  --shadow-lg:   0 8px 24px rgba(0,0,0,.5), 0 4px 8px rgba(0,0,0,.35);
  --shadow-xl:   0 16px 40px rgba(0,0,0,.6), 0 8px 16px rgba(0,0,0,.4);
  --shadow-2xl:  0 24px 64px rgba(0,0,0,.7), 0 12px 24px rgba(0,0,0,.5);
  --brand-glow:  0 0 0 3px rgba(88,166,255,.2);
}

/* ── 2. SCROLLBARS — thin, tasteful, theme-aware ──────────────────────────── */
:root {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
::-webkit-scrollbar { width: var(--scrollbar-w); height: var(--scrollbar-w); }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--app-border); }

/* ── 3. SELECTION COLOR ───────────────────────────────────────────────────── */
::selection {
  background: color-mix(in srgb, var(--brand) 20%, transparent);
  color: var(--app-text);
}

/* ── 4. BUTTON PRIMITIVES ─────────────────────────────────────────────────── */
/*  .btn-primary  .btn-secondary  .btn-ghost  .btn-danger
    All have min touch target, crisp typography, smooth transitions              */

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-target);
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  background: var(--brand);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: filter var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}
.btn-primary:hover {
  filter: brightness(1.08);
  box-shadow: var(--shadow-md), 0 0 0 0 var(--brand);
}
.btn-primary:active { transform: translateY(1px); filter: brightness(0.96); }
.btn-primary:focus-visible { box-shadow: var(--brand-glow); }
.btn-primary:disabled { opacity: 0.55; cursor: not-allowed; filter: none; transform: none; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-target);
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  background: var(--app-surface-alt);
  color: var(--app-text);
  border: 1.5px solid var(--app-border-soft);
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}
.btn-secondary:hover {
  background: var(--app-surface);
  border-color: var(--app-border);
  box-shadow: var(--shadow-sm);
}
.btn-secondary:active { transform: translateY(1px); }
.btn-secondary:focus-visible { box-shadow: var(--brand-glow); }
.btn-secondary:disabled { opacity: 0.55; cursor: not-allowed; }

/* btn-ghost — already defined in index.html, refine here */
.btn-ghost {
  min-height: 36px;
  transition: background var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out) !important;
}
.btn-ghost:focus-visible { box-shadow: var(--brand-glow); }

/* btn-danger — refine */
.btn-danger {
  min-height: 36px;
  transition: background var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out) !important;
}

/* Icon button — guaranteed 44×44px tap target */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch-target);
  min-height: var(--touch-target);
  border-radius: var(--radius-md);
  background: transparent;
  border: 1.5px solid var(--app-border-soft);
  color: var(--app-text-soft);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.icon-btn:hover { background: var(--app-surface-alt); color: var(--app-text); border-color: var(--app-border); }
.icon-btn:focus-visible { box-shadow: var(--brand-glow); }

/* ── 5. INPUT / SELECT / TEXTAREA PRIMITIVES ──────────────────────────────── */
/*  Consistent height (44px), brand focus ring, smooth transition.
    font-size:16px is already set globally above to prevent iOS zoom.         */

input:not([type='checkbox']):not([type='radio']):not([type='range']),
select,
textarea {
  min-height: 44px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--app-border-soft);
  background: var(--app-surface);
  color: var(--app-text);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
}
input:not([type='checkbox']):not([type='radio']):not([type='range']):focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
body[data-theme='dark'] input:not([type='checkbox']):not([type='radio']):not([type='range']):focus,
body[data-theme='dark'] select:focus,
body[data-theme='dark'] textarea:focus {
  box-shadow: 0 0 0 3px rgba(88,166,255,.18);
}

/* textarea: allow vertical resize only */
textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.55;
}

/* select: restore arrow */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
body[data-theme='dark'] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b949e' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* Checkbox & radio — brand-colored */
input[type='checkbox'], input[type='radio'] {
  accent-color: var(--brand);
  width: 18px;
  height: 18px;
  min-height: unset;
  cursor: pointer;
}

/* ── 6. CARDS — elevated, layered surface system ──────────────────────────── */
/*  stat-card, resource-card, wide-sidebar-section, modal-shell,
    task-overview-card, etc. — all inherit from this elevation model.         */

.stat-card {
  background: var(--app-surface);
  border: 1px solid var(--app-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
body[data-theme='dark'] .stat-card {
  border-color: var(--app-border);
  box-shadow: var(--shadow-md);
}

.resource-card {
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.resource-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
body[data-theme='dark'] .resource-card {
  box-shadow: var(--shadow-md);
}

.wide-sidebar-section {
  box-shadow: var(--shadow-xs);
}

/* ── 7. MODAL — bottom-sheet on mobile, centered on desktop ───────────────── */
.modal-overlay {
  padding: var(--space-4);
  /* On mobile, align to bottom to enable thumb reach */
  align-items: flex-end;
}
@media (min-width: 640px) {
  .modal-overlay {
    align-items: center;
  }
}

.modal-shell {
  box-shadow: var(--shadow-2xl);
  border-radius: var(--radius-xl) var(--radius-xl) var(--radius-md) var(--radius-md);
  width: 100%;
  max-width: 540px;
  max-height: 92dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* slide up animation on mobile */
  animation: modal-slide-up var(--duration-slow) var(--ease-out);
}
@media (min-width: 640px) {
  .modal-shell {
    border-radius: var(--radius-xl);
    max-height: 85dvh;
    animation: modal-fade-in var(--duration-base) var(--ease-out);
  }
}
@keyframes modal-slide-up {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes modal-fade-in {
  from { transform: translateY(8px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0)   scale(1);    opacity: 1; }
}

/* ── 8. DROPDOWN — crisp, elevated, not heavy ─────────────────────────────── */
.dropdown-menu {
  box-shadow: var(--shadow-xl);
  animation: dropdown-in var(--duration-fast) var(--ease-out);
}
@keyframes dropdown-in {
  from { transform: translateY(-6px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0) scale(1);       opacity: 1; }
}

/* ── 9. TAB BAR — larger touch targets on mobile ──────────────────────────── */
.tab-bar {
  /* ensure horizontal scroll without showing scrollbar */
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.tab-btn {
  /* minimum 44px tap target */
  min-height: var(--touch-target);
  padding: 0 16px;
  flex-shrink: 0;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.tab-btn.active {
  box-shadow: var(--shadow-sm), 0 0 0 0 transparent;
}

/* ── 10. SIDEBAR — refined shadows ────────────────────────────────────────── */
.app-sidebar {
  box-shadow: var(--shadow-md);
}
body[data-theme='dark'] .app-sidebar {
  box-shadow: var(--shadow-lg);
}

/* Sidebar nav items — guaranteed 44px height */
.app-sidebar-item {
  min-height: 40px;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

/* Active item: brand left indicator line instead of full fill */
.app-sidebar-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  border-radius: 0 3px 3px 0;
  background: var(--brand);
}

/* ── 11. MOBILE TOPBAR ────────────────────────────────────────────────────── */
.app-mobile-topbar {
  box-shadow: var(--shadow-sm);
  /* safe-area top inset */
  padding-top: max(0px, env(safe-area-inset-top));
  height: calc(52px + env(safe-area-inset-top, 0px));
}

/* ── 12. NOTIFICATION DROPDOWN ────────────────────────────────────────────── */
.notif-dropdown {
  box-shadow: var(--shadow-xl);
}

/* ── 13. NOTIFICATION BELL ────────────────────────────────────────────────── */
.notif-bell-btn {
  min-width: 36px;
  min-height: 36px;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

/* ── 14. THEME TOGGLE ICON ────────────────────────────────────────────────── */
.theme-toggle-icon {
  min-width: 36px;
  min-height: 36px;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

/* ── 15. HAMBURGER BUTTON ─────────────────────────────────────────────────── */
.hamburger-btn {
  min-width: var(--touch-target);
  min-height: var(--touch-target);
  border-radius: var(--radius-md);
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.hamburger-btn:hover { background: var(--app-surface-alt); }
.hamburger-btn:active { transform: scale(0.95); }

/* ── 16. TOAST — refined entry animation ──────────────────────────────────── */
.toast { animation: toast-in var(--duration-slow) var(--ease-out); }
@keyframes toast-in {
  from { transform: translateX(110%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ── 17. SETTINGS PAGE (stp-*) — mobile-first ────────────────────────────── */
.stp-section {
  /* remove negative padding-based save-bar overflow on small screens */
  overflow: visible;
}

/* Settings tabs: scrollable pill row on narrow screens */
.stp-tabs {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.stp-tabs::-webkit-scrollbar { display: none; }
.stp-tab {
  min-height: var(--touch-target);
  flex-shrink: 0;
}

/* stp-row — stacks on very narrow screens */
@media (max-width: 420px) {
  .stp-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/* ── 18. BADGES ────────────────────────────────────────────────────────────── */
/* Global badge reset — uniform radius + font */
[class^='badge-'], [class*=' badge-'] {
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  line-height: 1.5;
}

/* Queue status badges */
.queue-status {
  border-radius: var(--radius-sm);
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ── 19. TABLES — sticky header, zebra, smooth hover ─────────────────────── */
/*  Wrap any table in .table-scroll-wrap for horizontal scroll on mobile.    */
.table-scroll-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-lg);
  border: 1px solid var(--app-border-soft);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--app-surface-alt);
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--app-text-muted);
  border-bottom: 1.5px solid var(--app-border-soft);
  white-space: nowrap;
}
tbody tr {
  border-bottom: 1px solid var(--app-border-soft);
  transition: background var(--duration-fast) var(--ease-out);
}
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--app-surface-soft); }
/* Zebra stripe (opt-in via .table-zebra) */
.table-zebra tbody tr:nth-child(even) { background: var(--app-surface-alt); }
.table-zebra tbody tr:nth-child(even):hover { background: var(--app-surface-soft); }
tbody td {
  padding: 10px 14px;
  color: var(--app-text);
  vertical-align: middle;
}

/* ── 20. MAIN CONTENT AREA PADDING — safe-area & breathing room ───────────── */
.app-main {
  padding-left: max(var(--space-4), env(safe-area-inset-left, var(--space-4)));
  padding-right: max(var(--space-4), env(safe-area-inset-right, var(--space-4)));
  padding-bottom: max(var(--space-6), env(safe-area-inset-bottom, var(--space-6)));
}

/* ── 21. PROGRESS BARS ────────────────────────────────────────────────────── */
.progress-bar-bg {
  border-radius: var(--radius-pill);
  height: 8px;
  overflow: hidden;
}
.progress-bar-fill {
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 70%, #7c3aed));
  transition: width 0.5s var(--ease-out);
}

/* ── 22. TICKER OUTER — tighter on mobile ────────────────────────────────── */
.ticker-outer {
  box-shadow: var(--shadow-xs);
  border-radius: var(--radius-md);
}
@media (max-width: 480px) {
  .ticker-outer {
    height: 40px;
    border-radius: var(--radius-sm);
  }
  .ticker-label {
    min-width: 100px;
    padding: 0 10px;
  }
  .ticker-label .label-text {
    font-size: 11px;
  }
}

/* ── 23. MOBILE NAV PANEL ─────────────────────────────────────────────────── */
.mobile-nav-panel {
  box-shadow: var(--shadow-2xl);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── 24. ADVISOR HEADER ───────────────────────────────────────────────────── */
.advisor-header {
  box-shadow: var(--shadow-sm);
}
.advisor-topbar {
  padding-top: env(safe-area-inset-top, 0px);
}

/* ── 25. STUDENT / EXTERNAL HEADERS ──────────────────────────────────────── */
.student-header, .external-header {
  box-shadow: 0 2px 16px rgba(0,0,0,.18);
}

/* ── 26. CLUSTER SUMMARY CARDS ────────────────────────────────────────────── */
.cluster-summary-card {
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--duration-base) var(--ease-out);
}
.cluster-summary-card:hover {
  box-shadow: var(--shadow-md);
}

/* ── 27. CLUSTER NODE CARDS ───────────────────────────────────────────────── */
.cluster-node-card {
  box-shadow: var(--shadow-xs);
  transition: border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
.cluster-node-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* ── 28. MIND MAP ─────────────────────────────────────────────────────────── */
.mm-container {
  box-shadow: var(--shadow-sm);
}

/* ── 29. SIDEBAR USER POPUP ───────────────────────────────────────────────── */
.sidebar-user-popup {
  box-shadow: var(--shadow-xl);
}

/* ── 30. CARD-HOVER utility — consolidate ─────────────────────────────────── */
.card-hover {
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
body[data-theme='dark'] .card-hover:hover {
  box-shadow: var(--shadow-xl);
}

/* ── 31. TASK CARDS ───────────────────────────────────────────────────────── */
.task-card-sel {
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              background var(--duration-base) var(--ease-out);
}
.task-card-sel:hover {
  box-shadow: var(--shadow-md);
}

/* ── 32. PUBLICATION TRACKER KPI CARDS ───────────────────────────────────── */
.pub-kpi {
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.pub-kpi:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

/* ── 33. MP POLL CARDS ────────────────────────────────────────────────────── */
.mp-poll-card {
  box-shadow: var(--shadow-xs);
  transition: border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.mp-poll-card:hover {
  box-shadow: var(--shadow-md);
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE LAYOUT FIXES  (≤ 767px)
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* 1. Main content: single-column padding */
  .app-main {
    padding-top: var(--space-4);
  }

  /* 2. Wide dashboard: force single column */
  .wide-dashboard {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--space-4);
  }
  .wide-sidebar {
    width: 100% !important;
  }

  /* 3. Stat / resource grid: 2-up on mobile */
  .resource-cards {
    grid-template-columns: 1fr 1fr !important;
    gap: var(--space-3);
  }
  /* Single column on very small phones */
  @media (max-width: 360px) {
    .resource-cards {
      grid-template-columns: 1fr !important;
    }
  }

  /* 4. Students + queue grid: single column */
  .students-queue-grid {
    grid-template-columns: 1fr !important;
  }

  /* 5. Cluster topology: single column */
  .cluster-topology {
    grid-template-columns: 1fr !important;
  }

  /* 6. Tables: horizontal scroll */
  .cluster-process-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  /* 7. Settings page: compact */
  .stp-section {
    padding: 18px 16px !important;
    border-radius: var(--radius-lg) !important;
    /* Remove left accent border on very small screens (too cramped) */
    border-left-width: 3px;
  }
  .stp-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
  .stp-title { font-size: 20px; }

  /* 8. Modal: full-width bottom sheet */
  .modal-shell {
    max-width: 100% !important;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
    margin: 0 !important;
    /* safe area */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* 9. Notification dropdown: full-width */
  .notif-dropdown {
    width: calc(100vw - var(--space-4)) !important;
    right: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    position: fixed !important;
    top: 58px !important;
  }

  /* 10. Tab bar: allow scrolling, show active indicator */
  .tab-bar {
    gap: var(--space-1);
  }
  .tab-btn {
    min-height: var(--touch-target);
    padding: 0 12px;
    font-size: 13px;
  }

  /* 11. Ticker label: shorten */
  .ticker-label .label-text {
    font-size: 11px !important;
    letter-spacing: 0.08em;
  }

  /* 12. Header widgets: hide on mobile (already hidden by existing CSS) */

  /* 13. Tasks overview KPIs: 2-column */
  .tasks-overview-kpis {
    grid-template-columns: 1fr 1fr !important;
  }
  .tasks-overview-panels {
    grid-template-columns: 1fr !important;
  }

  /* 14. Radar header: stack */
  .radar-student-hdr {
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
  }

  /* 15. paired-student-grid: single col */
  .paired-student-grid {
    grid-template-columns: 1fr !important;
  }

  /* 16. Thesis timeline: allow horizontal scroll */
  .thesis-timeline-track-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .thesis-timeline-nodes {
    min-width: 440px;
  }

  /* 17. pub-tracker KPIs: 2-col */
  .pub-tracker-kpis {
    grid-template-columns: 1fr 1fr !important;
  }

  /* 18. monitor-deadlines-row: stack */
  .monitor-deadlines-row {
    grid-template-columns: 1fr !important;
  }

  /* 19. Cluster summary: 2-col (already has this, reinforce) */
  .cluster-summary-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* 20. ROCCO split layout: stack */
  .rocco-split-layout {
    grid-template-columns: 1fr !important;
  }

  /* 21. lab-fleet-grid: already has mobile rule, reinforce */
  .lab-fleet-grid {
    grid-template-columns: 1fr !important;
  }

  /* 22. Ensure no element overflows viewport */
  .ticker-outer,
  .wide-dashboard,
  .students-queue-grid,
  .cluster-topology,
  .tasks-overview-kpis,
  .stp-toggles-grid {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* 23. stp-toggles-grid: already 1-col on mobile */
  .stp-toggles-grid {
    grid-template-columns: 1fr !important;
  }

  /* 24. ROCCO stats panel: 1-col */
  .rocco-stats-panel {
    grid-template-columns: 1fr !important;
    padding: var(--space-4);
  }

  /* 25. App main top padding (behind mobile topbar) */
  .app-main {
    padding-top: calc(52px + env(safe-area-inset-top, 0px) + var(--space-4));
  }

  /* 26. Wider tap targets on list/table rows */
  .notif-item,
  .vticker-item,
  .app-sidebar-item,
  .cdp-row,
  .pub-paper-row,
  .news-feed-card {
    min-height: 44px;
  }

  /* 27. Queue items */
  .queue-item {
    min-height: 44px;
  }

  /* 28. mm-side-panel mobile: full bottom drawer */
  .mm-side-panel {
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }

  /* 29. Terminal toolbar: stack on very small */
  .terminal-toolbar {
    flex-wrap: wrap;
    gap: var(--space-2);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   TABLET FIXES  (768px – 1023px)
   ══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) and (max-width: 1023px) {

  /* Icon-only sidebar: make items tappable */
  .app-sidebar-item {
    min-height: 44px;
    border-radius: var(--radius-md);
  }

  /* Stat grid: 2-col */
  .resource-cards {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Tasks overview: 2-col */
  .tasks-overview-kpis {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   DESKTOP REFINEMENTS  (≥ 1024px)
   ══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {

  /* App main: no extra top padding needed (sidebar, no topbar) */
  .app-main {
    padding-top: var(--space-5);
  }

  /* Sidebar nav items: slightly tighter */
  .app-sidebar-item {
    min-height: 38px;
  }

  /* Tab buttons: comfortable spacing */
  .tab-btn {
    min-height: 36px;
    padding: 0 16px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   HIGH-DENSITY TABLES (cluster-process-table, etc.)
   ══════════════════════════════════════════════════════════════════════════ */
.cluster-process-table thead th {
  position: sticky;
  top: 0;
  background: var(--app-surface-alt);
  z-index: 1;
}
.cluster-process-table tbody tr {
  transition: background var(--duration-fast) var(--ease-out);
}
.cluster-process-table tbody tr:hover {
  background: var(--app-surface-soft);
}

/* ══════════════════════════════════════════════════════════════════════════
   HEADER WIDGET CHIPS — refined on desktop
   ══════════════════════════════════════════════════════════════════════════ */
.hw-chip {
  box-shadow: var(--shadow-xs);
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.hw-chip:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--app-border);
}

/* ══════════════════════════════════════════════════════════════════════════
   TASK OVERVIEW CARD HEADER
   ══════════════════════════════════════════════════════════════════════════ */
.task-overview-card {
  box-shadow: var(--shadow-sm);
}

/* ══════════════════════════════════════════════════════════════════════════
   DEADLINE WIDGET — mobile responsive
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .deadline-widget {
    padding: 0 16px 16px !important;
    border-radius: var(--radius-xl) !important;
  }
  .deadline-widget-header {
    margin: 0 -16px 14px !important;
    padding: 10px 16px !important;
  }
  .deadline-filters {
    gap: var(--space-1);
  }
  .deadline-filter-btn {
    padding: 5px 12px;
    font-size: 12px;
    min-height: 36px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   PAPER REEL (welcome card) — mobile
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .paper-reel-shell {
    border-radius: var(--radius-xl);
  }
  .paper-reel-card {
    border-radius: var(--radius-lg);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   AVATAR — refined border radius
   ══════════════════════════════════════════════════════════════════════════ */
.avatar-sm { border-radius: var(--radius-md); }
.avatar-md { border-radius: var(--radius-lg); }
.avatar-lg { border-radius: var(--radius-lg); }

/* ══════════════════════════════════════════════════════════════════════════
   SPINNERS — brand color
   ══════════════════════════════════════════════════════════════════════════ */
.spinner-dark {
  border-top-color: var(--brand);
}

/* ══════════════════════════════════════════════════════════════════════════
   EMPTY STATES — visual polish
   ══════════════════════════════════════════════════════════════════════════ */
.notif-empty {
  color: var(--app-text-soft);
}

/* ══════════════════════════════════════════════════════════════════════════
   PORTAL FOOTER
   ══════════════════════════════════════════════════════════════════════════ */
.portal-footer {
  padding-bottom: max(var(--space-6), env(safe-area-inset-bottom, var(--space-6)));
}

/* ══════════════════════════════════════════════════════════════════════════
   STP SAVE BAR — account for safe-area on sticky bottom
   ══════════════════════════════════════════════════════════════════════════ */
.stp-save-bar {
  padding-bottom: max(14px, calc(14px + env(safe-area-inset-bottom, 0px)));
}

/* ══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION — override all animations gracefully
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .modal-shell,
  .dropdown-menu,
  .toast,
  .paper-reel-card,
  .btn-primary,
  .btn-secondary,
  .stat-card,
  .resource-card,
  .cluster-node-card,
  .card-hover {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   OVERFLOW GUARD — last resort
   ══════════════════════════════════════════════════════════════════════════ */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}