/* Shared responsive UI layer for Magnetis product pages. */
:root {
  --ui-primary: #3159d4;
  --ui-primary-deep: #284fc6;
  --ui-primary-soft: #eef2ff;
  --ui-page: #f7f9fd;
  --ui-surface: #ffffff;
  --ui-surface-soft: #fbfcff;
  --ui-line: #e4e9f2;
  --ui-text: #172033;
  --ui-muted: #68758a;
  --ui-radius: 16px;
  --ui-control-radius: 10px;
  --ui-shadow: 0 12px 32px rgb(31 48 77 / 7%);
}

html {
  min-width: 0;
  overflow-x: hidden;
  scroll-padding-top: 18px;
}

body {
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
}

button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

button,
input,
select,
textarea {
  min-width: 0;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid rgb(49 89 212 / 26%);
  outline-offset: 3px;
}

:where(.advisor-main,
  .admin-main,
  .portal-content,
  .quiz-main,
  .legacy-tests-wrap,
  .settings-main,
  .auth-shell,
  .login-shell,
  .auth-choice-shell) {
  min-width: 0;
}

:where(.advisor-main, .admin-main, .portal-content) :where(h1, h2, h3, h4, p, a, button, label, small, span) {
  overflow-wrap: anywhere;
}

:where(.advisor-main .card,
  .advisor-main .panel,
  .advisor-main .stat-card,
  .advisor-main .settings-card,
  .portal-content .card,
  .portal-content .panel) {
  border-radius: var(--ui-radius);
}

:where(.advisor-main input,
  .advisor-main select,
  .advisor-main textarea,
  .admin-main input,
  .admin-main select,
  .admin-main textarea,
  .portal-content input,
  .portal-content select,
  .portal-content textarea) {
  max-width: 100%;
}

:where(.advisor-main button,
  .admin-main button,
  .portal-content button,
  .quiz-main button,
  .legacy-tests-wrap button) {
  touch-action: manipulation;
}

/* Product shells share one predictable content rhythm. */
.advisor-main,
.admin-main,
.portal-content,
.settings-main {
  max-width: 100%;
}

.advisor-main .topbar,
.admin-main .admin-topbar,
.settings-main .settings-topbar {
  min-width: 0;
}

.advisor-main .profile-box,
.advisor-main .greeting,
.advisor-main .top-actions,
.admin-topbar__title,
.admin-topbar__actions,
.settings-topbar .greeting {
  min-width: 0;
}

.advisor-main .greeting h1,
.admin-topbar h1,
.settings-topbar .greeting h1 {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.advisor-main .panel-title,
.advisor-main .section-heading,
.advisor-main .detail-header,
.advisor-main .review-panel-head,
.admin-main .section-heading,
.settings-card-heading {
  min-width: 0;
}

.advisor-main .panel-title > *,
.advisor-main .section-heading > *,
.advisor-main .detail-header > *,
.advisor-main .review-panel-head > *,
.admin-main .section-heading > *,
.settings-card-heading > * {
  min-width: 0;
}

.advisor-main .utility-btn,
.advisor-main .action-btn,
.advisor-main .ghost-btn,
.admin-main .admin-action,
.admin-main .admin-refresh,
.admin-main .admin-logout,
.admin-main .button-primary,
.admin-main .button-secondary,
.portal-content .action-btn,
.portal-content .ghost-btn {
  min-height: 44px;
}

.advisor-main :where(input, select, textarea),
.admin-main :where(input, select, textarea),
.portal-content :where(input, select, textarea) {
  border-radius: var(--ui-control-radius);
}

/* Keep wide data views usable without making the document itself scroll. */
:where(.table-wrap,
  .table-responsive,
  .table-container,
  .table-scroll,
  .data-table-wrap,
  .admin-table-wrap,
  .student-table-wrap,
  .results-table-wrap) {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

:where(.table-wrap, .table-responsive, .table-container, .table-scroll, .data-table-wrap) table {
  max-width: none;
}

/* Tablet: preserve hierarchy while giving dense layouts more breathing room. */
@media (max-width: 1100px) {
  .advisor-main {
    padding-inline: clamp(16px, 3vw, 26px);
  }

  .admin-main {
    padding-inline: clamp(14px, 3vw, 32px);
  }

  :where(.stats-grid,
    .planning-stats,
    .message-stats,
    .admin-stats,
    .students-summary,
    .review-summary-grid,
    .exam-entry-grid,
    .exam-cards,
    .report-list,
    .advisor-grid) {
    min-width: 0;
  }

  :where(.admin-filters, .relationship-filters, .students-toolbar, .report-toolbar) {
    min-width: 0;
  }
}

.student-mobile-menu-trigger {
  display: none;
}

/* Mobile navigation and the shared mobile layout. */
@media (max-width: 860px) {
  .advisor-shell {
    display: block !important;
    min-height: 100dvh;
  }

  .advisor-main {
    width: 100%;
    grid-column: auto !important;
    padding: 18px 16px 34px !important;
  }

  .advisor-sidebar {
    position: fixed !important;
    inset: 0 0 0 auto;
    z-index: 1200 !important;
    display: flex !important;
    width: min(304px, calc(100vw - 34px)) !important;
    max-width: calc(100vw - 34px);
    height: 100dvh !important;
    min-height: 100dvh;
    transform: translateX(110%);
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: transform 220ms ease, box-shadow 220ms ease;
    box-shadow: -22px 0 48px rgb(15 23 42 / 18%);
  }

  body.sidebar-open {
    overflow: hidden;
  }

  body.sidebar-open .advisor-sidebar {
    transform: translateX(0);
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .sidebar-backdrop {
    position: fixed !important;
    inset: 0;
    z-index: 1190 !important;
    display: none !important;
    border: 0;
    background: rgb(15 23 42 / 38%);
    cursor: pointer;
  }

  body.sidebar-open .sidebar-backdrop {
    display: block !important;
  }

  .advisor-main .topbar,
  .settings-main .settings-topbar,
  .admin-main .admin-topbar {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
  }

  .advisor-main .profile-box {
    align-items: flex-start;
  }

  .advisor-main .top-actions,
  .settings-main .settings-topbar .top-actions,
  .admin-topbar__actions {
    width: 100%;
    max-width: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
    align-items: stretch;
    justify-content: stretch;
  }

  .advisor-main .top-actions > *,
  .settings-main .settings-topbar .top-actions > *,
  .admin-topbar__actions > * {
    width: 100%;
    min-width: 0;
  }

  .advisor-main .top-actions [data-sidebar-toggle] {
    display: inline-flex !important;
  }

  :where(.stats-grid,
    .student-dashboard-grid,
    .student-wide-grid,
    .student-page-grid,
    .student-two-column,
    .student-card-grid,
    .student-request-layout,
    .student-plan-layout,
    .settings-board,
    .message-layout,
    .dashboard-grid,
    .middle-grid,
    .overview-grid,
    .two-column,
    .card-grid,
    .portal-menu,
    .detail-layout) {
    grid-template-columns: 1fr !important;
  }

  .settings-board {
    grid-template-areas: none !important;
  }

  .settings-board > .settings-card {
    grid-area: auto !important;
  }

  :where(.planning-stats, .message-stats, .admin-stats, .students-summary) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .planning-stats .stat-card,
  .message-stat-card,
  .metric-card,
  .summary-card {
    min-width: 0;
  }

  :where(.panel-title, .section-heading, .settings-card-heading, .review-panel-head, .detail-header) {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
  }

  :where(.panel-title > a, .panel-title > button, .section-heading > a, .section-heading > button) {
    flex: 0 1 auto;
  }

  :where(.form-grid, .settings-form-grid, .filter-grid, .admin-filters, .relationship-filters, .students-toolbar) {
    grid-template-columns: 1fr !important;
  }

  :where(.form-actions, .review-actions, .dialog-actions, .admin-dialog__surface > footer, .student-request-card__actions) {
    align-items: stretch;
    flex-direction: column;
  }

  :where(.form-actions > *, .review-actions > *, .dialog-actions > *, .admin-dialog__surface > footer > *, .student-request-card__actions > *) {
    width: 100%;
  }

  :where(.modal, .custom-card-modal, .custom-card-box, .admin-dialog, .admin-dialog__surface) {
    max-width: calc(100vw - 24px);
  }

  .custom-card-modal,
  .admin-dialog {
    padding: 12px;
  }

  .custom-card-box,
  .admin-dialog__surface {
    max-height: calc(100dvh - 24px);
    padding: 16px;
    border-radius: 16px;
  }

  .chat-compose {
    grid-template-columns: 1fr !important;
  }

  .message-bubble {
    max-width: 92%;
  }

  .course-nav {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    max-height: 280px;
    position: relative;
    top: auto;
  }

  body:has(.quiz-main) .container {
    width: calc(100% - 20px);
    padding: 68px 10px 18px;
    flex-direction: column;
    gap: 12px;
  }

  .quiz-header {
    padding: 13px 14px;
    margin-bottom: 12px;
  }

  .quiz-card {
    min-height: auto;
    padding: 22px 16px;
  }

  .quiz-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
  }

  .quiz-actions .btn-primary {
    grid-column: 1 / -1;
  }

  .legacy-tests-wrap {
    min-height: auto;
    gap: 20px;
  }

  .legacy-page-toolbar {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .legacy-page-title {
    order: -1;
    width: 100%;
  }

  .legacy-cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .legacy-subject-card {
    width: 100%;
    min-height: 0;
    padding: 28px 20px 24px;
    border-radius: 20px;
  }

  .legacy-main-illustration {
    width: min(100%, 132px);
    height: auto;
  }

  body.subjects-page .container,
  body:not(:has(.advisor-shell)):has(.topic-list) .container {
    width: min(100%, 720px);
    min-height: 100dvh;
    align-items: stretch;
    padding: 24px 14px;
  }

  body:not(:has(.advisor-shell)):has(.topic-list) .d-flex,
  body.subjects-page .d-flex {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
  }

  body:not(:has(.advisor-shell)):has(.topic-list) .topic-item {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  body:not(:has(.advisor-shell)):has(.topic-list) .topic-item button,
  body.subjects-page .container button {
    width: 100% !important;
  }

  .portal-shell {
    width: min(100%, 900px);
    padding: 14px;
  }

  .portal-sidebar,
  .portal-content,
  .portal-shell .topbar,
  .portal-shell .hero-panel,
  .portal-shell .panel {
    min-width: 0;
  }
}

/* Phone: optimize touch targets, reading width and dense cards. */
@media (max-width: 767px) {
  html {
    scroll-padding-top: 10px;
  }

  .advisor-main,
  .settings-main,
  .admin-main {
    padding-inline: 12px !important;
  }

  .advisor-main .profile-photo {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
  }

  .advisor-main .greeting h1,
  .settings-topbar .greeting h1,
  .admin-topbar h1 {
    font-size: clamp(18px, 5.5vw, 23px);
    line-height: 1.55;
  }

  .advisor-main .greeting p,
  .settings-topbar .greeting p,
  .admin-topbar__date {
    font-size: 11px;
    line-height: 1.8;
  }

  .advisor-main .top-actions,
  .settings-main .settings-topbar .top-actions,
  .admin-topbar__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .advisor-main .top-actions .text-btn,
  .settings-main .settings-topbar .top-actions .settings-primary-action,
  .admin-topbar__actions .admin-logout {
    grid-column: 1 / -1;
  }

  :where(.advisor-main .card, .advisor-main .panel, .admin-panel, .settings-card, .portal-content .card, .portal-content .panel) {
    padding: 14px;
  }

  :where(.planning-stats, .message-stats, .admin-stats, .students-summary) {
    gap: 10px;
  }

  .planning-stats .stat-card,
  .message-stat-card,
  .metric-card,
  .summary-card {
    min-height: 98px;
    padding: 13px;
  }

  .planning-stats .stat-card strong,
  .message-stat-card strong,
  .metric-card strong {
    font-size: clamp(20px, 7vw, 28px);
  }

  :where(.panel-title h2, .section-heading h2, .settings-card-heading h2) {
    font-size: 15px;
    line-height: 1.65;
  }

  :where(.panel-title p, .section-heading p, .settings-card-heading p) {
    font-size: 11px;
    line-height: 1.8;
  }

  :where(.admin-table, .data-table, .results-table) {
    min-width: 640px;
  }

  .admin-table-wrap {
    border-radius: 14px;
  }

  :where(.admin-table th, .admin-table td) {
    padding-inline: 10px;
  }

  :where(.field-box input, .field-box select, .field-box textarea, .settings-page input, .settings-page select, .settings-page textarea, .auth-page input, .auth-page select, .login-page input, .login-page select) {
    font-size: 16px;
  }

  .login-page,
  .auth-choice-page {
    place-items: start center;
    padding: 12px;
  }

  .login-shell,
  .auth-choice-shell {
    width: 100%;
    margin-top: 8px;
    padding: 18px 15px;
    border-radius: 16px;
  }

  .login-header,
  .auth-choice-header {
    padding-bottom: 14px;
  }

  .login-intro {
    margin-top: 24px;
  }

  .login-intro h1,
  .choice-intro h1 {
    font-size: clamp(23px, 7vw, 29px);
  }

  .role-options {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 24px;
  }

  .role-option {
    min-height: 0;
    padding: 20px 16px;
  }

  .role-art {
    margin-bottom: 12px;
  }

  .existing-account {
    margin-top: 24px;
  }

  .quiz-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .timer {
    width: 100%;
    justify-content: space-between;
  }

  .quiz-title {
    font-size: 20px;
  }

  .quiz-subtitle,
  .question-content {
    font-size: 14px;
  }

  .quiz-actions .btn {
    min-height: 44px;
    padding-inline: 8px;
    white-space: normal;
  }

  .back-button {
    top: 10px;
    right: 10px;
    min-height: 42px;
    padding-inline: 12px;
  }

  .portal-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portal-content .action-btn,
  .portal-content .ghost-btn {
    width: 100%;
  }

  body:not(.settings-page) .student-shell .topbar {
    align-items: center;
    flex-direction: row;
    gap: 10px;
    margin-bottom: 18px;
  }

  body:not(.settings-page) .student-shell .profile-box {
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
  }

  body:not(.settings-page) .student-shell .greeting p {
    display: none;
  }

  body:not(.settings-page) .student-shell .top-actions {
    width: auto;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  body:not(.settings-page) .student-shell .top-actions .utility-btn,
  body:not(.settings-page) .student-shell .top-actions [data-sidebar-toggle] {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    flex: 0 0 38px;
    padding: 0 !important;
    border-radius: 10px;
  }

  body:not(.settings-page) .student-shell .top-actions .utility-btn svg,
  body:not(.settings-page) .student-shell .top-actions [data-sidebar-toggle] svg {
    width: 18px;
    height: 18px;
  }

  body:not(.settings-page) .student-shell .top-actions .text-btn {
    width: auto !important;
    min-width: 0 !important;
    flex: 0 1 auto;
    padding-inline: 9px !important;
    font-size: 11px;
    white-space: nowrap;
  }

  body:not(.settings-page) .student-shell .top-actions .magnetis-message-link {
    width: auto !important;
    min-width: 44px !important;
  }

  .student-mobile-menu-trigger {
    position: fixed;
    z-index: 1040;
    top: 12px;
    left: 12px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    border: 1px solid #d7e0ee;
    border-radius: 10px;
    background: #ffffff;
    color: #3159d4;
    box-shadow: 0 8px 18px rgb(31 48 77 / 10%);
  }

  .student-mobile-menu-trigger svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
  }

  .student-study-plan-page .topbar {
    padding-left: 50px;
  }
}

@media (max-width: 430px) {
  :where(.planning-stats, .message-stats, .admin-stats, .students-summary) {
    grid-template-columns: 1fr;
  }

  .advisor-main .top-actions,
  .settings-main .settings-topbar .top-actions,
  .admin-topbar__actions {
    grid-template-columns: 1fr;
  }

  .advisor-main .top-actions > *,
  .settings-main .settings-topbar .top-actions > *,
  .admin-topbar__actions > * {
    grid-column: auto !important;
  }

  .profile-box {
    gap: 10px;
  }

  .custom-card-modal,
  .admin-dialog {
    padding: 8px;
  }

  .custom-card-box,
  .admin-dialog__surface {
    max-width: calc(100vw - 16px);
    padding: 13px;
  }

  .legacy-page-toolbar .legacy-back-link,
  .legacy-page-toolbar .legacy-menu-toggle {
    flex: 1 1 100%;
  }

  .auth-shell {
    width: calc(100vw - 16px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}