/* DataTable inline square spinner */
@keyframes dtSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.dt-spinner-square {
  width: 12px;
  height: 12px;
  background: var(--primary, #0d6efd);
  display: inline-block;
  animation: dtSpin 1s linear infinite;
}

/* Red square with trash icon spinner (mini delete-like) */
.dt-spinner-trash {
  width: 18px;
  height: 18px;
  background: #dc3545; /* bootstrap danger */
  display: inline-block;
  position: relative;
  border-radius: 2px;
  animation: dtSpin 1s linear infinite;
}
.dt-spinner-trash i {
  color: #fff;
  font-size: var(--font-size-small); /* small icon to fit 18x18 */
  line-height: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
}

/* Green square with plus icon (mini create-like) */
.dt-spinner-plus {
  width: 18px;
  height: 18px;
  background: #198754; /* bootstrap success */
  display: inline-block;
  position: relative;
  border-radius: 2px;
  animation: dtSpin 1s linear infinite;
}
.dt-spinner-plus i {
  color: #fff;
  font-size: var(--font-size-small);
  line-height: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
}

/* Primary square with check icon (mini save-like) */
.dt-spinner-check {
  width: 18px;
  height: 18px;
  background: #0d6efd; /* bootstrap primary */
  display: inline-block;
  position: relative;
  border-radius: 2px;
  animation: dtSpin 1s linear infinite;
}
.dt-spinner-check i {
  color: #fff;
  font-size: var(--font-size-small);
  line-height: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
}

/* Hidden state for op-indicator */
.dt-spinner-off {
  display: none;
}

/* Positioning classes for spinners */
.dt-spinner-positioned {
  position: absolute !important;
  top: 5px !important;
  left: 7px !important;
  pointer-events: none !important;
  line-height: 1 !important;
  display: none !important;
}

.dt-spinner-positioned.show {
  display: block !important;
}
@import 'themes.css';

@font-face {
    font-family: 'Inter';
    src: url('Inter-VariableFont_slnt,wght.ttf');
}

html, body {
  min-height: 100vh;
}

/* Reserve space for scrollbar so it does not pop in/out on re-render (e.g. after header callback on click) */
html {
  scrollbar-gutter: stable;
}

body {
  background-color: var(--background-color);
  font-family: "Inter";
  margin: 0;
  padding: 0;
}

/*Шапка сайта*/
.content-menu {
  background: var(--accent-color);
  margin-left: 15px;
  margin-right: 0px;
  margin-top: 15px;
  font-size: 16px;
}

/* Typography: page title and section title from themes.css */
.page-title {
  font-size: var(--font-size-page-title);
  font-weight: 700;
}

.section-title {
  font-size: var(--font-size-section-title);
  font-weight: 600;
}

.stat-display {
  font-size: var(--font-size-display);
  font-weight: 700;
}

/* Task page feedback (success/error) */
.task-feedback-msg {
  font-size: var(--font-size-body-lg);
  margin-top: 10px;
}
.task-feedback-msg--success { color: var(--success-color); }
.task-feedback-msg--error { color: var(--error-color); }

.desc-object-title-wrap {
  margin-top: 10px;
  text-align: center;
}

/*Заголовки*/

.header_blue {
  font-size: var(--font-size-section-title);
  font-weight: 600;
  padding: 2px;
  color: var(--text-primary);
  margin-top: auto;
  margin-right: auto;
  margin-left: 0;
}

/* Trainer: Execute button - primary color to match app theme */
.button {
  background-color: var(--primary-color);
  border: 1px solid var(--primary-color);
  color: white;
  padding: 4px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius: 6px;
  transition: background-color 0.2s ease, opacity 0.2s ease;
  font-size: var(--font-size-body-lg);
  font-weight: 500;
  margin-right: 0;
  margin-left: auto;
}

.button:hover {
  opacity: var(--hover-opacity);
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
}

/* Trainer: task number buttons - narrower to fit beside left labels panel */
.task_button {
  background-color: var(--background-color);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  font-size: var(--font-size-small);
  padding: 1px;
  flex: 0 0 auto;
  width: 2.4%;
  /* ch tracks digit width at zoom; floor avoids tiny buttons on narrow layouts */
  min-width: max(1.35rem, 4.2ch);
  margin: 0.5px;
  border-radius: 4px;
}

.task_button:focus {
  background-color: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.task_button:hover {
  background-color: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

/* Trainer: solved task buttons */
.correct_task_button {
  background-color: var(--success-color);
  border: 1px solid var(--border-color);
  color: white;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  font-size: var(--font-size-small);
  padding: 1px;
  flex: 0 0 auto;
  width: 2.4%;
  min-width: max(1.35rem, 4.2ch);
  margin: 0.5px;
  border-radius: 4px;
}

.correct_task_button:focus {
  background-color: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.correct_task_button:hover {
  background-color: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

/* Trainer: tint by task DB — four hues ~90deg apart: violet / cyan / amber / lime (phone vs viking were too close as gray-blues) */
.trainer-page .task_button.task-db-phone {
  background-color: #e4dff6;
}
.trainer-page .task_button.task-db-viking {
  background-color: #d5eef6;
}
.trainer-page .task_button.task-db-travel {
  background-color: #f3e6d4;
}
.trainer-page .task_button.task-db-bank-deposit {
  background-color: #e4efd4;
}

@supports (background-color: color-mix(in srgb, white, black)) {
  .trainer-page .correct_task_button.task-db-phone {
    background-color: color-mix(in srgb, var(--success-color) 91%, #8b96f5);
  }
  .trainer-page .correct_task_button.task-db-viking {
    background-color: color-mix(in srgb, var(--success-color) 91%, #45d0eb);
  }
  .trainer-page .correct_task_button.task-db-travel {
    background-color: color-mix(in srgb, var(--success-color) 91%, #f5c23d);
  }
  .trainer-page .correct_task_button.task-db-bank-deposit {
    background-color: color-mix(in srgb, var(--success-color) 91%, #a8e050);
  }
}

/*
 * Trainer: DB-tint backgrounds (.task-db-*) beat .task_button:hover/focus (same specificity, later wins
 * only for the base tint — not for :hover). Result was white text + pastel bg. Override per DB class
 * so hover/focus/active use primary fill and readable contrast.
 */
.trainer-page .task_button.task-db-phone:hover,
.trainer-page .task_button.task-db-viking:hover,
.trainer-page .task_button.task-db-travel:hover,
.trainer-page .task_button.task-db-bank-deposit:hover,
.trainer-page .task_button.task-db-phone:focus,
.trainer-page .task_button.task-db-viking:focus,
.trainer-page .task_button.task-db-travel:focus,
.trainer-page .task_button.task-db-bank-deposit:focus,
.trainer-page .task_button.task-db-phone:focus-visible,
.trainer-page .task_button.task-db-viking:focus-visible,
.trainer-page .task_button.task-db-travel:focus-visible,
.trainer-page .task_button.task-db-bank-deposit:focus-visible,
.trainer-page .task_button.task-db-phone:active,
.trainer-page .task_button.task-db-viking:active,
.trainer-page .task_button.task-db-travel:active,
.trainer-page .task_button.task-db-bank-deposit:active {
  background-color: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.trainer-page .correct_task_button.task-db-phone:hover,
.trainer-page .correct_task_button.task-db-viking:hover,
.trainer-page .correct_task_button.task-db-travel:hover,
.trainer-page .correct_task_button.task-db-bank-deposit:hover,
.trainer-page .correct_task_button.task-db-phone:focus,
.trainer-page .correct_task_button.task-db-viking:focus,
.trainer-page .correct_task_button.task-db-travel:focus,
.trainer-page .correct_task_button.task-db-bank-deposit:focus,
.trainer-page .correct_task_button.task-db-phone:focus-visible,
.trainer-page .correct_task_button.task-db-viking:focus-visible,
.trainer-page .correct_task_button.task-db-travel:focus-visible,
.trainer-page .correct_task_button.task-db-bank-deposit:focus-visible,
.trainer-page .correct_task_button.task-db-phone:active,
.trainer-page .correct_task_button.task-db-viking:active,
.trainer-page .correct_task_button.task-db-travel:active,
.trainer-page .correct_task_button.task-db-bank-deposit:active {
  background-color: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

/* Trainer: selected task (persisted); same fill as :focus — refresh keeps highlight, not only keyboard focus */
.trainer-page .task_button.task-db-phone.task-button--current,
.trainer-page .task_button.task-db-viking.task-button--current,
.trainer-page .task_button.task-db-travel.task-button--current,
.trainer-page .task_button.task-db-bank-deposit.task-button--current,
.trainer-page .correct_task_button.task-db-phone.task-button--current,
.trainer-page .correct_task_button.task-db-viking.task-button--current,
.trainer-page .correct_task_button.task-db-travel.task-button--current,
.trainer-page .correct_task_button.task-db-bank-deposit.task-button--current {
  background-color: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

/* Trainer: catalog rows locked by allowed_wave_cap (learning progression; wave_access) */
.trainer-page .task_button.trainer-task-button--wave-locked:disabled,
.trainer-page .correct_task_button.trainer-task-button--wave-locked:disabled {
  opacity: 0.4;
  filter: grayscale(0.48);
  cursor: not-allowed;
  color: var(--text-muted, #6c757d);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: none;
}

.trainer-page .task_button.trainer-task-button--wave-locked.task-button--current:disabled,
.trainer-page .correct_task_button.trainer-task-button--wave-locked.task-button--current:disabled {
  background-color: var(--bs-secondary-bg, #e9ecef);
  color: var(--text-muted, #6c757d);
  border-color: rgba(0, 0, 0, 0.1);
  opacity: 0.52;
  filter: grayscale(0.38);
}

.trainer-page .task_button.trainer-task-button--wave-locked:disabled:hover,
.trainer-page .task_button.trainer-task-button--wave-locked:disabled:focus,
.trainer-page .task_button.trainer-task-button--wave-locked:disabled:focus-visible,
.trainer-page .task_button.trainer-task-button--wave-locked:disabled:active,
.trainer-page .correct_task_button.trainer-task-button--wave-locked:disabled:hover,
.trainer-page .correct_task_button.trainer-task-button--wave-locked:disabled:focus,
.trainer-page .correct_task_button.trainer-task-button--wave-locked:disabled:focus-visible,
.trainer-page .correct_task_button.trainer-task-button--wave-locked:disabled:active {
  background-color: inherit;
  color: var(--text-muted, #6c757d);
  border-color: rgba(0, 0, 0, 0.12);
  opacity: 0.4;
  filter: grayscale(0.48);
}

.trainer-page .task_button.trainer-task-button--wave-locked.task-button--current:disabled:hover,
.trainer-page .task_button.trainer-task-button--wave-locked.task-button--current:disabled:focus,
.trainer-page .correct_task_button.trainer-task-button--wave-locked.task-button--current:disabled:hover,
.trainer-page .correct_task_button.trainer-task-button--wave-locked.task-button--current:disabled:focus {
  background-color: var(--bs-secondary-bg, #e9ecef);
  opacity: 0.52;
  filter: grayscale(0.38);
}

/* Trainer: centered number; Braille via ::after + data-braille (separate layer) */
.trainer-page .task_button,
.trainer-page .correct_task_button {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  vertical-align: middle;
  gap: 0;
  line-height: 1;
}

.trainer-page .task_button .task-btn-inner,
.trainer-page .correct_task_button .task-btn-inner {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  align-self: stretch;
  min-width: 0;
  width: 100%;
  /* Symmetric gutters: right reserves ::after Braille; same left keeps digit optically centered */
  box-sizing: border-box;
  padding-left: max(0.58em, 10px);
  padding-right: max(0.58em, 10px);
}

.trainer-page .task_button .task-btn-inner::after,
.trainer-page .correct_task_button .task-btn-inner::after {
  content: attr(data-braille);
  position: absolute;
  /* 2px inset from inner right; translateX compensates Braille cell side bearings */
  right: 2px;
  top: 50%;
  transform: translate(calc(0.2em + 1px), -50%);
  z-index: 0;
  line-height: 1;
  font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "Apple Symbols", sans-serif;
  pointer-events: none;
  user-select: none;
}

.trainer-page .task_button .task-btn-num,
.trainer-page .correct_task_button .task-btn-num {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  line-height: 1;
}

/*Сложность задачи*/
.complexity_icon{
  margin-right: 0;
  margin-left: auto;
  display: flex;
  flex-direction: row;
  margin-top: auto;
  /* margin-bottom: auto; Отладка1 */
  color: var(--primary-color);
}

/* Trainer: task title row — gap + no overlap between title and star at high zoom */
.trainer-page #task-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: nowrap;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

.trainer-page #task-header > .header_blue {
  flex: 1 1 auto;
  /* Do not shrink below full title (prefix + "Задание №…"); min-width:0 clipped lead text in narrow left rail */
  min-width: 12em;
  overflow: visible;
  white-space: normal;
  margin-right: 0 !important;
  /* Global .header_blue uses margin-top:auto; in a flex row that breaks strict vertical alignment with .complexity_icon */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.trainer-page #task-header .complexity_icon {
  flex: 0 0 auto;
  margin-left: 0;
  margin-top: 0;
  margin-bottom: 0;
  align-self: center;
  align-items: center;
  /* trailing space so stars do not touch the panel edge */
  padding-right: 0.35em;
}

.trainer-page #task-header .complexity_icon .trainer-complexity-heading {
  /* Same scale as title .header_blue in this row */
  font-size: var(--font-size-section-title);
  font-weight: 600;
  margin: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.12em;
}

.trainer-page #task-header .trainer-complexity-star {
  color: var(--highlight-color);
  -webkit-text-stroke: 0.0625em var(--primary-color);
  paint-order: stroke fill;
}


/* Trainer: query result placeholder */
.text_output {
  font-size: var(--font-size-body-lg);
  padding: 10px;
  background-color: var(--background-color);
  height: 100%;
  border-radius: 6px;
  border: 1px solid var(--border-color);
}

/* Trainer: task description text area */
.task_style_output {
  font-size: var(--font-size-body-lg);
  padding: 10px;
  background-color: var(--background-color);
  height: 100%;
  border-radius: 6px;
  border: 1px solid var(--border-color);
}

/* Trainer: card blocks (task list, query form, task description) */
.block_style {
  padding: 2px;
  background-color: var(--background-color);
  width: 100%;
  height: 100%;
  margin-left: 0;
  border: 1px solid var(--border-color);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  border-radius: 8px;
}


/*Страницы регистрации и авторизации*/
.input_block{
  margin: 4px;
  margin-top: 15px;
  padding: 2px;
  background-color: white;
  border-radius: 5px;
  border-style: solid;
  border-width: 1px;
  border-color: var(--border-color);
  width: 250px;
}

.log_button {
  margin: 2px;
  margin-top: 15px;
  background-color: var(--primary-color);
  border: 1px solid var(--primary-color);
  color: white;
  padding: 4px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius: 5px;
  transition-duration: 0.4s;
  font-size: var(--font-size-body-lg);
  width: 250px;
}

.portal-button{
  background-color: var(--primary-color);
  border: 1px solid var(--primary-color);
  color: white;
  padding: 4px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius: 5px;
  transition-duration: 0.4s;
  font-size: var(--font-size-body-lg);
  width: 250px;
}
.portal-button:hover {
  opacity: var(--hover-opacity);
}
.log_button:hover {
  opacity: var(--hover-opacity);
}

.log_button[disabled=disabled], .log_button:disabled {
  margin: 2px;
  margin-top: 15px;
  background-color: var(--disabled-color);
  border: 1px solid var(--disabled-color);
  color: white;
  padding: 4px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius: 5px;
  transition-duration: 0.4s;
  font-size: var(--font-size-body-lg);
  width: 250px;
}

.header_log {
  font-size: var(--font-size-page-title);
  font-weight: 700;
  padding: 2px;
  color: var(--primary-color);
  margin-top: auto;
  /* margin-bottom: 2px; Отладка1 */
  margin-right: auto;
  margin-left: 0;
}

.modal-acc {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1055 !important;
    width: 100% !important;
    height: 100% !important;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
}

.modal-acc .modal-dialog {
    display: flex !important;
    align-items: center !important;
    min-height: calc(100% - 1rem);
    margin: 0.5rem auto !important;
    max-width: 400px !important;
    width: 90% !important;
}

@media (max-width: 576px) {
    .modal-acc .modal-dialog {
        margin: 0.5rem !important;
        width: calc(100% - 1rem) !important;
        max-width: calc(100% - 1rem) !important;
    }
}

.modal-acc .modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 auto;
    pointer-events: auto;
    background-color: var(--bg-color, #fff);
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0.3rem;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.5);
    overflow: visible !important;
}

.task-container{
  width: 500px;
  height: 150px;
  border: 1px solid;
  border-color: #19191A;
}






.scroll-table-body {
	height: 300px;
	overflow-x: auto;
	margin-top: 0px;
	/* margin-bottom: 20px; Отладка1 */
	border-bottom: 1px solid #eee;
}
.scroll-table table {
	width:100%;
	table-layout: fixed;
	border: none;
}
.scroll-table thead th {
	font-weight: bold;
	text-align: left;
	border: none;
	padding: 10px 15px;
	background: #d8d8d8;
	font-size: var(--font-size-body-lg);
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
}
.scroll-table tbody td {
	text-align: left;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
	padding: 10px 15px;
	font-size: var(--font-size-body-lg);
	vertical-align: top;
}
.scroll-table tbody tr:nth-child(even){
	background: #f3f3f3;
}

/* Стили для скролла */
::-webkit-scrollbar {
	width: 6px;
}
::-webkit-scrollbar-track {
	box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
::-webkit-scrollbar-thumb {
	box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

.base-0-2-1 {
  transform: rotate(0deg);
  transition: transform 0.3s;
}

.file-container { width:650px; overflow:hidden }
.file-block { float:left; margin-left: 5px; /* margin-bottom: 2px Отладка1 */ }
.file-img { vertical-align: bottom}
.container--3Fta2{position:relative;user-select:none;border:none;border-radius:2px;background:var(--vkui--color_background_modal--active);cursor:pointer}.container--3Fta2:after{content:"";display:block;position:absolute;top:0;width:100%;height:100%;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);border-radius:2px}.base--nqqQt{width:128px;height:96px}.hoverable--gdPDT:hover .container_footer--HdXZC{opacity:1}.container_header--ymfrd{background:transparent;height:32px;box-sizing:border-box;padding:6px 16px 8px 6px}.container_content--_hZSB{background:transparent}.container_progress--2uptg{position:absolute;top:0;bottom:0;right:0;left:0;padding:0 8px;display:flex;align-items:center}.container_icon--3K9p3{text-align:center}.container_footer--HdXZC{opacity:0;background:transparent;position:absolute;left:0;right:0;bottom:0;box-sizing:border-box;height:52px;padding:12px 6px 0;background-image:linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(245, 245, 245, 0.8) 30%, #f0f0f0);display:inline-flex;align-items:center}.container_close--3Yq09{z-index:1;top:0;right:0;position:absolute;transform:translateX(25%) translateY(-25%)}.container_link--bxJaw{bottom:6px;right:6px;position:absolute;fill:#28c75d}.square--1VsAk{width:96px;height:96px}.square--1VsAk .container_content--_hZSB{border-radius:2px;position:absolute;top:0;bottom:0;right:0;left:0}.square--1VsAk .container_icon--3K9p3{margin-top:32px}.square--1VsAk .container_preview--1eZMd{height:100%;width:100%;position:absolute;top:0;z-index:0;border-radius:2px;background-color:var(--vkui--color_background_modal--active);background-position:center;background-size:cover}.container_dark--1VrdR{background:#1b1b1b}.container_footer_dark--2LCf6{background-image:linear-gradient(to bottom, rgba(27, 27, 27, 0), rgba(27, 27, 27, 0.8) 30%, #1B1B1B)}
.file-icon--3Nkb0{width:100%;height:100%;display:inline-block;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktZmlsZS1lYXJtYXJrLWZvbnQiIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZD0iTTEwLjk0MyA2SDUuMDU3TDUgOGguNWMuMTgtMS4wOTYuMzU2LTEuMTkyIDEuNjk0LTEuMjM1bC4yOTMtLjAxdjUuMDljMCAuNDctLjEuNTgyLS44OTguNjU1di41SDkuNDF2LS41Yy0uODAzLS4wNzMtLjkwMy0uMTg0LS45MDMtLjY1NFY2Ljc1NWwuMjk4LjAxYzEuMzM4LjA0MyAxLjUxNC4xNCAxLjY5NCAxLjIzNWguNWwtLjA1Ny0yeiIvPgogIDxwYXRoIGQ9Ik0xNCA0LjVWMTRhMiAyIDAgMCAxLTIgMkg0YTIgMiAwIDAgMS0yLTJWMmEyIDIgMCAwIDEgMi0yaDUuNUwxNCA0LjV6bS0zIDBBMS41IDEuNSAwIDAgMSA5LjUgM1YxSDRhMSAxIDAgMCAwLTEgMXYxMmExIDEgMCAwIDAgMSAxaDhhMSAxIDAgMCAwIDEtMVY0LjVoLTJ6Ii8+Cjwvc3ZnPg==");background-repeat:no-repeat;background-position:center center;background-size:contain}
.size_m--3IawP{width:48px;height:48px}
.file-icon_type_txt--3jEyS
.container--1Q6ZT{display:inline-block;vertical-align:top}

.text--3Ogn-{vertical-align:top}

.container--3pohr{vertical-align:top}

.gTextOverflowEllipses--2khQN{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:100%}

/*Новые стили*/
/*Стиль для хедера*/

.header-menu {
  background-color: var(--accent-color) !important;
}

.header-menu .form-check {
  padding-left: 0;
}

.header-menu .btn-group > .form-check:not(:last-child) > .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.header-menu .btn-group > .form-check:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-left: -1px;
}

/* Кастомные стили для навигационного меню */
.header-menu .btn-outline-dark {
  color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  background-color: transparent !important;
}

.header-menu .btn-outline-dark:hover {
  color: #ffffff !important;
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.header-menu .btn-outline-dark:focus {
  color: #ffffff !important;
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 0.2rem rgba(13, 59, 102, 0.25) !important;
}

.header-menu .btn-outline-dark.active {
  color: #ffffff !important;
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.header-menu .btn-outline-dark:disabled {
  color: #6c757d !important;
  border-color: #6c757d !important;
  background-color: transparent !important;
}

/*стили для страницы заданий*/

.task-header
{
  text-align: center;
  font-size: 25px;
}

.task-choose-text
{
  margin-top: 10px;
  text-align: center;
  font-size: var(--font-size-page-title);
  margin-left: auto;
  margin-right: auto;
}

.task-text
{
  text-align: left;
  font-size: var(--font-size-body-lg);
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  padding: 15px 15px;
  border-top: 2px solid #000000;
	border-bottom: 2px solid #000000;
  border-left: 2px solid #000000;
	border-right: 2px solid #000000;
  width: 60%;
}

.task-choose-ratio
{
  text-align: center;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
}

.task-input-text
{
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
}

.task-upload-Button
{
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
}

.task-send
{
  text-align: center;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
}

.task-mentor-select
{
  margin-top: 20px;
  /* margin-bottom: 20px; Отладка1 */
}

/*стили для страницы таблиц с заданиями у менторов*/
.check-list-radio
{
  margin-top: 20px;
  text-align: center;
}

.check-task-input-text
{
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  width: 900px;
  max-width: 100%;
}

.admin-tools-table-rules
{
  text-align: center;
	margin-top: 0.1%;
  margin-left: 5%;
  margin-right: 5%;
  display: flex;
}

.admin-tools-object-name
{
  text-align: center;
  font-size: var(--font-size-section-title);
  padding: 1%;
  border-top: 2px solid #000000;
	border-bottom: 2px solid #000000;
  border-left: 2px solid #000000;
	border-right: 2px solid #000000;
  width: 30%;
}

.admin-tools-object-type
{
  text-align: center;
  font-size: var(--font-size-section-title);
  padding: 1%;
  border-top: 2px solid #000000;
	border-bottom: 2px solid #000000;
	border-right: 2px solid #000000;
  width: 15%;
}

.admin-tools-object-rule
{
  text-align: center;
  font-size: var(--font-size-section-title);
  padding: 1%;
  border-top: 2px solid #000000;
	border-bottom: 2px solid #000000;
	border-right: 2px solid #000000;
  width: 70%;
}

.admin-tools-select-role-user
{
  text-align: center;
  margin-left: 33%;
  margin-top: 1%;
  /* margin-bottom: 1%; Отладка1 */
  width: 33%;
}

.admin-tools-filter-select
{
  text-align: center;
  margin-left: 1%;
  margin-right: 1%;
  /* margin-bottom: 1%; Отладка1 */
  width: 20%;
}

/* Стили для Bootstrap вкладок */
.nav-tabs {
  border-bottom: 2px solid var(--border-color) !important;
  background-color: var(--accent-color) !important;
}

.nav-tabs .nav-link {
  border: none !important;
  border-bottom: 3px solid transparent !important;
  color: var(--text-secondary) !important;
  background-color: transparent !important;
  padding: 0.75rem 1rem !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
  border-radius: 0 !important;
  margin-right: 0 !important;
}

.nav-tabs .nav-link:hover {
  color: var(--primary-color) !important;
  background-color: rgba(20, 70, 160, 0.05) !important;
  border-bottom-color: var(--primary-color) !important;
}

.nav-tabs .nav-link.active {
  color: var(--primary-color) !important;
  background-color: var(--background-color) !important;
  border-bottom-color: var(--primary-color) !important;
  font-weight: 600 !important;
}

.nav-tabs .nav-link:focus {
  box-shadow: none !important;
  outline: none !important;
}

/* Стили для контента вкладок */
.tab-content {
  background-color: var(--background-color) !important;
  border: 1px solid var(--border-color) !important;
  border-top: none !important;
  padding: 0rem !important;
}

.tab-pane {
  background-color: var(--background-color) !important;
}

/* Стили для dbc.Tabs (Dash Bootstrap Components) */
.dbc-tabs .nav-tabs {
  border-bottom: 2px solid var(--border-color) !important;
  background-color: var(--accent-color) !important;
}

.dbc-tabs .nav-tabs .nav-link {
  border: none !important;
  border-bottom: 3px solid transparent !important;
  color: var(--text-secondary) !important;
  background-color: transparent !important;
  padding: 0.75rem 1rem !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
  border-radius: 0 !important;
  margin-right: 0 !important;
}

.dbc-tabs .nav-tabs .nav-link:hover {
  color: var(--primary-color) !important;
  background-color: rgba(20, 70, 160, 0.05) !important;
  border-bottom-color: var(--primary-color) !important;
}

.dbc-tabs .nav-tabs .nav-link.active {
  color: var(--primary-color) !important;
  background-color: var(--background-color) !important;
  border-bottom-color: var(--primary-color) !important;
  font-weight: 600 !important;
}

.dbc-tabs .tab-content {
  background-color: var(--background-color) !important;
  border: 1px solid var(--border-color) !important;
  border-top: none !important;
  padding: 0rem !important;
}

/* Стили для вкладок в admin_tools */
#admin-tools-tabs .nav-tabs {
  border-bottom: 2px solid var(--border-color) !important;
  background-color: var(--accent-color) !important;
}

#admin-tools-tabs .nav-tabs .nav-link {
  border: none !important;
  border-bottom: 3px solid transparent !important;
  color: var(--text-secondary) !important;
  background-color: transparent !important;
  padding: 0.75rem 1rem !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
  border-radius: 0 !important;
  margin-right: 0 !important;
}

#admin-tools-tabs .nav-tabs .nav-link:hover {
  color: var(--primary-color) !important;
  background-color: rgba(20, 70, 160, 0.05) !important;
  border-bottom-color: var(--primary-color) !important;
}

#admin-tools-tabs .nav-tabs .nav-link.active {
  color: var(--primary-color) !important;
  background-color: var(--background-color) !important;
  border-bottom-color: var(--primary-color) !important;
  font-weight: 600 !important;
}

#admin-tools-tabs .tab-content {
  background-color: var(--background-color) !important;
  border: 1px solid var(--border-color) !important;
  border-top: none !important;
  padding: 0rem !important;
}

/* Стили для вкладок пользователей */
#users-tabs .nav-tabs {
  border-bottom: 2px solid var(--border-color) !important;
  background-color: var(--accent-color) !important;
}

#users-tabs .nav-tabs .nav-link {
  border: none !important;
  border-bottom: 3px solid transparent !important;
  color: var(--text-secondary) !important;
  background-color: transparent !important;
  padding: 0.75rem 1rem !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
  border-radius: 0 !important;
  margin-right: 0 !important;
}

#users-tabs .nav-tabs .nav-link:hover {
  color: var(--primary-color) !important;
  background-color: rgba(20, 70, 160, 0.05) !important;
  border-bottom-color: var(--primary-color) !important;
}

#users-tabs .nav-tabs .nav-link.active {
  color: var(--primary-color) !important;
  background-color: var(--background-color) !important;
  border-bottom-color: var(--primary-color) !important;
  font-weight: 600 !important;
}

#users-tabs .tab-content {
  background-color: var(--background-color) !important;
  border: 1px solid var(--border-color) !important;
  border-top: none !important;
  padding: 0 !important;
}

/* Стили для вкладок ролей */
#roles-tabs .nav-tabs {
  border-bottom: 2px solid var(--border-color) !important;
  background-color: var(--accent-color) !important;
}

#roles-tabs .nav-tabs .nav-link {
  border: none !important;
  border-bottom: 3px solid transparent !important;
  color: var(--text-secondary) !important;
  background-color: transparent !important;
  padding: 0.75rem 1rem !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
  border-radius: 0 !important;
  margin-right: 0 !important;
}

#roles-tabs .nav-tabs .nav-link:hover {
  color: var(--primary-color) !important;
  background-color: rgba(20, 70, 160, 0.05) !important;
  border-bottom-color: var(--primary-color) !important;
}

#roles-tabs .nav-tabs .nav-link.active {
  color: var(--primary-color) !important;
  background-color: var(--background-color) !important;
  border-bottom-color: var(--primary-color) !important;
  font-weight: 600 !important;
}

#roles-tabs .tab-content {
  background-color: var(--background-color) !important;
  border: 1px solid var(--border-color) !important;
  border-top: none !important;
  padding: 0px !important;
}

/* Стиль для контейнера содержимого страниц (home: trainer, desc_object и т.д.) */
#layout-page {
  background-color: var(--background-color);
}

/* Стиль для контейнера вкладок управления контентом */
#content-tab-content {
  padding: 0 !important;
  min-height: 0 !important;
}

/* Стили для кнопок в управлении контентом */
.action-btn-compact {
  transition: all 0.2s ease-in-out !important;
  padding: 6px 8px !important;
  min-width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 2px !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
}

/* Основные кнопки (создание) */
.action-btn-compact.btn-primary {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: white !important;
}

.action-btn-compact.btn-primary:hover {
  background-color: #0d3a8a !important;
  border-color: #0d3a8a !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 6px rgba(20, 70, 160, 0.3) !important;
}

/* Кнопки создания (outline) */
.action-btn-compact.btn-outline-primary {
  background-color: transparent !important;
  border-color: var(--primary-color) !important;
  color: var(--primary-color) !important;
}

.action-btn-compact.btn-outline-primary:hover {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: white !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 6px rgba(20, 70, 160, 0.3) !important;
}

/* Кнопки обновления */
.action-btn-compact.btn-outline-secondary {
  background-color: transparent !important;
  border-color: var(--text-secondary) !important;
  color: var(--text-secondary) !important;
}

.action-btn-compact.btn-outline-secondary:hover {
  background-color: var(--text-secondary) !important;
  border-color: var(--text-secondary) !important;
  color: white !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 6px rgba(64, 64, 64, 0.3) !important;
}

/* Кнопки поиска */
.action-btn-compact.btn-outline-info {
  background-color: transparent !important;
  border-color: var(--primary-color) !important;
  color: var(--primary-color) !important;
}

.action-btn-compact.btn-outline-info:hover {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: white !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 6px rgba(20, 70, 160, 0.3) !important;
}

/* Кнопки фильтров */
.action-btn-compact.btn-outline-warning {
  background-color: transparent !important;
  border-color: var(--secondary-color) !important;
  color: var(--secondary-color) !important;
}

.action-btn-compact.btn-outline-warning:hover {
  background-color: var(--secondary-color) !important;
  border-color: var(--secondary-color) !important;
  color: white !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 6px rgba(37, 89, 87, 0.3) !important;
}

/* Кнопки сложности */
.action-btn-compact.btn-outline-success {
  background-color: transparent !important;
  border-color: var(--success-color) !important;
  color: var(--success-color) !important;
}

.action-btn-compact.btn-outline-success:hover {
  background-color: var(--success-color) !important;
  border-color: var(--success-color) !important;
  color: var(--text-primary) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 6px rgba(120, 243, 107, 0.3) !important;
}

/* Кнопки сброса */
.action-btn-compact.btn-outline-danger {
  background-color: transparent !important;
  border-color: var(--error-color) !important;
  color: var(--error-color) !important;
}

.action-btn-compact.btn-outline-danger:hover {
  background-color: var(--error-color) !important;
  border-color: var(--error-color) !important;
  color: white !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 6px rgba(148, 0, 0, 0.3) !important;
}

/* Кнопки в модальных окнах */
.modal-footer .btn-primary {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: white !important;
}

.modal-footer .btn-primary:hover {
  background-color: #0d3a8a !important;
  border-color: #0d3a8a !important;
}

.modal-footer .btn-secondary {
  background-color: var(--text-secondary) !important;
  border-color: var(--text-secondary) !important;
  color: white !important;
}

.modal-footer .btn-secondary:hover {
  background-color: #2a2a2a !important;
  border-color: #2a2a2a !important;
}

.modal-footer .btn-danger {
  background-color: var(--error-color) !important;
  border-color: var(--error-color) !important;
  color: white !important;
}

.modal-footer .btn-danger:hover {
  background-color: #7a0000 !important;
  border-color: #7a0000 !important;
}

/* Иконки в кнопках */
.action-btn-compact i {
  font-size: var(--font-size-body-lg) !important;
  line-height: 1 !important;
}

/* Разделители в кнопочных группах */
.vr {
  width: 1px !important;
  height: 20px !important;
  background-color: var(--border-color) !important;
  margin: 0 8px !important;
}

/* Стили для автоматического определения ширины колонок в таблицах */
.content-table {
  table-layout: auto; /* Позволяет браузеру автоматически определять ширину колонок */
  width: 100%;
}

/* Стили для выпадающего списка задач ментора - поддержка многострочного текста */
/* Используем более общие селекторы для react-select компонентов Dash */

/* Общие стили для всех Select компонентов */
.Select-menu-outer {
  max-height: 400px !important;
  overflow-y: auto !important;
  z-index: 9999 !important;
  position: absolute !important;
  display: block !important;
}

.Select-menu {
  max-height: 400px !important;
  overflow-y: auto !important;
  z-index: 9999 !important;
}

/* Стили для опций в выпадающем списке - одна строка без переноса */
.Select-option,
.Select-option > * {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.4 !important;
  padding: 8px 12px !important;
  height: auto !important;
  display: block !important;
}

/* Убираем фиксированную высоту для опций */
.Select-option {
  height: auto !important;
  max-height: none !important;
}

/* Стили для выбранного значения - одна строка */
.Select-value-label,
.Select-value-label > * {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.4 !important;
  display: block !important;
}

/* Стили для контейнера выбранного значения */
.Select-value {
  height: auto !important;
  min-height: auto !important;
  line-height: 1.6 !important;
  max-height: none !important;
}

/* Специфичные стили для dropdown задач ментора - одна строка */
/* Убеждаемся, что меню отображается поверх модального окна */
#mentor-assign-task-dropdown .Select-menu-outer {
  z-index: 10050 !important;
  position: absolute !important;
  display: block !important;
  visibility: visible !important;
}

#mentor-assign-task-dropdown.is-open .Select-menu-outer {
  display: block !important;
  visibility: visible !important;
}

#mentor-assign-task-dropdown .Select-option,
#mentor-assign-task-dropdown .Select-option > * {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.4 !important;
  padding: 8px 12px !important;
  height: auto !important;
  display: block !important;
}

#mentor-assign-task-dropdown .Select-value-label,
#mentor-assign-task-dropdown .Select-value-label > * {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.4 !important;
  display: block !important;
}

#mentor-assign-task-dropdown .Select-value {
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  line-height: 1.6 !important;
}

/* Стили для контейнера Select */
#mentor-assign-task-dropdown .Select-control {
  height: auto !important;
  min-height: auto !important;
}

#mentor-assign-task-dropdown .Select-input {
  height: auto !important;
}

.content-table th,
.content-table td {
  /* Базовые стили для ячеек */
  padding: 0.5rem;
  border: 1px solid var(--border-color, #dee2e6);
  vertical-align: middle;
}

/* Стили для колонок с автоматической шириной */
.content-table th[style*="fit-content"],
.content-table td[style*="fit-content"] {
  width: fit-content;
  min-width: fit-content;
  max-width: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Стили для колонок с фиксированной шириной */
.content-table th[style*="width:"],
.content-table td[style*="width:"] {
  /* Сохраняем указанную ширину */
}

/* Улучшенная поддержка для длинного текста в колонках с автоматической шириной */
.content-table th[style*="fit-content"]:hover,
.content-table td[style*="fit-content"]:hover {
  overflow: visible;
  white-space: normal;
  word-wrap: break-word;
  max-width: 300px; /* Максимальная ширина при наведении */
  z-index: 10;
  position: relative;
  background-color: var(--background-color, #fff);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* AG-Grid компактность - устанавливаем минимальную высоту строки */
.ag-theme-alpine {
  --ag-row-height: 24px !important;
  --ag-header-height: 28px !important;
}

/* Стили для компактных чекбоксов в AG-Grid */
.ag-grid-checkbox-cell {
  padding: 0 !important;
  padding-left: 12px !important;
  margin: 0 !important;
  text-align: center !important;
  vertical-align: middle !important;
}

.ag-grid-checkbox-cell .ag-checkbox-input-wrapper {
  margin: 0 !important;
  padding: 0 !important;
  padding-left: 12px !important;
}

.ag-grid-checkbox-cell .ag-checkbox-input {
  margin: 0 !important;
  padding: 0 !important;
  padding-left: 12px !important;
}

/* Стили для заголовка колонки с чекбоксами в AG-Grid */
.ag-header-cell[col-id="ag-grid-checkbox"] {
  padding: 0 !important;
  padding-left: 12px !important;
  margin: 0 !important;
  text-align: center !important;
  vertical-align: middle !important;
}

.ag-header-cell[col-id="ag-grid-checkbox"] .ag-header-cell-comp-wrapper {
  padding: 0 !important;
  padding-left: 12px !important;
  margin: 0 !important;
  text-align: center !important;
  vertical-align: middle !important;
}

/* Компактные стили для карточек */
.card-body {
  padding: 1px !important;
}

/* Компактные стили для форм */
.form-label,
label.form-label {
  font-size: 0.75rem !important;
  margin-bottom: 0.0625rem !important;
}

.form-control,
.form-select {
  font-size: var(--font-size-secondary) !important;
  height: 24px !important;
  margin-bottom: 0.03125rem !important;
  padding: 0.125rem 0.25rem !important;
}

.btn {
  margin-left: 0.03125rem !important;
  padding: 0.125rem 0.25rem !important;
  font-size: 0.75rem !important;
}

.row {
  margin-bottom: 0.03125rem !important;
}

.card-header {
  padding: 0.25rem 0.5rem !important;
  font-size: 0.875rem !important;
}

.card-footer {
  padding: 0.25rem 0.5rem !important;
}

/* Form change detection styles */
.btn-changed {
  background-color: var(--primary-color, #1446A0) !important;
  border-color: var(--primary-color, #1446A0) !important;
  color: white !important;
}

.btn-changed:hover {
  background-color: var(--primary-color, #1446A0) !important;
  border-color: var(--primary-color, #1446A0) !important;
  opacity: 0.9;
}

.btn-changed:focus {
  background-color: var(--primary-color, #1446A0) !important;
  border-color: var(--primary-color, #1446A0) !important;
  box-shadow: 0 0 0 0.2rem rgba(20, 70, 160, 0.25) !important;
}

/* Secondary outline state for save button when no changes (like "Вернуться" button) */
[id*="formbuilder-submit"] {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

[id*="formbuilder-submit"].btn-secondary-outline {
  background-color: transparent !important;
  border-color: #6c757d !important;
  color: #6c757d !important;
}

[id*="formbuilder-submit"].btn-secondary-outline:hover {
  background-color: #6c757d !important;
  border-color: #6c757d !important;
  color: white !important;
}

[id*="formbuilder-submit"].btn-secondary-outline:focus {
  background-color: transparent !important;
  border-color: #6c757d !important;
  color: #6c757d !important;
  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.25) !important;
}

/* Page wrapper and layout.
   overflow-y: scroll (not auto) avoids scrollbar pop-in on click: click triggers header
   dropdown-close callback -> re-render -> layout recalc -> scrollbar briefly appears
   then disappears (flicker). Always showing the track prevents that shift. */
#_pages_content,
#page-content {
  min-height: calc(100vh - 48px) !important;
  flex: 1 1 0 !important;
  max-height: none !important;
  width: 100% !important;
  max-width: none !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable !important;
}

/* Direct child of page container: must grow to fill height and width */
#_pages_content > div,
#page-content > div {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: none !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Root layout: full width and height for page area */
#react-entry-point,
#react-entry-point > div {
  min-height: 100vh !important;
  width: 100% !important;
  max-width: none !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Разрешить прокрутку для страницы content (scroll to avoid scrollbar flicker on re-render) */
#_pages_content:has(.content-page) {
  min-height: calc(100vh - 48px) !important;
  max-height: none !important;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
}

/* Trainer page layout: prevent stacked 100% height blocks from over-stretching */
.trainer-page #trainer-layout-page {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

.trainer-page #task-list {
  height: auto !important;
  flex: 0 0 auto !important;
}

.trainer-page #task_button_div {
  height: auto !important;
  align-content: flex-start;
}

.trainer-page #main-form {
  display: flex;
  flex-direction: row;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  gap: 12px;
  padding-right: 16px;
}

/* 45:55 columns; left needs min-width so the editor does not collapse to a sliver */
.trainer-page #main-form > div:nth-child(1) {
  display: flex;
  flex-direction: column;
  flex: 45 1 45%;
  min-width: 280px;
  min-height: 0;
}

.trainer-page #main-form > div:nth-child(2) {
  display: flex;
  flex-direction: column;
  flex: 55 1 55%;
  min-width: 0;
  min-height: 0;
}

.trainer-page #main-form .block_style {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100% !important;
}

.trainer-page #textarea-query-entered {
  flex: 1 1 auto;
  min-height: 0 !important;
  height: 100% !important;
}

.trainer-page #main-form > div:nth-child(2) > div.block_style:nth-child(2) #query-output {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  overflow: hidden;
}

.trainer-page #query-output .text_output {
  height: auto !important;
  flex: 0 0 auto;
  /* Less vertical padding than .text_output (10px) to shorten the banner without changing font size */
  padding: 5px 10px;
}

/* Official check status lines: no box border; flush left and bottom */
.trainer-page #query-output .text_output.trainer-check-status-banner {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding-left: 0 !important;
  padding-bottom: 0 !important;
}

.trainer-page #query-output .text_output .header_blue {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Trainer: result card titles — 12px like Rows / DataTable (color set in sandbox_split for card-header) */
.trainer-page .trainer-result-card-header {
  font-size: var(--font-size-secondary);
  font-weight: 400;
  line-height: var(--line-height-dense, 1.35);
}
.trainer-page .trainer-result-json-text {
  font-size: var(--font-size-secondary);
}

/* overflow: auto on both axes made .container-fluid wider than the panel (row gutters) and
   showed a horizontal scrollbar; keep vertical scroll only. */
.trainer-page #query-output > .container,
.trainer-page #query-output > .container-fluid,
.trainer-page #query-output > .row {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Right column: task statement block fits content; query result block uses remaining height */
.trainer-page #main-form > div:nth-child(2) > div.block_style:nth-child(1) {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0;
}

.trainer-page #main-form > div:nth-child(2) > div.block_style:nth-child(2) {
  flex: 1 1 auto !important;
  min-height: 0;
  height: auto !important;
}

.trainer-page #tasktext-output {
  height: auto !important;
  min-height: 0;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background-color: transparent;
  box-shadow: none;
}

/* Doc / hint links under task text (smaller than task body --font-size-body-lg) */
.trainer-page #hints-block {
  font-size: var(--font-size-secondary);
  line-height: var(--line-height-dense, 1.35);
}

.trainer-page #hints-block a {
  font-size: inherit;
  font-weight: 400;
}

/* AgGrid styles */
.ag-theme-alpine .ag-row-selected {
  background-color: #e7f3ff !important;
}

.ag-theme-alpine .ag-row-selected .ag-cell:first-child {
  border-left: 3px solid #0d6efd;
}

.ag-theme-alpine .ag-cell {
  padding-top: 4px !important;
  padding-bottom: 2px !important;
  line-height: 1.2 !important;
}

.ag-theme-alpine .ag-header-cell {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

/* Theory pages: wave gating overlay (learning progression) */
.theory-wave-lock-root {
  position: relative;
}

.theory-wave-lock-root--locked > :first-child {
  pointer-events: none;
  opacity: 0.48;
  user-select: none;
  filter: grayscale(0.15);
}

.theory-wave-lock-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  background: color-mix(in srgb, var(--bs-body-bg, #fff) 78%, transparent);
  padding: 1rem;
  box-sizing: border-box;
}

.theory-wave-lock-card {
  max-width: 28rem;
  padding: 1rem 1.25rem;
  border-radius: 0.5rem;
  border: 1px solid var(--bs-border-color, #dee2e6);
  background: var(--bs-secondary-bg, #f8f9fa);
}

.theory-wave-lock-text {
  font-size: var(--font-size-body, 1rem);
  line-height: 1.45;
  color: var(--bs-body-color, #212529);
}