:root {
  --primary: #22d3ee;
  --primary-hover: #06b6d4;
  --bg-dark: #050914;
  --bg-card: #0b1224;
  --surface-elevated: #0f172a;
  --border-subtle: #15223a;
  --text-main: #e2e8f0;
  --text-muted: #8ba3c7;
  --border: #1f2b44;
  --danger: #ef4444;
  --success: #22c55e;
  --sidebar-width: 260px;
}

body[data-theme="light"] {
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --bg-dark: #f5f7fb;
  --bg-card: #ffffff;
  --surface-elevated: #ffffff;
  --border-subtle: #e5e7eb;
  --text-main: #0f172a;
  --text-muted: #475569;
  --border: #e5e7eb;
  --danger: #dc2626;
  --success: #16a34a;
  background-color: var(--bg-dark);
  color: var(--text-main);
}

body[data-theme="radix"] {
  --primary: #4f46e5;
  --primary-hover: #4338ca;
  --bg-dark: #0b0f1a;
  --bg-card: #0f172a;
  --surface-elevated: #0d1424;
  --border-subtle: #1b2740;
  --text-main: #e5e7eb;
  --text-muted: #9aa7c2;
  --border: #1f2b44;
  --danger: #ef4444;
  --success: #10b981;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  background: radial-gradient(circle at 25% 15%, rgba(79, 70, 229, 0.12), transparent 40%),
    radial-gradient(circle at 85% 10%, rgba(16, 185, 129, 0.1), transparent 35%),
    linear-gradient(160deg, #0b0f1a 0%, #0d1629 100%);
  color: var(--text-main);
}

body[data-theme="radix"] .content {
  background: linear-gradient(180deg, rgba(12, 18, 34, 0.9) 0%, rgba(9, 14, 25, 0.92) 100%);
}

body[data-theme="radix"] .sidebar {
  background: rgba(11, 16, 30, 0.95);
  border-right: 1px solid rgba(79, 70, 229, 0.22);
  box-shadow: 16px 0 50px rgba(0, 0, 0, 0.35);
}

body[data-theme="radix"] .menu-item {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid transparent;
  border-radius: 10px;
  transition: all 0.2s ease;
}

body[data-theme="radix"] .menu-item:hover {
  background: rgba(79, 70, 229, 0.08);
  border-color: rgba(79, 70, 229, 0.35);
  color: #eef2ff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
}

body[data-theme="radix"] .menu-item.active {
  background: rgba(79, 70, 229, 0.14);
  border-color: rgba(79, 70, 229, 0.45);
  color: #e0e7ff;
  box-shadow: 0 10px 28px rgba(79, 70, 229, 0.25);
}

body[data-theme="radix"] .card,
body[data-theme="radix"] .page-card,
body[data-theme="radix"] .table-container,
body[data-theme="radix"] .message-preview-card,
body[data-theme="radix"] .message-simulation-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  border-radius: 12px;
}

body[data-theme="radix"] table th,
body[data-theme="radix"] table td {
  border-color: var(--border-subtle);
}

body[data-theme="radix"] .tablist {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
}

body[data-theme="radix"] .tab[aria-selected="true"] {
  background: rgba(79, 70, 229, 0.12);
  border: 1px solid rgba(79, 70, 229, 0.4);
  color: var(--primary);
}

body[data-theme="radix"] h1,
body[data-theme="radix"] h2,
body[data-theme="radix"] h3,
body[data-theme="radix"] h4,
body[data-theme="radix"] h5 {
  font-weight: 600;
  letter-spacing: -0.02em;
}

body[data-theme="radix"] .btn {
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

body[data-theme="radix"] .btn-primary {
  background: linear-gradient(120deg, #4f46e5 0%, #6366f1 100%);
  color: #f8fafc;
  border: 1px solid rgba(79, 70, 229, 0.45);
  box-shadow: 0 10px 30px rgba(79, 70, 229, 0.28);
}

body[data-theme="radix"] .btn-primary:hover {
  background: linear-gradient(120deg, #5a54f5 0%, #7c7ff7 100%);
  box-shadow: 0 12px 34px rgba(99, 102, 241, 0.32);
}

body[data-theme="radix"] .btn-secondary {
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

body[data-theme="radix"] .btn-secondary:hover {
  border-color: rgba(79, 70, 229, 0.45);
  color: #e0e7ff;
  background: rgba(79, 70, 229, 0.08);
}

body[data-theme="radix"] input,
body[data-theme="radix"] select,
body[data-theme="radix"] textarea {
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-main);
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  height: 42px;
  padding: 0.65rem 0.8rem;
}

body[data-theme="radix"] input:focus,
body[data-theme="radix"] select:focus,
body[data-theme="radix"] textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
}

/* Students module - material inspired table */
#view-students .table-container {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22);
  padding: 0.25rem 0.25rem 0.5rem;
  overflow-x: auto;
}

#view-students table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

#view-students th,
#view-students td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-main);
  vertical-align: top;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.table-filters select option {
  background: #1a2332;
  color: #e2e8f0;
}

body[data-theme="light"] .table-filters select option {
  background: #ffffff;
  color: #0f172a;
}

body[data-theme="radix"] .table-filters select option {
  background: #0f172a;
  color: #e5e7eb;
}

#view-students thead th {
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  position: sticky;
  top: 0;
  z-index: 1;
}

#view-students .table-filters th {
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--border);
}

#view-students .table-filters input,
#view-students .table-filters select {
  width: 100%;
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-main);
  font-size: 0.9rem;
}

#view-students .table-filters input:focus,
#view-students .table-filters select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
}

#view-students tbody tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

#view-students tbody tr[data-student-id] {
  cursor: pointer;
}

#view-students tbody tr.is-selected {
  background: rgba(37, 99, 235, 0.16);
  outline: 1px solid rgba(37, 99, 235, 0.45);
}

#view-students tbody tr.is-selected:hover {
  background: rgba(37, 99, 235, 0.22);
}

#view-students tbody tr:last-child td {
  border-bottom: 0;
}

#view-students th.sortable {
  cursor: pointer;
  position: relative;
  user-select: none;
  padding-right: 1.6rem;
}

#view-students th.sortable::after {
  content: '⇅';
  position: absolute;
  right: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  color: var(--text-muted);
  opacity: 0.6;
}

#view-students th.sorted-asc::after {
  content: '▲';
  color: var(--primary);
  opacity: 1;
}

#view-students th.sorted-desc::after {
  content: '▼';
  color: var(--primary);
  opacity: 1;
}

#view-students .actions .btn-primary {
  border-radius: 10px;
  padding: 0.6rem 1.1rem;
  font-weight: 700;
}

#view-students .view-header {
  flex-wrap: wrap;
  gap: 0.85rem 1rem;
  align-items: flex-start;
}

#view-students > .view-header {
  margin-bottom: 1rem;
}

#view-students .students-tab-card {
  padding-top: 1rem;
}

#view-students .students-tab-card > .tab-panels {
  margin-top: 0.75rem;
}

#view-students .view-header .actions {
  width: 100%;
  flex-wrap: wrap;
  gap: 0.6rem;
}

#view-students .view-header .actions #search-input {
  flex: 1 1 260px;
  min-width: 220px;
}

#view-students .btn-secondary {
  border-radius: 10px;
  padding: 0.45rem 0.8rem;
  font-weight: 600;
}

#view-students .status-badge {
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  font-size: 0.85rem;
}

#view-students .student-main-name {
  font-weight: 600;
}

#view-students .student-main-meta {
  font-size: 0.8rem;
  color: #94a3b8;
}

#view-students .student-actions-cell {
  min-width: 190px;
}

#view-students .student-row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

#view-students .student-action-btn {
  padding: 0.4rem 0.8rem;
  font-size: 0.8rem;
}

#view-students .student-action-btn-danger {
  color: var(--danger);
  border-color: var(--danger);
}

#view-students .students-tab-placeholder {
  padding: 1.25rem;
}

#view-students .students-tab-placeholder p {
  margin-top: 0.5rem;
}

@media (max-width: 1024px) {
  #view-students .table-container {
    overflow: visible;
    padding: 0.5rem 0.5rem calc(0.85rem + env(safe-area-inset-bottom));
  }

  #view-students table,
  #view-students thead,
  #view-students tbody,
  #view-students tr,
  #view-students th,
  #view-students td {
    display: block;
    width: 100%;
  }

  #view-students thead tr:first-child {
    display: none;
  }

  #view-students thead .table-filters {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.45rem;
    margin-bottom: 0.75rem;
  }

  #view-students thead .table-filters th {
    padding: 0;
    border: 0;
    background: transparent;
    position: static;
  }

  #view-students thead .table-filters th:first-child,
  #view-students thead .table-filters th:last-child {
    display: none;
  }

  #view-students tbody tr {
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    margin-bottom: 0.65rem;
    padding: 0.35rem 0.55rem;
    background: rgba(255, 255, 255, 0.02);
  }

  #view-students tbody tr.is-selected {
    border-color: rgba(37, 99, 235, 0.75);
    background: rgba(37, 99, 235, 0.2);
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.45);
  }

  #view-students tbody tr:last-child {
    margin-bottom: calc(0.75rem + env(safe-area-inset-bottom));
  }

  #view-students tbody td {
    display: grid;
    grid-template-columns: minmax(90px, 120px) 1fr;
    gap: 0.6rem;
    padding: 0.45rem 0;
    border-bottom: 1px dashed var(--border-subtle);
  }

  #view-students tbody td::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }

  #view-students tbody td:last-child {
    border-bottom: 0;
  }

  #view-students .student-actions-cell {
    min-width: 0;
  }

  #view-students .students-empty-row {
    border: 0;
    padding: 0;
    background: transparent;
  }

  #view-students .students-empty-row td {
    display: block;
    padding: 1rem 0.35rem;
    border-bottom: 0;
  }

  #view-students .students-empty-row td::before {
    content: none;
  }
}

@media (max-width: 1024px) {
  #view-classes .table-container {
    overflow: visible !important;
    padding: 0.5rem 0.5rem calc(0.85rem + env(safe-area-inset-bottom)) !important;
  }

  #view-classes table,
  #view-classes thead,
  #view-classes tbody,
  #view-classes tr,
  #view-classes th,
  #view-classes td {
    display: block;
    width: 100%;
  }

  #view-classes thead tr:first-child {
    display: none;
  }

  #view-classes thead .table-filters {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.45rem;
    margin-bottom: 0.75rem;
  }

  #view-classes thead .table-filters th {
    padding: 0;
    border: 0;
    background: transparent;
    position: static;
  }

  #view-classes thead .table-filters th:first-child,
  #view-classes thead .table-filters th:last-child {
    display: none;
  }

  #view-classes tbody tr {
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    margin-bottom: 0.65rem;
    padding: 0.35rem 0.55rem;
    background: rgba(255, 255, 255, 0.02);
  }

  #view-classes tbody tr:last-child {
    margin-bottom: calc(0.75rem + env(safe-area-inset-bottom));
  }

  #view-classes tbody td {
    display: grid;
    grid-template-columns: minmax(90px, 120px) 1fr;
    gap: 0.6rem;
    padding: 0.45rem 0;
    border-bottom: 1px dashed var(--border-subtle);
  }

  #view-classes tbody td::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }

  #view-classes tbody td:last-child {
    border-bottom: 0;
  }

  #view-classes tbody td[colspan]::before {
    content: none;
  }

  #view-classes .table-actions-cell {
    min-width: 0;
  }

  #view-classes .classes-empty-row {
    border: 0;
    padding: 0;
    background: transparent;
  }

  #view-classes .classes-empty-row td {
    display: block;
    padding: 1rem 0.35rem;
    border-bottom: 0;
  }

  #view-classes .classes-empty-row td::before {
    content: none;
  }
}

@media (max-width: 1024px) {
  #view-teachers .table-container {
    overflow: visible !important;
    padding: 0.5rem 0.5rem calc(0.85rem + env(safe-area-inset-bottom)) !important;
  }

  #view-teachers table,
  #view-teachers thead,
  #view-teachers tbody,
  #view-teachers tr,
  #view-teachers th,
  #view-teachers td {
    display: block;
    width: 100%;
  }

  #view-teachers thead {
    display: none;
  }

  #view-teachers tbody tr {
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    margin-bottom: 0.65rem;
    padding: 0.35rem 0.55rem;
    background: rgba(255, 255, 255, 0.02);
  }

  #view-teachers tbody tr.is-selected {
    border-color: rgba(37, 99, 235, 0.75);
    background: rgba(37, 99, 235, 0.2);
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.45);
  }

  #view-teachers tbody tr:last-child {
    margin-bottom: calc(0.75rem + env(safe-area-inset-bottom));
  }

  #view-teachers tbody td {
    display: grid;
    grid-template-columns: minmax(90px, 120px) 1fr;
    gap: 0.6rem;
    padding: 0.45rem 0;
    border-bottom: 1px dashed var(--border-subtle);
  }

  #view-teachers tbody td::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }

  #view-teachers tbody td:last-child {
    border-bottom: 0;
  }

  #view-teachers tbody td[colspan]::before {
    content: none;
  }

  #view-teachers .table-actions-cell {
    min-width: 0;
  }

  #view-teachers .teachers-empty-row {
    border: 0;
    padding: 0;
    background: transparent;
  }

  #view-teachers .teachers-empty-row td {
    display: block;
    padding: 1rem 0.35rem;
    border-bottom: 0;
  }

  #view-teachers .teachers-empty-row td::before {
    content: none;
  }
}

@media (max-width: 1024px) {
  #view-institutions .table-container,
  #view-courses .table-container,
  #view-rooms .table-container {
    overflow: visible !important;
    padding: 0.5rem 0.5rem calc(0.85rem + env(safe-area-inset-bottom)) !important;
  }

  #view-institutions table,
  #view-institutions thead,
  #view-institutions tbody,
  #view-institutions tr,
  #view-institutions th,
  #view-institutions td,
  #view-courses table,
  #view-courses thead,
  #view-courses tbody,
  #view-courses tr,
  #view-courses th,
  #view-courses td,
  #view-rooms table,
  #view-rooms thead,
  #view-rooms tbody,
  #view-rooms tr,
  #view-rooms th,
  #view-rooms td {
    display: block;
    width: 100%;
  }

  #view-courses thead {
    display: none;
  }

  #view-institutions thead tr:first-child,
  #view-rooms thead tr:first-child {
    display: none;
  }

  #view-institutions thead .table-filters,
  #view-rooms thead .table-filters {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.45rem;
    margin-bottom: 0.75rem;
  }

  #view-institutions thead .table-filters th,
  #view-rooms thead .table-filters th {
    padding: 0;
    border: 0;
    background: transparent;
    position: static;
  }

  #view-institutions thead .table-filters th:first-child,
  #view-institutions thead .table-filters th:nth-child(5),
  #view-institutions thead .table-filters th:nth-child(6),
  #view-rooms thead .table-filters th:first-child,
  #view-rooms thead .table-filters th:nth-child(4),
  #view-rooms thead .table-filters th:nth-child(5),
  #view-rooms thead .table-filters th:nth-child(6) {
    display: none;
  }

  #view-institutions tbody tr,
  #view-courses tbody tr,
  #view-rooms tbody tr {
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    margin-bottom: 0.65rem;
    padding: 0.35rem 0.55rem;
    background: rgba(255, 255, 255, 0.02);
  }

  #view-institutions tbody tr:last-child,
  #view-courses tbody tr:last-child,
  #view-rooms tbody tr:last-child {
    margin-bottom: calc(0.75rem + env(safe-area-inset-bottom));
  }

  #view-institutions tbody td,
  #view-courses tbody td,
  #view-rooms tbody td {
    display: grid;
    grid-template-columns: minmax(90px, 120px) 1fr;
    gap: 0.6rem;
    padding: 0.45rem 0;
    border-bottom: 1px dashed var(--border-subtle);
  }

  #view-institutions tbody td::before,
  #view-courses tbody td::before,
  #view-rooms tbody td::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }

  #view-institutions tbody td:last-child,
  #view-courses tbody td:last-child,
  #view-rooms tbody td:last-child {
    border-bottom: 0;
  }

  #view-institutions tbody td[colspan]::before,
  #view-courses tbody td[colspan]::before,
  #view-rooms tbody td[colspan]::before {
    content: none;
  }

  #view-institutions .table-actions-cell,
  #view-courses .table-actions-cell,
  #view-rooms .table-actions-cell {
    min-width: 0;
  }

  #view-institutions .institutions-empty-row,
  #view-courses .courses-empty-row,
  #view-rooms .rooms-empty-row {
    border: 0;
    padding: 0;
    background: transparent;
  }

  #view-institutions .institutions-empty-row td,
  #view-courses .courses-empty-row td,
  #view-rooms .rooms-empty-row td {
    display: block;
    padding: 1rem 0.35rem;
    border-bottom: 0;
  }

  #view-institutions .institutions-empty-row td::before,
  #view-courses .courses-empty-row td::before,
  #view-rooms .rooms-empty-row td::before {
    content: none;
  }

  #view-rooms .room-session-inline {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }

  #view-rooms .room-session-inline-actions {
    width: 100%;
    flex-wrap: wrap;
  }
}

@media (max-width: 1024px) {
  #view-messages .table-container {
    overflow: visible !important;
    padding: 0.5rem !important;
  }

  #view-messages table,
  #view-messages thead,
  #view-messages tbody,
  #view-messages tr,
  #view-messages th,
  #view-messages td {
    display: block;
    width: 100%;
  }

  #view-messages thead {
    display: none;
  }

  #view-messages tbody tr {
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    margin-bottom: 0.65rem;
    padding: 0.35rem 0.55rem;
    background: rgba(255, 255, 255, 0.02);
  }

  #view-messages tbody tr:last-child {
    margin-bottom: 0;
  }

  #view-messages tbody td {
    display: grid;
    grid-template-columns: minmax(90px, 120px) 1fr;
    gap: 0.6rem;
    padding: 0.45rem 0;
    border-bottom: 1px dashed var(--border-subtle);
  }

  #view-messages tbody td::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }

  #view-messages tbody td:last-child {
    border-bottom: 0;
  }

  #view-messages tbody td[colspan]::before {
    content: none;
  }

  #view-messages .table-actions-cell {
    min-width: 0;
  }

  #view-messages .messages-empty-row {
    border: 0;
    padding: 0;
    background: transparent;
  }

  #view-messages .messages-empty-row td {
    display: block;
    padding: 1rem 0.35rem;
    border-bottom: 0;
  }

  #view-messages .messages-empty-row td::before {
    content: none;
  }
}

@media (max-width: 1024px) {
  #view-users .table-container {
    overflow: visible !important;
    padding: 0.5rem !important;
  }

  #view-users table,
  #view-users thead,
  #view-users tbody,
  #view-users tr,
  #view-users th,
  #view-users td {
    display: block;
    width: 100%;
  }

  #view-users thead {
    display: none;
  }

  #view-users tbody tr {
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    margin-bottom: 0.65rem;
    padding: 0.35rem 0.55rem;
    background: rgba(255, 255, 255, 0.02);
  }

  #view-users tbody tr:last-child {
    margin-bottom: 0;
  }

  #view-users tbody td {
    display: grid;
    grid-template-columns: minmax(90px, 120px) 1fr;
    gap: 0.6rem;
    padding: 0.45rem 0;
    border-bottom: 1px dashed var(--border-subtle);
  }

  #view-users tbody td::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }

  #view-users tbody td:last-child {
    border-bottom: 0;
  }

  #view-users tbody td[colspan]::before {
    content: none;
  }

  #view-users .table-actions-cell {
    min-width: 0;
  }

  #view-users .access-groups-empty-row,
  #view-users .users-empty-row {
    border: 0;
    padding: 0;
    background: transparent;
  }

  #view-users .access-groups-empty-row td,
  #view-users .users-empty-row td {
    display: block;
    padding: 1rem 0.35rem;
    border-bottom: 0;
  }

  #view-users .access-groups-empty-row td::before,
  #view-users .users-empty-row td::before {
    content: none;
  }
}

@media (max-width: 1024px) {
  #view-actions .table-container {
    overflow: visible !important;
    padding: 0.5rem !important;
  }

  #view-actions table,
  #view-actions thead,
  #view-actions tbody,
  #view-actions tr,
  #view-actions th,
  #view-actions td {
    display: block;
    width: 100%;
  }

  /* Esconde só a linha de cabeçalho de colunas; a linha de filtros continua visível */
  #view-actions #actions-table thead tr:first-child,
  #view-actions #execution-plan-table thead tr:first-child {
    display: none;
  }

  #view-actions tbody tr {
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    margin-bottom: 0.65rem;
    padding: 0.35rem 0.55rem;
    background: rgba(255, 255, 255, 0.02);
  }

  #view-actions tbody tr:last-child {
    margin-bottom: 0;
  }

  #view-actions tbody td {
    display: grid;
    grid-template-columns: minmax(90px, 120px) 1fr;
    gap: 0.6rem;
    padding: 0.45rem 0;
    border-bottom: 1px dashed var(--border-subtle);
  }

  #view-actions tbody td::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }

  #view-actions tbody td:last-child {
    border-bottom: 0;
  }

  #view-actions tbody td[colspan]::before {
    content: none;
  }

  #view-actions .table-actions-cell {
    min-width: 0;
  }

  #view-actions .actions-empty-row {
    border: 0;
    padding: 0;
    background: transparent;
  }

  #view-actions .actions-empty-row td {
    display: block;
    padding: 1rem 0.35rem;
    border-bottom: 0;
  }

  #view-actions .actions-empty-row td::before {
    content: none;
  }
}

@media (max-width: 1024px) {
  #view-schedule .table-container {
    overflow: visible !important;
    padding: 0.5rem !important;
  }

  #view-schedule table,
  #view-schedule thead,
  #view-schedule tbody,
  #view-schedule tr,
  #view-schedule th,
  #view-schedule td {
    display: block;
    width: 100%;
  }

  #view-schedule thead tr:first-child {
    display: none;
  }

  #view-schedule thead .table-filters {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.45rem;
    margin-bottom: 0.75rem;
  }

  #view-schedule thead .table-filters th {
    padding: 0;
    border: 0;
    background: transparent;
    position: static;
  }

  #view-schedule tbody tr {
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    margin-bottom: 0.65rem;
    padding: 0.35rem 0.55rem;
    background: rgba(255, 255, 255, 0.02);
  }

  #view-schedule tbody tr:last-child {
    margin-bottom: 0;
  }

  #view-schedule tbody td {
    display: grid;
    grid-template-columns: minmax(90px, 120px) 1fr;
    gap: 0.6rem;
    padding: 0.45rem 0;
    border-bottom: 1px dashed var(--border-subtle);
  }

  #view-schedule tbody td::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }

  #view-schedule tbody td:last-child {
    border-bottom: 0;
  }

  #view-schedule tbody td[colspan]::before {
    content: none;
  }

  #view-schedule .table-actions-cell {
    min-width: 0;
  }

  #view-schedule .schedule-empty-row {
    border: 0;
    padding: 0;
    background: transparent;
  }

  #view-schedule .schedule-empty-row td {
    display: block;
    padding: 1rem 0.35rem;
    border-bottom: 0;
  }

  #view-schedule .schedule-empty-row td::before {
    content: none;
  }
}

#view-classes .view-header,
#view-teachers .view-header,
#view-institutions .view-header,
#view-courses .view-header,
#view-rooms .view-header,
#view-messages .view-header,
#view-users .view-header,
#view-actions .view-header {
  flex-wrap: wrap;
  gap: 0.85rem 1rem;
  align-items: flex-start;
}

#view-classes .view-header .actions,
#view-teachers .view-header .actions,
#view-institutions .view-header .actions,
#view-courses .view-header .actions,
#view-rooms .view-header .actions,
#view-messages .view-header .actions,
#view-users .view-header .actions,
#view-actions .view-header .actions {
  width: 100%;
  flex-wrap: wrap;
  gap: 0.6rem;
}

#view-classes .view-header .actions #class-search-input,
#view-teachers .view-header .actions #teacher-search,
#view-institutions .view-header .actions #institution-search,
#view-rooms .view-header .actions #room-search {
  flex: 1 1 260px;
  min-width: 220px;
}

.table-actions-cell {
  min-width: 190px;
}

.table-row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.table-action-btn {
  padding: 0.4rem 0.8rem;
  font-size: 0.8rem;
}

.table-action-btn-danger {
  color: var(--danger);
  border-color: var(--danger);
}

#view-classes .table-container {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22);
  padding: 0.25rem 0.25rem 0.5rem;
  overflow-x: auto;
}

#view-classes table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

#view-classes th,
#view-classes td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-main);
  vertical-align: top;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#view-classes thead th {
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  position: sticky;
  top: 0;
  z-index: 1;
}

#view-classes .table-filters th {
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--border);
}

#view-classes .table-filters input,
#view-classes .table-filters select {
  width: 100%;
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-main);
  font-size: 0.9rem;
}

#view-classes .table-filters input:focus,
#view-classes .table-filters select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
}

#view-classes tbody tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

#view-classes tbody tr:last-child td {
  border-bottom: 0;
}

#view-classes th.sortable {
  cursor: pointer;
  position: relative;
  user-select: none;
  padding-right: 1.6rem;
}

#view-classes th.sortable::after {
  content: '??.';
  position: absolute;
  right: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  color: var(--text-muted);
  opacity: 0.6;
}

#view-classes th.sorted-asc::after {
  content: '?-?';
  color: var(--primary);
  opacity: 1;
}

#view-classes th.sorted-desc::after {
  content: '?-?';
  color: var(--primary);
  opacity: 1;
}

#view-classes .actions .btn-primary {
  border-radius: 10px;
  padding: 0.6rem 1.1rem;
  font-weight: 700;
}

#view-classes .btn-secondary {
  border-radius: 10px;
  padding: 0.45rem 0.8rem;
  font-weight: 600;
}

#view-teachers .table-container {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22);
  padding: 0.25rem 0.25rem 0.5rem;
  overflow-x: auto;
}

#view-teachers > .view-header {
  margin-bottom: 1rem;
}

#view-teachers .teachers-tab-card {
  padding-top: 1rem;
}

#view-teachers .teachers-tab-card > .tab-panels {
  margin-top: 0.75rem;
}

#view-teachers table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

#view-teachers th,
#view-teachers td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-main);
  vertical-align: top;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#view-teachers thead th {
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  position: sticky;
  top: 0;
  z-index: 1;
}

#view-teachers tbody tr[data-teacher-id] {
  cursor: pointer;
}

#view-teachers tbody tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

#view-teachers tbody tr.is-selected {
  background: rgba(37, 99, 235, 0.16);
  outline: 1px solid rgba(37, 99, 235, 0.45);
}

#view-teachers tbody tr.is-selected:hover {
  background: rgba(37, 99, 235, 0.22);
}

#view-teachers tbody tr:last-child td {
  border-bottom: 0;
}

#view-teachers .btn-secondary {
  border-radius: 10px;
  padding: 0.45rem 0.8rem;
  font-weight: 600;
}

#view-teachers .teachers-tab-placeholder {
  padding: 1.25rem;
}

#view-teachers .teachers-tab-placeholder p {
  margin-top: 0.5rem;
}

#view-institutions .table-container,
#view-courses .table-container,
#view-rooms .table-container {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22);
  padding: 0.25rem 0.25rem 0.5rem;
  overflow-x: auto;
}

#view-institutions table,
#view-courses table,
#view-rooms table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

#view-institutions th,
#view-institutions td,
#view-courses th,
#view-courses td,
#view-rooms th,
#view-rooms td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-main);
  vertical-align: top;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#view-institutions thead th,
#view-courses thead th,
#view-rooms thead th {
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  position: sticky;
  top: 0;
  z-index: 1;
}

#view-institutions .table-filters th,
#view-rooms .table-filters th {
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--border);
}

#view-institutions .table-filters input,
#view-institutions .table-filters select,
#view-rooms .table-filters input,
#view-rooms .table-filters select {
  width: 100%;
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-main);
  font-size: 0.9rem;
}

#view-institutions .table-filters input:focus,
#view-institutions .table-filters select:focus,
#view-rooms .table-filters input:focus,
#view-rooms .table-filters select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
}

#view-institutions tbody tr:hover,
#view-courses tbody tr:hover,
#view-rooms tbody tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

#view-institutions tbody tr:last-child td,
#view-courses tbody tr:last-child td,
#view-rooms tbody tr:last-child td {
  border-bottom: 0;
}

#view-institutions .btn-secondary,
#view-courses .btn-secondary,
#view-rooms .btn-secondary {
  border-radius: 10px;
  padding: 0.45rem 0.8rem;
  font-weight: 600;
}

#view-users .table-container,
#view-actions .table-container,
#view-schedule .table-container {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22);
  padding: 0.25rem 0.25rem 0.5rem;
  overflow-x: auto;
}

#view-users table,
#view-actions table,
#view-schedule table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

#view-users th,
#view-users td,
#view-actions th,
#view-actions td,
#view-schedule th,
#view-schedule td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-main);
  vertical-align: top;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#view-users thead th,
#view-actions thead th,
#view-schedule thead th {
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  position: sticky;
  top: 0;
  z-index: 1;
}

#view-users tbody tr:hover,
#view-actions tbody tr:hover,
#view-schedule tbody tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

#view-users tbody tr:last-child td,
#view-actions tbody tr:last-child td,
#view-schedule tbody tr:last-child td {
  border-bottom: 0;
}

#view-actions .view-header {
  flex-wrap: wrap;
  gap: 0.85rem 1rem;
  align-items: flex-start;
}

#view-actions .view-header .actions,
#view-users .view-header .actions {
  width: 100%;
  flex-wrap: wrap;
  gap: 0.6rem;
}

#view-schedule .table-filters th {
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--border);
}

#view-schedule .table-filters input,
#view-schedule .table-filters select {
  width: 100%;
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-main);
  font-size: 0.9rem;
}

#view-schedule .table-filters input:focus,
#view-schedule .table-filters select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
}

#view-actions .table-muted,
#view-schedule .table-muted {
  white-space: pre-wrap;
}

#view-schedule .schedule-title-cell {
  font-weight: 600;
}

#view-schedule .schedule-desc-cell {
  white-space: pre-wrap;
}

.schedule-table-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.action-list {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.action-item {
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 0.45rem 0.55rem;
  display: flex;
  justify-content: space-between;
  gap: 0.55rem;
  background: rgba(255, 255, 255, 0.02);
}

.action-item__content {
  min-width: 0;
}

.action-item__buttons {
  display: flex;
  align-items: flex-start;
}

/* Messages module - table and filters */
#view-messages .filters-grid {
  gap: 0.8rem;
}

#view-messages .filters-grid .form-group {
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 0.75rem 0.85rem;
  background: rgba(255, 255, 255, 0.02);
}

#view-messages .filters-grid label {
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

#view-messages .filters-grid select {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-main);
}

#view-messages .filters-grid select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
}

#view-messages .table-container {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22);
  padding: 0.25rem 0.25rem 0.5rem;
  overflow-x: auto;
}

#view-messages table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

#view-messages th,
#view-messages td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-main);
  vertical-align: top;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#view-messages thead th {
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  position: sticky;
  top: 0;
  z-index: 1;
}

#view-messages tbody tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

#view-messages tbody tr:last-child td {
  border-bottom: 0;
}

#view-messages .btn-secondary {
  border-radius: 10px;
  padding: 0.45rem 0.8rem;
  font-weight: 600;
}

#view-messages .message-title-cell {
  font-weight: 600;
}

#view-messages .message-body-cell {
  white-space: pre-wrap;
}

#view-messages .message-image-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 0.25rem;
}

#view-messages .message-ai-tools,
#modal-message .message-ai-tools {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

#view-messages .message-ai-tools input,
#modal-message .message-ai-tools input {
  flex: 1;
  min-width: 220px;
}

#view-messages .message-ai-tools .small,
#modal-message .message-ai-tools .small {
  min-height: 18px;
}

#view-messages .message-image-upload-label {
  cursor: pointer;
}

#view-messages .message-image-preview,
#modal-message .message-image-preview {
  margin-top: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  width: 100%;
  max-width: 100%;
  text-align: center;
}

#view-messages .message-image-preview img,
#view-messages .message-image-preview video,
#modal-message .message-image-preview img,
#modal-message .message-image-preview video {
  width: 200px;
  height: 250px;
  max-width: 100%;
  max-height: 60vh;
  object-fit: contain;
  border-radius: 8px;
  display: block;
  margin: 0 auto;
}

#view-messages .message-thumb {
  width: 88px;
  height: 72px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  align-items: center;
  justify-content: center;
}

#view-messages .message-thumb--video {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#view-messages .message-thumb img,
#view-messages .message-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Lessons module - align grid/form to students */
#view-lessons .table-container {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22);
  padding: 0.25rem 0.25rem 0.5rem;
}

#view-lessons table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

#view-lessons th,
#view-lessons td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-main);
}

#view-lessons thead th {
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  position: sticky;
  top: 0;
  z-index: 1;
}

#view-lessons .table-filters th {
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--border);
}

#view-lessons .table-filters input,
#view-lessons .table-filters select {
  width: 100%;
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-main);
  font-size: 0.9rem;
}

#view-lessons .table-filters input:focus,
#view-lessons .table-filters select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
}

#view-lessons tbody tr[data-lesson-id] {
  cursor: pointer;
}

#view-lessons tbody tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

#view-lessons #lesson-list-body tr.lesson-list-row-open td {
  background: rgba(16, 185, 129, 0.12);
}

#view-lessons #lesson-list-body tr.lesson-list-row-open:hover td {
  background: rgba(16, 185, 129, 0.18);
}

#view-lessons #lesson-list-body tr.lesson-list-row-open td:first-child {
  box-shadow: inset 4px 0 0 var(--success);
}

body[data-theme="light"] #view-lessons #lesson-list-body tr.lesson-list-row-open td {
  background: rgba(5, 150, 105, 0.1);
}

body[data-theme="light"] #view-lessons #lesson-list-body tr.lesson-list-row-open:hover td {
  background: rgba(5, 150, 105, 0.15);
}

#view-lessons #lesson-list-body tr.is-selected td {
  background: rgba(79, 70, 229, 0.14);
}

#view-lessons #lesson-list-body tr.is-selected:hover td {
  background: rgba(79, 70, 229, 0.2);
}

#view-lessons #lesson-list-body tr.is-selected td:first-child {
  box-shadow: inset 4px 0 0 var(--primary);
}

body[data-theme="light"] #view-lessons #lesson-list-body tr.is-selected td {
  background: rgba(79, 70, 229, 0.1);
}

body[data-theme="light"] #view-lessons #lesson-list-body tr.is-selected:hover td {
  background: rgba(79, 70, 229, 0.16);
}

#view-lessons .lesson-type-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 110px;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: center;
}

#view-lessons .lesson-type-badge.lesson-type-sync {
  background: rgba(59, 130, 246, 0.16);
  border-color: rgba(59, 130, 246, 0.32);
  color: #bfdbfe;
}

#view-lessons .lesson-type-badge.lesson-type-async {
  background: rgba(245, 158, 11, 0.16);
  border-color: rgba(245, 158, 11, 0.32);
  color: #fde68a;
}

#view-lessons .lesson-type-badge.lesson-type-unknown {
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.24);
  color: var(--text-muted);
}

#view-lessons .lesson-stats-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#view-lessons .lesson-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.9rem;
}

#view-lessons .lesson-stat-card {
  padding: 1rem 1.05rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

#view-lessons .lesson-stat-label {
  color: var(--text-muted);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

#view-lessons .lesson-stat-value {
  font-size: clamp(1.5rem, 2vw, 2.1rem);
  line-height: 1;
  color: var(--text-main);
}

#view-lessons .lesson-stat-meta {
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.4;
}

#view-lessons .lesson-stats-footnote {
  border-top: 1px solid var(--border-subtle);
  padding-top: 0.85rem;
}

#view-lessons .lesson-list-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
}

#view-lessons .lesson-open-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(16, 185, 129, 0.3);
  background: rgba(16, 185, 129, 0.18);
  color: #d1fae5;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

body[data-theme="light"] #view-lessons .lesson-open-indicator {
  border-color: rgba(5, 150, 105, 0.28);
  background: rgba(5, 150, 105, 0.14);
  color: #065f46;
}

#view-lessons #lesson-attendance-list tr.lesson-attendance-row-new-since-previous {
  background: rgba(16, 185, 129, 0.16);
}

#view-lessons #lesson-attendance-list tr.lesson-attendance-row-new-since-previous:hover {
  background: rgba(16, 185, 129, 0.24);
}

body[data-theme="light"] #view-lessons #lesson-attendance-list tr.lesson-attendance-row-new-since-previous {
  background: rgba(5, 150, 105, 0.12);
}

body[data-theme="light"] #view-lessons #lesson-attendance-list tr.lesson-attendance-row-new-since-previous:hover {
  background: rgba(5, 150, 105, 0.18);
}

#view-lessons tbody tr:last-child td {
  border-bottom: 0;
}

#view-lessons .btn-secondary {
  border-radius: 10px;
  padding: 0.45rem 0.8rem;
  font-weight: 600;
}

#view-lessons #lesson-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 0.75rem 0.85rem;
}

#view-lessons #lesson-form label {
  font-weight: 600;
  color: var(--text-muted);
}

#view-lessons #lesson-form input,
#view-lessons #lesson-form select,
#view-lessons #lesson-form textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-main);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#view-lessons #lesson-form input:focus,
#view-lessons #lesson-form select:focus,
#view-lessons #lesson-form textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
}

/* Garantir contraste das opcoes dos dropdowns no modulo de Aulas */
#view-lessons select {
  color: var(--text-main);
}

#view-lessons select option,
#view-lessons select optgroup {
  background-color: #1a2332;
  color: #e2e8f0;
}

#view-lessons select option:disabled {
  color: #94a3b8;
}

body[data-theme="light"] #view-lessons select option,
body[data-theme="light"] #view-lessons select optgroup {
  background-color: #ffffff;
  color: #0f172a;
}

body[data-theme="light"] #view-lessons select option:disabled {
  color: #64748b;
}

body[data-theme="radix"] #view-lessons select option,
body[data-theme="radix"] #view-lessons select optgroup {
  background-color: #0f172a;
  color: #e5e7eb;
}

body:not([data-theme="light"]) #view-lessons select {
  color-scheme: dark;
}

body[data-theme="light"] #view-lessons select {
  color-scheme: light;
}

/* ===== Lessons Module - Responsivo Mobile ===== */
@media (max-width: 1024px) {
  #view-lessons .table-container {
    overflow: visible;
    padding: 0.5rem 0.5rem calc(0.85rem + env(safe-area-inset-bottom));
  }

  #view-lessons table,
  #view-lessons thead,
  #view-lessons tbody,
  #view-lessons tr,
  #view-lessons th,
  #view-lessons td {
    display: block;
    width: 100%;
  }

  #view-lessons thead tr:first-child {
    display: none;
  }

  #view-lessons thead .table-filters {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.45rem;
    margin-bottom: 0.75rem;
  }

  #view-lessons thead .table-filters th {
    padding: 0;
    border: 0;
    background: transparent;
    position: static;
  }

  #view-lessons thead .table-filters th:last-child {
    display: none;
  }

  #view-lessons tbody tr {
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    margin-bottom: 0.65rem;
    padding: 0.35rem 0.55rem;
    background: rgba(255, 255, 255, 0.02);
  }

  #view-lessons tbody tr.is-selected {
    border-color: rgba(79, 70, 229, 0.45);
    background: rgba(79, 70, 229, 0.08);
  }

  #view-lessons tbody tr:last-child {
    margin-bottom: calc(0.75rem + env(safe-area-inset-bottom));
  }

  #view-lessons tbody td {
    display: grid;
    grid-template-columns: minmax(90px, 120px) 1fr;
    gap: 0.6rem;
    padding: 0.45rem 0;
    border-bottom: 1px dashed var(--border-subtle);
  }

  #view-lessons tbody td::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }

  #view-lessons tbody td:last-child {
    border-bottom: 0;
  }

  #view-lessons .lesson-stats-grid {
    grid-template-columns: 1fr;
  }

  #view-lessons .lessons-empty-row {
    border: 0;
    padding: 0;
    background: transparent;
  }

  #view-lessons .lessons-empty-row td {
    display: block;
    padding: 1rem 0.35rem;
    border-bottom: 0;
  }

  #view-lessons .lessons-empty-row td::before {
    content: none;
  }

  #view-lessons #lesson-form {
    grid-template-columns: 1fr;
  }
}

#view-messages th.sortable {
  cursor: pointer;
  position: relative;
  user-select: none;
  padding-right: 1.6rem;
}

#view-messages th.sortable::after {
  content: '⇅';
  position: absolute;
  right: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  color: var(--text-muted);
  opacity: 0.6;
}

#view-messages th.sorted-asc::after {
  content: '▲';
  color: var(--primary);
  opacity: 1;
}

#view-messages th.sorted-desc::after {
  content: '▼';
  color: var(--primary);
  opacity: 1;
}

/* Students forms - clean stacked layout */
#view-add .form-card,
#view-edit .form-card,
#students-tab-registro .form-card,
#teachers-tab-registro .form-card,
#view-classes-add .form-card,
#view-classes-edit .form-card {
  padding: 1.5rem;
}

#view-add .form-grid,
#view-edit .form-grid,
#students-tab-registro .form-grid,
#teachers-tab-registro .form-grid,
#view-classes-add .form-grid,
#view-classes-edit .form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}

#view-add .form-group,
#view-edit .form-group,
#students-tab-registro .form-group,
#teachers-tab-registro .form-group,
#view-classes-add .form-group,
#view-classes-edit .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 0.85rem 0.9rem;
}

#view-add .form-group.full-width,
#view-edit .form-group.full-width,
#students-tab-registro .form-group.full-width,
#teachers-tab-registro .form-group.full-width,
#view-classes-add .form-group.full-width,
#view-classes-edit .form-group.full-width {
  grid-column: 1 / -1;
}

#view-add .form-group label,
#view-edit .form-group label,
#students-tab-registro .form-group label,
#teachers-tab-registro .form-group label,
#view-classes-add .form-group label,
#view-classes-edit .form-group label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-muted);
}

#view-add input,
#view-add select,
#view-add textarea,
#view-edit input,
#view-edit select,
#view-edit textarea,
#students-tab-registro input,
#students-tab-registro select,
#students-tab-registro textarea,
#teachers-tab-registro input,
#teachers-tab-registro select,
#teachers-tab-registro textarea,
#view-classes-add input,
#view-classes-add select,
#view-classes-add textarea,
#view-classes-edit input,
#view-classes-edit select,
#view-classes-edit textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-main);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#view-add input:focus,
#view-add select:focus,
#view-add textarea:focus,
#view-edit input:focus,
#view-edit select:focus,
#view-edit textarea:focus,
#students-tab-registro input:focus,
#students-tab-registro select:focus,
#students-tab-registro textarea:focus,
#teachers-tab-registro input:focus,
#teachers-tab-registro select:focus,
#teachers-tab-registro textarea:focus,
#view-classes-add input:focus,
#view-classes-add select:focus,
#view-classes-add textarea:focus,
#view-classes-edit input:focus,
#view-classes-edit select:focus,
#view-classes-edit textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
}

#view-add .form-group textarea,
#view-edit .form-group textarea,
#students-tab-registro .form-group textarea,
#teachers-tab-registro .form-group textarea,
#view-classes-add .form-group textarea,
#view-classes-edit .form-group textarea {
  min-height: 120px;
  resize: vertical;
}

#view-add .form-actions,
#view-edit .form-actions,
#students-tab-registro .form-actions,
#teachers-tab-registro .form-actions,
#view-classes-add .form-actions,
#view-classes-edit .form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
}

/* Messages integrations/simulation forms - align with students module */
#messages-tab-integrations .compact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

#messages-tab-integrations .form-group,
#messages-tab-simulation .message-simulation-recipient {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 0.85rem 0.9rem;
}

#messages-tab-integrations .form-group.full-width,
#messages-tab-integrations .form-actions.full-width {
  grid-column: 1 / -1;
}

#messages-tab-integrations .form-group label,
#messages-tab-simulation .message-simulation-recipient__label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-muted);
}

#messages-tab-integrations input,
#messages-tab-integrations select,
#messages-tab-integrations textarea,
#messages-tab-simulation select {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-main);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#messages-tab-integrations input:focus,
#messages-tab-integrations select:focus,
#messages-tab-integrations textarea:focus,
#messages-tab-simulation select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
}

#messages-tab-integrations .form-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.hidden {
  display: none !important;
}

body {
  font-family: 'Inter', sans-serif;
  background: radial-gradient(circle at 20% 20%, rgba(34, 211, 238, 0.12), transparent 35%),
    radial-gradient(circle at 80% 0%, rgba(124, 58, 237, 0.18), transparent 40%),
    linear-gradient(160deg, #050914 0%, #070c1b 40%, #0a1022 100%);
  color: var(--text-main);
  height: 100vh;
  overflow: hidden;
}

.theme-switcher {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 1200;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.8rem;
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(6px);
}

.theme-switcher label {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.theme-switcher select {
  background: transparent;
  color: var(--text-main);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.4rem 0.8rem;
  font-size: 0.9rem;
}

.theme-switcher.hidden {
  display: none;
}

@media (max-width: 768px) {
  .theme-switcher {
    left: auto;
    right: 12px;
    bottom: 12px;
    transform: none;
  }
}

/* ---- Layout ---- */
.app-container {
  display: flex;
  height: 100vh;
}

.app-container.hidden {
  display: none;
}

.logo {
  margin-bottom: 2rem;
  text-align: center;
  padding: 0.5rem 1rem;
}

.logo-img {
  max-width: 180px;
  width: 100%;
  height: auto;
}

.logo-img-mobile {
  max-height: 36px;
  width: auto;
}

.sidebar {
  width: var(--sidebar-width);
  background: var(--surface-elevated);
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100vh;
  overflow-y: auto;
  position: fixed;
  top: 0;
  right: 0;
  left: auto;
  z-index: 900;
  transform: translateX(100%);
  transition: transform 0.2s ease;
  pointer-events: none;
  visibility: hidden;
}

.sidebar.open {
  transform: translateX(0);
  pointer-events: auto;
  visibility: visible;
}

.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(3, 8, 20, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 850;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.sidebar-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.menu {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.menu-item {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 0.8rem 1rem;
  text-align: left;
  font-size: 1rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  font-weight: 500;
}

.menu-item:hover {
  background-color: rgba(59, 130, 246, 0.1);
  color: var(--primary);
}

.menu-item.active {
  background-color: var(--primary);
  color: white;
}

.sidebar-group {
  margin-bottom: 0.5rem;
}

.sidebar-group.open .chevron {
  transform: rotate(-135deg);
}

.menu-group {
  width: 100%;
  background: none;
  border: none;
  color: var(--text-muted);
  font-weight: 600;
  text-align: left;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.menu-group:hover {
  color: var(--primary);
}

.menu-group .chevron {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.submenu {
  display: none;
  flex-direction: column;
  margin-top: 0.25rem;
  padding-left: 0.5rem;
  gap: 0.2rem;
}

.submenu.open {
  display: flex;
}

.submenu .menu-item {
  font-size: 0.95rem;
  padding-left: 1.5rem;
}

.permission-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
}

.permission-table th,
.permission-table td {
  padding: 0.4rem 0.5rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.permission-table th {
  color: var(--text-muted);
  font-weight: 600;
}

.permission-table td {
  color: var(--text-main);
}

.permission-table input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

/* ===== Modais de Usuário e Grupo de Acesso ===== */
#modal-user .modal-content,
#modal-access-group .modal-content {
  max-width: 720px;
}

#modal-user .form-grid,
#modal-access-group .form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.85rem;
  margin-bottom: 0.85rem;
}

#modal-user .form-group,
#modal-access-group .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}

#modal-user .form-group.full-width,
#modal-access-group .form-group.full-width {
  grid-column: 1 / -1;
}

#modal-user .form-group label,
#modal-access-group .form-group label {
  font-weight: 600;
  color: var(--text-muted);
  font-size: 0.92rem;
}

#modal-user input:not([type="checkbox"]),
#modal-user select,
#modal-user textarea,
#modal-access-group input:not([type="checkbox"]),
#modal-access-group select,
#modal-access-group textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--bg-input, rgba(255,255,255,0.04));
  color: var(--text-main);
  font-size: 0.95rem;
  box-sizing: border-box;
}

#modal-user input:not([type="checkbox"]):focus,
#modal-user select:focus,
#modal-user textarea:focus,
#modal-access-group input:not([type="checkbox"]):focus,
#modal-access-group select:focus,
#modal-access-group textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
}

#modal-user .form-actions,
#modal-access-group .form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

#modal-self-change-password .modal-content {
  max-width: 560px;
}

#modal-self-change-password .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

#modal-self-change-password .form-group + .form-group {
  margin-top: 0.7rem;
}

.password-field-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.password-field-row input {
  flex: 1;
}

.password-toggle-btn {
  white-space: nowrap;
  min-width: 92px;
}

/* Tabela de permissões — scroll horizontal + células compactas */
.permission-table-wrapper {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
}

.permission-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0;
  min-width: 360px;
}

/* Mobile: permission rows compactos (sem overflow horizontal) */
@media (max-width: 560px) {
  .permission-table thead {
    display: none;
  }

  .permission-table tbody tr {
    display: grid;
    grid-template-columns: 1fr repeat(4, 36px);
    align-items: center;
    gap: 0.15rem;
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--border-subtle);
  }

  .permission-table tbody tr:last-child {
    border-bottom: 0;
  }

  .permission-table td {
    padding: 0 !important;
    border: none !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }

  .permission-table td:first-child {
    font-size: 0.82rem;
    font-weight: 600;
    align-items: flex-start;
  }

  .permission-table td:nth-child(2)::before { content: "Ver"; }
  .permission-table td:nth-child(3)::before { content: "Criar"; }
  .permission-table td:nth-child(4)::before { content: "Editar"; }
  .permission-table td:nth-child(5)::before { content: "Excluir"; }

  .permission-table td:nth-child(2)::before,
  .permission-table td:nth-child(3)::before,
  .permission-table td:nth-child(4)::before,
  .permission-table td:nth-child(5)::before {
    font-size: 0.55rem;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }

  .permission-table input[type="checkbox"] {
    width: 16px;
    height: 16px;
  }
}

.schedule-grid {
  display: grid;
  gap: 0.35rem;
}

.schedule-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 0.5rem;
  align-items: center;
}

.schedule-row.header {
  font-weight: 600;
  color: var(--text-muted);
}

.schedule-day {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
}

.schedule-row input[type="time"] {
  width: 100%;
  padding: 0.45rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-main);
}

.lesson-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.lesson-search input {
  flex: 1;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-main);
}

.lesson-search-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.lesson-search-actions button {
  padding: 0.35rem 0.55rem;
}

.last-lesson-list {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

.last-lesson-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(min(320px, 100%), 1fr));
  gap: 0.75rem;
  align-items: start;
}

.last-lesson-grid > * {
  min-width: 0;
}

@media (max-width: 900px) {
  .last-lesson-grid {
    grid-template-columns: 1fr;
  }
}

.last-lesson-class {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 0.75rem;
  min-width: 0;
}

.last-lesson-class header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.last-lesson-class h4 {
  margin: 0;
  font-size: 1rem;
}

.last-lesson-lessons {
  display: grid;
  gap: 0.5rem;
}

.last-lesson-chart {
  margin-top: 1rem;
  display: grid;
  gap: 0.75rem;
  min-width: 0;
}

.lesson-chart-card {
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.02);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  min-width: 0;
}

.lesson-line-chart {
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.02);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  min-width: 0;
}

.lesson-line-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.lesson-line-chart-header > .lesson-line-title {
  flex: 1 1 220px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.lesson-line-legend {
  display: flex;
  align-items: center;
  gap: 0.6rem 0.75rem;
  flex-wrap: wrap;
  min-width: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.lesson-line-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  white-space: nowrap;
}
.lesson-line-legend-item[data-series] {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: opacity 0.15s;
}
.lesson-line-legend-item[data-series]:hover {
  opacity: 0.7;
}
.lesson-line-legend-item.series-off {
  opacity: 0.35;
  text-decoration: line-through;
}
.lesson-line-svg polyline.series-off {
  opacity: 0;
}
.line-value-layer > div.series-off {
  display: none;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 0;
}

.legend-green {
  background: #22c55e;
}

.legend-orange {
  background: #f97316;
}

.legend-gray {
  background: #94a3b8;
}

.legend-blue {
  background: #38bdf8;
}

.lesson-line-svg {
  width: 100%;
  height: 140px;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}

.lesson-line-plot {
  position: relative;
}

.lesson-line-svg polyline {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
  transition: opacity 0.2s;
}

.line-value-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.line-value-label {
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.55rem;
  height: 1.55rem;
  padding: 0 0.18rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: rgba(3, 10, 25, 0.86);
  font-size: 0.78rem;
  line-height: 1;
  font-weight: 500;
  color: #e2e8f0;
  white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(3, 10, 25, 0.35);
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
}
.line-value-label:hover {
  transform: translate(-50%, -50%) scale(1.25);
}
.line-value-green:hover  { box-shadow: 0 0 0 2px #22c55e; }
.line-value-orange:hover { box-shadow: 0 0 0 2px #f97316; }
.line-value-gray:hover   { box-shadow: 0 0 0 2px #94a3b8; }
.line-value-blue:hover   { box-shadow: 0 0 0 2px #38bdf8; }
.line-value-rose:hover   { box-shadow: 0 0 0 2px #f43f5e; }

.line-value-green,
.line-value-orange,
.line-value-gray,
.line-value-blue,
.line-value-rose {
  color: #e2e8f0;
}

.line-green {
  stroke: #22c55e;
}
.line-orange {
  stroke: #f97316;
}
.line-gray {
  stroke: #94a3b8;
}
.line-blue {
  stroke: #38bdf8;
  stroke-dasharray: 6 4;
}
.line-rose {
  stroke: #f43f5e;
}
.legend-rose {
  background: #f43f5e;
}

/* ── Popup de ponto do gráfico ─────────────────────────────── */
.line-chart-popup {
  position: fixed;
  z-index: 9999;
  min-width: 200px;
  background: rgba(10, 18, 38, 0.97);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
  padding: 0.75rem 0.9rem;
  animation: popupFadeIn 0.12s ease;
}
@keyframes popupFadeIn {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}
.popup-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}
.popup-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: #e2e8f0;
}
.popup-subtitle {
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}
.popup-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.1rem;
  flex-shrink: 0;
}
.popup-close:hover { color: #e2e8f0; }
.popup-rows {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.popup-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  padding: 0.22rem 0.3rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.1s;
}
.popup-row:hover {
  background: rgba(148, 163, 184, 0.12);
  color: #e2e8f0;
}
.popup-row-active {
  background: rgba(148, 163, 184, 0.1);
  color: #e2e8f0;
  font-weight: 600;
}
.popup-row-arrow {
  font-size: 0.85rem;
  color: var(--text-muted);
  opacity: 0.5;
  margin-left: auto;
  padding-left: 0.2rem;
}
.popup-row:hover .popup-row-arrow {
  opacity: 1;
}
.popup-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.popup-dot-green  { background: #22c55e; }
.popup-dot-orange { background: #f97316; }
.popup-dot-gray   { background: #94a3b8; }
.popup-dot-blue   { background: #38bdf8; }
.popup-dot-rose   { background: #f43f5e; }
.popup-label {
  flex: 1;
}
.popup-value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #e2e8f0;
}
/* ── Detail view ───────────────────────────────────────────── */
.popup-header-nav {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.popup-back {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.15rem;
  flex-shrink: 0;
}
.popup-back:hover { color: #e2e8f0; }
.popup-detail-header {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.3rem 0.4rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.15);
  margin-bottom: 0.3rem;
}
.popup-detail-title {
  flex: 1;
  font-size: 0.82rem;
  font-weight: 600;
  color: #e2e8f0;
}
.popup-detail-count {
  font-size: 0.82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #e2e8f0;
}
.popup-student-list {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  max-height: 180px;
  overflow-y: auto;
  padding-right: 0.1rem;
}
.popup-student-list.popup-loading {
  font-size: 0.8rem;
  color: var(--text-muted);
  padding: 0.3rem 0.3rem;
}
.popup-student {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.18rem 0.3rem;
  border-radius: 5px;
  font-size: 0.81rem;
}
.popup-student:hover {
  background: rgba(148, 163, 184, 0.08);
}
.popup-student-highlight {
  background: rgba(56, 189, 248, 0.1);
}
.popup-student-highlight:hover {
  background: rgba(56, 189, 248, 0.16);
}
.popup-student-name {
  color: #cbd5e1;
}
.popup-student-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.08rem 0.4rem;
  border-radius: 999px;
  background: rgba(56, 189, 248, 0.18);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #bae6fd;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.popup-student-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.popup-student-action-btn {
  white-space: nowrap;
}
.popup-student-summary {
  padding-bottom: 0.45rem;
  margin-bottom: 0.15rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}
.popup-student-section {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-top: 0.15rem;
}
.popup-student-section-highlight {
  margin-top: 0.1rem;
}
.popup-student-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.25rem 0.3rem 0.15rem;
}
.popup-student-section-title {
  font-size: 0.76rem;
  font-weight: 700;
  color: #e2e8f0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.popup-student-section-count {
  font-size: 0.74rem;
  font-weight: 700;
  color: #94a3b8;
}
.popup-empty,
.popup-note {
  font-size: 0.79rem;
  color: var(--text-muted);
  padding: 0.25rem 0.3rem;
  line-height: 1.45;
}

.lesson-line-labels {
  display: flex;
  gap: 0;
  margin-top: 0.45rem;
  align-items: flex-end;
  min-height: 84px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.lesson-line-labels > .axis-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  min-width: 0;
}

.lesson-line-labels > .axis-item .axis-label {
  text-align: center;
  display: inline-flex;
  justify-content: center;
  align-items: flex-end;
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.78rem;
  line-height: 1;
  min-height: 56px;
}

.lesson-line-labels > .axis-item .axis-label.room-axis-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  min-height: 56px;
  align-items: flex-end;
  font-size: 0.78rem;
}

.lesson-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 0.65rem;
}

.lesson-chart-header > div {
  min-width: 0;
  flex: 1 1 220px;
}

.lesson-chart-header .badge {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.lesson-chart-title {
  font-weight: 700;
  letter-spacing: -0.01em;
}

.lesson-chart-date {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.lesson-chart-bars {
  display: grid;
  gap: 0.5rem;
}

.lesson-chart-bar {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.bar-rail {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: var(--border-subtle);
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: 999px;
}

.bar-green {
  background: linear-gradient(90deg, #22c55e, #16a34a);
}

.bar-orange {
  background: linear-gradient(90deg, #f97316, #ea580c);
}

.bar-gray {
  background: linear-gradient(90deg, #94a3b8, #64748b);
}

.bar-value {
  font-weight: 600;
}

.lesson-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.85rem;
  margin-bottom: 0.55rem;
  color: var(--text-muted);
  font-size: 0.92rem;
}

.lesson-counts strong {
  color: var(--text-main);
}

.lesson-chip {
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.lesson-chip .meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.lesson-chip .meta span {
  min-width: 0;
}

.lesson-chip .meta span:last-child {
  margin-left: auto;
  text-align: right;
  overflow-wrap: anywhere;
}

.lesson-chip .stats {
  font-size: 0.95rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.45rem 0.75rem;
}

.sidebar-footer {
  margin-top: auto;
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
}

/* Main Content */
.content {
  flex: 1;
  width: 100%;
  padding: 2rem;
  overflow-y: auto;
  position: relative;
}

/* Mobile Header */
.mobile-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.9rem;
}

.global-view-title {
  min-width: 0;
  text-align: center;
  font-size: clamp(1.05rem, 1.5vw, 1.45rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#menu-toggle {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-main);
  padding: 0.45rem 0.8rem;
  border-radius: 8px;
  cursor: pointer;
}

#menu-toggle:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* Workspace tabs (global modules) */
.workspace-tabs-bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 1rem;
  padding: 0.25rem 0 0.5rem;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.workspace-tabs-bar::-webkit-scrollbar {
  height: 8px;
}

.workspace-tab-item {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
  min-width: 0;
  flex: 0 0 auto;
}

.workspace-tab-item.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.18);
  background: rgba(59, 130, 246, 0.14);
}

.workspace-tab-open {
  border: 0;
  background: transparent;
  color: var(--text-main);
  padding: 0.42rem 0.72rem 0.42rem 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.workspace-tab-open:hover {
  color: var(--primary);
}

.workspace-tab-close {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  border-left: 1px solid var(--border-subtle);
  padding: 0.42rem 0.6rem;
  cursor: pointer;
  font-weight: 700;
}

.workspace-tab-close:hover {
  color: var(--danger);
}

/* Views */
.view {
  display: none;
  animation: fadeIn 0.3s ease;
}

.view.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.view-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.view-header--global-title-source {
  margin-bottom: 1rem;
}

.view-header--global-title-source .view-global-title-source {
  display: none;
}

.view-header--global-title-source:has(> .view-global-title-source:only-child) {
  display: none;
}

.view-header h2 {
  font-size: 1.8rem;
  font-weight: 600;
}

.view-header .actions {
  display: flex;
  gap: 1rem;
}

.view-header-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
}

.view-header-actions input {
  flex: 1;
  min-width: 200px;
}

.view-header-actions select {
  min-width: 220px;
}

/* Cards */
.card {
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.lessons-tab-card {
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.tab-list {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.75rem;
}

.tab-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 0.65rem 1rem;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s ease;
}

.tab-btn:hover {
  color: var(--text-main);
  border-color: var(--primary);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.tab-btn.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 14px 35px rgba(59, 130, 246, 0.35);
}

.tab-panels {
  margin-top: 0.5rem;
}

.tab-panel {
  display: block;
}

.tab-panel.active {
  display: block;
}

.tab-panel[hidden] {
  display: none !important;
}

/* Messages Module - Componentes visíveis sem tabs */
#view-messages > div,
#view-messages .card {
  display: block !important;
  margin-bottom: 1.5rem;
}

#view-messages h3,
#view-messages h4 {
  margin-top: 0;
}

.lessons-layout {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 1rem;
  height: calc(100vh - 180px);
  min-height: 600px;
}

#view-lessons .tab-panels {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

#view-lessons .tab-panel {
  display: none;
}

#view-lessons .tab-panel.active {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  flex: 1;
}

#view-lessons .tab-panel.active#lessons-tab-controle-online {
  overflow: auto;
}

#view-lessons .tab-panel.active#lessons-tab-recent.lesson-new-form-open {
  overflow: auto;
}

#view-lessons #lessons-tab-recent.lesson-new-form-open .table-container {
  flex: 0 1 auto;
  max-height: min(52vh, 560px);
}

.lessons-tab-card .table-container {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.lesson-detail-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.lesson-header {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.lesson-detail-nav {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
}

.lesson-detail-heading {
  min-width: 0;
}

.lesson-detail-heading h3 {
  margin: 0;
}

.lesson-detail-heading #lesson-meta {
  margin: 0.2rem 0 0;
}

.lesson-nav-btn {
  width: 2.9rem;
  min-width: 2.9rem;
  height: 2.9rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
}

.lesson-nav-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

.lesson-session-edit {
  margin-top: 0.75rem;
}

.lesson-session-edit-toolbar {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.lesson-session-edit .avamec-accordion {
  margin: 0;
  background: var(--surface-elevated);
}

.lesson-session-edit-accordion {
  order: 1;
  flex: 1;
  min-width: 0;
}

.lesson-session-edit-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.lesson-session-edit-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  align-items: end;
}

.lesson-session-edit-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.lesson-session-edit-field label {
  font-weight: 500;
}

.lesson-session-edit-field input,
.lesson-session-edit-field select {
  padding: 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--border-subtle);
  width: 100%;
}

.lesson-session-edit-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  order: 2;
  flex: 0 0 auto;
}

.lesson-session-edit-actions .btn-secondary {
  white-space: nowrap;
}

.lesson-session-status {
  margin: 0;
  font-size: 0.85rem;
}

.lesson-tabs .tab-list .tab-btn {
  border-color: var(--lesson-tab-border, var(--border));
  background: var(--lesson-tab-bg, transparent);
  color: var(--lesson-tab-text, var(--text-muted));
}

.lesson-tabs .tab-list .tab-btn:hover {
  color: #fff;
  border-color: var(--lesson-tab-hover-border, var(--primary));
  background: var(--lesson-tab-hover-bg, rgba(255, 255, 255, 0.08));
  box-shadow: 0 8px 24px var(--lesson-tab-shadow, rgba(0, 0, 0, 0.15));
}

.lesson-tabs .tab-list .tab-btn.active {
  background: linear-gradient(
    135deg,
    var(--lesson-tab-active-start, var(--primary)),
    var(--lesson-tab-active-end, var(--primary-hover))
  );
  color: #fff;
  border-color: transparent;
  box-shadow: 0 14px 35px var(--lesson-tab-shadow, rgba(59, 130, 246, 0.35));
}

#lesson-tab-btn-online {
  --lesson-tab-bg: rgba(14, 165, 233, 0.12);
  --lesson-tab-border: rgba(14, 165, 233, 0.42);
  --lesson-tab-text: #7dd3fc;
  --lesson-tab-hover-bg: rgba(14, 165, 233, 0.28);
  --lesson-tab-hover-border: #38bdf8;
  --lesson-tab-active-start: #0369a1;
  --lesson-tab-active-end: #0ea5e9;
  --lesson-tab-shadow: rgba(14, 165, 233, 0.34);
}

#lesson-tab-btn-notes {
  --lesson-tab-bg: rgba(245, 158, 11, 0.12);
  --lesson-tab-border: rgba(245, 158, 11, 0.4);
  --lesson-tab-text: #fcd34d;
  --lesson-tab-hover-bg: rgba(245, 158, 11, 0.28);
  --lesson-tab-hover-border: #fbbf24;
  --lesson-tab-active-start: #b45309;
  --lesson-tab-active-end: #f59e0b;
  --lesson-tab-shadow: rgba(245, 158, 11, 0.34);
}

#lesson-tab-btn-attendance {
  --lesson-tab-bg: rgba(34, 197, 94, 0.12);
  --lesson-tab-border: rgba(34, 197, 94, 0.4);
  --lesson-tab-text: #86efac;
  --lesson-tab-hover-bg: rgba(34, 197, 94, 0.28);
  --lesson-tab-hover-border: #4ade80;
  --lesson-tab-active-start: #15803d;
  --lesson-tab-active-end: #22c55e;
  --lesson-tab-shadow: rgba(34, 197, 94, 0.34);
}

#lesson-tab-btn-grades {
  --lesson-tab-bg: rgba(244, 63, 94, 0.12);
  --lesson-tab-border: rgba(244, 63, 94, 0.4);
  --lesson-tab-text: #fda4af;
  --lesson-tab-hover-bg: rgba(244, 63, 94, 0.28);
  --lesson-tab-hover-border: #fb7185;
  --lesson-tab-active-start: #be123c;
  --lesson-tab-active-end: #f43f5e;
  --lesson-tab-shadow: rgba(244, 63, 94, 0.34);
}

#lesson-tab-btn-anotacoes {
  --lesson-tab-bg: rgba(168, 85, 247, 0.12);
  --lesson-tab-border: rgba(168, 85, 247, 0.4);
  --lesson-tab-text: #d8b4fe;
  --lesson-tab-hover-bg: rgba(168, 85, 247, 0.28);
  --lesson-tab-hover-border: #c084fc;
  --lesson-tab-active-start: #7e22ce;
  --lesson-tab-active-end: #a855f7;
  --lesson-tab-shadow: rgba(168, 85, 247, 0.34);
}

.lesson-tabs .tab-panel {
  --lesson-panel-surface: var(--surface-elevated);
  --lesson-panel-surface-soft: rgba(255, 255, 255, 0.03);
  --lesson-panel-surface-alt: rgba(255, 255, 255, 0.02);
  --lesson-panel-border: var(--border-subtle);
  --lesson-panel-heading: var(--text-main);
  --lesson-panel-shadow: rgba(0, 0, 0, 0.22);
  --lesson-panel-accent-start: var(--primary);
  --lesson-panel-accent-end: var(--primary-hover);
}

#lesson-tab-online {
  --lesson-panel-surface: rgba(3, 105, 161, 0.13);
  --lesson-panel-surface-soft: rgba(14, 165, 233, 0.08);
  --lesson-panel-surface-alt: rgba(14, 165, 233, 0.05);
  --lesson-panel-border: rgba(56, 189, 248, 0.32);
  --lesson-panel-heading: #d7f2ff;
  --lesson-panel-shadow: rgba(14, 165, 233, 0.26);
  --lesson-panel-accent-start: #0369a1;
  --lesson-panel-accent-end: #0ea5e9;
}

#lesson-tab-notes {
  --lesson-panel-surface: rgba(180, 83, 9, 0.13);
  --lesson-panel-surface-soft: rgba(245, 158, 11, 0.08);
  --lesson-panel-surface-alt: rgba(245, 158, 11, 0.05);
  --lesson-panel-border: rgba(251, 191, 36, 0.3);
  --lesson-panel-heading: #ffefb2;
  --lesson-panel-shadow: rgba(245, 158, 11, 0.24);
  --lesson-panel-accent-start: #b45309;
  --lesson-panel-accent-end: #f59e0b;
}

#lesson-tab-attendance {
  --lesson-panel-surface: rgba(21, 128, 61, 0.13);
  --lesson-panel-surface-soft: rgba(34, 197, 94, 0.08);
  --lesson-panel-surface-alt: rgba(34, 197, 94, 0.05);
  --lesson-panel-border: rgba(74, 222, 128, 0.28);
  --lesson-panel-heading: #d3f9df;
  --lesson-panel-shadow: rgba(34, 197, 94, 0.24);
  --lesson-panel-accent-start: #15803d;
  --lesson-panel-accent-end: #22c55e;
}

#lesson-tab-grades {
  --lesson-panel-surface: rgba(190, 24, 93, 0.13);
  --lesson-panel-surface-soft: rgba(244, 63, 94, 0.08);
  --lesson-panel-surface-alt: rgba(244, 63, 94, 0.05);
  --lesson-panel-border: rgba(251, 113, 133, 0.3);
  --lesson-panel-heading: #ffd6df;
  --lesson-panel-shadow: rgba(244, 63, 94, 0.24);
  --lesson-panel-accent-start: #be123c;
  --lesson-panel-accent-end: #f43f5e;
}

#lesson-tab-anotacoes {
  --lesson-panel-surface: rgba(126, 34, 206, 0.13);
  --lesson-panel-surface-soft: rgba(168, 85, 247, 0.08);
  --lesson-panel-surface-alt: rgba(168, 85, 247, 0.05);
  --lesson-panel-border: rgba(192, 132, 252, 0.3);
  --lesson-panel-heading: #efd8ff;
  --lesson-panel-shadow: rgba(168, 85, 247, 0.24);
  --lesson-panel-accent-start: #7e22ce;
  --lesson-panel-accent-end: #a855f7;
}

.lesson-tabs .tab-panel .lesson-box,
.lesson-tabs .tab-panel .lesson-edit-box,
.lesson-tabs .tab-panel .lesson-online-card,
.lesson-tabs .tab-panel .avamec-accordion,
.lesson-tabs .tab-panel .table-container,
.lesson-tabs .tab-panel .attendance-preview-container {
  background: var(--lesson-panel-surface) !important;
  border-color: var(--lesson-panel-border) !important;
  box-shadow: 0 10px 28px -18px var(--lesson-panel-shadow);
}

.lesson-tabs .tab-panel .lesson-edit-group,
.lesson-tabs .tab-panel .lesson-online-subtabs,
.lesson-tabs .tab-panel .lesson-anotacoes-subtabs,
.lesson-tabs .tab-panel .lesson-attendance-subtabs,
.lesson-tabs .tab-panel .lesson-online-slides-view,
.lesson-tabs .tab-panel .lesson-online-timer-side-body,
.lesson-tabs .tab-panel .lesson-online-contrib-side-body {
  background: var(--lesson-panel-surface-soft);
  border-color: var(--lesson-panel-border) !important;
}

.lesson-tabs .tab-panel .lesson-edit-group label,
.lesson-tabs .tab-panel h4,
.lesson-tabs .tab-panel h5,
.lesson-tabs .tab-panel .avamec-accordion-toggle,
.lesson-tabs .tab-panel .lesson-online-subtab-btn,
.lesson-tabs .tab-panel .lesson-anotacoes-subtab-btn,
.lesson-tabs .tab-panel .lesson-attendance-subtab-btn {
  color: var(--lesson-panel-heading);
}

.lesson-tabs .tab-panel .lesson-online-subtabs,
.lesson-tabs .tab-panel .lesson-anotacoes-subtabs,
.lesson-tabs .tab-panel .lesson-attendance-subtabs {
  border-bottom-color: var(--lesson-panel-border);
}

.lesson-tabs .tab-panel .lesson-online-subtab-btn,
.lesson-tabs .tab-panel .lesson-anotacoes-subtab-btn,
.lesson-tabs .tab-panel .lesson-attendance-subtab-btn {
  background: var(--lesson-panel-surface-alt);
  border-color: var(--lesson-panel-border);
}

.lesson-tabs .tab-panel .lesson-online-subtab-btn:hover,
.lesson-tabs .tab-panel .lesson-anotacoes-subtab-btn:hover,
.lesson-tabs .tab-panel .lesson-attendance-subtab-btn:hover {
  color: #fff;
  border-color: var(--lesson-panel-border);
  background: var(--lesson-panel-surface-soft);
}

.lesson-tabs .tab-panel .lesson-online-subtab-btn.active,
.lesson-tabs .tab-panel .lesson-anotacoes-subtab-btn.active,
.lesson-tabs .tab-panel .lesson-attendance-subtab-btn.active {
  background: linear-gradient(135deg, var(--lesson-panel-accent-start), var(--lesson-panel-accent-end));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 20px var(--lesson-panel-shadow);
}

.lesson-tabs .tab-panel textarea,
.lesson-tabs .tab-panel input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.lesson-tabs .tab-panel select {
  background: var(--lesson-panel-surface-alt);
  border-color: var(--lesson-panel-border);
}

/* Refinamento de contraste por aba */
.lesson-tabs .tab-panel {
  --lesson-panel-card-bg: linear-gradient(180deg, rgba(17, 24, 39, 0.9), rgba(8, 12, 24, 0.96));
  --lesson-panel-group-bg: rgba(255, 255, 255, 0.035);
  --lesson-panel-field-bg: rgba(2, 6, 23, 0.58);
  --lesson-panel-field-border: rgba(148, 163, 184, 0.26);
  --lesson-panel-border: rgba(148, 163, 184, 0.22);
  --lesson-panel-border-strong: rgba(148, 163, 184, 0.34);
  --lesson-panel-heading: #f8fafc;
  --lesson-panel-text: #e2e8f0;
  --lesson-panel-muted: rgba(226, 232, 240, 0.74);
  --lesson-panel-shadow: rgba(0, 0, 0, 0.3);
  --lesson-panel-accent: #60a5fa;
  --lesson-panel-accent-soft: rgba(96, 165, 250, 0.2);
  --lesson-panel-secondary-bg: rgba(255, 255, 255, 0.03);
  --lesson-panel-secondary-hover-bg: rgba(255, 255, 255, 0.07);
  --lesson-panel-secondary-text: #e2e8f0;
  --lesson-panel-table-head: rgba(255, 255, 255, 0.045);
  --lesson-panel-table-row-hover: rgba(255, 255, 255, 0.035);
  --lesson-panel-primary-start: #2563eb;
  --lesson-panel-primary-end: #60a5fa;
  --lesson-panel-primary-shadow: rgba(37, 99, 235, 0.28);
  --lesson-panel-nav-start: var(--lesson-panel-primary-start);
  --lesson-panel-nav-end: var(--lesson-panel-primary-end);
  --lesson-panel-nav-shadow: var(--lesson-panel-primary-shadow);
}

#lesson-tab-online {
  --lesson-panel-card-bg: linear-gradient(180deg, rgba(17, 24, 39, 0.96), rgba(11, 18, 32, 0.98));
  --lesson-panel-group-bg: rgba(22, 33, 50, 0.82);
  --lesson-panel-field-bg: rgba(15, 23, 42, 0.92);
  --lesson-panel-field-border: rgba(148, 163, 184, 0.26);
  --lesson-panel-border: rgba(56, 189, 248, 0.22);
  --lesson-panel-border-strong: rgba(56, 189, 248, 0.4);
  --lesson-panel-heading: #f8fafc;
  --lesson-panel-text: #e2e8f0;
  --lesson-panel-muted: #94a3b8;
  --lesson-panel-accent: #38bdf8;
  --lesson-panel-accent-soft: rgba(56, 189, 248, 0.18);
  --lesson-panel-secondary-bg: rgba(255, 255, 255, 0.04);
  --lesson-panel-secondary-hover-bg: rgba(56, 189, 248, 0.08);
  --lesson-panel-secondary-text: #e2e8f0;
  --lesson-panel-primary-start: #d97706;
  --lesson-panel-primary-end: #f59e0b;
  --lesson-panel-primary-shadow: rgba(245, 158, 11, 0.28);
  --lesson-panel-nav-start: #0369a1;
  --lesson-panel-nav-end: #0ea5e9;
  --lesson-panel-nav-shadow: rgba(14, 165, 233, 0.3);
  --lesson-panel-table-head: rgba(56, 189, 248, 0.08);
  --lesson-panel-table-row-hover: rgba(56, 189, 248, 0.05);
}

#lesson-tab-notes {
  --lesson-panel-card-bg: linear-gradient(180deg, rgba(120, 53, 15, 0.34), rgba(8, 12, 24, 0.96));
  --lesson-panel-border: rgba(245, 158, 11, 0.2);
  --lesson-panel-border-strong: rgba(245, 158, 11, 0.36);
  --lesson-panel-heading: #fff6dc;
  --lesson-panel-muted: rgba(255, 237, 198, 0.72);
  --lesson-panel-accent: #fbbf24;
  --lesson-panel-accent-soft: rgba(251, 191, 36, 0.2);
  --lesson-panel-primary-start: #b45309;
  --lesson-panel-primary-end: #f59e0b;
  --lesson-panel-primary-shadow: rgba(245, 158, 11, 0.3);
  --lesson-panel-table-head: rgba(245, 158, 11, 0.1);
  --lesson-panel-table-row-hover: rgba(245, 158, 11, 0.06);
}

#lesson-tab-attendance {
  --lesson-panel-card-bg: linear-gradient(180deg, rgba(11, 24, 20, 0.98), rgba(7, 14, 17, 0.98));
  --lesson-panel-group-bg: rgba(18, 32, 28, 0.82);
  --lesson-panel-field-bg: rgba(8, 18, 18, 0.94);
  --lesson-panel-field-border: rgba(134, 239, 172, 0.18);
  --lesson-panel-border: rgba(74, 222, 128, 0.18);
  --lesson-panel-border-strong: rgba(74, 222, 128, 0.34);
  --lesson-panel-heading: #f2fff6;
  --lesson-panel-text: #e4f4ea;
  --lesson-panel-muted: #a9c9b4;
  --lesson-panel-accent: #4ade80;
  --lesson-panel-accent-soft: rgba(74, 222, 128, 0.16);
  --lesson-panel-secondary-bg: rgba(255, 255, 255, 0.035);
  --lesson-panel-secondary-hover-bg: rgba(74, 222, 128, 0.09);
  --lesson-panel-secondary-text: #edfdf3;
  --lesson-panel-primary-start: #166534;
  --lesson-panel-primary-end: #22c55e;
  --lesson-panel-primary-shadow: rgba(22, 163, 74, 0.26);
  --lesson-panel-table-head: rgba(74, 222, 128, 0.08);
  --lesson-panel-table-row-hover: rgba(74, 222, 128, 0.045);
}

#lesson-tab-grades {
  --lesson-panel-card-bg: linear-gradient(180deg, rgba(136, 19, 55, 0.34), rgba(8, 12, 24, 0.96));
  --lesson-panel-border: rgba(244, 63, 94, 0.2);
  --lesson-panel-border-strong: rgba(244, 63, 94, 0.36);
  --lesson-panel-heading: #ffe8ee;
  --lesson-panel-muted: rgba(255, 220, 229, 0.74);
  --lesson-panel-accent: #fb7185;
  --lesson-panel-accent-soft: rgba(251, 113, 133, 0.2);
  --lesson-panel-primary-start: #be123c;
  --lesson-panel-primary-end: #f43f5e;
  --lesson-panel-primary-shadow: rgba(244, 63, 94, 0.3);
  --lesson-panel-table-head: rgba(244, 63, 94, 0.1);
  --lesson-panel-table-row-hover: rgba(244, 63, 94, 0.06);
}

#lesson-tab-anotacoes {
  --lesson-panel-card-bg: linear-gradient(180deg, rgba(88, 28, 135, 0.34), rgba(8, 12, 24, 0.96));
  --lesson-panel-border: rgba(168, 85, 247, 0.2);
  --lesson-panel-border-strong: rgba(168, 85, 247, 0.36);
  --lesson-panel-heading: #f6ebff;
  --lesson-panel-muted: rgba(233, 213, 255, 0.74);
  --lesson-panel-accent: #c084fc;
  --lesson-panel-accent-soft: rgba(192, 132, 252, 0.22);
  --lesson-panel-primary-start: #7e22ce;
  --lesson-panel-primary-end: #a855f7;
  --lesson-panel-primary-shadow: rgba(168, 85, 247, 0.3);
  --lesson-panel-table-head: rgba(168, 85, 247, 0.1);
  --lesson-panel-table-row-hover: rgba(168, 85, 247, 0.06);
}

.lesson-tabs .tab-panel .lesson-box,
.lesson-tabs .tab-panel .lesson-edit-box,
.lesson-tabs .tab-panel .lesson-online-card,
.lesson-tabs .tab-panel .avamec-accordion,
.lesson-tabs .tab-panel .table-container,
.lesson-tabs .tab-panel .attendance-preview-container,
.lesson-tabs .tab-panel .lesson-online-timer-side-accordion,
.lesson-tabs .tab-panel .lesson-online-contrib-side-accordion {
  background: var(--lesson-panel-card-bg) !important;
  border-color: var(--lesson-panel-border-strong) !important;
  box-shadow: 0 14px 30px -18px var(--lesson-panel-shadow);
}

.lesson-tabs .tab-panel .lesson-edit-group,
.lesson-tabs .tab-panel .lesson-online-slides-controls-card,
.lesson-tabs .tab-panel .lesson-online-slides-view,
.lesson-tabs .tab-panel .lesson-online-timer-side-body,
.lesson-tabs .tab-panel .lesson-online-contrib-side-body,
.lesson-tabs .tab-panel .lesson-online-slide-grid .lesson-online-slide-card {
  background: var(--lesson-panel-group-bg);
  border-color: var(--lesson-panel-border) !important;
}

.lesson-tabs .tab-panel .lesson-online-subtabs,
.lesson-tabs .tab-panel .lesson-anotacoes-subtabs,
.lesson-tabs .tab-panel .lesson-attendance-subtabs {
  background: transparent;
  border-bottom-color: var(--lesson-panel-border-strong);
}

.lesson-tabs .tab-panel .table-muted {
  color: var(--lesson-panel-muted);
}

.lesson-tabs .tab-panel,
.lesson-tabs .tab-panel p,
.lesson-tabs .tab-panel li,
.lesson-tabs .tab-panel td,
.lesson-tabs .tab-panel th,
.lesson-tabs .tab-panel label {
  color: var(--lesson-panel-text);
}

.lesson-tabs .tab-panel .lesson-edit-group label,
.lesson-tabs .tab-panel h4,
.lesson-tabs .tab-panel h5,
.lesson-tabs .tab-panel .avamec-accordion-toggle,
.lesson-tabs .tab-panel .lesson-online-subtab-btn,
.lesson-tabs .tab-panel .lesson-anotacoes-subtab-btn,
.lesson-tabs .tab-panel .lesson-attendance-subtab-btn {
  color: var(--lesson-panel-heading);
}

.lesson-tabs .tab-panel .btn-primary {
  background: linear-gradient(135deg, var(--lesson-panel-primary-start), var(--lesson-panel-primary-end));
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
  box-shadow: 0 10px 24px -12px var(--lesson-panel-primary-shadow);
}

.lesson-tabs .tab-panel .btn-primary:hover {
  filter: brightness(1.06);
  box-shadow: 0 14px 28px -14px var(--lesson-panel-primary-shadow);
}

.lesson-tabs .tab-panel #lesson-online-draw-btn {
  border: 1px solid var(--lesson-panel-border-strong);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 10px 24px -12px var(--lesson-panel-primary-shadow);
}

.lesson-tabs .tab-panel #lesson-online-draw-btn:hover {
  border-color: var(--lesson-panel-accent);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 14px 28px -14px var(--lesson-panel-primary-shadow);
}

.lesson-tabs .tab-panel .btn-secondary {
  background: var(--lesson-panel-secondary-bg);
  border-color: var(--lesson-panel-border-strong);
  color: var(--lesson-panel-secondary-text);
}

.lesson-tabs .tab-panel .btn-secondary:hover {
  background: var(--lesson-panel-secondary-hover-bg);
  border-color: var(--lesson-panel-accent);
  color: #fff;
  box-shadow: 0 10px 22px -16px var(--lesson-panel-primary-shadow);
}

.lesson-tabs .tab-panel .lesson-online-subtab-btn,
.lesson-tabs .tab-panel .lesson-anotacoes-subtab-btn,
.lesson-tabs .tab-panel .lesson-attendance-subtab-btn {
  background: var(--lesson-panel-secondary-bg);
  border-color: var(--lesson-panel-border);
  color: var(--lesson-panel-muted);
}

.lesson-tabs .tab-panel .lesson-online-subtab-btn:hover,
.lesson-tabs .tab-panel .lesson-anotacoes-subtab-btn:hover,
.lesson-tabs .tab-panel .lesson-attendance-subtab-btn:hover {
  background: var(--lesson-panel-secondary-hover-bg);
  border-color: var(--lesson-panel-accent);
  color: #fff;
}

.lesson-tabs .tab-panel .lesson-online-subtab-btn.active,
.lesson-tabs .tab-panel .lesson-anotacoes-subtab-btn.active,
.lesson-tabs .tab-panel .lesson-attendance-subtab-btn.active {
  background: linear-gradient(
    135deg,
    var(--lesson-panel-nav-start, var(--lesson-panel-primary-start)),
    var(--lesson-panel-nav-end, var(--lesson-panel-primary-end))
  );
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 20px -10px var(--lesson-panel-nav-shadow, var(--lesson-panel-primary-shadow));
}

.lesson-tabs .tab-panel textarea,
.lesson-tabs .tab-panel input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.lesson-tabs .tab-panel select {
  background: var(--lesson-panel-field-bg);
  border-color: var(--lesson-panel-field-border);
  color: #f8fafc;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.lesson-tabs .tab-panel textarea::placeholder,
.lesson-tabs .tab-panel input::placeholder {
  color: rgba(226, 232, 240, 0.42);
}

.lesson-tabs .tab-panel input:focus,
.lesson-tabs .tab-panel select:focus,
.lesson-tabs .tab-panel textarea:focus {
  border-color: var(--lesson-panel-accent);
  box-shadow: 0 0 0 3px var(--lesson-panel-accent-soft);
  background: var(--lesson-panel-field-bg);
}

.lesson-tabs .tab-panel table thead {
  background: var(--lesson-panel-table-head);
}

.lesson-tabs .tab-panel table th,
.lesson-tabs .tab-panel table td {
  border-color: var(--lesson-panel-border);
}

.lesson-tabs .tab-panel table tbody tr:hover {
  background: var(--lesson-panel-table-row-hover);
}

.lesson-tabs .tab-panel .lesson-online-timer-side-toggle,
.lesson-tabs .tab-panel .lesson-online-contrib-side-toggle {
  background: rgba(2, 6, 23, 0.72);
  border-right-color: var(--lesson-panel-border);
  color: var(--lesson-panel-heading);
}

.lesson-tabs .tab-panel .lesson-online-contrib-item {
  background: rgba(2, 6, 23, 0.46);
  border-color: var(--lesson-panel-border);
}

.lesson-tabs .tab-panel .lesson-online-contrib-item:hover {
  border-color: var(--lesson-panel-accent);
  background: rgba(2, 6, 23, 0.62);
}

.lesson-tabs .tab-panel .lesson-online-contrib-item.is-readonly:hover {
  border-color: var(--lesson-panel-border);
  background: rgba(2, 6, 23, 0.46);
}

.lesson-tabs .tab-panel .lesson-online-contrib-item-status {
  border-color: var(--lesson-panel-border);
  color: var(--lesson-panel-muted);
}

.lesson-tabs .tab-panel .lesson-online-slide-grid span,
.lesson-tabs .tab-panel .autofill-status,
.lesson-tabs .tab-panel .lesson-online-presentation-representative-status {
  color: var(--lesson-panel-muted);
}

.lesson-tabs .tab-panel .lesson-online-slide-grid strong {
  color: var(--lesson-panel-heading);
}

#lesson-tab-attendance .lesson-box__header,
#lesson-tab-attendance .lesson-section-header {
  border-bottom-color: var(--lesson-panel-border-strong);
}

#lesson-tab-attendance .avamec-accordion-body,
#lesson-tab-attendance #lesson-student-candidates-list,
#lesson-tab-attendance .lesson-notifications-section,
#lesson-tab-attendance #attendance-notification-preview,
#lesson-tab-attendance #lesson-attendance-avamec-log {
  background: rgba(8, 18, 18, 0.82) !important;
  border-color: var(--lesson-panel-border) !important;
  color: var(--lesson-panel-text);
}

#lesson-tab-attendance .lesson-notifications-section {
  border-top-color: var(--lesson-panel-border-strong) !important;
  border-radius: 14px;
  padding: 1rem;
  box-shadow: inset 0 0 0 1px rgba(74, 222, 128, 0.05);
}

#lesson-tab-attendance #attendance-table tbody tr {
  background: rgba(9, 18, 17, 0.72);
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

#lesson-tab-attendance #attendance-table tbody tr:hover {
  background: rgba(12, 24, 21, 0.92);
}

#lesson-tab-attendance #attendance-table tbody tr.lesson-attendance-row-new-since-previous {
  background: linear-gradient(180deg, rgba(12, 33, 24, 0.96), rgba(8, 19, 18, 0.98));
  box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.12);
}

#lesson-tab-attendance #lesson-attendance-list td:nth-child(4)::before,
#lesson-tab-attendance #lesson-attendance-list td:nth-child(5)::before {
  color: var(--lesson-panel-muted);
}

@media (max-width: 900px) {
  .lesson-detail-nav {
    grid-template-columns: 1fr auto auto;
    align-items: start;
  }

  .lesson-detail-heading {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .lesson-nav-btn {
    grid-row: 2;
  }

  #lesson-nav-prev-btn {
    justify-self: start;
  }

  #lesson-nav-next-btn {
    justify-self: end;
  }

  .lesson-session-edit-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .lesson-session-edit-actions {
    justify-content: flex-start;
  }
}

.lesson-tabs {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.lesson-tabs .tab-panels {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.lesson-tabs .tab-panel.active {
  overflow: auto;
}

.lesson-tabs .tab-panel.active#lesson-tab-notes {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.lesson-tabs .tab-panel.active#lesson-participants-anotacoes {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.lesson-tabs {
  margin-top: 1rem;
}

.lesson-tabs #lesson-tab-notes .lesson-box {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.lesson-panel-grid > .lesson-box {
  width: 100%;
  max-width: 100%;
}

.lesson-tabs #lesson-tab-notes .form-group {
  flex: 1;
}

#lesson-activity-notes {
  flex: 1;
  min-height: 0;
  line-height: 1.6;
}

#lesson-participants-anotacoes {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

#lesson-activity-notes,
#lesson-transcript-summary {
  height: auto;
  min-height: 140px;
  resize: vertical;
}

#lesson-tab-anotacoes .lesson-attendance-ai-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#lesson-tab-anotacoes .lesson-attendance-ai-columns {
  display: grid;
  grid-template-columns: minmax(380px, 1.15fr) minmax(320px, 0.95fr);
  gap: 1rem;
  align-items: stretch;
  flex: 1;
  min-height: 0;
}

#lesson-tab-anotacoes .lesson-attendance-ai-column {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 0;
}

#lesson-tab-anotacoes .lesson-attendance-ai-column-main {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

#lesson-tab-anotacoes .lesson-attendance-ai-input-group,
#lesson-tab-anotacoes .lesson-attendance-ai-result-group {
  min-height: 0;
}

#lesson-tab-anotacoes .lesson-attendance-ai-actions {
  flex-shrink: 0;
  justify-content: flex-end;
}

#lesson-tab-anotacoes .lesson-attendance-ai-result-group {
  height: 100%;
}

#lesson-tab-anotacoes .lesson-transcript-panel {
  display: flex;
  flex-direction: column;
  height: 660px;
  min-height: 360px;
  resize: vertical;
}

#lesson-tab-anotacoes .lesson-transcript-columns {
  display: grid;
  grid-template-columns: minmax(420px, 1.25fr) minmax(340px, 0.95fr);
  gap: 1rem;
  align-items: stretch;
  flex: 1;
  min-height: 0;
}

#lesson-tab-anotacoes .lesson-transcript-column {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 0;
}

#lesson-tab-anotacoes .lesson-transcript-column-main {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

#lesson-tab-anotacoes .lesson-transcript-main-group,
#lesson-tab-anotacoes .lesson-transcript-summary-group {
  min-height: 0;
}

#lesson-tab-anotacoes .lesson-transcript-main-group {
  flex: 1;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  align-content: stretch;
}

#lesson-tab-anotacoes .lesson-transcript-main-group > label {
  grid-row: 1;
}

#lesson-tab-anotacoes .lesson-transcript-main-group > .lesson-search {
  grid-row: 2;
}

#lesson-tab-anotacoes .lesson-transcript-main-group > #lesson-async-activity-panel {
  grid-row: 3;
}

#lesson-tab-anotacoes .lesson-transcript-summary-group {
  height: 100%;
}

#lesson-tab-anotacoes .lesson-transcript-actions {
  flex-shrink: 0;
}

#lesson-transcript {
  min-height: 240px;
  resize: vertical;
}

#lesson-tab-anotacoes .lesson-transcript-main-group textarea {
  grid-row: 4;
  min-height: 0;
  height: 100%;
}

#lesson-tab-anotacoes .lesson-transcript-summary-group textarea {
  min-height: 320px;
  height: 100%;
}

#lesson-tab-anotacoes .lesson-transcript-main-group > #lesson-autofill-status {
  grid-row: 5;
}

.lesson-edit-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.35);
}
.lesson-edit-box.resizable {
  resize: vertical;
  overflow: auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 240px;
  display: flex;
  flex-direction: column;
}

.lesson-edit-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 0.85rem 0.95rem;
  flex: 1;
  min-height: 0;
}

.lesson-edit-group textarea {
  flex: 1;
  min-height: 80px;
}

.lesson-edit-group label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-muted);
}

.lesson-edit-group textarea,
.lesson-edit-group input {
  width: 100%;
}

.lesson-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.lesson-notes-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-left: auto;
}

.lesson-text-size-control {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--lesson-panel-border);
  background: var(--lesson-panel-group-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.lesson-text-size-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lesson-panel-muted);
  padding: 0 0.25rem;
}

.lesson-text-size-btn {
  min-width: 2.5rem;
  padding: 0.4rem 0.65rem;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
}

.lesson-text-size-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.lesson-text-size-value {
  min-width: 3.6rem;
  text-align: center;
  font-size: 0.84rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--lesson-panel-heading);
}

.lesson-notes-tabs {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.lesson-notes-tabs .tab-panels {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.lesson-notes-tabs .tab-panel {
  display: none;
}

.lesson-notes-tabs .tab-panel.active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.lesson-notes-box {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  max-height: 60vh;
  height: 100%;
  overflow: auto;
}

.lesson-notes-fill {
  flex: 1;
  min-height: 0;
  display: flex;
  height: 100%;
  overflow: hidden;
}

#lesson-attendance-raw {
  flex: 1;
  min-height: 0;
  height: auto;
  width: 100%;
  max-height: 100%;
  resize: vertical;
  overflow: auto;
}

.lesson-notes-actions {
  margin-top: 0.5rem;
  margin-bottom: 0.75rem;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.lesson-interpret-result {
  flex: 1;
  min-height: 0;
  overflow: auto;
  margin-top: 0.25rem;
}

.lesson-panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.lesson-box {
  border: 1px solid var(--border-subtle);
  padding: 1rem;
  border-radius: 12px;
  background: var(--surface-elevated);
}

.lesson-box.resizable {
  resize: both;
  overflow: auto;
  min-height: 220px;
  min-width: min(336px, 100%);
}

.lesson-attendance-card {
  position: relative;
  overflow: visible !important;
}

.lesson-box__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.lesson-attendance-header {
  display: grid;
  grid-template-columns: minmax(220px, 0.95fr) minmax(360px, 1.45fr) auto;
  align-items: start;
  gap: 0.85rem 1rem;
  position: relative;
  overflow: visible;
}

.lesson-attendance-header-main {
  min-width: 0;
}

.lesson-attendance-top-accordions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  align-items: start;
  min-width: 0;
  overflow: visible;
}

.lesson-attendance-top-accordion {
  margin: 0;
  min-width: 0;
  align-self: start;
  position: static;
  overflow: visible !important;
  z-index: 5;
}

.lesson-attendance-top-accordion .avamec-accordion-body {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  right: 0;
  width: auto;
  min-width: 0;
  max-height: min(60vh, 520px);
  overflow: auto;
  margin-top: 0;
  border-radius: 0 0 12px 12px;
  background: #081312 !important;
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.5);
  z-index: 30;
}

#avamec-accordion-att.lesson-attendance-top-accordion .avamec-accordion-body {
  left: 0;
  right: 0;
  width: auto;
}

.lesson-attendance-top-accordion.avamec-accordion {
  overflow: visible !important;
  margin-top: 0;
  margin-bottom: 0;
}

.lesson-attendance-top-accordion .avamec-accordion-toggle[aria-expanded="true"] {
  position: relative;
  z-index: 31;
}

.lesson-attendance-top-accordion .avamec-accordion-toggle[aria-expanded="true"] + .avamec-accordion-body,
.lesson-attendance-top-accordion .avamec-accordion-toggle[aria-expanded="true"] + .avamec-accordion-body #lesson-student-candidates-list,
.lesson-attendance-top-accordion .avamec-accordion-toggle[aria-expanded="true"] + .avamec-accordion-body #lesson-attendance-avamec-log,
.lesson-attendance-top-accordion .avamec-accordion-toggle[aria-expanded="true"] + .avamec-accordion-body .lesson-avamec-report {
  background: #081312 !important;
}

.lesson-attendance-top-accordion .avamec-accordion-toggle[aria-expanded="true"] + .avamec-accordion-body #lesson-student-candidates-list,
.lesson-attendance-top-accordion .avamec-accordion-toggle[aria-expanded="true"] + .avamec-accordion-body #lesson-attendance-avamec-log,
.lesson-attendance-top-accordion .avamec-accordion-toggle[aria-expanded="true"] + .avamec-accordion-body .lesson-avamec-report {
  box-shadow: inset 0 0 0 1px rgba(74, 222, 128, 0.06);
}

.lesson-attendance-overlay-card {
  background: linear-gradient(180deg, #0b1714, #09110f);
  border: 1px solid var(--lesson-panel-border-strong);
  border-radius: 14px;
  padding: 1rem;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    0 18px 36px -26px rgba(0, 0, 0, 0.42);
}

#lesson-tab-attendance .lesson-attendance-overlay-card .lesson-section-header {
  margin-bottom: 0.75rem !important;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--lesson-panel-border);
}

#lesson-tab-attendance .lesson-attendance-avamec-card .form-grid.compact {
  margin-top: 0.75rem;
}

#lesson-tab-attendance .lesson-attendance-candidates-card .lesson-section-header {
  align-items: center;
  justify-content: space-between;
}

.lesson-student-candidates-search {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 0.75rem;
  align-items: end;
}

.lesson-student-candidate-item {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  padding: 0.55rem 0.35rem;
  border-bottom: 1px solid var(--border-subtle);
}

.lesson-student-candidate-item:last-child {
  border-bottom: 0;
}

.lesson-student-candidate-badges {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 0.15rem;
}

.lesson-attendance-top-accordion .avamec-accordion-toggle[aria-expanded="true"] + .avamec-accordion-body {
  display: block;
}

.lesson-attendance-actions {
  justify-content: flex-end;
  align-self: start;
}

@media (max-width: 1360px) {
  .lesson-attendance-header {
    grid-template-columns: minmax(220px, 1fr) minmax(320px, 1.25fr);
  }

  .lesson-attendance-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

@media (max-width: 768px) {
  .lesson-attendance-header {
    grid-template-columns: 1fr;
  }

  .lesson-synthesis-columns {
    grid-template-columns: 1fr;
  }

  .lesson-attendance-top-accordions {
    grid-template-columns: 1fr;
  }

  .lesson-student-candidates-search {
    grid-template-columns: 1fr;
  }

  .lesson-attendance-top-accordion {
    overflow: hidden !important;
  }

  .lesson-attendance-top-accordion .avamec-accordion-body {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    width: auto;
    min-width: 0;
    box-shadow: none;
    z-index: auto;
  }

  .lesson-attendance-actions {
    grid-column: auto;
    justify-content: stretch;
  }
}

/* Sub-abas de Anotações */
.lesson-anotacoes-subtabs,
.lesson-attendance-subtabs,
.settings-subtabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--border-subtle);
}

.lesson-anotacoes-subtab-btn,
.lesson-attendance-subtab-btn,
.settings-subtab-btn {
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  padding: 0.5rem 0.85rem;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.88rem;
  transition: all 0.2s ease;
}
.lesson-anotacoes-subtab-btn:hover,
.lesson-attendance-subtab-btn:hover,
.settings-subtab-btn:hover {
  color: var(--text-main);
  border-color: var(--primary);
}
.lesson-anotacoes-subtab-btn.active,
.lesson-attendance-subtab-btn.active,
.settings-subtab-btn.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.25);
}

.lesson-anotacoes-subtab-content,
.lesson-attendance-subtab-content,
.settings-subtab-content {
  display: none;
}
.lesson-anotacoes-subtab-content.active,
.lesson-attendance-subtab-content.active,
.settings-subtab-content.active {
  display: block;
}

.settings-subtabs-shell {
  margin-bottom: 1rem;
}

.lesson-synthesis-columns {
  display: grid;
  grid-template-columns: minmax(300px, 0.9fr) minmax(420px, 1.3fr);
  gap: 1rem;
  align-items: stretch;
}

.lesson-synthesis-columns .lesson-edit-group {
  min-height: 0;
}

.lesson-synthesis-focus-group textarea,
.lesson-synthesis-output-group textarea {
  min-height: 360px;
  height: 100%;
}

.lesson-online-card {
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 1rem;
  background: var(--surface-elevated);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.lesson-online-header .avamec-accordion {
  margin: 0;
}

.lesson-online-header .table-muted {
  margin: 0.2rem 0;
}

.lesson-online-subtabs {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--border-subtle);
}

.lesson-online-subtab-btn {
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

.lesson-online-subtab-btn:hover {
  color: var(--text-main);
  border-color: var(--primary);
}

.lesson-online-subtab-btn.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  color: #fff;
  border-color: transparent;
}

.lesson-online-subpanel {
  display: none;
}

.lesson-online-subpanel.active {
  display: block;
}

.lesson-online-poll {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.lesson-online-poll-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, 0.9fr);
  gap: 1rem;
  align-items: start;
}

.lesson-online-poll-main {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.lesson-online-poll-side {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.lesson-tabs .tab-panel .lesson-online-poll-card {
  margin: 0;
  border: 1px solid var(--lesson-panel-border);
  border-radius: 14px;
  padding: 1rem;
  background: var(--lesson-panel-group-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.lesson-tabs .tab-panel .lesson-online-poll-card-hero {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(15, 23, 42, 0.78));
  border-color: var(--lesson-panel-border-strong);
}

.lesson-online-poll-heading {
  display: grid;
  gap: 0.25rem;
}

.lesson-online-poll-eyebrow {
  display: inline-flex;
  width: fit-content;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--lesson-panel-border);
  background: var(--lesson-panel-accent-soft);
  color: var(--lesson-panel-heading);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.lesson-online-poll-header {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.lesson-online-poll-header h4 {
  margin: 0;
}

.lesson-online-poll-card-header {
  margin-bottom: 0.9rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--lesson-panel-border);
  align-items: flex-start;
}

.lesson-online-poll-card-header h5 {
  margin: 0 0 0.2rem;
  font-size: 1rem;
}

.lesson-online-poll-card-header .table-muted,
.lesson-online-poll-heading .table-muted {
  margin: 0;
}

.lesson-online-poll-actions {
  justify-content: flex-end;
  align-self: stretch;
}

.lesson-online-poll-actions .btn-primary,
.lesson-online-poll-actions .btn-secondary {
  min-height: 42px;
}

.lesson-online-poll-list-wrap {
  border: 1px solid var(--lesson-panel-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--lesson-panel-secondary-bg);
}

.lesson-online-poll-list-table {
  width: 100%;
  border-collapse: collapse;
}

.lesson-online-poll-list-table thead th {
  padding: 0.75rem 0.85rem;
  border-bottom: 1px solid var(--lesson-panel-border);
  text-align: left;
}

.lesson-online-poll-list-table tbody td {
  padding: 0.75rem 0.85rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  vertical-align: top;
}

.lesson-online-poll-list-table tbody tr:last-child td {
  border-bottom: none;
}

.lesson-online-poll-list-row {
  cursor: pointer;
  transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.lesson-online-poll-list-row:hover {
  background: rgba(14, 165, 233, 0.08);
}

.lesson-online-poll-list-row.is-selected {
  background: rgba(14, 165, 233, 0.14);
  box-shadow: inset 3px 0 0 var(--primary);
}

.lesson-online-poll-list-title {
  display: grid;
  gap: 0.2rem;
}

.lesson-online-poll-list-title strong {
  color: var(--lesson-panel-heading);
}

.lesson-online-poll-list-question {
  color: var(--text-muted);
  font-size: 0.84rem;
}

.lesson-online-poll-list-meta {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.lesson-online-poll-publication-header {
  gap: 0.9rem;
  align-items: flex-start;
}

.lesson-online-poll-publication-stack {
  display: grid;
  gap: 0.85rem;
}

.lesson-online-poll-publication-copy {
  display: grid;
  gap: 0.3rem;
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--lesson-panel-border);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(14, 165, 233, 0.1), rgba(15, 23, 42, 0.22));
}

.lesson-online-poll-publication-copy strong {
  font-size: 1rem;
  color: var(--lesson-panel-heading);
}

.lesson-online-poll-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0.2rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--lesson-panel-border);
  background: rgba(51, 65, 85, 0.42);
  color: var(--text-main);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.lesson-online-poll-status-badge.is-published {
  border-color: rgba(16, 185, 129, 0.42);
  background: rgba(16, 185, 129, 0.14);
  color: #86efac;
}

.lesson-online-poll-status-badge.is-closed {
  border-color: rgba(245, 158, 11, 0.4);
  background: rgba(245, 158, 11, 0.14);
  color: #fcd34d;
}

.lesson-online-poll-status-badge.is-draft {
  border-color: rgba(148, 163, 184, 0.34);
  background: rgba(51, 65, 85, 0.32);
  color: #cbd5e1;
}

.lesson-online-poll-public-link-group input {
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.84rem;
}

.lesson-online-poll-publication-actions {
  justify-content: flex-start;
}

.lesson-online-poll-results-wrap {
  display: grid;
  gap: 0.75rem;
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--lesson-panel-border);
  border-radius: 12px;
  background: var(--lesson-panel-secondary-bg);
}

.lesson-online-poll-results-head {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.lesson-online-poll-results {
  display: grid;
  gap: 0.65rem;
}

.lesson-online-poll-results > .table-muted {
  margin: 0;
}

.lesson-online-poll-result-item {
  display: grid;
  gap: 0.38rem;
}

.lesson-online-poll-result-top {
  display: flex;
  gap: 0.65rem;
  align-items: baseline;
  justify-content: space-between;
}

.lesson-online-poll-result-label {
  color: var(--lesson-panel-heading);
  font-weight: 600;
}

.lesson-online-poll-result-meta {
  color: var(--text-muted);
  font-size: 0.82rem;
  white-space: nowrap;
}

.lesson-online-poll-result-bar {
  position: relative;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(51, 65, 85, 0.55);
}

.lesson-online-poll-result-bar > span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), #38bdf8);
}

.lesson-online-poll-grid,
.lesson-online-poll-editor {
  display: grid;
  gap: 0.85rem;
  align-items: start;
}

.lesson-online-poll-grid {
  grid-template-columns: minmax(220px, 0.9fr) minmax(220px, 0.7fr);
}

.lesson-online-poll-editor {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lesson-online-poll-grid-wide,
.lesson-online-poll-editor .form-group:first-child,
.lesson-online-poll-editor .form-group:nth-child(2) {
  grid-column: 1 / -1;
}

.lesson-online-poll .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--lesson-panel-border);
  border-radius: 12px;
  background: var(--lesson-panel-secondary-bg);
}

.lesson-online-poll .form-group label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--lesson-panel-heading);
}

.lesson-online-poll .form-group input,
.lesson-online-poll .form-group select,
.lesson-online-poll .form-group textarea {
  width: 100%;
  min-width: 0;
}

.lesson-online-poll .lesson-online-poll-preview-group {
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
}

.lesson-online-poll-card-preview {
  position: static;
}

.lesson-online-poll-card-preview .form-group {
  flex: 1;
}

#lesson-online-poll-context {
  min-height: 110px;
}

#lesson-online-poll-question {
  min-height: 140px;
}

#lesson-online-poll-options,
#lesson-online-poll-guidance {
  min-height: 220px;
}

#lesson-online-poll-preview-output {
  min-height: clamp(280px, 52vh, 560px);
  height: 100%;
  font-family: Consolas, "Courier New", monospace;
  line-height: 1.5;
  white-space: pre-wrap;
  resize: vertical;
}

@media (max-width: 1180px) {
  .lesson-online-poll-layout {
    grid-template-columns: 1fr;
  }

  .lesson-online-poll-publication-header {
    flex-direction: column;
    align-items: stretch;
  }
}

.lesson-online-actions {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
  align-items: center;
}

.lesson-online-students-table-wrap tbody tr.selected-representative {
  background: rgba(16, 185, 129, 0.14);
}

.lesson-online-students-table-wrap tbody tr td:first-child {
  text-align: center;
}

.lesson-online-timer-config {
  margin-bottom: 0.75rem;
}

.lesson-online-timer-config-accordion {
  margin-top: 0;
}

.lesson-online-timer-config-actions {
  margin-top: 0.35rem;
}

.lesson-online-timer-layout {
  --lesson-online-column-splitter-size: 14px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--lesson-online-column-splitter-size) minmax(300px, 360px);
  gap: 0;
  align-items: stretch;
  min-height: 0;
  overflow: hidden;
}

.lesson-online-column-splitter {
  position: relative;
  min-width: var(--lesson-online-column-splitter-size);
  cursor: col-resize;
  touch-action: none;
  user-select: none;
}

.lesson-online-column-splitter::before {
  content: '';
  position: absolute;
  top: 0.35rem;
  bottom: 0.35rem;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.26);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.lesson-online-column-splitter:hover::before,
.lesson-online-column-splitter:focus-visible::before,
.lesson-online-timer-layout.is-resizing .lesson-online-column-splitter::before {
  background: rgba(96, 165, 250, 0.72);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.14);
}

.lesson-online-column-splitter:focus-visible {
  outline: none;
}

.lesson-online-timer-side-accordion {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  bottom: 0.75rem;
  width: min(420px, calc(100% - 1.5rem));
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: stretch;
  overflow: hidden;
  z-index: 3;
  box-shadow: 0 14px 32px rgba(2, 6, 23, 0.3);
  transition: width 0.24s ease, height 0.24s ease, background 0.2s ease;
}

.lesson-online-timer-side-toggle {
  width: 48px;
  min-height: 100%;
  border: none;
  border-right: 1px solid var(--border-subtle);
  background: rgba(15, 23, 42, 0.56);
  color: var(--text-main);
  font-weight: 700;
  letter-spacing: 0.04em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 0.4rem;
  cursor: pointer;
}

.lesson-online-timer-side-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
  font-size: 0.9rem;
}

.lesson-online-timer-side-body {
  flex: 1;
  min-width: 0;
  padding: 0.7rem;
  overflow: auto;
  max-width: 900px;
  opacity: 1;
  background: rgba(15, 23, 42, 0.24);
  transition: max-width 0.26s ease, opacity 0.2s ease, padding 0.2s ease;
}

.lesson-online-timer-side-accordion:not(.is-open) {
  width: 48px;
  bottom: auto;
  height: 170px;
  background: rgba(15, 23, 42, 0.58);
}

.lesson-online-timer-side-accordion:not(.is-open) .lesson-online-timer-side-body {
  max-width: 0;
  opacity: 0;
  padding: 0;
  pointer-events: none;
}

.lesson-online-timer-side-accordion:not(.is-open) .lesson-online-timer-side-chevron {
  transform: rotate(180deg);
}

.lesson-online-contrib-side-accordion {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  bottom: 0.75rem;
  width: min(360px, calc(100% - 1.5rem));
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  flex-direction: row-reverse;
  align-items: stretch;
  overflow: hidden;
  z-index: 4;
  box-shadow: 0 14px 32px rgba(2, 6, 23, 0.3);
  transition: width 0.24s ease, height 0.24s ease, background 0.2s ease;
}

.lesson-online-contrib-side-toggle {
  width: 48px;
  min-height: 100%;
  border: none;
  border-right: 1px solid var(--border-subtle);
  background: rgba(15, 23, 42, 0.56);
  color: var(--text-main);
  font-weight: 700;
  letter-spacing: 0.04em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 0.4rem;
  cursor: pointer;
}

.lesson-online-contrib-side-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
  font-size: 0.9rem;
}

.lesson-online-contrib-side-body {
  flex: 1;
  min-width: 0;
  padding: 0.7rem;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 900px;
  opacity: 1;
  background: rgba(15, 23, 42, 0.24);
  transition: max-width 0.26s ease, opacity 0.2s ease, padding 0.2s ease;
}

.lesson-online-contrib-side-body h5 {
  margin: 0 0 0.4rem;
}

.lesson-online-contrib-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding-right: 0.08rem;
}

.lesson-online-contrib-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 0.55rem 0.6rem;
  background: rgba(15, 23, 42, 0.42);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.lesson-online-contrib-item:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
}

.lesson-online-contrib-item.is-contributed {
  border-color: rgba(16, 185, 129, 0.6);
  background: rgba(16, 185, 129, 0.18);
}

.lesson-online-contrib-item.is-representative {
  border-color: rgba(245, 158, 11, 0.7);
  background: rgba(245, 158, 11, 0.14);
}

.lesson-online-contrib-item.is-contributed.is-representative {
  border-color: rgba(250, 204, 21, 0.76);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(245, 158, 11, 0.2));
}

.lesson-online-contrib-item.is-readonly {
  cursor: default;
}

.lesson-online-contrib-item.is-readonly:hover {
  border-color: var(--border-subtle);
  transform: none;
}

.lesson-online-contrib-item-main {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.lesson-online-contrib-item-main strong {
  line-height: 1.2;
}

.lesson-online-contrib-item-representative {
  display: inline-flex;
  width: fit-content;
  border: 1px solid rgba(245, 158, 11, 0.55);
  border-radius: 999px;
  padding: 0.08rem 0.45rem;
  font-size: 0.68rem;
  line-height: 1.2;
  color: rgba(253, 230, 138, 1);
  background: rgba(245, 158, 11, 0.12);
}

.lesson-online-contrib-item-main .table-muted {
  font-size: 0.78rem;
  line-height: 1.2;
}

.lesson-online-contrib-item-status {
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 0.14rem 0.5rem;
  font-size: 0.72rem;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--text-muted);
}

.lesson-online-contrib-item.is-contributed .lesson-online-contrib-item-status {
  border-color: rgba(16, 185, 129, 0.58);
  color: rgba(110, 231, 183, 1);
}

.lesson-online-contrib-actions {
  margin-top: auto;
  padding-top: 0.45rem;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.lesson-online-contrib-side-accordion:not(.is-open) {
  width: 48px;
  bottom: auto;
  height: 170px;
  background: rgba(15, 23, 42, 0.58);
}

.lesson-online-contrib-side-accordion:not(.is-open) .lesson-online-contrib-side-body {
  max-width: 0;
  opacity: 0;
  padding: 0;
  pointer-events: none;
}

.lesson-online-contrib-side-accordion:not(.is-open) .lesson-online-contrib-side-chevron {
  transform: rotate(180deg);
}

.lesson-online-timer-stage {
  border: 1px dashed var(--border-subtle);
  border-radius: 12px;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.22);
}

.lesson-online-timer-display {
  min-height: 170px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.lesson-online-timer-display[hidden] {
  display: none !important;
}

.lesson-online-timer-display-digital span {
  font-size: clamp(2rem, 6vw, 3.6rem);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.lesson-online-timer-circle {
  width: min(280px, 74vw);
  height: min(280px, 74vw);
  border-radius: 50%;
  border: 5px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  background: conic-gradient(var(--primary) 0deg, rgba(255, 255, 255, 0.05) 0deg);
  position: relative;
}

.lesson-online-timer-circle::after {
  content: '';
  position: absolute;
  inset: 16px;
  border-radius: 50%;
  background: var(--surface-elevated);
}

.lesson-online-timer-circle span {
  position: relative;
  z-index: 1;
  font-size: clamp(1.7rem, 5vw, 3rem);
  font-weight: 700;
}

.lesson-online-slides-stage {
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 1rem;
  background: var(--surface-base, var(--bg-card));
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 0;
  height: 100%;
}

.lesson-online-tp-panel {
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 1rem;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.76), rgba(15, 23, 42, 0.58)),
    radial-gradient(circle at top, rgba(59, 130, 246, 0.14), transparent 54%);
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 0.75rem;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  box-shadow: 0 16px 34px rgba(2, 6, 23, 0.18);
}

.lesson-online-tp-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.lesson-online-tp-panel-header-main {
  min-width: 0;
}

.lesson-online-tp-panel-header h4 {
  margin: 0.2rem 0 0;
}

.lesson-online-tp-panel-header-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.45rem;
  margin-left: auto;
}

.lesson-online-tp-panel-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.18);
  color: #bfdbfe;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lesson-online-tp-panel-counter {
  white-space: nowrap;
  font-weight: 700;
}

.lesson-online-tp-panel-header-actions .btn-secondary {
  white-space: nowrap;
}

.lesson-online-tp-panel-status {
  margin: 0;
}

.lesson-online-tp-timeline {
  display: grid;
  gap: 0.45rem;
}

.lesson-online-tp-timeline-status {
  margin: 0;
}

.lesson-online-tp-panel-script {
  height: 100%;
  min-height: 0;
  max-height: none;
  overflow: auto;
  padding: 0.95rem;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(2, 6, 23, 0.34);
  color: #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  line-height: 1.65;
}

.lesson-online-tp-panel-script.is-empty {
  display: block;
  color: var(--text-muted);
  font-style: italic;
}

.tp-script-paragraph {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.8rem 0.9rem;
  appearance: none;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.4);
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
}

.tp-script-paragraph:hover {
  border-color: rgba(96, 165, 250, 0.42);
  background: rgba(30, 41, 59, 0.62);
  transform: translateY(-1px);
}

.tp-script-paragraph-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.45rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: rgba(51, 65, 85, 0.95);
  color: rgba(226, 232, 240, 0.94);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tp-script-paragraph-text {
  min-width: 0;
  color: inherit;
  white-space: pre-wrap;
  line-height: 1.68;
}

.tp-script-paragraph.is-timeline-complete {
  background: rgba(15, 23, 42, 0.3);
  border-color: rgba(71, 85, 105, 0.28);
  opacity: 0.82;
}

.tp-script-paragraph.is-timeline-suggested {
  border-color: rgba(56, 189, 248, 0.66);
  box-shadow: inset 3px 0 0 rgba(56, 189, 248, 0.94);
}

.tp-script-paragraph.is-manual-active {
  background: rgba(120, 53, 15, 0.34);
  border-color: rgba(251, 191, 36, 0.68);
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.18), inset 0 0 0 1px rgba(251, 191, 36, 0.24);
}

.tp-script-paragraph.is-manual-active .tp-script-paragraph-badge {
  background: rgba(251, 191, 36, 0.24);
  color: #fde68a;
}

.tp-script-paragraph.is-manual-active.is-timeline-suggested {
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.18), inset 3px 0 0 rgba(56, 189, 248, 0.94);
}

.lesson-online-slides-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.lesson-online-slides-header h4 {
  margin: 0;
}

.lesson-online-slides-view {
  --slides-height: 56vh;
  --slides-object-fit: cover;
  border: 1px dashed var(--border-subtle);
  border-radius: 12px;
  height: var(--slides-height);
  min-height: 280px;
  background: rgba(15, 23, 42, 0.35);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
}

.lesson-online-slides-view[data-size="compact"] {
  --slides-height: 44vh;
  min-height: 220px;
}

.lesson-online-slides-view[data-size="standard"] {
  --slides-height: 56vh;
  min-height: 280px;
}

.lesson-online-slides-view[data-size="large"] {
  --slides-height: 72vh;
  min-height: 360px;
}

.lesson-online-slides-view[data-fit="contain"] {
  --slides-object-fit: contain;
}

.lesson-online-slides-view[data-fit="cover"] {
  --slides-object-fit: cover;
}

.lesson-online-slides-controls-card {
  display: grid;
  gap: 0.75rem;
  padding: 0.85rem;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.22);
}

.lesson-online-slides-controls-tabs {
  padding-bottom: 0.75rem;
  margin-bottom: 0;
}

.lesson-online-slides-controls-panels {
  display: grid;
}

.lesson-online-slides-controls-panel {
  width: 100%;
}

.lesson-online-slides-controls-panel .lesson-online-slides-nav {
  justify-content: flex-start;
}

.lesson-online-timeline-hud {
  display: grid;
  gap: 0.7rem;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 0.8rem;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.62), rgba(15, 23, 42, 0.46)),
    radial-gradient(circle at top right, rgba(14, 165, 233, 0.14), transparent 48%);
}

.lesson-online-timeline-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.lesson-online-timeline-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.26rem 0.58rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.26);
  background: rgba(15, 23, 42, 0.38);
  color: rgba(226, 232, 240, 0.92);
  font-size: 0.8rem;
}

.lesson-online-timeline-chip strong {
  color: #fff;
}

.lesson-online-timeline-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.lesson-online-timeline-head strong {
  display: block;
  margin-bottom: 0.18rem;
}

.lesson-online-timeline-head .table-muted {
  margin: 0;
}

.lesson-online-timeline-actions {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.lesson-online-timeline-bars {
  display: grid;
  gap: 0.6rem;
}

.lesson-online-timeline-bar-wrap {
  display: grid;
  gap: 0.32rem;
}

.lesson-online-timeline-bar-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  font-size: 0.82rem;
}

.lesson-online-timeline-bar {
  width: 100%;
  height: 12px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.16);
  overflow: hidden;
}

.lesson-online-timeline-bar-compact {
  height: 10px;
}

.lesson-online-timeline-bar-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #38bdf8, #0ea5e9);
  transition: width 0.18s ease, background 0.18s ease;
}

.lesson-online-timeline-bar-fill[data-state="warning"] {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.lesson-online-timeline-bar-fill[data-state="danger"] {
  background: linear-gradient(90deg, #ef4444, #fb7185);
}

.lesson-online-timeline-bar-fill[data-state="neutral"] {
  background: linear-gradient(90deg, #64748b, #94a3b8);
}

#lesson-online-slide-image:not([hidden]) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--slides-object-fit);
  object-position: center;
}

.lesson-online-slide-video-player:not([hidden]) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--slides-object-fit);
  object-position: center;
  background: #020617;
}

#lesson-online-slide-image[hidden],
#lesson-online-presentation-image[hidden],
.lesson-online-slide-video-player[hidden] {
  display: none !important;
}

.lesson-online-slide-video-card {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 1.5rem;
  text-align: center;
  cursor: pointer;
  background:
    radial-gradient(circle at center, rgba(14, 165, 233, 0.12), transparent 56%),
    linear-gradient(180deg, rgba(2, 6, 23, 0.92), rgba(2, 6, 23, 0.82));
}

.lesson-online-slide-video-card[hidden] {
  display: none !important;
}

.lesson-online-slide-video-card-icon {
  width: 76px;
  height: 76px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  color: #fff;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.94), rgba(14, 165, 233, 0.84));
  box-shadow: 0 18px 34px -18px rgba(14, 165, 233, 0.8);
}

.lesson-online-slide-video-card strong {
  color: #f8fafc;
  font-size: 1.08rem;
}

.lesson-online-presentation-video-card {
  background:
    radial-gradient(circle at center, rgba(14, 165, 233, 0.15), transparent 56%),
    linear-gradient(180deg, rgba(2, 6, 23, 0.9), rgba(2, 6, 23, 0.82));
}

.lesson-online-default-slide {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  pointer-events: none;
  background:
    radial-gradient(circle at center, rgba(14, 165, 233, 0.14), transparent 52%),
    linear-gradient(180deg, rgba(7, 14, 17, 0.98), rgba(6, 11, 22, 1));
}

.lesson-online-default-slide[hidden] {
  display: none !important;
}

.lesson-online-default-slide-logo {
  width: min(46vw, 360px);
  max-width: min(70%, 420px);
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 18px 38px rgba(2, 6, 23, 0.36));
}

.lesson-online-default-slide-domain {
  margin: 0.85rem 0 0;
  padding: 0.18rem 0.62rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: rgba(2, 6, 23, 0.42);
  color: rgba(241, 245, 249, 0.88);
  font-size: clamp(0.82rem, 1.3vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: lowercase;
  box-shadow: 0 10px 24px -18px rgba(2, 6, 23, 0.5);
}

.lesson-online-slides-nav {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.lesson-online-slides-size {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.lesson-online-slides-fit {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.lesson-online-slides-size label {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.lesson-online-slides-fit label {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.lesson-online-slides-size select {
  min-width: 132px;
}

.lesson-online-slides-fit select {
  min-width: 128px;
}

.lesson-online-slides-modal-content {
  max-width: 980px;
}

#lesson-online-slides-modal {
  z-index: 1600;
}

body.lesson-online-presentation-open {
  overflow: hidden;
}

.lesson-online-presentation-overlay {
  position: fixed;
  inset: 0;
  z-index: 1400;
  background: rgba(2, 6, 23, 0.96);
}

.lesson-online-presentation-shell {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.lesson-online-presentation-close {
  position: absolute;
  top: 0.9rem;
  right: 1rem;
  z-index: 12;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: rgba(2, 6, 23, 0.72);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lesson-online-presentation-mode-indicator {
  position: absolute;
  top: 0.9rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  display: inline-flex;
  align-items: center;
  padding: 0.42rem 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(2, 6, 23, 0.72);
  color: #f8fafc;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 12px 28px rgba(2, 6, 23, 0.22);
}

.lesson-online-presentation-mode-indicator[data-mode="teacher"] {
  border-color: rgba(96, 165, 250, 0.44);
  background: rgba(30, 64, 175, 0.42);
}

.lesson-online-presentation-toolbar {
  position: absolute;
  top: 0.9rem;
  right: 4.4rem;
  z-index: 12;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.lesson-online-presentation-toolbar .btn-secondary {
  border-color: rgba(148, 163, 184, 0.32);
  background: rgba(2, 6, 23, 0.72);
  color: #f8fafc;
  box-shadow: 0 12px 28px rgba(2, 6, 23, 0.22);
}

.lesson-online-presentation-toolbar-btn {
  width: 2.65rem;
  min-width: 2.65rem;
  height: 2.65rem;
  padding: 0;
  border-radius: 999px;
  font-size: 0;
  color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lesson-online-presentation-toolbar-btn::before {
  content: '';
  width: 1.15rem;
  height: 1.15rem;
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.95;
}

.lesson-online-presentation-toolbar-btn-poll::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f8fafc' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6-10-6-10-6Z'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3C/svg%3E");
}

.lesson-online-presentation-toolbar-btn-picker::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f8fafc' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='14' rx='2'/%3E%3Cpath d='M8 10h8M8 14h5'/%3E%3C/svg%3E");
}

.lesson-online-presentation-toolbar-btn-slides::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f8fafc' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='12' rx='2'/%3E%3Cpath d='M7 19h10M9.5 17v2M14.5 17v2'/%3E%3C/svg%3E");
}

.lesson-online-presentation-toolbar .btn-secondary.is-active {
  border-color: rgba(96, 165, 250, 0.56);
  background: rgba(30, 64, 175, 0.32);
}

.lesson-online-presentation-view {
  --slides-object-fit: cover;
  position: absolute;
  inset: 0;
  background: #020617;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lesson-online-presentation-view[data-fit="contain"] {
  --slides-object-fit: contain;
}

.lesson-online-presentation-view[data-fit="cover"] {
  --slides-object-fit: cover;
}

#lesson-online-presentation-image:not([hidden]) {
  width: 100%;
  height: 100%;
  object-fit: var(--slides-object-fit);
  object-position: center;
  display: block;
}

.lesson-online-presentation-default-slide {
  z-index: 1;
  background:
    radial-gradient(circle at center, rgba(14, 165, 233, 0.18), transparent 52%),
    linear-gradient(180deg, rgba(2, 6, 23, 0.98), rgba(3, 7, 18, 1));
}

.lesson-online-presentation-default-logo {
  width: min(52vw, 560px);
  max-width: 72vw;
  filter: drop-shadow(0 24px 52px rgba(2, 6, 23, 0.52));
}

.lesson-online-presentation-default-domain {
  margin-top: 1rem;
  font-size: clamp(0.92rem, 1.8vw, 1.16rem);
}

.lesson-online-presentation-view .table-muted {
  margin: 0;
  font-size: 1.05rem;
  text-align: center;
  padding: 0 1rem;
}

.lesson-online-presentation-brand {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: min(92vw, 1200px);
  text-align: center;
  pointer-events: none;
}

.lesson-online-presentation-brand[hidden] {
  display: none !important;
}

.lesson-online-presentation-brand-logo {
  width: min(48vw, 420px);
  max-width: 84vw;
  height: auto;
  display: block;
  opacity: 0.58;
  filter: drop-shadow(0 20px 44px rgba(2, 6, 23, 0.42));
}

.lesson-online-presentation-brand-domain {
  margin: 0;
  padding: 0.28rem 1.04rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.38);
  background: rgba(2, 6, 23, 0.38);
  color: rgba(241, 245, 249, 0.82);
  font-size: clamp(1.76rem, 3.44vw, 2.16rem);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: lowercase;
  text-shadow: 0 1px 3px rgba(2, 6, 23, 0.6);
}

.lesson-online-presentation-poll-card {
  position: absolute;
  top: 0.9rem;
  right: 4.4rem;
  z-index: 11;
  width: min(420px, calc(100vw - 6rem));
  display: grid;
  gap: 0.75rem;
  padding: 0.9rem;
  border: 1px solid rgba(148, 163, 184, 0.38);
  border-radius: 14px;
  background: rgba(2, 6, 23, 0.68);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 18px 38px rgba(2, 6, 23, 0.26);
}

.lesson-online-presentation-poll-card[hidden] {
  display: none !important;
}

.lesson-online-presentation-poll-picker {
  position: absolute;
  top: 3.9rem;
  right: 4.4rem;
  z-index: 12;
  width: min(360px, calc(100vw - 6rem));
  display: grid;
  gap: 0.7rem;
  padding: 0.9rem;
  border: 1px solid rgba(148, 163, 184, 0.38);
  border-radius: 14px;
  background: rgba(2, 6, 23, 0.84);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 38px rgba(2, 6, 23, 0.3);
}

.lesson-online-presentation-poll-picker[hidden] {
  display: none !important;
}

.lesson-online-presentation-poll-picker-head {
  display: grid;
  gap: 0.2rem;
}

.lesson-online-presentation-poll-picker-head strong {
  color: #fff;
}

.lesson-online-presentation-poll-picker-head .table-muted {
  margin: 0;
}

.lesson-online-presentation-poll-picker-list {
  display: grid;
  gap: 0.55rem;
  max-height: min(52vh, 420px);
  overflow-y: auto;
}

.lesson-online-presentation-poll-picker-option {
  width: 100%;
  display: grid;
  gap: 0.3rem;
  text-align: left;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 12px;
  padding: 0.7rem 0.8rem;
  background: rgba(15, 23, 42, 0.72);
  color: #f8fafc;
}

.lesson-online-presentation-poll-picker-option.is-selected {
  border-color: rgba(96, 165, 250, 0.56);
  background: rgba(30, 64, 175, 0.28);
}

.lesson-online-presentation-poll-picker-option.is-auto {
  background: rgba(15, 23, 42, 0.54);
}

.lesson-online-presentation-poll-picker-option-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-weight: 700;
}

.lesson-online-presentation-poll-picker-option-question,
.lesson-online-presentation-poll-picker-option-meta {
  margin: 0;
  color: rgba(226, 232, 240, 0.9);
  font-size: 0.82rem;
  line-height: 1.4;
}

.lesson-online-presentation-poll-header {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.lesson-online-presentation-poll-header strong {
  color: #fff;
  font-size: 1rem;
}

.lesson-online-presentation-poll-question,
.lesson-online-presentation-poll-link {
  margin: 0;
  color: rgba(226, 232, 240, 0.92);
}

.lesson-online-presentation-poll-question {
  font-size: 0.95rem;
  line-height: 1.5;
}

.lesson-online-presentation-poll-link {
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.64);
  border: 1px solid rgba(148, 163, 184, 0.24);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.76rem;
  word-break: break-all;
}

.lesson-online-presentation-poll-results {
  gap: 0.55rem;
}

.lesson-online-presentation-poll-results .lesson-online-poll-result-label,
.lesson-online-presentation-poll-results .lesson-online-poll-result-meta {
  color: rgba(226, 232, 240, 0.96);
}

.lesson-online-presentation-counter {
  position: absolute;
  left: 50%;
  bottom: 1.1rem;
  transform: translateX(-50%);
  z-index: 11;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: rgba(2, 6, 23, 0.58);
  border: 1px solid rgba(148, 163, 184, 0.34);
  color: #e2e8f0;
  font-weight: 600;
}

.lesson-online-presentation-slide-strip {
  position: absolute;
  left: 50%;
  bottom: 3.2rem;
  transform: translateX(-50%);
  z-index: 12;
  width: min(92vw, 1120px);
  display: grid;
  gap: 0.55rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 16px;
  background: rgba(2, 6, 23, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 38px rgba(2, 6, 23, 0.28);
}

.lesson-online-presentation-slide-strip[hidden] {
  display: none !important;
}

.lesson-online-presentation-slide-strip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.lesson-online-presentation-slide-strip-head strong {
  color: #fff;
}

.lesson-online-presentation-slide-strip-list {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  padding-bottom: 0.1rem;
}

.lesson-online-presentation-slide-strip-item {
  min-width: 132px;
  max-width: 132px;
  display: grid;
  gap: 0.4rem;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 12px;
  padding: 0.45rem;
  background: rgba(15, 23, 42, 0.72);
  color: #f8fafc;
  text-align: left;
}

.lesson-online-presentation-slide-strip-item.is-active {
  border-color: rgba(96, 165, 250, 0.6);
  background: rgba(30, 64, 175, 0.3);
}

.lesson-online-presentation-slide-strip-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 9px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  overflow: hidden;
  background: rgba(2, 6, 23, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lesson-online-presentation-slide-strip-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lesson-online-presentation-slide-strip-thumb.is-video,
.lesson-online-presentation-slide-strip-thumb.is-default {
  color: rgba(241, 245, 249, 0.9);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lesson-online-presentation-slide-strip-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
}

.lesson-online-presentation-slide-strip-desc {
  display: block;
  font-size: 0.72rem;
  color: rgba(226, 232, 240, 0.86);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lesson-online-presentation-shell[data-slide-strip-visible="true"] .lesson-online-presentation-counter {
  bottom: 11.2rem;
}

.lesson-online-presentation-tp-panel {
  position: absolute;
  left: 0.9rem;
  bottom: 1rem;
  z-index: 11;
  width: min(420px, calc(100vw - 5rem));
  max-height: min(36vh, 320px);
  display: grid;
  gap: 0.65rem;
  padding: 0.85rem;
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 14px;
  background: rgba(2, 6, 23, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 38px rgba(2, 6, 23, 0.28);
}

.lesson-online-presentation-tp-panel[hidden] {
  display: none !important;
}

.lesson-online-presentation-shell[data-audience-mode="public"] .lesson-online-presentation-tp-panel {
  display: none !important;
}

.lesson-online-presentation-shell[data-audience-mode="public"] .lesson-online-presentation-toolbar,
.lesson-online-presentation-shell[data-audience-mode="public"] .lesson-online-presentation-timer-accordion,
.lesson-online-presentation-shell[data-audience-mode="public"] .lesson-online-presentation-contrib-accordion,
.lesson-online-presentation-shell[data-audience-mode="public"] .lesson-online-presentation-poll-picker,
.lesson-online-presentation-shell[data-audience-mode="public"] .lesson-online-presentation-slide-strip {
  display: none !important;
}

.lesson-online-presentation-shell[data-audience-mode="public"] .lesson-online-presentation-counter {
  bottom: 1.1rem;
}

.lesson-online-presentation-shell[data-slide-strip-visible="true"] .lesson-online-presentation-tp-panel {
  bottom: 11.2rem;
}

.lesson-online-presentation-tp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.lesson-online-presentation-tp-head strong {
  color: #fff;
}

.lesson-online-presentation-tp-status {
  margin: 0;
}

.lesson-online-presentation-tp-script {
  overflow: auto;
  min-height: 120px;
  padding: 0.8rem;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.68);
  color: rgba(226, 232, 240, 0.96);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  line-height: 1.62;
}

.lesson-online-presentation-tp-script.is-empty {
  display: block;
  color: rgba(148, 163, 184, 0.92);
  font-style: italic;
}

.lesson-online-presentation-timer-accordion {
  position: absolute;
  top: var(--lesson-online-presentation-timer-y, 0.9rem);
  left: var(--lesson-online-presentation-timer-x, 0.9rem);
  z-index: 11;
  display: flex;
  align-items: stretch;
  border: 1px solid rgba(148, 163, 184, 0.38);
  border-radius: 12px;
  background: rgba(2, 6, 23, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow: hidden;
}

.lesson-online-presentation-timer-toggle {
  width: 48px;
  border: none;
  border-right: 1px solid rgba(148, 163, 184, 0.34);
  background: rgba(2, 6, 23, 0.72);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.04em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 0.4rem;
  cursor: grab;
  touch-action: none;
}

.lesson-online-presentation-timer-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.lesson-online-presentation-timer-body {
  width: min(360px, calc(100vw - 5rem));
  max-width: calc(100vw - 5rem);
  padding: 0.75rem;
  overflow: auto;
  background: rgba(2, 6, 23, 0.16);
  cursor: pointer;
  user-select: none;
  transition: width 0.26s ease, max-width 0.26s ease, opacity 0.2s ease, padding 0.2s ease;
}

.lesson-online-presentation-timer-body:active {
  background: rgba(2, 6, 23, 0.28);
}

.lesson-online-presentation-timer-accordion.is-dragging .lesson-online-presentation-timer-toggle {
  cursor: grabbing;
}

.lesson-online-presentation-timer-accordion:not(.is-open) {
  width: 48px;
  height: 170px;
  background: rgba(2, 6, 23, 0.74);
}

.lesson-online-presentation-timer-accordion:not(.is-open) .lesson-online-presentation-timer-body {
  width: 0;
  max-width: 0;
  opacity: 0;
  padding: 0;
  pointer-events: none;
}

.lesson-online-presentation-timer-accordion:not(.is-open) .lesson-online-presentation-timer-chevron {
  transform: rotate(180deg);
}

.lesson-online-presentation-timer-body .lesson-online-timer-display {
  min-height: 128px;
}

.lesson-online-presentation-timer-body .lesson-online-timer-circle {
  width: min(220px, 38vw);
  height: min(220px, 38vw);
}

.lesson-online-presentation-timer-body #lesson-online-presentation-timer-message {
  margin: 0.25rem 0 0;
  text-align: center;
}

.lesson-online-presentation-contrib-accordion {
  position: absolute;
  top: 3.6rem;
  right: 0.9rem;
  bottom: 0.9rem;
  width: min(360px, calc(100vw - 5rem));
  z-index: 11;
  display: flex;
  flex-direction: row-reverse;
  align-items: stretch;
  border: 1px solid rgba(148, 163, 184, 0.38);
  border-radius: 12px;
  background: rgba(2, 6, 23, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow: hidden;
  transition: width 0.24s ease, height 0.24s ease, background 0.2s ease;
}

.lesson-online-presentation-contrib-accordion.is-floating {
  top: var(--lesson-online-presentation-contrib-y, 3.6rem);
  left: var(--lesson-online-presentation-contrib-x, 0.9rem);
  right: auto;
  bottom: auto;
}

.lesson-online-presentation-contrib-body {
  flex: 1;
  min-width: 0;
  padding: 0.75rem;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 900px;
  opacity: 1;
  background: rgba(2, 6, 23, 0.16);
  transition: max-width 0.26s ease, opacity 0.2s ease, padding 0.2s ease;
}

.lesson-online-presentation-contrib-body h5 {
  margin: 0 0 0.4rem;
}

.lesson-online-presentation-contrib-body .lesson-online-contrib-list {
  --lesson-online-presentation-contrib-row-height: 64px;
  flex: 0 1 auto;
  min-height: 0;
  max-height: calc((var(--lesson-online-presentation-contrib-row-height) * 7) + (0.45rem * 6));
  overflow-y: auto;
}

.lesson-online-presentation-contrib-body .lesson-online-contrib-item {
  min-height: var(--lesson-online-presentation-contrib-row-height);
  max-height: var(--lesson-online-presentation-contrib-row-height);
  align-items: center;
  overflow: hidden;
}

.lesson-online-presentation-contrib-body .lesson-online-contrib-item-main {
  gap: 0.12rem;
}

.lesson-online-presentation-contrib-body .lesson-online-contrib-item-main strong,
.lesson-online-presentation-contrib-body .lesson-online-contrib-item-main .table-muted,
.lesson-online-presentation-contrib-body .lesson-online-contrib-item-representative {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lesson-online-presentation-contrib-toggle {
  width: 48px;
  border: none;
  border-right: 1px solid rgba(148, 163, 184, 0.34);
  background: rgba(2, 6, 23, 0.72);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.04em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 0.4rem;
  cursor: pointer;
}

.lesson-online-presentation-contrib-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.lesson-online-presentation-contrib-accordion.is-dragging .lesson-online-presentation-contrib-toggle {
  cursor: grabbing;
}

.lesson-online-presentation-contrib-accordion:not(.is-open) {
  width: 48px;
  bottom: auto;
  height: 170px;
  background: rgba(2, 6, 23, 0.74);
}

.lesson-online-presentation-contrib-accordion:not(.is-open) .lesson-online-presentation-contrib-body {
  max-width: 0;
  opacity: 0;
  padding: 0;
  pointer-events: none;
}

.lesson-online-presentation-contrib-accordion:not(.is-open) .lesson-online-presentation-contrib-chevron {
  transform: rotate(180deg);
}

.lesson-online-slides-modal-actions {
  margin-top: 0.6rem;
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
}

.lesson-online-slides-timeline-config {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.9rem;
  padding: 0.9rem;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.22);
}

.lesson-online-slides-timeline-config-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.lesson-online-slides-timeline-config-head h4,
.lesson-online-slides-timeline-config-head .table-muted {
  margin: 0;
}

.lesson-online-slides-timeline-config-summary {
  display: grid;
  gap: 0.15rem;
  text-align: right;
}

.lesson-online-slides-list-wrap {
  margin-top: 0.9rem;
}

.lesson-online-slides-list-wrap h4 {
  margin: 0 0 0.6rem;
}

.lesson-online-slides-modal-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-height: 46vh;
  overflow-y: auto;
  padding-right: 0.2rem;
}

.lesson-online-slide-item {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  gap: 0.65rem;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 0.55rem;
  background: rgba(255, 255, 255, 0.02);
}

.lesson-online-slide-thumb {
  width: 76px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  background: rgba(15, 23, 42, 0.45);
}

.lesson-online-slide-thumb-video {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #f8fafc;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background:
    radial-gradient(circle at center, rgba(14, 165, 233, 0.24), transparent 60%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.94), rgba(30, 41, 59, 0.92));
}

.lesson-online-slide-meta {
  min-width: 0;
  display: grid;
  gap: 0.5rem;
}

.lesson-online-slide-meta strong {
  display: block;
  margin-bottom: 0.15rem;
}

.lesson-online-slide-url {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-muted);
  word-break: break-all;
}

.lesson-online-slide-timing-field {
  display: grid;
  gap: 0.35rem;
}

.lesson-online-slide-timing-field label {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
}

.lesson-online-slide-planned-seconds-input {
  width: min(220px, 100%);
}

.lesson-online-slide-script-field {
  display: grid;
  gap: 0.35rem;
}

.lesson-online-slide-script-field label {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
}

.lesson-online-slide-script-input {
  width: 100%;
  min-height: 120px;
  resize: vertical;
}

.lesson-online-slide-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: flex-start;
  justify-content: flex-end;
}

.lesson-online-slide-actions .btn-secondary {
  padding: 0.32rem 0.52rem;
  font-size: 0.78rem;
}

.lesson-online-slide {
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 1rem;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(16, 185, 129, 0.12));
}

.lesson-online-slide h4,
.lesson-online-student-presentation h4 {
  margin: 0 0 0.8rem;
}

.lesson-online-slide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.7rem;
}

.lesson-online-slide-grid .lesson-online-slide-card {
  border: 1px solid var(--border-subtle);
  border-radius: 9px;
  padding: 0.6rem 0.7rem;
  background: rgba(15, 23, 42, 0.32);
}

.lesson-online-slide-grid .lesson-online-slide-card-institution {
  border-color: rgba(96, 165, 250, 0.55);
  background: linear-gradient(135deg, rgba(30, 64, 175, 0.34), rgba(37, 99, 235, 0.22));
}

.lesson-online-slide-grid .lesson-online-slide-card-course {
  border-color: rgba(110, 231, 183, 0.56);
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.34), rgba(16, 185, 129, 0.22));
}

.lesson-online-slide-grid .lesson-online-slide-card-class {
  border-color: rgba(252, 211, 77, 0.55);
  background: linear-gradient(135deg, rgba(180, 83, 9, 0.34), rgba(245, 158, 11, 0.2));
}

.lesson-online-slide-grid .lesson-online-slide-card-teacher {
  border-color: rgba(251, 113, 133, 0.55);
  background: linear-gradient(135deg, rgba(159, 18, 57, 0.34), rgba(244, 63, 94, 0.22));
}

.lesson-online-slide-grid .lesson-online-slide-card-room {
  border-color: rgba(103, 232, 249, 0.55);
  background: linear-gradient(135deg, rgba(14, 116, 144, 0.34), rgba(6, 182, 212, 0.22));
}

.lesson-online-slide-grid .lesson-online-slide-card-session {
  border-color: rgba(190, 242, 100, 0.55);
  background: linear-gradient(135deg, rgba(77, 124, 15, 0.34), rgba(132, 204, 22, 0.22));
}

.lesson-online-slide-grid span {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.lesson-online-slide-grid strong {
  display: block;
  margin-top: 0.2rem;
}

.lesson-online-student-presentation {
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 1rem;
}

.lesson-online-student-header {
  display: flex;
  justify-content: space-between;
  gap: 0.7rem;
  flex-wrap: wrap;
  align-items: center;
}

.lesson-online-representative-status {
  margin: 0;
  font-size: 0.85rem;
}

.lesson-online-student-nav {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.lesson-online-student-nav select {
  min-width: 220px;
}

.lesson-online-student-card {
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 0.85rem;
  background: var(--bg-card);
}

.lesson-online-student-card p {
  margin: 0.4rem 0;
}

.lesson-report-card {
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 1rem;
  background: var(--surface-elevated);
}

.lesson-report-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.lesson-report-filter-block {
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 0.75rem;
  background: var(--bg-card);
}

.lesson-report-filter-block h4 {
  margin: 0 0 0.6rem 0;
  font-size: 0.92rem;
}

.lesson-report-filter-block .form-grid.compact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.65rem;
}

.lesson-report-filter-block .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 0.65rem 0.75rem;
  background: rgba(255, 255, 255, 0.02);
}

.lesson-report-filter-block .form-group label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}

.lesson-report-filter-block .form-group input,
.lesson-report-filter-block .form-group select {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 0.55rem 0.65rem;
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.03);
}

.lesson-report-filter-block .form-group input:focus,
.lesson-report-filter-block .form-group select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
}

.lesson-report-options {
  display: grid;
  grid-template-columns: minmax(180px, 240px) 1fr;
  gap: 0.8rem;
  align-items: start;
  margin-bottom: 0.6rem;
}

.lesson-report-options .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.lesson-report-options .form-group label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}

.lesson-report-options .form-group select {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 0.55rem 0.65rem;
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.03);
}

.lesson-report-options .form-group select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
}

.lesson-report-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 0.7rem;
  background: var(--bg-card);
}

.lesson-report-fields > span {
  width: 100%;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.lesson-report-fields label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.83rem;
  color: var(--text-main);
  min-width: 0;
  line-height: 1.25;
}

.lesson-report-actions {
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.lesson-report-modal-actions {
  padding: 0 1.5rem 1.5rem;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.lesson-report-preview-wrap {
  overflow-x: auto;
  overflow-y: hidden;
}

.lesson-report-preview-wrap table {
  min-width: 720px;
}

.lesson-report-preview-wrap.hidden {
  display: none;
}

.lesson-report-pdf-modal-content {
  width: min(94vw, 1200px);
  max-width: 1200px;
  height: min(94vh, 900px);
  max-height: 94vh;
}

.lesson-report-pdf-modal-body {
  padding: 0;
  overflow: hidden;
}

#lesson-report-pdf-frame {
  width: 100%;
  height: 100%;
  min-height: 72vh;
  border: 0;
  background: #111827;
}

@media (max-width: 1024px) {
  #view-lessons .lesson-report-preview-wrap {
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  #view-lessons .lesson-report-preview-wrap table {
    display: table;
    width: 100%;
    min-width: 700px;
  }

  #view-lessons .lesson-report-preview-wrap thead {
    display: table-header-group;
  }

  #view-lessons .lesson-report-preview-wrap tbody {
    display: table-row-group;
  }

  #view-lessons .lesson-report-preview-wrap tr {
    display: table-row;
    border: 0;
    margin: 0;
    padding: 0;
    background: transparent;
  }

  #view-lessons .lesson-report-preview-wrap th,
  #view-lessons .lesson-report-preview-wrap td {
    display: table-cell;
    width: auto;
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-subtle);
  }

  #view-lessons .lesson-report-preview-wrap td::before {
    content: none;
  }
}

@media (max-width: 960px) {
  .lessons-layout {
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
  }

  .lessons-tab-card,
  .lesson-detail-card {
    min-height: auto;
  }

  #lesson-tab-anotacoes .lesson-transcript-panel {
    height: 460px;
    min-height: 320px;
  }

  #lesson-tab-anotacoes .lesson-transcript-columns {
    grid-template-columns: 1fr;
  }

  #lesson-tab-anotacoes .lesson-attendance-ai-columns {
    grid-template-columns: 1fr;
  }

  .lesson-panel-grid {
    grid-template-columns: 1fr;
  }

  .lesson-box.resizable {
    min-width: 0;
    resize: vertical;
  }

  .lesson-tabs .tab-list {
    gap: 0.4rem;
  }

  .lesson-tabs .tab-btn {
    padding: 0.5rem 0.7rem;
    font-size: 0.85rem;
  }

  #view-lessons .view-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .lesson-report-options {
    grid-template-columns: 1fr;
  }

  .lesson-report-filter-grid {
    grid-template-columns: 1fr;
  }

  .lesson-report-filter-block .form-grid.compact {
    grid-template-columns: 1fr;
  }

  .lesson-report-actions .btn-secondary,
  .lesson-report-actions .btn-primary,
  .lesson-report-modal-actions .btn-secondary {
    width: 100%;
  }

  .lesson-report-pdf-modal-content {
    width: 98vw;
    height: 96vh;
    border-radius: 8px;
  }

  .lesson-online-actions .btn-primary,
  .lesson-online-actions .btn-secondary {
    width: 100%;
  }

  .lesson-online-student-header {
    flex-direction: column;
    align-items: stretch;
  }

  .lesson-online-student-nav {
    flex-direction: column;
  }

  .lesson-online-student-nav select {
    min-width: 0;
    width: 100%;
  }

  #lesson-report-pdf-frame {
    min-height: 64vh;
  }
}

/* Dashboard Filters */
.dashboard-filters {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
  padding: 0.85rem 1rem;
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
}

.dashboard-filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.dashboard-filter-group label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}

.dashboard-filter-group select {
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  color: var(--text);
  font-size: 0.85rem;
  min-width: 120px;
}

/* ── Dashboard Multi-Select ─────────────────────────────── */
.ms-wrapper {
  position: relative;
  min-width: 140px;
}
.ms-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  width: 100%;
  padding: 0.4rem 0.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.85rem;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s;
}
.ms-trigger:hover {
  border-color: rgba(148, 163, 184, 0.5);
}
.ms-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ms-arrow {
  flex-shrink: 0;
  font-size: 0.65rem;
  opacity: 0.55;
}
.ms-dropdown {
  position: absolute;
  top: calc(100% + 3px);
  left: 0;
  min-width: 100%;
  max-height: 210px;
  overflow-y: auto;
  background: rgba(10, 18, 38, 0.98);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
  z-index: 1500;
  padding: 0.25rem 0;
}
.ms-option {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.32rem 0.65rem;
  font-size: 0.83rem;
  color: #cbd5e1;
  cursor: pointer;
  transition: background 0.1s;
  white-space: nowrap;
}
.ms-option:hover {
  background: rgba(148, 163, 184, 0.1);
  color: #e2e8f0;
}
.ms-option input[type="checkbox"] {
  accent-color: #3b82f6;
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  cursor: pointer;
}
.ms-option-all {
  font-weight: 600;
  color: #e2e8f0;
}
.ms-sep {
  height: 1px;
  background: rgba(148, 163, 184, 0.12);
  margin: 0.2rem 0;
}
.ms-empty {
  padding: 0.45rem 0.65rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Dashboard Grid */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}

.stat-card {
  background: linear-gradient(145deg, var(--bg-card), #263345);
  padding: 1.5rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  text-align: center;
  min-width: 0;
}

.stat-card h3 {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.stat-value {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--primary);
}

.stat-card.wide {
  grid-column: 1 / -1;
}

.line-chart-card {
  grid-column: 1 / -1;
  min-width: 0;
}

.line-chart-list {
  margin-top: 0.75rem;
  display: grid;
  gap: 0.75rem;
  min-width: 0;
}

.stat-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  text-align: left;
}

.badge {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.2rem 0.75rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.badge-success {
  background: rgba(34, 197, 94, 0.15);
  border-color: var(--success);
  color: var(--success);
}

.badge-info {
  background: rgba(34, 211, 238, 0.15);
  border-color: var(--primary);
  color: var(--primary);
}

.badge-muted {
  background: var(--surface-elevated);
  border-color: var(--border);
  color: var(--text-muted);
  opacity: 0.7;
}

.badge-danger {
  background: rgba(239, 68, 68, 0.15);
  border-color: var(--danger);
  color: var(--danger);
}

.last-lesson-stats {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-align: left;
}

.last-lesson-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.95rem;
  color: var(--text-main);
}

.bar-track {
  width: 100%;
  height: 10px;
  background: var(--border-subtle);
  border-radius: 999px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  transition: width 0.25s ease;
}

.bar-fill.present {
  background: var(--success);
}

.bar-fill.absent {
  background: var(--danger);
}

@media (max-width: 768px) {
  .dashboard-filters {
    padding: 0.75rem;
    gap: 0.6rem;
  }

  .dashboard-filter-group {
    width: 100%;
  }

  .dashboard-filter-group select {
    width: 100%;
    min-width: 0;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .stat-card {
    padding: 1rem;
  }

  .stat-card-header {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .badge {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .lesson-line-chart,
  .lesson-chart-card,
  .last-lesson-class {
    padding: 0.75rem;
  }

  .lesson-line-svg {
    height: 120px;
  }

  .line-value-label {
    min-width: 1.35rem;
    height: 1.35rem;
    font-size: 0.7rem;
  }

  .lesson-line-labels {
    min-height: 72px;
  }

  .lesson-line-labels > .axis-item .axis-label,
  .lesson-line-labels > .axis-item .axis-label.room-axis-label {
    min-height: 48px;
    font-size: 0.72rem;
  }

  .lesson-chart-bar {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.3rem;
  }

  .bar-value {
    font-size: 0.84rem;
  }

  .lesson-chip .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .lesson-line-legend {
    font-size: 0.8rem;
  }

  .lesson-chip .stats {
    grid-template-columns: 1fr;
  }
}

.status-badge {
  padding: 0.25rem 0.6rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
}

.status-active {
  background-color: rgba(16, 185, 129, 0.2);
  color: var(--success);
}

.status-inactive {
  background-color: rgba(239, 68, 68, 0.2);
  color: var(--danger);
}

.status-desistente {
  background-color: rgba(245, 158, 11, 0.22);
  color: #fbbf24;
}

.status-warning {
  background-color: rgba(245, 158, 11, 0.18);
  color: #d97706;
}

.status-neutral {
  background-color: rgba(59, 130, 246, 0.18);
  color: var(--primary);
}

.status-progress {
  background-color: rgba(251, 191, 36, 0.2);
  color: #f59e0b;
}

#view-lessons .attendance-select {
  color: var(--text-main);
}

#view-lessons .attendance-select.absent {
  color: var(--danger);
  font-weight: 600;
}

/* Import Grid */
.import-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.message-preview-card {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 1.25rem;
  align-items: stretch;
  margin-bottom: 1.5rem;
}

.message-preview-simulator {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.message-preview-simulator__badge {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--primary);
}

.message-preview-phone {
  position: relative;
  border-radius: 24px;
  padding: 1rem 1rem 0.75rem;
  background: linear-gradient(180deg, #0b141a 0%, #111b21 100%);
  border: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  color: #e9edef;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  min-height: 520px;
}

.message-preview-phone::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.04) 0, transparent 24%),
    radial-gradient(circle at 80% 0%, rgba(255, 255, 255, 0.03) 0, transparent 20%),
    radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.04) 0, transparent 18%);
  opacity: 0.55;
  pointer-events: none;
}

.message-preview-phone * {
  position: relative;
  z-index: 1;
}

.wa-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #b7c2cc;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
}

.wa-status-icons {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.wa-status-icons span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.wa-signal::before {
  content: "";
  display: block;
  width: 18px;
  height: 12px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.18) 0 3px,
    transparent 3px 4px,
    rgba(255, 255, 255, 0.34) 4px 7px,
    transparent 7px 8px,
    rgba(255, 255, 255, 0.62) 8px 11px,
    transparent 11px 12px,
    rgba(255, 255, 255, 0.88) 12px 18px
  );
  border-radius: 3px;
}

.wa-signal {
  display: inline-block;
}

.wa-wifi {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 10px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top: none;
  border-radius: 0 0 10px 10px;
}

.wa-wifi::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-top: none;
  border-radius: 0 0 8px 8px;
}

.wa-wifi::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
}

.wa-battery {
  position: relative;
  display: inline-block;
  width: 22px;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: 3px;
}

.wa-battery::before {
  content: "";
  position: absolute;
  inset: 2px 4px 2px 2px;
  background: linear-gradient(90deg, #4ade80 0%, #22c55e 60%, #0ea5e9 100%);
  border-radius: 2px;
}

.wa-battery::after {
  content: "";
  position: absolute;
  top: 3px;
  right: -5px;
  width: 3px;
  height: 6px;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 1px;
}

.wa-chat-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 0.6rem 0.75rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.wa-back {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #b7c2cc;
  display: grid;
  place-items: center;
  font-weight: 700;
}

.wa-chat-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(145deg, #0ea5e9 0%, #22c55e 70%);
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.18);
  position: relative;
}

.wa-chat-avatar::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
}

.wa-chat-title strong {
  display: block;
  font-size: 1rem;
  color: #e9edef;
  margin-bottom: 2px;
}

.wa-chat-title span {
  display: block;
  color: #a7b5c2;
  font-size: 0.88rem;
}

.wa-chat-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.wa-icon-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.wa-icon-dots {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  position: relative;
}

.wa-icon-dots::before {
  content: "";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6px;
  height: 6px;
  background: rgba(255, 255, 255, 0.82);
  border-radius: 50%;
  position: absolute;
  top: 8px;
  left: 8px;
  box-shadow: 0 -6px 0 rgba(255, 255, 255, 0.82), 0 6px 0 rgba(255, 255, 255, 0.82);
}

.wa-chat-body {
  background: #0a171d;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  padding: 0.85rem;
  min-height: 320px;
  flex: 1;
  overflow-y: auto;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  background-image:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.05) 0, transparent 26%),
    radial-gradient(circle at 70% 70%, rgba(34, 197, 94, 0.06) 0, transparent 28%),
    radial-gradient(circle at 20% 80%, rgba(14, 165, 233, 0.05) 0, transparent 30%);
}

.wa-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  font-size: 0.8rem;
  margin: 0 auto 0.65rem;
}

.wa-message-card {
  width: 100%;
  border-radius: 16px 16px 6px 16px;
  background: linear-gradient(180deg, #0f5d3e 0%, #0c4d34 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0.85rem 0.85rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25);
}

.wa-message-media {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #0a141b;
  max-height: 240px;
}

.wa-message-media img,
.wa-message-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wa-message-title {
  font-size: 0.98rem;
  font-weight: 700;
}

.wa-message-body {
  margin: 0;
  color: #e9f6f0;
  line-height: 1.55;
  font-size: 0.93rem;
  white-space: pre-line;
}

.wa-message-footer {
  font-size: 0.85rem;
  color: #c0e2d3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.wa-message-status {
  width: 36px;
  height: 18px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
}

.wa-chat-input {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 0.55rem 0.7rem;
  color: #cbd5e1;
  font-size: 0.9rem;
}

.wa-input-placeholder {
  flex: 1;
  color: #9fb4c3;
}

.wa-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.07);
  display: grid;
  place-items: center;
  color: #b7c2cc;
  font-size: 0.75rem;
}

.wa-input-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.wa-icon--emoji::before {
  content: ":)";
  font-weight: 700;
}

.wa-icon--paperclip::before {
  content: "CL";
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: -0.02em;
}

.wa-icon--mic::before {
  content: "o";
  font-size: 1rem;
  line-height: 1;
}

.message-preview-guidance {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border-left: 1px solid var(--border-subtle);
  padding-left: 1rem;
}

.integration-status {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}

.integration-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.wa-qr {
  margin: 0.5rem 0;
}

.wa-qr-placeholder {
  margin-top: 0.35rem;
  padding: 1rem;
  border: 1px dashed var(--border);
  border-radius: 8px;
  text-align: center;
  font-size: 0.9rem;
  color: #0f172a;
  background: #ffffff;
}

.wa-qr-placeholder img {
  width: 340px;
  height: 340px;
  image-rendering: crisp-edges;
}

.compact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.message-template-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.message-template-list li {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.9rem;
}

.message-template-list code {
  display: inline-block;
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.4);
  border-radius: 6px;
  padding: 0.15rem 0.5rem;
  font-weight: 600;
  color: var(--primary);
}

/* Message modal form */
#modal-message .modal-content {
  max-width: 780px;
}

#modal-message .form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

#modal-message .form-grid.compact {
  gap: 0.85rem;
}

#modal-message .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}

#modal-message .form-group.full-width {
  grid-column: 1 / -1;
}

#modal-message .form-group label {
  font-weight: 600;
  color: var(--text-muted);
  font-size: 0.92rem;
}

#modal-message input,
#modal-message select,
#modal-message textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: rgba(15, 23, 42, 0.35);
  color: var(--text-main);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#modal-message textarea {
  min-height: 120px;
  resize: vertical;
}

#modal-message input:focus,
#modal-message select:focus,
#modal-message textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15);
}

#modal-message .radio-group {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 0.5rem 0.75rem;
}

#modal-message .message-template-controls {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 0.9rem;
  background: rgba(255, 255, 255, 0.03);
}

#modal-message .message-template-controls__row {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

#modal-message .message-template-controls select {
  min-width: 220px;
}

#modal-message .message-template-controls .btn-secondary {
  border-radius: 10px;
  padding: 0.55rem 0.9rem;
}

#modal-message #message-send-preview {
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 0.8rem 0.9rem;
  background: rgba(255, 255, 255, 0.02);
}

#modal-message .form-actions {
  gap: 0.6rem;
}

#modal-message .form-actions.full-width {
  grid-column: 1 / -1;
}

/* ===== Modal Curso ===== */
#modal-course .modal-content {
  max-width: 800px;
}

#modal-course .form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.85rem;
}

#modal-course .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}

#modal-course .form-group.full-width {
  grid-column: 1 / -1;
}

#modal-course .form-group label {
  font-weight: 600;
  color: var(--text-muted);
  font-size: 0.92rem;
}

#modal-course input,
#modal-course select,
#modal-course textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--bg-input, rgba(255,255,255,0.04));
  color: var(--text-main);
  font-size: 0.95rem;
  box-sizing: border-box;
  resize: vertical;
}

#modal-course input:focus,
#modal-course select:focus,
#modal-course textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
}

#modal-course .form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
}

#modal-course .form-actions.full-width {
  grid-column: 1 / -1;
}

/* Grid 3 colunas para responsáveis — colapsa em mobile */
.coordinator-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.5rem;
}

@media (max-width: 600px) {
  .coordinator-grid {
    grid-template-columns: 1fr;
  }

  #modal-course .modal-content {
    max-width: 100%;
  }
}

@media (max-width: 960px) {
  .message-preview-card {
    grid-template-columns: 1fr;
  }

  .message-preview-guidance {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--border-subtle);
    padding-top: 1rem;
  }
}

.message-simulation-card {
  margin-top: 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.message-simulation-card.hidden {
  display: none;
}

.message-simulation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.message-simulation-header h3 {
  margin: 0;
  font-size: 1.2rem;
}

.message-simulation-controls {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.message-simulation-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.message-simulation-content.hidden {
  display: none;
}

.message-simulation-recipient {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.message-simulation-recipient__label {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.message-simulation-recipient select {
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-main);
}

.message-preview-phone--simulation {
  max-width: 440px;
  align-self: flex-start;
}

#modal-message-send .message-send-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.1fr);
  gap: 1rem;
  align-items: stretch;
  margin-top: 0.75rem;
}

#modal-message-send {
  position: static;
  width: 100%;
  max-width: none;
  background: none;
  margin-top: 1rem;
}

#modal-message-send .modal-content {
  width: 100%;
  max-width: none;
  max-height: none;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
}

#modal-message-send .modal-body {
  max-height: none;
}

#modal-message-send .message-send-table-container {
  height: 100%;
  max-height: none;
  overflow: auto;
}

#modal-message-send #message-send-table {
  width: 100%;
  border-collapse: collapse;
}

#modal-message-send #message-send-table th,
#modal-message-send #message-send-table td {
  padding: 0.55rem 0.6rem;
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.92rem;
}

#modal-message-send #message-send-table th {
  background: rgba(255, 255, 255, 0.02);
  position: sticky;
  top: 0;
  z-index: 1;
}

#modal-message-send #message-send-table tr.is-selected {
  background: rgba(59, 130, 246, 0.08);
  outline: 1px solid var(--primary);
}

#modal-message-send #message-send-table td .table-muted {
  font-size: 0.85rem;
}

#modal-message-send .message-send-preview {
  height: 100%;
  display: flex;
  flex-direction: column;
}

#modal-message-send .message-send-preview-content {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

#modal-message-send .message-send-preview .wa-message-card {
  box-shadow: none;
}

#modal-message-send .message-send-preview .wa-meta-pill {
  background: var(--border-subtle);
}

#modal-message-send .message-send-preview .status-badge {
  font-size: 0.75rem;
  padding: 0.2rem 0.55rem;
}

@media (max-width: 900px) {
  #modal-message-send .message-send-layout {
    grid-template-columns: 1fr;
  }

  #modal-message-send .message-send-table-container {
    max-height: none;
  }
}

.mail-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.logs-container {
  max-height: 400px;
  overflow-y: auto;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
}

.logs-container .log-entry {
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
  padding: 0.5rem 0;
}

.logs-container .log-entry:last-child {
  border-bottom: none;
}

.logs-container .log-status-success {
  color: var(--success);
}

.logs-container .log-status-error {
  color: var(--danger);
}

/* Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-overlay.hidden {
  display: none;
}

.modal-content {
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
  animation: scaleIn 0.2s ease;
}

.modal-content.wide {
  max-width: 900px;
}

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

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.modal-header {
  padding: 1.5rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-body {
  padding: 1.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.btn-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.5rem;
  cursor: pointer;
}

/* Toast */
.toast {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background-color: var(--bg-card);
  border-left: 4px solid var(--primary);
  padding: 1rem 1.5rem;
  border-radius: 6px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  transform: translateY(0);
  transition: transform 0.3s ease, opacity 0.3s ease;
  z-index: 2000;
}

.toast.hidden {
  transform: translateY(20px);
  opacity: 0;
  pointer-events: none;
}

/* Responsive */
@media (max-width: 768px) {
  .sidebar {
    width: min(var(--sidebar-width), 86vw);
  }

  input:focus,
  select:focus,
  textarea:focus {
    outline: none;
    border-color: var(--primary);
  }

  .form-actions {
    margin-top: 2rem;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
  }

  .btn-primary {
    background-color: var(--primary);
    color: white;
    border: none;
    padding: 0.7rem 1.5rem;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.2s;
  }

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

  .btn-secondary {
    background-color: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 0.7rem 1.5rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
  }

  .btn-secondary:hover {
    border-color: var(--text-main);
    color: var(--text-main);
  }

  .table-container {
    overflow-x: auto;
    padding: 0;
  }

  table {
    width: 100%;
    border-collapse: collapse;
  }

  th,
  td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
  }

  th {
    background-color: rgba(0, 0, 0, 0.2);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.9rem;
  }

  tr:hover td {
    background-color: rgba(255, 255, 255, 0.02);
  }

  .status-badge {
    padding: 0.25rem 0.6rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
  }

  .status-new {
    background-color: rgba(34, 197, 94, 0.18);
    color: var(--success);
  }

  .status-existing {
    background-color: rgba(59, 130, 246, 0.18);
    color: var(--primary);
  }

  .status-duplicate {
    background-color: rgba(239, 68, 68, 0.2);
    color: var(--danger);
  }

  .status-update {
    background-color: rgba(251, 191, 36, 0.2);
    color: #f59e0b;
  }

  .status-same {
    background-color: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
  }

  .status-mixed {
    background-color: rgba(139, 92, 246, 0.2);
    color: #a78bfa;
  }

  .status-active {
    background-color: rgba(16, 185, 129, 0.2);
    color: var(--success);
  }

  .status-inactive {
    background-color: rgba(239, 68, 68, 0.2);
    color: var(--danger);
  }

  .status-desistente {
    background-color: rgba(245, 158, 11, 0.22);
    color: #fbbf24;
  }

  .grade-group-row {
    cursor: pointer;
  }

  .grade-group-cell {
    font-weight: 600;
  }

  .grade-toggle {
    display: inline-block;
    width: 1.25rem;
    text-align: center;
    margin-right: 0.35rem;
    color: var(--text-muted);
  }

  .import-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
  }

  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }

  .modal-overlay.hidden {
    display: none;
  }

  .modal-content {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    width: 90%;
    max-width: 600px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
    animation: scaleIn 0.2s ease;
  }

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

    to {
      transform: scale(1);
      opacity: 1;
    }
  }

  .modal-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .modal-body {
    padding: 1.5rem;
  }

  .btn-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
  }

  .toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background-color: var(--bg-card);
    border-left: 4px solid var(--primary);
    padding: 1rem 1.5rem;
    border-radius: 6px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    transform: translateY(0);
    transition: transform 0.3s ease, opacity 0.3s ease;
    z-index: 2000;
  }

  .toast.hidden {
    transform: translateY(20px);
    opacity: 0;
    pointer-events: none;
  }

  @media (max-width: 768px) {
    .sidebar {
      width: min(var(--sidebar-width), 86vw);
    }
  }
}

body[data-theme="light"] .content {
  background-color: transparent;
}

body[data-theme="light"] .link-button:hover {
  color: var(--primary);
}

/* ---- Home View ---- */
.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.home-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.home-card:hover {
  transform: translateY(-5px);
  border-color: var(--primary);
  box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.2);
}

.home-card .icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.home-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: var(--text-main);
}

.home-card p {
  color: var(--text-muted);
  font-size: 0.9rem;
}

#view-ai-templates .card + .card {
  margin-top: 1.5rem;
}

#view-ai-templates table {
  width: 100%;
  border-collapse: collapse;
}

#view-ai-templates th,
#view-ai-templates td {
  padding: 0.75rem;
  border-bottom: 1px solid var(--border);
}

#ai-template-test-output {
  background: var(--bg-card);
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 1rem;
  font-family: inherit;
  min-height: 100px;
}

#grades-table td,
#grades-table th {
  text-align: left;
}

.grade-sheet-card {
  margin-top: 1.5rem;
}

#view-dashboard .grade-sheet-card {
  display: none;
}

.grade-sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}

.grade-sheet-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.grade-sheet-actions input {
  min-width: 200px;
}

.grade-sheet-table-wrapper {
  overflow-x: auto;
  margin-top: 1rem;
}

#grade-sheet-table {
  width: 100%;
  border-collapse: collapse;
}

#grade-sheet-table th,
#grade-sheet-table td {
  border: 1px solid var(--border);
  padding: 0.65rem;
  text-align: left;
  min-width: 120px;
}

.grade-sheet-table input {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
}

.grade-sheet-table input:focus {
  outline: 1px solid var(--primary);
}

.grade-sheet-empty {
  text-align: center;
  font-style: italic;
  color: var(--text-muted);
}

.grade-session-list {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.grade-session-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-elevated);
}

.grade-session-actions {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.grade-session-actions .btn-xs {
  padding: 0.25rem 0.6rem;
  font-size: 0.75rem;
}

.grade-sheet-actions--save {
  justify-content: flex-end;
  margin-top: 0.5rem;
}

.room-sessions-card {
  margin-top: 1.5rem;
}

.room-session-list {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.room-session-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-elevated);
}

.room-session-actions {
  display: flex;
  gap: 0.35rem;
}

.room-session-inline {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.4rem 0;
  border-bottom: 1px dashed var(--border-subtle);
}

.room-session-inline:last-child {
  border-bottom: none;
}

.room-session-inline-actions {
  display: flex;
  gap: 0.3rem;
}

#modal-room-session .modal-content {
  max-width: 760px;
  overflow-x: hidden;
}

#modal-room-session .modal-body {
  overflow-x: hidden;
}

#room-session-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem 0.9rem;
}

#room-session-form .form-group {
  min-width: 0;
}

#room-session-form .form-group.full-width {
  grid-column: 1 / -1;
}

#room-session-form select,
#room-session-form input,
#room-session-form textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

#room-session-avamec-column {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  text-overflow: ellipsis;
}

#room-session-avamec-column-hint {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.lesson-avamec-report {
  margin: 0 0 0.75rem;
  padding: 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-elevated);
}

.lesson-avamec-report-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.lesson-avamec-report-summary {
  margin-top: 0.65rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.lesson-avamec-report-kpi {
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  font-size: 0.82rem;
  font-weight: 600;
}

.lesson-avamec-report-kpi.ok {
  border-color: rgba(34, 197, 94, 0.45);
  color: var(--success);
}

.lesson-avamec-report-kpi.error {
  border-color: rgba(239, 68, 68, 0.45);
  color: var(--danger);
}

.lesson-avamec-report-errors {
  margin-top: 0.7rem;
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.08);
  padding: 0.55rem 0.65rem;
  max-height: 210px;
  overflow: auto;
}

.lesson-avamec-report-errors strong {
  display: block;
  margin-bottom: 0.4rem;
}

.lesson-avamec-report-errors ul {
  margin: 0;
  padding-left: 1rem;
}

.lesson-avamec-report-errors li {
  margin: 0.2rem 0;
  color: var(--text-main);
  line-height: 1.35;
}

.lesson-avamec-report-comparison {
  margin-top: 0.7rem;
  display: grid;
  gap: 0.65rem;
}

.lesson-avamec-report-comparison-group {
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--surface-base);
  padding: 0.55rem 0.65rem;
}

.lesson-avamec-report-comparison-group.is-alert {
  border-color: rgba(245, 158, 11, 0.4);
  background: rgba(245, 158, 11, 0.08);
}

.lesson-avamec-report-comparison-group strong {
  display: block;
  margin-bottom: 0.4rem;
}

.lesson-avamec-report-comparison-group ul {
  margin: 0;
  padding-left: 1rem;
}

.lesson-avamec-report-comparison-group li {
  margin: 0.2rem 0;
  color: var(--text-main);
  line-height: 1.35;
}

#lesson-tab-attendance .lesson-avamec-report {
  border-color: var(--lesson-panel-border-strong);
  background: linear-gradient(180deg, rgba(10, 21, 18, 0.96), rgba(7, 14, 17, 0.98));
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.34);
}

#lesson-tab-attendance .lesson-avamec-report-header strong,
#lesson-tab-attendance .lesson-avamec-report-comparison-group strong,
#lesson-tab-attendance .lesson-avamec-report-errors strong {
  color: var(--lesson-panel-heading);
}

#lesson-tab-attendance .lesson-avamec-report-kpi {
  background: rgba(8, 18, 18, 0.84);
  border-color: var(--lesson-panel-border);
  color: var(--lesson-panel-text);
}

#lesson-tab-attendance .lesson-avamec-report-comparison-group {
  border-color: var(--lesson-panel-border);
  background: rgba(12, 24, 20, 0.78);
}

#lesson-tab-attendance .lesson-avamec-report-comparison-group li,
#lesson-tab-attendance .lesson-avamec-report-errors li {
  color: var(--lesson-panel-text);
}

.bulletin-card {
  margin-bottom: 1rem;
}

.bulletin-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.bulletin-mode label {
  margin-right: 1rem;
  font-weight: 600;
  color: var(--text-muted);
}

.bulletin-mode input {
  margin-right: 0.35rem;
}

.bulletin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  align-items: end;
}

.bulletin-actions {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
}

.bulletin-preview {
  border: 1px dashed var(--border);
  background: var(--bg-card);
}

.bulletin-entry {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1rem;
  background: var(--bg-card);
}

.bulletin-entry__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.bulletin-entry__title {
  font-weight: 700;
  font-size: 1.05rem;
}

.bulletin-entry__summary {
  color: var(--primary);
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-weight: 600;
}

.bulletin-entry__table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.75rem;
}

.bulletin-entry__table th,
.bulletin-entry__table td {
  padding: 0.6rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.bulletin-entry__table th {
  background: rgba(255, 255, 255, 0.02);
  font-weight: 600;
}

.bulletin-template {
  background: rgba(59, 130, 246, 0.05);
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  color: var(--text-main);
}

.bulletin-template p {
  margin: 0.25rem 0;
}

.bulletin-template__list {
  margin-left: 0.5rem;
  line-height: 1.5;
}

.bulletin-room-block {
  border-bottom: 1px dashed var(--border);
  padding-bottom: 0.35rem;
  margin-bottom: 0.5rem;
}

.bulletin-room-block:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.bulletin-room-title {
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 0.2rem;
}

.bulletin-room-lines {
  color: var(--text-main);
}

/* View Mode Selector */
.view-mode-selector {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.view-mode-label {
  font-weight: 600;
  color: var(--text-muted);
  margin: 0;
}

.view-mode-options {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.view-mode-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-weight: 500;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  transition: background-color 0.2s;
}

.view-mode-option:hover {
  background: rgba(59, 130, 246, 0.05);
}

.view-mode-option input[type="radio"] {
  cursor: pointer;
  margin: 0;
}

.view-mode-option span {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

/* Grouped Grades View */
.grouped-grades-container {
  padding: 1rem;
}

#grouped-grades-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.student-group {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-card);
  transition: box-shadow 0.2s;
}

.student-group:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.student-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  background: rgba(59, 130, 246, 0.02);
  transition: background-color 0.2s;
}

.student-group-header:hover {
  background: rgba(59, 130, 246, 0.06);
}

.student-group-header.expanded {
  background: rgba(59, 130, 246, 0.08);
  border-bottom: 1px solid var(--border);
}

.student-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
}

.expand-icon {
  font-size: 1.1rem;
  transition: transform 0.2s;
  color: var(--primary);
  font-weight: bold;
}

.expand-icon.expanded {
  transform: rotate(90deg);
}

.student-name {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-main);
}

.student-class {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.student-summary {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-size: 0.9rem;
}

.summary-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}

.summary-label {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 500;
}

.summary-value {
  color: var(--primary);
  font-weight: 700;
  font-size: 1.05rem;
}

.student-grades-list {
  display: none;
  padding: 0;
  background: var(--bg-card);
}

.student-grades-list.expanded {
  display: block;
}

.grade-item {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 100px;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--border);
  align-items: center;
}

.grade-item:last-child {
  border-bottom: none;
}

.grade-item:hover {
  background: rgba(59, 130, 246, 0.03);
}

.grade-assessment {
  font-weight: 500;
  color: var(--text-main);
}

.grade-room {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.grade-value {
  color: var(--primary);
  font-weight: 600;
  font-size: 1rem;
}

.grade-date {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.grade-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.no-grades-message {
  padding: 2rem;
  text-align: center;
  color: var(--text-muted);
}

.room-file {
  cursor: pointer;
  color: var(--primary);
}

.room-file:hover {
  text-decoration: underline;
}

[data-attendance-minutes] {
  max-width: 4.5rem;
  width: 100%;
}

.form-helper {
  margin-top: 0.35rem;
}

.form-hint {
  margin-top: 0.3rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.link-button {
  background: none;
  border: none;
  color: var(--primary);
  cursor: pointer;
  padding: 0;
  font-weight: 600;
}

.link-button:hover {
  text-decoration: underline;
}

.input-inline {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.input-inline input {
  flex: 1;
}

.input-inline .btn-secondary {
  white-space: nowrap;
}

/* Neon dark refresh */
body:not([data-theme="light"]) .content {
  background: linear-gradient(180deg, rgba(8, 13, 26, 0.85) 0%, rgba(7, 11, 22, 0.85) 100%);
}

body:not([data-theme="light"]) .sidebar {
  background: rgba(10, 16, 32, 0.9);
  border-right: 1px solid rgba(34, 211, 238, 0.12);
  box-shadow: 20px 0 60px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

body:not([data-theme="light"]) .menu-item {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid transparent;
}

body:not([data-theme="light"]) .menu-item:hover {
  background: linear-gradient(90deg, rgba(34, 211, 238, 0.12), rgba(124, 58, 237, 0.16));
  border-color: rgba(34, 211, 238, 0.25);
  color: #f8fafc;
  box-shadow: 0 8px 25px rgba(34, 211, 238, 0.15);
}

body:not([data-theme="light"]) .menu-item.active {
  background: linear-gradient(90deg, rgba(34, 211, 238, 0.2), rgba(124, 58, 237, 0.25));
  color: #f8fafc;
  border-color: rgba(34, 211, 238, 0.4);
  box-shadow: 0 10px 30px rgba(124, 58, 237, 0.2);
}

body:not([data-theme="light"]) .card {
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.9), rgba(7, 12, 25, 0.95));
  border: 1px solid rgba(124, 58, 237, 0.15);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(34, 211, 238, 0.08);
}

body:not([data-theme="light"]) .btn-primary {
  background: linear-gradient(120deg, #22d3ee 0%, #7c3aed 100%);
  box-shadow: 0 10px 30px rgba(34, 211, 238, 0.3);
  border: 1px solid rgba(124, 58, 237, 0.35);
}

body:not([data-theme="light"]) .btn-primary:hover {
  background: linear-gradient(120deg, #38bdf8 0%, #8b5cf6 100%);
  box-shadow: 0 12px 35px rgba(124, 58, 237, 0.35);
}

body:not([data-theme="light"]) .btn-secondary {
  border-color: rgba(34, 211, 238, 0.25);
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.02);
}

body:not([data-theme="light"]) .btn-secondary:hover {
  color: #e2e8f0;
  border-color: rgba(124, 58, 237, 0.3);
  box-shadow: 0 8px 24px rgba(34, 211, 238, 0.15);
}

body:not([data-theme="light"]) input,
body:not([data-theme="light"]) select,
body:not([data-theme="light"]) textarea {
  background-color: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(34, 211, 238, 0.2);
  color: #e2e8f0;
}

body:not([data-theme="light"]) input:focus,
body:not([data-theme="light"]) select:focus,
body:not([data-theme="light"]) textarea:focus {
  border-color: #22d3ee;
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15);
}

body:not([data-theme="light"]) table thead {
  background: rgba(34, 211, 238, 0.08);
}

body:not([data-theme="light"]) table tbody tr:hover {
  background: rgba(124, 58, 237, 0.07);
}

body:not([data-theme="light"]) .modal-content {
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.95), rgba(7, 11, 22, 0.98));
  border: 1px solid rgba(34, 211, 238, 0.2);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

body:not([data-theme="light"]) .wa-qr-placeholder {
  border-color: rgba(34, 211, 238, 0.2);
  background: #ffffff;
  color: #0f172a;
}

.autofill-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-elevated);
  color: var(--text-muted);
  font-size: 0.85rem;
}

.autofill-status .status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-subtle);
  flex-shrink: 0;
}

.autofill-status.active .status-dot {
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}

.autofill-status.error .status-dot {
  background: var(--danger);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

.autofill-status.idle .status-dot {
  background: var(--border-subtle);
}

.autofill-status.pulse .status-dot {
  animation: autofillPulse 0.9s ease-out;
}

@keyframes autofillPulse {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.8);
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.2);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

/* ── Filtros da grid de presencas ────────────────────────── */
.attendance-filter-row th {
  padding: 0.35rem 0.4rem;
  background: var(--surface-elevated);
  border-bottom: 2px solid var(--border-subtle);
}

.att-filter-input,
.att-filter-select {
  width: 100%;
  padding: 0.35rem 0.5rem;
  font-size: 0.8rem;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--text-main);
  outline: none;
  transition: border-color 0.15s;
}

.att-filter-input:focus,
.att-filter-select:focus {
  border-color: var(--primary);
}

.att-filter-input::placeholder {
  color: var(--text-muted);
  font-style: italic;
}

.att-filter-select {
  cursor: pointer;
  appearance: auto;
}

/* ── Modal de Relatorio de Presenca ────────────────────── */
.att-report-modal-content {
  max-width: 640px;
  width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
  padding: 0;
}

.att-report-modal-inner {
  padding: 1.25rem;
}

.att-report-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
}

.att-report-modal-header h3 {
  font-size: 1rem;
}

.att-report-modal-header .btn-icon {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.4rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  line-height: 1;
}

.att-report-modal-header .btn-icon:hover {
  background: var(--surface-elevated);
  color: var(--text-main);
}

.attendance-message-modal-content {
  max-width: 640px;
  width: 95vw;
  max-height: 85vh;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.attendance-message-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-subtle);
}

.attendance-message-modal-header h4 {
  margin: 0 0 0.35rem 0;
  font-size: 1rem;
}

.attendance-message-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.attendance-message-modal-media img,
.attendance-message-modal-media video {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
}

.attendance-message-modal-text {
  background: var(--surface-base);
  padding: 1rem;
  border-radius: 8px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: inherit;
}

.attendance-message-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.lesson-list-presences-btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 0.12em;
}

.lesson-list-presences-btn:hover {
  opacity: 0.85;
}

.lesson-attendance-contacts-modal-content {
  max-width: 760px;
  width: min(760px, 96vw);
}

.lesson-attendance-contacts-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.lesson-attendance-contacts-tab-btn {
  appearance: none;
  border: 1px solid var(--border-subtle);
  background: var(--surface-base);
  color: var(--text-main);
  border-radius: 999px;
  padding: 0.55rem 0.95rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.lesson-attendance-contacts-tab-btn.active {
  border-color: var(--primary);
  background: var(--surface-elevated);
  color: var(--primary);
}

.lesson-attendance-contacts-panel[hidden] {
  display: none !important;
}

.lesson-attendance-contacts-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.lesson-attendance-contacts-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}

.lesson-attendance-contacts-item-main {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.lesson-attendance-contacts-item-name {
  font-weight: 700;
}

.lesson-attendance-contacts-item-meta {
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.lesson-attendance-history-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.lesson-attendance-history-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  font-size: 0.78rem;
  white-space: nowrap;
}

.lesson-attendance-history-chip.is-present {
  border-color: rgba(34, 197, 94, 0.35);
  color: #86efac;
}

.lesson-attendance-history-chip.is-absent {
  border-color: rgba(239, 68, 68, 0.35);
  color: #fca5a5;
}

.lesson-attendance-history-chip.is-pending {
  border-color: rgba(245, 158, 11, 0.35);
  color: #fcd34d;
}

.lesson-attendance-contacts-item-phone {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.lesson-attendance-contacts-item-phone.is-missing {
  color: var(--warning);
}

.lesson-attendance-student-modal-content {
  max-width: 760px;
  width: min(760px, 96vw);
}

.lesson-attendance-student-modal-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.lesson-attendance-student-modal-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.lesson-attendance-student-modal-summary-card {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}

.lesson-attendance-student-modal-font-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.lesson-attendance-student-modal-actions {
  justify-content: flex-end;
}

.lesson-attendance-note-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.lesson-attendance-note-flags .status-badge {
  font-size: 0.72rem;
}

.lesson-attendance-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.lesson-attendance-absences-link {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 700;
  color: inherit;
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 0.12em;
}

.lesson-attendance-absences-link:hover {
  opacity: 0.85;
}

.lesson-attendance-absences-link:disabled {
  cursor: wait;
  opacity: 0.6;
}

.lesson-absence-history-wrap {
  width: 100%;
}

.lesson-absence-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.lesson-absence-history-item {
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 0.8rem 0.9rem;
  background: rgba(255, 255, 255, 0.03);
}

.lesson-absence-history-item-title {
  font-weight: 700;
  margin-bottom: 0.35rem;
}

.lesson-absence-history-item-meta {
  color: var(--text-muted);
  line-height: 1.45;
}

@media (max-width: 640px) {
  .lesson-attendance-student-modal-summary {
    grid-template-columns: 1fr;
  }

  .lesson-attendance-contacts-item {
    align-items: flex-start;
    flex-direction: column;
  }

  .lesson-attendance-contacts-item-main {
    width: 100%;
  }

  .lesson-attendance-contacts-item-phone {
    text-align: left;
  }
}

.att-report-filter-badge {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  font-size: 0.8rem;
  margin-bottom: 1rem;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.att-report-recipients {
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: var(--surface-elevated);
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
}

.att-report-recipient-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
}

.att-report-recipient-row:last-child {
  border-bottom: none;
}

.att-report-recipient-row input[type="checkbox"] {
  margin-top: 0.3rem;
  accent-color: var(--primary);
  flex-shrink: 0;
}

.att-report-recipient-row input[type="checkbox"]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.att-report-preview-section {
  margin-bottom: 1rem;
}

.att-report-preview-text {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 1rem;
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 0.82rem;
  line-height: 1.5;
  max-height: 280px;
  overflow-y: auto;
  color: var(--text-main);
}

.att-report-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-subtle);
}

/* ═══════════════════════════════════════════
   MODULO DE AULAS — MOBILE UX
   ═══════════════════════════════════════════ */

/* Botao Voltar — oculto no desktop */
.lesson-back-btn {
  display: none;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.55rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 1rem;
  transition: all 0.2s;
  min-height: 44px;
}

.lesson-back-btn:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: rgba(34,211,238,0.05);
}

/* AVAMEC Accordion */
.avamec-accordion {
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: var(--surface-base, var(--bg-card));
  overflow: hidden;
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.avamec-accordion-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.7rem 1rem;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: left;
  min-height: 44px;
  transition: color 0.2s, background 0.2s;
}

.avamec-accordion-toggle:hover {
  color: var(--text-main);
  background: rgba(255,255,255,0.03);
}

.avamec-accordion-toggle[aria-expanded="true"] {
  color: var(--text-main);
  border-bottom: 1px solid var(--border-subtle);
}

.avamec-chevron {
  transition: transform 0.25s ease;
  font-size: 0.9rem;
}

.avamec-accordion-toggle[aria-expanded="true"] .avamec-chevron {
  transform: rotate(180deg);
}

.avamec-accordion-body {
  padding: 0.75rem 1rem 1rem;
}

/* ── Mobile breakpoints ── */
@media (max-width: 768px) {

  /* Botao voltar visivel em mobile */
  .lesson-back-btn {
    display: flex;
  }


  /* Acoes de presenca empilhadas em mobile */
  .lesson-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    width: 100%;
  }

  .lesson-actions button {
    min-height: 44px;
    font-size: 0.82rem;
  }

  .lesson-online-timer-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .lesson-online-column-splitter {
    display: none;
  }

  .lesson-online-timer-side-accordion {
    top: 0.5rem;
    left: 0.5rem;
    bottom: 0.5rem;
    width: calc(100% - 1rem);
    max-width: none;
  }

  .lesson-online-timer-side-toggle {
    width: 44px;
    padding: 0.65rem 0.3rem;
  }

  .lesson-online-timer-side-accordion:not(.is-open) {
    width: 44px;
    height: 138px;
    bottom: auto;
  }

  .lesson-online-contrib-side-accordion {
    top: auto;
    right: 0.5rem;
    bottom: 0.5rem;
    width: calc(100% - 1rem);
    max-width: none;
    height: min(250px, calc(100% - 1rem));
  }

  .lesson-online-contrib-side-toggle {
    width: 44px;
    padding: 0.65rem 0.3rem;
  }

  .lesson-online-contrib-side-accordion:not(.is-open) {
    width: 44px;
    height: 138px;
    top: auto;
  }

  .lesson-online-contrib-actions .btn-primary {
    width: 100%;
  }

  .lesson-online-timeline-head,
  .lesson-online-slides-timeline-config-head {
    flex-direction: column;
  }

  .lesson-online-timeline-actions {
    width: 100%;
  }

  .lesson-online-timeline-actions .btn-primary,
  .lesson-online-timeline-actions .btn-secondary {
    flex: 1 1 140px;
  }

  .lesson-online-slides-controls-panel .lesson-online-slides-nav {
    justify-content: stretch;
  }

  .lesson-online-slides-controls-panel .lesson-online-slides-size,
  .lesson-online-slides-controls-panel .lesson-online-slides-fit {
    width: 100%;
    justify-content: space-between;
  }

  .lesson-online-slides-controls-panel .lesson-online-slides-size select,
  .lesson-online-slides-controls-panel .lesson-online-slides-fit select {
    width: 100%;
    min-width: 0;
  }

  .lesson-online-poll-layout {
    grid-template-columns: 1fr;
  }

  .lesson-tabs .tab-panel .lesson-online-poll-card {
    padding: 0.9rem;
  }

  .lesson-online-poll-card-preview {
    position: static;
  }

  .lesson-online-poll-grid,
  .lesson-online-poll-editor {
    grid-template-columns: 1fr;
  }

  .lesson-online-poll-actions .btn-primary,
  .lesson-online-poll-actions .btn-secondary {
    width: 100%;
  }

  .lesson-online-poll-results-head,
  .lesson-online-poll-result-top,
  .lesson-online-poll-publication-header {
    flex-direction: column;
    align-items: flex-start;
  }

  #lesson-online-poll-context {
    min-height: 96px;
  }

  #lesson-online-poll-question,
  #lesson-online-poll-options,
  #lesson-online-poll-guidance {
    min-height: 160px;
  }

  #lesson-online-poll-preview-output {
    min-height: 240px;
  }

  .lesson-online-slides-view {
    --slides-height: 42vh;
    min-height: 220px;
  }

  .lesson-online-slide-video-card {
    padding: 1.1rem;
  }

  .lesson-online-slide-video-card-icon {
    width: 62px;
    height: 62px;
    font-size: 1.15rem;
  }

  .lesson-online-slides-view[data-size="compact"] {
    --slides-height: 34vh;
    min-height: 180px;
  }

  .lesson-online-slides-view[data-size="large"] {
    --slides-height: 52vh;
    min-height: 260px;
  }

  .lesson-online-tp-panel {
    min-height: 0;
  }

  .lesson-online-tp-panel-script {
    min-height: 180px;
    max-height: 36vh;
  }

  .lesson-online-presentation-close {
    top: 0.6rem;
    right: 0.6rem;
    width: 40px;
    height: 40px;
  }

  .lesson-online-presentation-mode-indicator {
    top: 0.6rem;
    left: 50%;
    transform: translateX(-50%);
    max-width: calc(100vw - 6rem);
    font-size: 0.76rem;
    padding: 0.36rem 0.7rem;
  }

  .lesson-online-presentation-toolbar {
    top: 3.2rem;
    right: 0.6rem;
    left: 0.6rem;
    justify-content: flex-start;
  }

  .lesson-online-presentation-counter {
    bottom: 0.75rem;
    font-size: 0.82rem;
  }

  .lesson-online-presentation-brand {
    width: min(94vw, 780px);
    gap: 0.7rem;
  }

  .lesson-online-presentation-brand-logo {
    width: min(72vw, 320px);
    max-width: 82vw;
  }

  .lesson-online-presentation-brand-domain {
    padding: 0.24rem 0.78rem;
    font-size: clamp(1.2rem, 4.8vw, 1.6rem);
    letter-spacing: 0.12em;
  }

  .lesson-online-presentation-poll-card {
    top: 3.4rem;
    right: 0.6rem;
    left: 0.6rem;
    width: auto;
    max-height: min(44vh, 340px);
    overflow: auto;
  }

  .lesson-online-presentation-poll-picker {
    top: 6rem;
    right: 0.6rem;
    left: 0.6rem;
    width: auto;
  }

  .lesson-online-presentation-slide-strip {
    left: 0.6rem;
    right: 0.6rem;
    bottom: 3rem;
    transform: none;
    width: auto;
  }

  .lesson-online-presentation-slide-strip-item {
    min-width: 112px;
    max-width: 112px;
  }

  .lesson-online-presentation-shell[data-slide-strip-visible="true"] .lesson-online-presentation-counter {
    bottom: 10.5rem;
  }

  .lesson-online-presentation-shell[data-audience-mode="public"] .lesson-online-presentation-counter {
    bottom: 0.75rem;
  }

  .lesson-online-presentation-tp-panel {
    top: auto;
    left: 0.6rem;
    right: 0.6rem;
    bottom: 3rem;
    width: auto;
    max-height: min(28vh, 240px);
  }

  .lesson-online-presentation-shell[data-slide-strip-visible="true"] .lesson-online-presentation-tp-panel {
    top: auto;
    bottom: 13rem;
  }

  .lesson-online-presentation-poll-question {
    font-size: 0.88rem;
  }

  .lesson-online-presentation-poll-link {
    font-size: 0.72rem;
  }

  .lesson-online-presentation-timer-accordion {
    top: var(--lesson-online-presentation-timer-y, 0.6rem);
    left: var(--lesson-online-presentation-timer-x, 0.6rem);
  }

  .lesson-online-presentation-timer-toggle {
    width: 44px;
    padding: 0.65rem 0.3rem;
  }

  .lesson-online-presentation-timer-body {
    width: min(320px, calc(100vw - 3.2rem));
    max-width: calc(100vw - 3.2rem);
    padding: 0.55rem;
  }

  .lesson-online-presentation-timer-accordion:not(.is-open) {
    width: 44px;
    height: 138px;
  }

  .lesson-online-presentation-timer-body .lesson-online-timer-display {
    min-height: 100px;
  }

  .lesson-online-presentation-timer-body .lesson-online-timer-circle {
    width: min(176px, 46vw);
    height: min(176px, 46vw);
  }

  .lesson-online-presentation-contrib-accordion {
    top: 3.3rem;
    right: 0.6rem;
    bottom: 0.6rem;
    width: min(364px, calc(100vw - 1.2rem));
  }

  .lesson-online-presentation-contrib-toggle {
    width: 44px;
    padding: 0.65rem 0.3rem;
  }

  .lesson-online-presentation-contrib-body {
    padding: 0.55rem;
  }

  .lesson-online-presentation-contrib-body .lesson-online-contrib-list {
    --lesson-online-presentation-contrib-row-height: 56px;
    max-height: calc((var(--lesson-online-presentation-contrib-row-height) * 7) + (0.45rem * 6));
  }

  .lesson-online-presentation-contrib-accordion:not(.is-open) {
    width: 44px;
    height: 138px;
  }

  .lesson-online-slide-item {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .lesson-online-slide-thumb {
    width: 58px;
    height: 46px;
  }

  .lesson-online-slide-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  /* Tabela de presenca — ocultar email/telefone (menos relevante que Tempo e Faltas) */
  #lesson-attendance-list td:first-child .table-muted {
    display: none;
  }

  /* Select de presenca maior para toque */
  select[data-attendance-student] {
    min-height: 40px;
    font-size: 0.9rem;
    padding: 0.35rem 0.5rem;
  }

  /* Tabs do detalhe rolam horizontalmente */
  .lesson-tabs .tab-list {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    white-space: nowrap;
    display: flex;
    flex-wrap: nowrap;
  }

  .lesson-tabs .tab-list::-webkit-scrollbar { display: none; }

  .lesson-tabs .tab-list .tab-btn {
    flex-shrink: 0;
  }

  /* Subtabs de Anotacoes rolam horizontalmente */
  .lesson-anotacoes-subtabs,
  .lesson-attendance-subtabs,
  .settings-subtabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    white-space: nowrap;
    display: flex;
    flex-wrap: nowrap;
    gap: 0.35rem;
    padding-bottom: 0.25rem;
  }

  .lesson-anotacoes-subtabs::-webkit-scrollbar,
  .lesson-attendance-subtabs::-webkit-scrollbar,
  .settings-subtabs::-webkit-scrollbar { display: none; }

  .lesson-anotacoes-subtab-btn,
  .lesson-attendance-subtab-btn,
  .settings-subtab-btn {
    flex-shrink: 0;
    min-height: 40px;
  }

  /* Textarea mais curta em mobile */
  #lesson-transcript { rows: 10; min-height: 180px; max-height: 220px; }
  #lesson-synthesis-output { min-height: 180px; max-height: 220px; }

  /* Coluna Faltas e Tempo (min) permanecem visiveis em mobile */

  /* === Tabela de presenças: layout de card em mobile === */

  /* Remove display:table — necessário para que display:grid nos tr funcione */
  #attendance-table {
    display: block !important;
    border: none;
    background: transparent;
    width: 100%;
  }

  /* Oculta thead (colunas + filtros): o card é autoexplicativo */
  #attendance-table thead {
    display: none !important;
  }

  #lesson-attendance-list {
    display: block !important;
  }

  /* Cada aluno → card com grid areas nomeadas:
     linha 1: [nome nome badge]
     linha 2: [pres time faltas]            */
  #lesson-attendance-list tr {
    display: grid !important;
    grid-template-areas:
      "nome  nome  badge"
      "pres  time  faltas";
    grid-template-columns: 1fr auto auto;
    gap: 0.4rem 0.5rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    margin-bottom: 0.45rem;
    background: var(--bg-card);
  }

  #lesson-attendance-list tr.lesson-attendance-row-new-since-previous {
    background: rgba(16, 185, 129, 0.18);
    border-color: rgba(16, 185, 129, 0.45);
  }

  body[data-theme="light"] #lesson-attendance-list tr.lesson-attendance-row-new-since-previous {
    background: rgba(5, 150, 105, 0.14);
    border-color: rgba(5, 150, 105, 0.35);
  }

  /* Reset de padding/border das células */
  #lesson-attendance-list td {
    display: block !important;
    padding: 0 !important;
    border: none !important;
    text-align: left;
  }

  /* Coluna 1 — Nome (linha 1, esquerda) */
  #lesson-attendance-list td:nth-child(1) {
    grid-area: nome;
    align-self: center;
  }

  /* Coluna 2 — Status badge (linha 1, direita) */
  #lesson-attendance-list td:nth-child(2) {
    grid-area: badge;
    align-self: center;
    text-align: right;
  }

  /* Coluna 3 — Select Presente/Falta (linha 2, esquerda) */
  #lesson-attendance-list td:nth-child(3) {
    grid-area: pres;
    align-self: center;
  }

  #lesson-attendance-list td:nth-child(3) select {
    width: 100%;
  }

  /* Coluna 4 — Tempo em minutos (linha 2, centro) */
  #lesson-attendance-list td:nth-child(4) {
    grid-area: time;
    align-self: center;
    text-align: center;
  }

  #lesson-attendance-list td:nth-child(4)::before {
    content: "min";
    display: block;
    font-size: 0.62rem;
    color: var(--text-muted, #888);
    line-height: 1;
    margin-bottom: 0.12rem;
    text-align: center;
  }

  #lesson-attendance-list input[data-attendance-minutes] {
    width: 5ch;
    text-align: center;
  }

  /* Coluna 5 — Contagem de Faltas (linha 2, direita) */
  #lesson-attendance-list td:nth-child(5) {
    grid-area: faltas;
    align-self: center;
    text-align: center;
  }

  #lesson-attendance-list td:nth-child(5)::before {
    content: "faltas";
    display: block;
    font-size: 0.62rem;
    color: var(--text-muted, #888);
    line-height: 1;
    margin-bottom: 0.12rem;
    text-align: center;
  }
}

@media (max-width: 760px) {
  #lesson-tab-attendance #lesson-attendance-list tr {
    border-color: var(--lesson-panel-border);
    background: linear-gradient(180deg, rgba(11, 22, 20, 0.96), rgba(7, 14, 17, 0.98));
    box-shadow: 0 12px 24px -18px rgba(0, 0, 0, 0.42);
  }

  #lesson-tab-attendance #lesson-attendance-list tr:hover {
    background: linear-gradient(180deg, rgba(13, 28, 23, 0.98), rgba(8, 17, 18, 1));
  }

  #lesson-tab-attendance #lesson-attendance-list tr.lesson-attendance-row-new-since-previous {
    border-color: rgba(52, 211, 153, 0.4);
    background: linear-gradient(180deg, rgba(14, 48, 34, 0.96), rgba(9, 22, 19, 0.98));
  }
}

/* ============================================================
   MÓDULO: Execução de Ações e Mensagens  (view-actions)
   ============================================================ */

/* --- Tab card principal --- */
#view-actions .actions-tab-card {
  padding: 1rem 1.25rem;
}

#view-actions .actions-tab-placeholder {
  padding: 2rem 1rem;
  text-align: center;
}

#view-actions .actions-tab-placeholder h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: var(--text-main);
}

/* --- Tabelas (actions-table e execution-plan-table) --- */
#view-actions .table-container {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22);
  padding: 0.25rem 0.25rem 0.5rem;
  overflow-x: auto;
}

#view-actions table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

#view-actions th,
#view-actions td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-main);
  vertical-align: top;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#view-actions thead th {
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  position: sticky;
  top: 0;
  z-index: 1;
}

#view-actions tbody tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

#view-actions #execution-plan-table tbody tr {
  cursor: pointer;
}

#view-actions #execution-plan-table tbody tr.is-selected {
  background: rgba(37, 99, 235, 0.14);
  outline: 1px solid rgba(37, 99, 235, 0.4);
}

#view-actions #execution-plan-table tbody tr.is-selected:hover {
  background: rgba(37, 99, 235, 0.2);
}

#view-actions .execution-plan-list__status-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

#view-actions tbody tr:last-child td {
  border-bottom: 0;
}

/* --- Filtros inline (thead .table-filters) --- */
#view-actions .table-filters th {
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--border);
}

#view-actions .table-filters input,
#view-actions .table-filters select {
  width: 100%;
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-main);
  font-size: 0.9rem;
  box-sizing: border-box;
}

#view-actions .table-filters input:focus,
#view-actions .table-filters select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
}

#view-actions .actions-table-filter-stack {
  display: grid;
  gap: 0.45rem;
}

/* --- Header actions: selects de Sala e Turma --- */
#view-actions .view-header .actions select {
  padding: 0.45rem 0.65rem;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-main);
  font-size: 0.9rem;
  cursor: pointer;
}

/* --- Tab Registro: form-grid e form-group --- */
#actions-tab-registro .form-grid,
#execution-plan-form .form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}

#actions-tab-registro .form-group,
#execution-plan-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 0.85rem 0.9rem;
}

#actions-tab-registro .form-group.full-width,
#execution-plan-form .form-group.full-width {
  grid-column: 1 / -1;
}

#actions-tab-registro .form-group label,
#execution-plan-form .form-group label {
  font-weight: 600;
  color: var(--text-muted);
  font-size: 0.92rem;
}

#actions-tab-registro input,
#actions-tab-registro select,
#actions-tab-registro textarea,
#execution-plan-form input,
#execution-plan-form select,
#execution-plan-form textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--bg-input, rgba(255, 255, 255, 0.04));
  color: var(--text-main);
  font-size: 0.95rem;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#actions-tab-registro textarea,
#execution-plan-form textarea {
  resize: vertical;
  min-height: 80px;
}

#execution-plan-form select[multiple] {
  min-height: 150px;
  padding: 0.4rem;
}

#execution-plan-form select[multiple] option {
  padding: 0.3rem 0.45rem;
}

/* Garantir contraste das opcoes dos dropdowns em Execucao de Acoes e Mensagens */
#view-actions select {
  color: var(--text-main);
}

#view-actions select option,
#view-actions select optgroup {
  background-color: #1a2332;
  color: #e2e8f0;
}

#view-actions select option:disabled {
  color: #94a3b8;
}

body[data-theme="light"] #view-actions select option,
body[data-theme="light"] #view-actions select optgroup {
  background-color: #ffffff;
  color: #0f172a;
}

body[data-theme="light"] #view-actions select option:disabled {
  color: #64748b;
}

body[data-theme="radix"] #view-actions select option,
body[data-theme="radix"] #view-actions select optgroup {
  background-color: #0f172a;
  color: #e5e7eb;
}

body:not([data-theme="light"]) #view-actions select {
  color-scheme: dark;
}

body[data-theme="light"] #view-actions select {
  color-scheme: light;
}

#actions-tab-registro input:focus,
#actions-tab-registro select:focus,
#actions-tab-registro textarea:focus,
#execution-plan-form input:focus,
#execution-plan-form select:focus,
#execution-plan-form textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
}

#actions-tab-registro .form-actions,
#execution-plan-form .form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

#execution-plan-form .execution-plan-editor-section {
  margin-top: 1rem;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  padding: 1rem;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12);
}

#execution-plan-form .execution-plan-editor-section__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

#execution-plan-form .execution-plan-editor-section__header h4 {
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
  color: var(--text-main);
}

#execution-plan-form .execution-plan-editor-section__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

#execution-plan-form .execution-plan-editor-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

#execution-plan-form .execution-plan-editor-empty {
  border: 1px dashed var(--border-subtle);
  border-radius: 12px;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.02);
}

#execution-plan-form .execution-plan-editor__accordion {
  box-shadow: none;
}

#execution-plan-form .execution-plan-editor__toggle {
  align-items: flex-start;
  gap: 0.75rem;
}

#execution-plan-form .execution-plan-editor__toggle-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  width: 100%;
}

#execution-plan-form .execution-plan-editor__toggle-title {
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 0.2rem;
}

#execution-plan-form .execution-plan-editor__toggle-snippet {
  margin-top: 0.25rem;
  color: var(--text-muted);
  font-size: 0.84rem;
}

#execution-plan-form .execution-plan-editor__toggle-badges,
#execution-plan-form .execution-plan-editor__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

#execution-plan-form .execution-plan-editor__body {
  padding: 0.9rem;
}

#execution-plan-form .execution-plan-editor__body-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.85rem;
}

#execution-plan-form .execution-plan-editor__nested-accordion {
  grid-column: 1 / -1;
  box-shadow: none;
  border-color: var(--border-subtle);
}

#execution-plan-form .execution-plan-editor__nested-toggle {
  padding: 0.8rem 0.95rem;
}

#execution-plan-form .execution-plan-editor__nested-toggle-content {
  display: flex;
  width: 100%;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

#execution-plan-form .execution-plan-editor__nested-title {
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 0.2rem;
}

#execution-plan-form .execution-plan-editor__nested-body {
  padding: 0.9rem;
}

#execution-plan-form .execution-plan-editor__config-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

#execution-plan-form .execution-plan-editor__message-layout {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(280px, 1fr);
  gap: 0.85rem;
  align-items: stretch;
}

#execution-plan-form .execution-plan-editor__message-layout .form-group {
  margin: 0;
}

#execution-plan-form .execution-plan-editor__message-pane,
#execution-plan-form .execution-plan-editor__side-pane {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#execution-plan-form .execution-plan-editor__message-text {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

#execution-plan-form .execution-plan-editor__ai-tools,
#execution-plan-form .execution-plan-editor__token-tools,
#execution-plan-form .execution-plan-editor__media-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

#execution-plan-form .execution-plan-editor__token-tools {
  flex: 1 1 auto;
  flex-direction: column;
  align-items: stretch;
}

#execution-plan-form .execution-plan-editor__token-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}

#execution-plan-form .execution-plan-editor__token-header label {
  margin: 0;
}

#execution-plan-form .execution-plan-editor__token-header .btn-secondary {
  flex: 0 0 auto;
}

#execution-plan-form .execution-plan-editor__side-tabs {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 0.65rem;
  flex-wrap: wrap;
}

#execution-plan-form .execution-plan-editor__side-tab-btn {
  border: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s ease;
}

#execution-plan-form .execution-plan-editor__side-tab-btn:hover {
  color: var(--text-primary);
  border-color: rgba(45, 212, 191, 0.45);
}

#execution-plan-form .execution-plan-editor__side-tab-btn.active {
  color: #06131d;
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.95), rgba(125, 211, 252, 0.92));
  border-color: transparent;
  box-shadow: 0 10px 22px rgba(45, 212, 191, 0.2);
}

#execution-plan-form .execution-plan-editor__side-tab-panels {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  min-height: 22rem;
}

#execution-plan-form .execution-plan-editor__side-tab-panel {
  display: none;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  padding: 0.85rem;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
}

#execution-plan-form .execution-plan-editor__side-tab-panel.active {
  display: flex;
}

#execution-plan-form .execution-plan-editor__side-status {
  margin-top: 0.65rem;
}

#execution-plan-form .execution-plan-editor__token-list {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  height: 100%;
}

#execution-plan-form .execution-plan-editor__ai-tools input {
  flex: 1;
  min-width: 240px;
}

@media (max-width: 960px) {
  #execution-plan-form .execution-plan-editor__message-layout {
    grid-template-columns: 1fr;
  }

  #execution-plan-form .execution-plan-editor__token-header {
    flex-wrap: wrap;
  }

  #execution-plan-form .execution-plan-editor__side-tab-panels {
    min-height: 18rem;
  }
}

#execution-plan-form .execution-plan-editor__media-preview {
  margin-top: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  width: 100%;
  max-width: 100%;
  text-align: center;
}

#execution-plan-form .execution-plan-editor__media-preview img,
#execution-plan-form .execution-plan-editor__media-preview video {
  width: 200px;
  height: 250px;
  max-width: 100%;
  max-height: 60vh;
  object-fit: contain;
  border-radius: 8px;
  display: block;
  margin: 0 auto 0.45rem;
}

#execution-plan-form .execution-plan-editor__danger-btn {
  color: var(--danger);
  border-color: rgba(239, 68, 68, 0.4);
}

#execution-plan-form .execution-plan-editor-advanced {
  margin-top: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.01);
}

#execution-plan-form .execution-plan-editor-advanced summary {
  cursor: pointer;
  list-style: none;
  padding: 0.8rem 0.95rem;
  font-weight: 600;
  color: var(--text-main);
}

#execution-plan-form .execution-plan-editor-advanced summary::-webkit-details-marker {
  display: none;
}

#execution-plan-form .execution-plan-editor-advanced__body {
  padding: 0 0.95rem 0.95rem;
}

#execution-plan-form .execution-plan-editor-advanced__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

/* ============================================================
   MODAL: Ação (modal-action)
   ============================================================ */

#modal-action .modal-content {
  max-width: 760px;
}

#modal-action .form-section {
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.01);
}

#modal-action .form-section-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 0.85rem;
}

#modal-action .form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.85rem;
  margin-bottom: 0.85rem;
}

#modal-action .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}

#modal-action .form-group.full-width {
  grid-column: 1 / -1;
}

#modal-action .form-group label {
  font-weight: 600;
  color: var(--text-muted);
  font-size: 0.92rem;
}

#modal-action input,
#modal-action select,
#modal-action textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--bg-input, rgba(255, 255, 255, 0.04));
  color: var(--text-main);
  font-size: 0.95rem;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#modal-action textarea {
  resize: vertical;
  min-height: 80px;
}

#modal-action input:focus,
#modal-action select:focus,
#modal-action textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
}

#modal-action .form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-subtle);
}

/* ============================================================
   MODAL: Cronograma (modal-schedule)
   ============================================================ */

#modal-schedule .modal-content {
  max-width: 680px;
}

#modal-schedule .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  margin-bottom: 0.85rem;
}

#modal-schedule .form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.85rem;
  margin-bottom: 0.85rem;
}

#modal-schedule .form-grid .form-group {
  margin-bottom: 0;
}

#modal-schedule .form-group label {
  font-weight: 600;
  color: var(--text-muted);
  font-size: 0.92rem;
}

#modal-schedule input,
#modal-schedule select,
#modal-schedule textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--bg-input, rgba(255, 255, 255, 0.04));
  color: var(--text-main);
  font-size: 0.95rem;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#modal-schedule textarea {
  resize: vertical;
  min-height: 80px;
}

#modal-schedule input:focus,
#modal-schedule select:focus,
#modal-schedule textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
}

#modal-schedule .form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-subtle);
}

/* ============================================================
   MODAL: Duplicar Cronograma (modal-clone-schedule)
   ============================================================ */

#modal-clone-schedule .modal-content {
  max-width: 560px;
}

#modal-clone-schedule .form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.85rem;
  margin-bottom: 0.85rem;
}

#modal-clone-schedule .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  margin-bottom: 0.85rem;
}

#modal-clone-schedule .form-grid .form-group {
  margin-bottom: 0;
}

#modal-clone-schedule .form-group label {
  font-weight: 600;
  color: var(--text-muted);
  font-size: 0.92rem;
}

#modal-clone-schedule input,
#modal-clone-schedule select {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--bg-input, rgba(255, 255, 255, 0.04));
  color: var(--text-main);
  font-size: 0.95rem;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#modal-clone-schedule input:focus,
#modal-clone-schedule select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
}

#modal-clone-schedule .form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-subtle);
}

/* ============================================================
   RESPONSIVIDADE: view-actions  @media ≤ 1024px
   ============================================================ */

@media (max-width: 1024px) {

  /* Tabela de ações programadas: thead filtros → grid flutuante */
  #view-actions #actions-table thead {
    display: block !important;
  }

  #view-actions #actions-table thead .table-filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
    padding: 0.35rem;
    margin-bottom: 0.75rem;
  }

  #view-actions #actions-table thead .table-filters th {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    position: static;
  }

  /* Oculta coluna de checkbox e coluna de ações na linha de filtros */
  #view-actions #actions-table thead .table-filters th:first-child,
  #view-actions #actions-table thead .table-filters th:last-child {
    display: none;
  }

  /* Tabela de planos: mesma estrutura de card responsivo */
  #view-actions .table-container {
    overflow: visible !important;
    padding: 0.5rem !important;
  }

  #view-actions #execution-plan-table,
  #view-actions #execution-plan-table thead,
  #view-actions #execution-plan-table tbody,
  #view-actions #execution-plan-table tr,
  #view-actions #execution-plan-table th,
  #view-actions #execution-plan-table td {
    display: block;
    width: 100%;
  }

  #view-actions #execution-plan-table thead {
    display: block;
  }

  #view-actions #execution-plan-table thead tr:first-child {
    display: none;
  }

  #view-actions #execution-plan-table thead .table-filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
    padding: 0.35rem;
    margin-bottom: 0.75rem;
  }

  #view-actions #execution-plan-table thead .table-filters th {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    position: static;
  }

  #view-actions #execution-plan-table thead .table-filters th:first-child,
  #view-actions #execution-plan-table thead .table-filters th:last-child {
    display: none;
  }

  #view-actions #execution-plan-table tbody tr {
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    margin-bottom: 0.65rem;
    padding: 0.35rem 0.55rem;
    background: rgba(255, 255, 255, 0.02);
  }

  #view-actions #execution-plan-table tbody tr:last-child {
    margin-bottom: 0;
  }

  #view-actions #execution-plan-table tbody td {
    display: grid;
    grid-template-columns: minmax(90px, 120px) 1fr;
    gap: 0.6rem;
    padding: 0.45rem 0;
    border-bottom: 1px dashed var(--border-subtle);
  }

  #view-actions #execution-plan-table tbody td::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }

  #view-actions #execution-plan-table tbody td:last-child {
    border-bottom: 0;
  }

  #view-actions #execution-plan-table tbody td[colspan]::before {
    content: none;
  }

  /* Form do Registro: empilha colunas */
  #actions-tab-registro .form-grid,
  #execution-plan-form .form-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Modais: modal-action com grid reduzido */
  #modal-action .form-grid {
    grid-template-columns: 1fr 1fr;
  }

  #modal-schedule .form-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ============================================================
   RESPONSIVIDADE: view-actions  @media ≤ 768px
   ============================================================ */

@media (max-width: 768px) {

  /* Tab card: sem padding lateral */
  #view-actions .actions-tab-card {
    padding: 0.75rem 0.5rem;
  }

  /* Filtros da tabela: 1 coluna */
  #view-actions #actions-table thead .table-filters,
  #view-actions #execution-plan-table thead .table-filters {
    grid-template-columns: 1fr;
  }

  /* Header selects: ocupa largura total */
  #view-actions .view-header .actions select {
    flex: 1 1 100%;
    width: 100%;
  }

  /* Form Registro: 1 coluna */
  #actions-tab-registro .form-grid,
  #execution-plan-form .form-grid {
    grid-template-columns: 1fr;
  }

  /* Modais: 1 coluna e tela cheia */
  #modal-action .modal-content {
    max-width: 100%;
    border-radius: 12px 12px 0 0;
  }

  #modal-action .form-grid {
    grid-template-columns: 1fr;
  }

  #modal-action .form-section {
    padding: 0.75rem;
  }

  #modal-schedule .modal-content {
    max-width: 100%;
    border-radius: 12px 12px 0 0;
  }

  #modal-schedule .form-grid {
    grid-template-columns: 1fr;
  }

  #modal-clone-schedule .modal-content {
    max-width: 100%;
    border-radius: 12px 12px 0 0;
  }

  #modal-clone-schedule .form-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Modal Prompt do Sistema ===== */
#modal-prompt .prompt-modal-content {
  width: min(96vw, 960px);
  max-width: 960px;
  max-height: calc(100vh - 2rem);
  overflow: hidden;
}

#modal-prompt-test .prompt-test-modal-content {
  width: min(94vw, 720px);
  max-width: 720px;
  max-height: calc(100vh - 2rem);
  overflow: hidden;
}

#prompt-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#modal-prompt .prompt-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

#modal-prompt .prompt-form-grid--meta {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#modal-prompt .form-group,
#modal-prompt-test .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  min-width: 0;
}

#modal-prompt .form-group label,
#modal-prompt-test .form-group label {
  font-weight: 600;
  color: var(--text-muted);
  font-size: 0.92rem;
}

#modal-prompt input,
#modal-prompt select,
#modal-prompt textarea,
#modal-prompt-test textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--bg-input, rgba(255, 255, 255, 0.04));
  color: var(--text-main);
  font-size: 0.95rem;
  box-sizing: border-box;
}

#modal-prompt textarea,
#modal-prompt-test textarea {
  resize: vertical;
}

#modal-prompt input:focus,
#modal-prompt select:focus,
#modal-prompt textarea:focus,
#modal-prompt-test textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
}

#prompt-description {
  min-height: 88px;
}

#prompt-text,
#prompt-test-data {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  line-height: 1.5;
}

#prompt-text {
  min-height: clamp(260px, 42vh, 460px);
}

#modal-prompt .modal-footer {
  padding: 1rem 1.5rem 1.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
}

#modal-prompt .modal-footer .btn-primary,
#modal-prompt .modal-footer .btn-secondary {
  min-width: 140px;
}

#modal-prompt .table-muted,
#modal-prompt-test .table-muted {
  margin: 0;
}

.prompt-history-section {
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.prompt-history-list {
  max-height: 220px;
  overflow-y: auto;
  padding-right: 0.25rem;
}

#modal-prompt-test .btn-primary {
  width: 100%;
}

.prompt-test-result {
  margin-top: 1rem;
}

#prompt-test-output {
  margin: 0;
  background: var(--surface);
  padding: 1rem;
  border-radius: 6px;
  white-space: pre-wrap;
  max-height: min(300px, 32vh);
  overflow-y: auto;
}

@media (max-width: 960px) {
  #modal-prompt .prompt-form-grid--meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  #modal-prompt .prompt-modal-content,
  #modal-prompt-test .prompt-test-modal-content {
    width: calc(100vw - 1rem);
    max-width: none;
    max-height: calc(100vh - 1rem);
  }

  #modal-prompt .modal-header,
  #modal-prompt .modal-body,
  #modal-prompt .modal-footer,
  #modal-prompt-test .modal-header,
  #modal-prompt-test .modal-body {
    padding: 1rem;
  }

  #modal-prompt .prompt-form-grid,
  #modal-prompt .prompt-form-grid--meta {
    grid-template-columns: 1fr;
  }

  #modal-prompt .modal-footer {
    flex-direction: column-reverse;
  }

  #modal-prompt .modal-footer .btn-primary,
  #modal-prompt .modal-footer .btn-secondary {
    width: 100%;
    min-width: 0;
  }

  #prompt-text {
    min-height: 220px;
  }
}

#execution-plan-preview-output {
  margin-top: 1rem;
}

#execution-plan-preview-output .execution-plan-preview {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#execution-plan-preview-output .execution-plan-preview__placeholder {
  border: 1px dashed var(--border-subtle);
  border-radius: 12px;
  padding: 0.95rem 1rem;
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-muted);
}

#execution-plan-preview-output .execution-plan-preview__placeholder.is-info {
  border-color: rgba(59, 130, 246, 0.35);
  color: var(--primary);
  background: rgba(59, 130, 246, 0.08);
}

#execution-plan-preview-output .execution-plan-preview__placeholder.is-success {
  border-color: rgba(16, 185, 129, 0.35);
  color: var(--success);
  background: rgba(16, 185, 129, 0.08);
}

#execution-plan-preview-output .execution-plan-preview__placeholder.is-error {
  border-color: rgba(239, 68, 68, 0.35);
  color: var(--danger);
  background: rgba(239, 68, 68, 0.08);
}

#execution-plan-preview-output .execution-plan-preview__summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.75rem;
}

#execution-plan-preview-output .execution-plan-preview__metric,
#execution-plan-preview-output .execution-plan-preview__context,
#execution-plan-preview-output .execution-plan-preview__warnings,
#execution-plan-preview-output .execution-plan-preview__event,
#execution-plan-preview-output .execution-plan-preview__empty {
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18);
}

#execution-plan-preview-output .execution-plan-preview__metric {
  padding: 0.9rem 1rem;
}

#execution-plan-preview-output .execution-plan-preview__metric strong {
  display: block;
  margin-top: 0.3rem;
  font-size: 1.35rem;
  color: var(--text-main);
}

#execution-plan-preview-output .execution-plan-preview__metric-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

#execution-plan-preview-output .execution-plan-preview__context {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
}

#execution-plan-preview-output .execution-plan-preview__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 0.2rem;
}

#execution-plan-preview-output .execution-plan-preview__context-badges,
#execution-plan-preview-output .execution-plan-preview__event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: flex-end;
}

#execution-plan-preview-output .execution-plan-preview__warnings {
  padding: 0.95rem 1rem;
}

#execution-plan-preview-output .execution-plan-preview__publication {
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18);
  padding: 1rem;
}

#execution-plan-preview-output .execution-plan-preview__publication-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

#execution-plan-preview-output .execution-plan-preview__publication-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

#execution-plan-preview-output .execution-plan-preview__publication-metrics > div {
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 0.75rem 0.85rem;
  background: rgba(255, 255, 255, 0.02);
}

#execution-plan-preview-output .execution-plan-preview__publication-metrics strong {
  display: block;
  margin-top: 0.25rem;
  color: var(--text-main);
}

#execution-plan-preview-output .execution-plan-preview__runs {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

#execution-plan-preview-output .execution-plan-preview__run-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 0.75rem 0.85rem;
  background: rgba(255, 255, 255, 0.02);
}

#execution-plan-preview-output .execution-plan-preview__warnings-title {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #d97706;
  margin-bottom: 0.6rem;
}

#execution-plan-preview-output .execution-plan-preview__warning-item {
  padding-left: 0.9rem;
  position: relative;
  color: var(--text-main);
}

#execution-plan-preview-output .execution-plan-preview__warning-item + .execution-plan-preview__warning-item {
  margin-top: 0.35rem;
}

#execution-plan-preview-output .execution-plan-preview__warning-item::before {
  content: '';
  position: absolute;
  left: 0.15rem;
  top: 0.55rem;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 999px;
  background: #f59e0b;
}

#execution-plan-preview-output .execution-plan-preview__event {
  padding: 1rem;
}

#execution-plan-preview-output .execution-plan-preview__event-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

#execution-plan-preview-output .execution-plan-preview__event h4 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  color: var(--text-main);
}

#execution-plan-preview-output .execution-plan-preview__event-description {
  margin-bottom: 0.9rem;
  padding: 0.85rem 0.95rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-main);
  white-space: pre-wrap;
}

#execution-plan-preview-output .execution-plan-preview__table-wrap {
  margin-top: 0.1rem;
}

#execution-plan-preview-output .execution-plan-preview__event-accordion,
#execution-plan-preview-output .execution-plan-preview__message-accordion {
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18);
}

#execution-plan-preview-output .execution-plan-preview__event-toggle,
#execution-plan-preview-output .execution-plan-preview__message-toggle {
  align-items: flex-start;
  gap: 0.75rem;
}

#execution-plan-preview-output .execution-plan-preview__event-toggle-content,
#execution-plan-preview-output .execution-plan-preview__message-toggle-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  width: 100%;
}

#execution-plan-preview-output .execution-plan-preview__event-title,
#execution-plan-preview-output .execution-plan-preview__message-toggle-title {
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 0.2rem;
}

#execution-plan-preview-output .execution-plan-preview__message-toggle-snippet {
  margin-top: 0.25rem;
  font-size: 0.84rem;
  color: var(--text-muted);
}

#execution-plan-preview-output .execution-plan-preview__message-toggle-badges,
#execution-plan-preview-output .execution-plan-preview__message-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

#execution-plan-preview-output .execution-plan-preview__event-body,
#execution-plan-preview-output .execution-plan-preview__message-accordion-body {
  padding: 0.95rem;
}

#execution-plan-preview-output .execution-plan-preview__event-groups {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

#execution-plan-preview-output .execution-plan-preview__message-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.85rem;
  color: var(--text-muted);
  font-size: 0.82rem;
}

#execution-plan-preview-output .execution-plan-preview__message-meta span {
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

#execution-plan-preview-output .execution-plan-preview__message-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

#execution-plan-preview-output .execution-plan-preview__message-panel {
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  padding: 0.85rem;
}

#execution-plan-preview-output .execution-plan-preview__message-panel-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 0.55rem;
}

#execution-plan-preview-output .execution-plan-preview__empty--inner {
  box-shadow: none;
}

#execution-plan-preview-output .execution-plan-preview__destination,
#execution-plan-preview-output .execution-plan-preview__message {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

#execution-plan-preview-output .execution-plan-preview__destination-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

#execution-plan-preview-output .execution-plan-preview__recipient-details {
  margin-top: 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
}

#execution-plan-preview-output .execution-plan-preview__recipient-details summary {
  cursor: pointer;
  list-style: none;
  padding: 0.6rem 0.75rem;
  color: var(--text-main);
  font-weight: 600;
}

#execution-plan-preview-output .execution-plan-preview__recipient-details summary::-webkit-details-marker {
  display: none;
}

#execution-plan-preview-output .execution-plan-preview__recipient-details summary::after {
  content: '▼';
  float: right;
  color: var(--text-muted);
  font-size: 0.72rem;
}

#execution-plan-preview-output .execution-plan-preview__recipient-details[open] summary::after {
  content: '▲';
}

#execution-plan-preview-output .execution-plan-preview__recipient-list,
#execution-plan-preview-output .execution-plan-preview__recipient-warning-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-height: 320px;
  overflow: auto;
  padding: 0 0.75rem 0.75rem;
}

#execution-plan-preview-output .execution-plan-preview__recipient-item {
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 0.65rem 0.75rem;
  background: rgba(255, 255, 255, 0.02);
}

#execution-plan-preview-output .execution-plan-preview__recipient-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

#execution-plan-preview-output .execution-plan-preview__recipient-item-meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

#execution-plan-preview-output .execution-plan-preview__recipient-details--warnings summary {
  font-weight: 500;
}

#execution-plan-preview-output .execution-plan-preview__message-subject {
  font-weight: 700;
  color: var(--text-main);
}

#execution-plan-preview-output .execution-plan-preview__message-body {
  white-space: pre-wrap;
  color: var(--text-main);
}

#execution-plan-preview-output .execution-plan-preview__message-media,
#execution-plan-preview-output .execution-plan-preview__simulation-media {
  margin-bottom: 0.65rem;
  padding: 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  text-align: center;
}

#execution-plan-preview-output .execution-plan-preview__message-media img,
#execution-plan-preview-output .execution-plan-preview__message-media video,
#execution-plan-preview-output .execution-plan-preview__simulation-media img,
#execution-plan-preview-output .execution-plan-preview__simulation-media video {
  width: 200px;
  height: 250px;
  max-width: 100%;
  max-height: 60vh;
  object-fit: contain;
  border-radius: 8px;
  display: block;
  margin: 0 auto 0.45rem;
}

#execution-plan-preview-output .execution-plan-preview__simulation {
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18);
  padding: 1rem;
}

#execution-plan-preview-output .execution-plan-preview__simulation-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

#execution-plan-preview-output .execution-plan-preview__simulation-controls select {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-main);
  margin-bottom: 0.75rem;
}

#execution-plan-preview-output .execution-plan-preview__simulation-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.75rem;
  color: var(--text-muted);
  font-size: 0.82rem;
}

#execution-plan-preview-output .execution-plan-preview__simulation-meta span {
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

#execution-plan-preview-output .execution-plan-preview__simulation-card {
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.68), rgba(15, 23, 42, 0.9));
  padding: 0.95rem 1rem;
}

#execution-plan-preview-output .execution-plan-preview__empty {
  padding: 1rem;
}

@media (max-width: 768px) {
  #execution-plan-preview-output .execution-plan-preview__context,
  #execution-plan-preview-output .execution-plan-preview__event-header,
  #execution-plan-preview-output .execution-plan-preview__simulation-header,
  #execution-plan-preview-output .execution-plan-preview__publication-header,
  #execution-plan-preview-output .execution-plan-preview__run-item {
    flex-direction: column;
  }

  #execution-plan-preview-output .execution-plan-preview__context-badges,
  #execution-plan-preview-output .execution-plan-preview__event-meta {
    justify-content: flex-start;
  }
}