.tooltip-container {
  position: relative;
  display: inline-block;
  margin-left: 5px;
  cursor: help;
  z-index: 1000;
  vertical-align: middle;
}

.tooltip-icon {
  background-color: var(--color-danger);
  color: white;
  border-radius: var(--radius-round);
  width: var(--icon-size-base);
  height: var(--icon-size-base);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  transition: background-color var(--transition-slow);
  vertical-align: middle;
}

.has-text-success .tooltip-icon {
  background-color: var(--color-success);
}

.has-text-danger .tooltip-icon {
  background-color: var(--color-danger);
}

.has-text-info .tooltip-icon {
  background-color: var(--color-primary);
}

.has-text-warning .tooltip-icon {
  background-color: var(--color-warning);
  color: var(--color-text-dark);
}

.tooltip-content {
  visibility: hidden;
  position: fixed;
  background-color: var(--color-bg-dark);
  color: var(--color-bg-white);
  text-align: left;
  border-radius: var(--radius-md);
  padding: 12px 16px;
  z-index: var(--z-tooltip);
  font-size: var(--font-md);
  line-height: var(--line-height-snug);
  white-space: normal;
  width: 320px;
  max-width: 90vw;
  box-shadow: var(--shadow-tooltip);
  word-wrap: break-word;
  overflow-wrap: break-word;
  opacity: 0;
  transition: opacity var(--transition-slow), visibility var(--transition-slow);
  pointer-events: none;
  transform: translateZ(0); /* Принудительное создание слоя для лучшего рендеринга */
}

.tooltip-content::after {
  content: "";
  position: absolute;
  border-width: 5px;
  border-style: solid;
}

.tooltip-content.tooltip-top {
  margin-bottom: 5px;
}

.tooltip-content.tooltip-top::after {
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-color: var(--color-bg-dark) transparent transparent transparent;
}

/* Тултип снизу */
.tooltip-content.tooltip-bottom {
  margin-top: 5px;
}

.tooltip-content.tooltip-bottom::after {
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-color: transparent transparent var(--color-bg-dark) transparent;
}

.tooltip-content.tooltip-left {
  margin-right: 5px;
}

.tooltip-content.tooltip-left::after {
  top: 50%;
  left: 100%;
  margin-top: -5px;
  border-color: transparent transparent transparent var(--color-bg-dark);
}

.tooltip-content.tooltip-right {
  margin-left: 5px;
}

.tooltip-content.tooltip-right::after {
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-color: transparent var(--color-bg-dark) transparent transparent;
}

.tooltip-container:hover .tooltip-content {
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
}

.card .tooltip-container:hover .tooltip-content,
.title .tooltip-container:hover .tooltip-content {
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
  z-index: 999999 !important;
}


body:not(.modal-active) label .tooltip-container:hover .tooltip-content {
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
  z-index: var(--z-tooltip-critical) !important;
  pointer-events: none !important;
}


body:not(.modal-active) .checkbox .tooltip-container:hover .tooltip-content {
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
  z-index: var(--z-tooltip-critical) !important;
  pointer-events: none !important;
}


body.modal-active .tooltip-container:hover .tooltip-content,
body.modal-active .tooltip-content {
  visibility: hidden !important;
  opacity: 0 !important;
  display: none !important;
  pointer-events: none !important;
}

body.modal-active .tooltip-container {
  pointer-events: none !important;
  cursor: default !important;
}

body.modal-active .tooltip-icon {
  pointer-events: none !important;
  cursor: default !important;
  opacity: 0.3 !important;
  background-color: rgba(128, 128, 128, 0.3) !important;
}

body.modal-active label .tooltip-icon,
body.modal-active .checkbox .tooltip-icon {
  opacity: 0.3 !important;
  filter: brightness(0.5) grayscale(0.7) !important;
  pointer-events: none !important;
  cursor: default !important;
}



body.modal-active #study-plan-table th .tooltip-container:hover .tooltip-content,
body.modal-active #study-plan-table th .tooltip-content {
  visibility: hidden !important;
  opacity: 0 !important;
  display: none !important;
  pointer-events: none !important;
}

body.modal-active #study-plan-table th .tooltip-container {
  pointer-events: none !important;
  cursor: default !important;
}

body.modal-active #study-plan-table th .tooltip-icon {
  pointer-events: none !important;
  cursor: default !important;
  opacity: 0.3 !important;
  background-color: rgba(128, 128, 128, 0.3) !important;
}



.title.is-3 .tooltip-container {
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
}

.title.is-3 .tooltip-icon {
  position: relative;
  top: -1px;
  width: var(--icon-size-large);
  height: var(--icon-size-large);
  font-size: var(--font-base);
}

.card .card-content .title.is-3 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  line-height: 1.2;
}

.card .card-content .title.is-3 .tooltip-container {
  margin-left: 8px;
  align-self: center;
}



@media screen and (max-width: 768px) {
  .tooltip-content {
    width: 280px !important;
    max-width: 95vw !important;
    font-size: var(--font-base);
    padding: 10px 12px;
  }
  
  .tooltip-container {
    margin-left: 3px;
  }
  
  .tooltip-icon {
    width: var(--icon-size-small);
    height: var(--icon-size-small);
    font-size: var(--font-xs);
  }
}



html, body, .container, .columns, .column, .box, .field, .control, 
th, td, .table-container, .card, .card-content {
  overflow: visible !important;
  position: relative;
}

.table-container {
  overflow-x: auto;
  overflow-y: visible !important;
  max-width: 100%;
  position: relative;
  margin-bottom: var(--spacing-xl);
}

.table-container th:first-child {
  border-left: var(--table-border-width) solid var(--color-border) !important;
}

.table-container th:last-child {
  border-right: var(--table-border-width) solid var(--color-border) !important;
}