/* Collab+ shared design and responsive system. Loaded after page-level styles. */
:root {
  --collab-primary: #2563eb;
  --collab-primary-strong: #1d4ed8;
  --collab-primary-soft: #eff6ff;
  --collab-sky: #38bdf8;
  --collab-surface: #ffffff;
  --collab-canvas: #f6f9ff;
  --collab-text: #172033;
  --collab-muted: #64748b;
  --collab-border: #dbe5f2;
  --collab-success: #15803d;
  --collab-success-soft: #f0fdf4;
  --collab-warning: #b45309;
  --collab-warning-soft: #fffbeb;
  --collab-danger: #b91c1c;
  --collab-danger-soft: #fef2f2;
  --collab-info: #1d4ed8;
  --collab-info-soft: #eff6ff;
  --collab-font: "Noto Sans Thai", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --collab-space-1: 4px;
  --collab-space-2: 8px;
  --collab-space-3: 12px;
  --collab-space-4: 16px;
  --collab-space-5: 20px;
  --collab-space-6: 24px;
  --collab-radius-control: 8px;
  --collab-radius-card: 8px;
  --collab-shadow-sm: 0 6px 18px rgba(30, 64, 175, .07);
  --collab-shadow-md: 0 14px 34px rgba(30, 64, 175, .10);
  --collab-container: 1600px;
  --collab-focus: 0 0 0 3px rgba(37, 99, 235, .24);
}

html {
  width: 100%;
  min-width: 0;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 72px;
}

body.collab-responsive {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  font-family: var(--collab-font);
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
}

body.collab-responsive *,
body.collab-responsive *::before,
body.collab-responsive *::after {
  box-sizing: border-box;
}

body.collab-responsive :is(main, .main, .app-main, .main-content, .teacher-content, .admin-main, .admin-content, .content, .page-content) {
  min-width: 0;
  max-width: 100%;
}

body.collab-responsive :is(.row, .d-flex, .topbar-inner, .app-topbar, .top-actions, .toolbar, .filter-bar, .action-bar, .button-row) > * {
  min-width: 0;
}

body.collab-responsive :is(img, picture, video, iframe, canvas, svg) {
  max-width: 100%;
}

body.collab-responsive :is(video, iframe) {
  width: 100%;
}

body.collab-responsive :is(p, li, td, th, label, .card, .alert, .badge, .message, .feedback, .empty-state, .error-state) {
  overflow-wrap: anywhere;
}

body.collab-responsive :is(button, input, select, textarea) {
  max-width: 100%;
  font: inherit;
}

body.collab-responsive textarea {
  resize: vertical;
}

body.collab-responsive :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--collab-primary);
  outline-offset: 2px;
  box-shadow: var(--collab-focus);
}

body.collab-responsive :is(.btn, button, .form-control, .form-select, input, select, textarea) {
  border-radius: var(--collab-radius-control);
}

body.collab-responsive :is(.card, .content-card, .stat-card, .assignment-card, .course-card, .panel, .section-card, .profile-card, .quiz-card) {
  border-radius: var(--collab-radius-card);
}

body.collab-responsive :is(.card, .content-card, .section-card, .panel) {
  min-width: 0;
}

body.collab-responsive .collab-responsive-container {
  width: min(100%, var(--collab-container));
  margin-inline: auto;
  padding-inline: clamp(12px, 2.5vw, 32px);
}

.collab-table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  border-radius: var(--collab-radius-card);
}

.collab-table-scroll > table {
  margin-bottom: 0;
}

body.collab-responsive table {
  width: 100%;
  max-width: 100%;
}

body.collab-responsive :is(.modal-dialog, .app-notify-dialog) {
  width: min(calc(100% - 24px), 720px);
  max-width: min(calc(100% - 24px), 720px);
  margin: max(12px, env(safe-area-inset-top)) auto max(12px, env(safe-area-inset-bottom));
}

body.collab-responsive :is(.modal-content, .app-notify-content) {
  max-height: calc(100dvh - max(24px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: var(--collab-radius-card) !important;
}

body.collab-responsive .app-notify-toast-container {
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  width: min(390px, calc(100vw - max(24px, env(safe-area-inset-left) + env(safe-area-inset-right))));
}

body.collab-responsive .app-notify-toast,
body.collab-responsive .app-notify-modal-icon {
  border-radius: var(--collab-radius-card) !important;
}

body.collab-responsive :is(.nav-tabs, .nav-pills, .tabs, .stepper, .wizard-tabs, .filter-tabs) {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

body.collab-responsive :is(.badge, .status-badge, .state-badge, .chip, .tag) {
  max-width: 100%;
  white-space: normal;
  line-height: 1.3;
}

body.collab-responsive :is(.ratio, .video-frame, .media-preview, .file-preview) {
  max-width: 100%;
  overflow: hidden;
}

body.collab-responsive :is(.monaco-editor, .monaco-editor-background, .overflow-guard, .code-workspace, .editor-shell, .editor-pane) {
  max-width: 100%;
  min-width: 0;
}

.collab-nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--collab-border);
  border-radius: var(--collab-radius-control);
  background: var(--collab-surface);
  color: var(--collab-primary-strong);
  box-shadow: var(--collab-shadow-sm);
  z-index: 1080;
}

.collab-nav-backdrop {
  position: fixed;
  inset: 0;
  display: none;
  border: 0;
  border-radius: 0 !important;
  background: rgba(15, 23, 42, .52);
  z-index: 1045;
}

body.collab-nav-open {
  overflow: hidden;
}

.cp-card,
.cp-stat-card,
.cp-empty-state,
.cp-error-state {
  border: 1px solid var(--collab-border);
  border-radius: var(--collab-radius-card);
  background: var(--collab-surface);
  box-shadow: var(--collab-shadow-sm);
}

.cp-empty-state,
.cp-error-state {
  padding: clamp(20px, 4vw, 40px);
  text-align: center;
  color: var(--collab-muted);
}

.cp-error-state {
  border-color: #fecaca;
  background: var(--collab-danger-soft);
  color: var(--collab-danger);
}

.cp-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid var(--collab-border);
  border-radius: 999px;
  background: #f8fafc;
  color: var(--collab-muted);
  font-size: .78rem;
  font-weight: 700;
}

.cp-status[data-state="success"] { border-color: #bbf7d0; background: var(--collab-success-soft); color: var(--collab-success); }
.cp-status[data-state="warning"] { border-color: #fde68a; background: var(--collab-warning-soft); color: var(--collab-warning); }
.cp-status[data-state="error"] { border-color: #fecaca; background: var(--collab-danger-soft); color: var(--collab-danger); }
.cp-status[data-state="info"] { border-color: #bfdbfe; background: var(--collab-info-soft); color: var(--collab-info); }

@media (max-width: 991.98px) {
  body.collab-responsive :is(.main, .app-main, .teacher-content, .admin-main, .main-content) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
  }

  body.collab-responsive [data-collab-sidebar] {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: min(284px, 88vw) !important;
    min-width: 0 !important;
    max-width: min(284px, 88vw) !important;
    height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    transform: translateX(-105%) !important;
    transition: transform .2s ease !important;
    z-index: 1055 !important;
    padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
  }

  body.collab-responsive [data-collab-sidebar].open,
  body.collab-responsive [data-collab-sidebar].show,
  body.collab-responsive [data-collab-sidebar].collab-open,
  body.collab-responsive.collab-nav-open [data-collab-sidebar] {
    transform: translateX(0) !important;
  }

  body.collab-responsive .collab-nav-toggle {
    display: inline-flex;
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    left: max(12px, env(safe-area-inset-left));
  }

  body.collab-responsive.collab-nav-open .collab-nav-backdrop {
    display: block;
  }

  body.collab-responsive :is(.topbar-inner, .app-topbar, .admin-topbar, .page-header, .toolbar, .filter-bar, .action-bar, .top-actions, .button-row) {
    flex-wrap: wrap;
    min-width: 0;
  }

  body.collab-responsive :is(.top-actions, .toolbar-actions, .form-actions, .modal-footer, .app-notify-footer) {
    gap: var(--collab-space-2);
  }

  body.collab-responsive :is(.form-grid, .profile-grid, .settings-grid, .editor-grid, .submission-grid, .analytics-grid) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.collab-responsive :is(.content, .page-content, .admin-content, .teacher-content) {
    padding-left: clamp(12px, 3vw, 24px) !important;
    padding-right: clamp(12px, 3vw, 24px) !important;
  }
}

@media (max-width: 767.98px) {
  body.collab-responsive :is(.container, .container-fluid) {
    --bs-gutter-x: 24px;
  }

  body.collab-responsive :is(.btn, button:not(.accordion-button), input[type="submit"], input[type="button"], select, .form-control, .form-select) {
    min-height: 44px;
  }

  body.collab-responsive :is(.icon-btn, .btn-icon, .mobile-toggle, .sidebar-toggle, .mobile-sidebar-toggle, .admin-mobile-toggle) {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
  }

  body.collab-responsive :is(.top-actions, .toolbar-actions, .form-actions, .submit-row, .button-row) > .btn,
  body.collab-responsive :is(.top-actions, .toolbar-actions, .form-actions, .submit-row, .button-row) > button {
    flex: 1 1 auto;
  }

  body.collab-responsive :is(.modal-footer, .app-notify-footer) {
    display: grid;
    grid-template-columns: 1fr;
  }

  body.collab-responsive :is(.modal-footer, .app-notify-footer) > :is(.btn, button) {
    width: 100%;
    margin: 0;
  }

  body.collab-responsive .app-notify-toast-container {
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
    width: auto;
  }

  body.collab-responsive .collab-table-scroll > table {
    min-width: 640px;
  }
}

@media (max-width: 430px) {
  body.collab-responsive :is(button, [role="button"], a.btn) {
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

@media (max-width: 430px) {
  body.collab-responsive :is(h1, .page-title, .page-heading, .welcome-title) {
    font-size: clamp(1.35rem, 1.35rem, 1.7rem);
    line-height: 1.3;
  }

  body.collab-responsive :is(.content, .page-content, .admin-content, .teacher-content) {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body.collab-responsive :is(.card-body, .modal-body, .app-notify-body) {
    padding-left: 14px;
    padding-right: 14px;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  body.collab-responsive [data-collab-sidebar] {
    width: min(320px, 72vw) !important;
  }

  body.collab-responsive :is(.modal-dialog, .app-notify-dialog) {
    margin-block: 6px;
  }
}

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

@media print {
  .collab-nav-toggle,
  .collab-nav-backdrop,
  [data-collab-sidebar] {
    display: none !important;
  }
}