/* /home/admin/web/apps/mindalai_app/static/css/core/index.css */

/* Глобальні стилі для світлої теми */
body {
  font-family: system-ui, sans-serif;
  transition: background-color 0.3s, color 0.3s;
}

select {
  padding: 0.5rem;
  border-radius: 0.375rem;
}

/* Темна тема через клас .dark */
body.dark {
  background: linear-gradient(to top right, #0a0d18 0%, #0b2e38 50%, #0f172a 100%);
  color: #fff;
}

.dark input,
.dark textarea,
.dark select {
  background-color: #1f2937;
  color: white;
  border-color: #4b5563;
}

/* Мобільне меню */
#mobile-menu {
  will-change: transform;
}

/* Перемикач теми та мови */
.language-switcher select,
.theme-switcher select {
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  background-color: #fff;
  color: #1f2937;
  font-size: 0.75rem;
  width: 4rem;
  cursor: pointer;
}

.language-switcher select:focus,
.theme-switcher select:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

.dark .language-switcher select,
.dark .theme-switcher select {
  background-color: #1f2937;
  color: #fff;
  border-color: #4b5563;
}

.dark .language-switcher select:focus,
.dark .theme-switcher select:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2);
}

/* Стилі для секцій зі статтями */
.article {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 1.5rem;
}

.image-container {
  width: 40%;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: stretch;
}

.image-container .image-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.image-container img {
  width: 100%;
  height: 166.67%; /* Компенсація обрізки: 1 / (1 - 0.25 - 0.15) = 1.6667 */
  object-fit: cover;
  transform: translateY(-25%); /* Обрізка 25% зверху */
  transition: transform 0.3s ease;
}

.image-container img:hover {
  transform: translateY(-25%) scale(1.02); /* Збереження обрізки при наведенні */
}

.text-container {
  width: 60%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem 0;
}

.text-container p {
  margin-bottom: 1rem;
  line-height: 1.6;
}

.text-container a {
  margin-top: 1rem;
}

/* Адаптивність для мобільних пристроїв */
@media (max-width: 767px) {
  .article {
    flex-direction: column;
    align-items: center;
  }

  .image-container {
    width: 100%;
    max-width: 400px;
    aspect-ratio: 4/3; /* Співвідношення сторін для зображень */
    position: relative;
    overflow: hidden;
  }

  .image-container .image-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  .image-container img {
    width: 100%;
    height: 166.67%; /* Така ж обрізка на мобільних */
    object-fit: cover;
    transform: translateY(-25%); /* Обрізка 25% зверху */
  }

  .image-container img:hover {
    transform: translateY(-25%) scale(1.02);
  }

  .text-container {
    width: 100%;
    padding: 0;
  }
}

/* Темна тема для секцій */
.dark .article .image-container .image-wrapper {
  box-shadow: 0 4px 6px rgba(255, 255, 255, 0.1);
}

.dark .article .text-container a {
  color: #60a5fa;
}

/* Стилі для навігаційного меню top-menu-nav */
nav ul li a {
  border: 1px solid transparent;
  transition: border-color 0.3s ease;
  position: relative; /* Для позиціонування псевдоелементів */
}

nav ul li a:hover {
  border-top: 1px solid #3B82F6; /* Блакитний зверху */
  border-bottom: 1px solid #856EF6; /* Пурпуровий знизу */
}

nav ul li a:hover::before,
nav ul li a:hover::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to top, #856EF6, #30D5C8, #3B82F6); /* Градієнт: пурпуровий знизу, бірюзовий посередині, блакитний зверху */
}

nav ul li a:hover::before {
  left: 0;
}

nav ul li a:hover::after {
  right: 0;
}

/* Стилі для вертикального меню */
.vertical-menu {
    margin-top: 1rem;
}

.vertical-menu ul {
    list-style: none;
    padding: 0;
}

.menu-item a {
    border: 1px solid transparent;
    position: relative; /* Для псевдоелементів градієнтної рамки */
    transition: all 0.3s ease;
}

.menu-item a:hover {
    transform: translateY(-2px); /* Ефект піднімання */
    border-top: 1px solid #3B82F6; /* Блакитний зверху */
    border-bottom: 1px solid #856EF6; /* Пурпурно-синій знизу */
}

.menu-item a:hover::before,
.menu-item a:hover::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(to top, #856EF6, #30D5C8, #3B82F6); /* Градієнт: пурпуровий знизу, бірюзовий посередині, блакитний зверху */
}

.menu-item a:hover::before {
    left: 0;
}

.menu-item a:hover::after {
    right: 0;
}

.menu-icon {
    width: 1.5rem; /* w-6 */
    margin-right: 0.5rem; /* mr-2 */
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

/* Стилі для меню профілю */
.profile-menu button {
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  background-color: #fff;
  color: #1f2937;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.dark .profile-menu button {
  background-color: #1f2937;
  color: #fff;
}

.profile-menu button:hover {
  background-color: #f3f4f6;
}

.dark .profile-menu button:hover {
  background-color: #374151;
}

.profile-dropdown {
  z-index: 20;
}

.profile-dropdown a {
  display: block;
  font-size: 0.875rem;
  transition: background-color 0.2s ease;
}

/* Стилі для аватарки в модалці */
.profile-menu .rounded-full {
    border: 1px solid #e5e7eb; /* Світла тема: сірий контур */
}

.dark .profile-menu .rounded-full {
    border: 1px solid #4b5563; /* Темна тема: темніший контур */
}

/* Забезпечення, щоб модалка була поверх інших елементів */
.profile-menu #index-profile-dropdown {
    z-index: 1000;
}

/* Адаптація для малих екранів */
@media (max-width: 640px) {
    .profile-menu #index-profile-dropdown {
        width: 100%;
        max-width: 20rem; /* Обмеження ширини на мобільних */
        right: 0;
        left: auto;
    }
}

/* Стилі для макросів */
.clickable-card {
    border: 1px solid transparent;
    position: relative; /* Для псевдоелементів градієнтної рамки */
    transition: all 0.3s ease;
}

.clickable-card:hover {
    background-color: #bae6fd; /* Зміна: Легке затемнення для світлої теми (bg-sky-200) */
    border-top: 1px solid #3B82F6; /* Блакитний зверху */
    border-bottom: 1px solid #856EF6; /* Пурпурно-синій знизу */
}

.dark .clickable-card:hover,
[data-theme="dark"] .clickable-card:hover {
    background-color: #313d50; /* Зміна: Легке освітлення для темної теми (bg-gray-700) */
}

.clickable-card:hover::before,
.clickable-card:hover::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(to top, #856EF6, #30D5C8, #3B82F6); /* Градієнт: пурпуровий знизу, бірюзовий посередині, блакитний зверху */
}

.clickable-card:hover::before {
    left: 0;
}

.clickable-card:hover::after {
    right: 0;
}

/* Забезпечення коректного відображення посилання всередині блоку */
.clickable-card a {
    text-decoration: none; /* Видаляємо підкреслення */
    color: inherit; /* Зберігаємо кольори тексту */
    display: block; /* Посилання займає весь блок */
}


/* Стилі для базового шаблону */
.message-hidden {
    display: none;
}

/* Додаткові стилі для прелоадера та інших елементів */
.z-9999 {
    z-index: 9999;
}

.cssload-loader {
    position: relative;
    width: 50px;
    height: 50px;
}

.cssload-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 4px solid transparent;
    border-top-color: #2563eb;
    animation: cssload-spin 1s linear infinite;
}

.cssload-one {
    animation-delay: -0.3s;
}

.cssload-two {
    animation-delay: -0.15s;
}

.cssload-three {
    animation-delay: 0s;
}

@keyframes cssload-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Стилі для захисного екрану */
.turnstile-overlay-hidden {
    display: none !important; /* Додано !important для підвищення пріоритету */
}

.turnstile-overlay-visible {
    display: flex !important; /* Додано !important для забезпечення видимості */
}

/* Стилі для базового шаблону */
.message-hidden {
    display: none;
}

/* Стилі для прелоадера */
.z-9999 {
    z-index: 9999;
}

.cssload-loader {
    position: relative;
    width: 50px;
    height: 50px;
}

.cssload-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 4px solid transparent;
    border-top-color: #2563eb;
    animation: cssload-spin 1s linear infinite;
}

.cssload-one {
    animation-delay: -0.3s;
}

.cssload-two {
    animation-delay: -0.15s;
}

.cssload-three {
    animation-delay: 0s;
}

@keyframes cssload-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Стилі для текстових посилань */
.text-link {
    color: #2563eb; /* Синій колір для світлої теми */
    text-decoration: underline; /* Підкреслення для виділення */
    transition: color 0.3s ease, background-color 0.3s ease;
}

.text-link:hover {
    color: #1e40af; /* Темніший синій при наведенні */
    background-color: #f3f4f6; /* Легкий фон при наведенні (світла тема) */
    text-decoration: none; /* Видалення підкреслення при наведенні */
}

.dark .text-link {
    color: #60a5fa; /* Світло-синій для темної теми */
    text-decoration: underline;
}

.dark .text-link:hover {
    color: #3b82f6; /* Світліший синій при наведенні */
    background-color: #374151; /* Легкий фон при наведенні (темна тема) */
    text-decoration: none;
}

/* Стилі для реферального посилання */
.referral-link {
    word-break: break-all; /* Перенос тексту для довгих посилань */
    overflow-wrap: break-word; /* Додаткове перенесення для сумісності */
    display: block; /* Забезпечує перенесення на новий рядок */
    color: #1f2937; /* text-gray-900 */
}

.dark .referral-link {
    color: #d1d5db; /* text-gray-300 */
}

/* Стилі для іконки копіювання (Варіант 2) */
.copy-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #2563eb; /* text-blue-600 */
    transition: color 0.3s ease;
}

.copy-icon:hover {
    color: #1e40af; /* text-blue-800 */
}

.dark .copy-icon {
    color: #60a5fa; /* text-blue-400 */
}

.dark .copy-icon:hover {
    color: #3b82f6; /* text-blue-300 */
}

/* Стилі для кнопки (Варіант 1, уже є в коді) */
.btn {
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    transition: all 0.3s ease;
}

.bg-blue-600 {
    background-color: #2563eb;
}

.text-white {
    color: #ffffff;
}

.hover\:bg-blue-700:hover {
    background-color: #1e40af;
}

/* Стилі для toast-повідомлень із підтримкою світлої та темної тем */
.toast-notification {
    position: fixed;
    bottom: 1rem; /* 16px */
    right: 1rem; /* 16px */
    padding: 1rem; /* 16px */
    border-radius: 0.5rem; /* 8px, відповідає rounded-lg у Tailwind */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    font-size: 0.875rem; /* 14px, text-sm */
    line-height: 1.5; /* Відповідає Tailwind line-height */
    max-width: 20rem; /* 320px */
    z-index: 1000; /* Вище за модалки та інші елементи */
    opacity: 0;
    transform: translateY(1.25rem); /* 20px */
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* Активний стан для анімації появи */
.toast-notification.show {
    opacity: 1;
    transform: translateY(0);
}

/* Стилі для світлої теми */
.toast-notification.success {
    background-color: #22c55e; /* green-500 */
    color: #ffffff; /* text-white */
}

.toast-notification.info {
    background-color: #3b82f6; /* blue-500 */
    color: #ffffff; /* text-white */
}

.toast-notification.error {
    background-color: #ef4444; /* red-500 */
    color: #ffffff; /* text-white */
}

/* Стилі для темної теми */
@media (prefers-color-scheme: dark) {
    .toast-notification.success {
        background-color: #16a34a; /* green-600, темніший відтінок для темної теми */
        color: #e5e7eb; /* gray-200 */
    }

    .toast-notification.info {
        background-color: #2563eb; /* blue-600, темніший відтінок для темної теми */
        color: #e5e7eb; /* gray-200 */
    }

    .toast-notification.error {
        background-color: #dc2626; /* red-600, темніший відтінок для темної теми */
        color: #e5e7eb; /* gray-200 */
    }
}

/* Адаптивність для менших екранів */
@media (max-width: 640px) {
    .toast-notification {
        bottom: 0.5rem; /* 8px */
        right: 0.5rem; /* 8px */
        left: 0.5rem; /* 8px */
        font-size: 0.75rem; /* 12px, text-xs */
        max-width: none; /* Повна ширина на мобільних */
    }
}