/* ITSakh.pro Book Theme - Neomorphic Design System */
/* ================================================= */

:root {
  /* Neomorphic Light Theme */
  --neo-bg: #f0f4f8;
  --neo-light: #ffffff;
  --neo-dark: #d1d9e6;
  --neo-shadow-raised: 8px 8px 16px var(--neo-dark), -8px -8px 16px var(--neo-light);
  --neo-shadow-raised-hover: 10px 10px 20px var(--neo-dark), -10px -10px 20px var(--neo-light);
  --neo-shadow-inset: inset 6px 6px 12px var(--neo-dark), inset -6px -6px 12px var(--neo-light);
  --neo-shadow-soft: 5px 5px 10px var(--neo-dark), -5px -5px 10px var(--neo-light);

  /* Colors */
  --color-gold: #8C7E5C;
  --color-gold-light: #a89a78;
  --color-gold-dark: #6d6247;

  /* Text colors */
  --text-primary: #1a2332;
  --text-secondary: #4a5568;
  --text-muted: #718096;

  /* Borders */
  --border-color: #e2e8f0;
}

[data-theme="dark"] {
  /* Neomorphic Dark Theme */
  --neo-bg: #1a2332;
  --neo-light: rgba(255, 255, 255, 0.05);
  --neo-dark: #0d141f;

  /* Text colors */
  --text-primary: #f7fafc;
  --text-secondary: #cbd5e0;
  --text-muted: #a0aec0;

  /* Borders */
  --border-color: #2d3748;
}

/* ==================== */
/* Base Styles Override */
/* ==================== */

html, body {
  background: var(--neo-bg) !important;
  color: var(--text-primary) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Override Tailwind backgrounds */
.bg-white, .bg-gray-50, .bg-gray-100 {
  background: var(--neo-bg) !important;
}

[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-gray-50,
[data-theme="dark"] .bg-gray-100,
[data-theme="dark"] .bg-gray-900 {
  background: var(--neo-bg) !important;
}

/* ==================== */
/* Navigation Override  */
/* ==================== */

nav, header, .sticky {
  background: var(--neo-bg) !important;
  border-bottom: none !important;
}

/* Navigation links */
nav a, header a {
  color: var(--text-secondary) !important;
  transition: all 0.3s ease !important;
}

nav a:hover, header a:hover {
  color: var(--color-gold) !important;
}

/* Mobile menu */
.fixed.inset-0, [class*="fixed"][class*="inset"] {
  background: var(--neo-bg) !important;
}

/* ==================== */
/* Cards & Containers   */
/* ==================== */

/* Chapter cards */
.chapter-card,
.tool-card,
.card-hover,
[class*="rounded-lg"][class*="border"],
[class*="rounded-xl"][class*="border"],
[class*="rounded-2xl"][class*="p-"] {
  background: var(--neo-bg) !important;
  box-shadow: var(--neo-shadow-raised) !important;
  border: none !important;
  border-radius: 16px !important;
  transition: all 0.3s ease !important;
}

.chapter-card:hover,
.tool-card:hover,
.card-hover:hover {
  box-shadow: var(--neo-shadow-raised-hover) !important;
  transform: translateY(-4px) !important;
}

/* Info boxes and alerts */
[class*="bg-green-50"],
[class*="bg-green-100"],
[class*="bg-amber-50"],
[class*="bg-amber-100"] {
  background: var(--neo-bg) !important;
  box-shadow: var(--neo-shadow-soft) !important;
  border: none !important;
  border-radius: 12px !important;
}

/* Chapter icon boxes - золотистый фон с контрастной иконкой */
.w-12.h-12[class*="bg-primary-100"],
.w-10.h-10[class*="bg-primary-100"],
.w-8.h-8[class*="bg-primary-100"] {
  background: var(--color-gold) !important;
  box-shadow: var(--neo-shadow-soft) !important;
}

.w-12.h-12[class*="bg-primary-100"] svg,
.w-10.h-10[class*="bg-primary-100"] svg,
.w-8.h-8[class*="bg-primary-100"] svg {
  color: #fff !important;
  stroke: #fff !important;
}

/* Other primary backgrounds */
[class*="bg-primary-50"]:not(.w-12):not(.w-10):not(.w-8),
[class*="bg-primary-100"]:not(.w-12):not(.w-10):not(.w-8) {
  background: var(--neo-bg) !important;
  box-shadow: var(--neo-shadow-soft) !important;
  border: none !important;
  border-radius: 12px !important;
}

/* Sidebar */
.w-72.fixed,
aside,
[class*="w-72"][class*="fixed"] {
  background: var(--neo-bg) !important;
  border-right: none !important;
  box-shadow: var(--neo-shadow-soft) !important;
}

/* ==================== */
/* Buttons              */
/* ==================== */

.btn-primary,
.btn-secondary,
.btn-outline,
button[class*="bg-primary"],
a[class*="bg-primary"],
[class*="rounded"][class*="bg-primary"] {
  background: var(--color-gold) !important;
  box-shadow: var(--neo-shadow-soft) !important;
  border: none !important;
  border-radius: 12px !important;
  color: #fff !important;
  transition: all 0.3s ease !important;
}

.btn-primary:hover,
.btn-secondary:hover,
button[class*="bg-primary"]:hover,
a[class*="bg-primary"]:hover {
  background: var(--color-gold-light) !important;
  box-shadow: var(--neo-shadow-raised) !important;
  transform: translateY(-2px) !important;
}

.btn-primary:active,
button[class*="bg-primary"]:active {
  box-shadow: var(--neo-shadow-inset) !important;
  transform: translateY(0) !important;
}

/* Secondary/outline buttons */
.btn-secondary,
.btn-outline,
[class*="border-primary"],
[class*="bg-gray-200"] {
  background: var(--neo-bg) !important;
  box-shadow: var(--neo-shadow-soft) !important;
  border: none !important;
  color: var(--text-primary) !important;
}

/* ==================== */
/* Typography           */
/* ==================== */

/* Headings */
h1, h2, h3, h4, h5, h6,
.text-gray-900, .text-gray-800, .text-gray-700 {
  color: var(--text-primary) !important;
}

/* Body text */
p, li, span,
.text-gray-600, .text-gray-500 {
  color: var(--text-secondary) !important;
}

/* Muted text */
.text-gray-400, small {
  color: var(--text-muted) !important;
}

/* Links */
a {
  color: var(--color-gold) !important;
  transition: color 0.2s ease !important;
}

a:hover {
  color: var(--color-gold-light) !important;
}

/* Primary colored text */
.text-primary-500, .text-primary-600, .text-primary-700, .text-primary-800 {
  color: var(--color-gold) !important;
}

/* ==================== */
/* Prose Content        */
/* ==================== */

.prose h1, .prose h2, .prose h3, .prose h4 {
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

.prose p, .prose li, .prose ul, .prose ol {
  color: var(--text-secondary) !important;
}

.prose strong {
  color: var(--text-primary) !important;
}

.prose a {
  color: var(--color-gold) !important;
}

.prose a:hover {
  color: var(--color-gold-light) !important;
}

.prose blockquote {
  border-left-color: var(--color-gold) !important;
  background: var(--neo-bg) !important;
  box-shadow: var(--neo-shadow-inset) !important;
  border-radius: 0 12px 12px 0 !important;
  padding: 1rem 1.5rem !important;
  color: var(--text-secondary) !important;
}

.prose code {
  background: var(--neo-bg) !important;
  box-shadow: var(--neo-shadow-inset) !important;
  border-radius: 6px !important;
  padding: 0.2rem 0.5rem !important;
  color: var(--color-gold) !important;
}

.prose pre {
  background: var(--neo-bg) !important;
  box-shadow: var(--neo-shadow-inset) !important;
  border-radius: 12px !important;
}

[data-theme="dark"] .prose pre {
  background: #0d141f !important;
}

.prose pre code {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text-secondary) !important;
}

/* Tables */
.prose table {
  background: var(--neo-bg) !important;
  box-shadow: var(--neo-shadow-soft) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.prose th {
  background: var(--neo-bg) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

.prose td {
  border-color: var(--border-color) !important;
  color: var(--text-secondary) !important;
}

/* ==================== */
/* Form Elements        */
/* ==================== */

input, textarea, select,
.notes-textarea {
  background: var(--neo-bg) !important;
  box-shadow: var(--neo-shadow-inset) !important;
  border: none !important;
  border-radius: 12px !important;
  color: var(--text-primary) !important;
}

input:focus, textarea:focus, select:focus {
  box-shadow: var(--neo-shadow-inset), 0 0 0 2px var(--color-gold) !important;
  outline: none !important;
}

input::placeholder, textarea::placeholder {
  color: var(--text-muted) !important;
}

/* ==================== */
/* Checkboxes           */
/* ==================== */

input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  background: var(--neo-bg) !important;
  box-shadow: var(--neo-shadow-inset) !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  position: relative !important;
}

input[type="checkbox"]:checked {
  background: var(--color-gold) !important;
  box-shadow: var(--neo-shadow-soft) !important;
}

/* Убрана галочка внутри чекбокса - используется внешняя иконка статуса */

/* ==================== */
/* Progress Elements    */
/* ==================== */

.h-2[class*="bg-"],
[class*="h-2"][class*="rounded-full"] {
  background: var(--neo-bg) !important;
  box-shadow: var(--neo-shadow-inset) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

.h-2[class*="bg-"] > *,
[class*="bg-primary-500"],
[class*="bg-green-500"] {
  background: var(--color-gold) !important;
  border-radius: 10px !important;
}

/* ==================== */
/* Icons & Badges       */
/* ==================== */

[class*="rounded-full"][class*="bg-primary"],
[class*="rounded-full"][class*="bg-green"],
[class*="rounded-full"][class*="bg-amber"] {
  background: var(--neo-bg) !important;
  box-shadow: var(--neo-shadow-soft) !important;
}

/* Chapter numbers */
.w-10.h-10[class*="rounded-full"],
.w-8.h-8[class*="rounded-full"],
.w-12.h-12[class*="rounded-full"] {
  background: var(--neo-bg) !important;
  box-shadow: var(--neo-shadow-soft) !important;
  color: var(--color-gold) !important;
}

/* Active/completed states */
.bg-green-500, .bg-primary-500 {
  background: var(--color-gold) !important;
  color: #fff !important;
}

/* ==================== */
/* Scrollbar            */
/* ==================== */

::-webkit-scrollbar {
  width: 10px !important;
  height: 10px !important;
}

::-webkit-scrollbar-track {
  background: var(--neo-bg) !important;
  box-shadow: var(--neo-shadow-inset) !important;
  border-radius: 10px !important;
}

::-webkit-scrollbar-thumb {
  background: var(--neo-bg) !important;
  box-shadow: var(--neo-shadow-soft) !important;
  border-radius: 10px !important;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-gold) !important;
}

/* ==================== */
/* Gradient Overrides   */
/* ==================== */

[class*="bg-gradient"],
[class*="from-primary"],
[class*="to-primary"] {
  background: var(--neo-bg) !important;
}

/* Hero sections */
[class*="py-16"][class*="bg-gradient"],
[class*="py-12"][class*="bg-gradient"] {
  background: var(--neo-bg) !important;
}

/* ==================== */
/* Border Overrides     */
/* ==================== */

[class*="border-gray"],
[class*="border-primary"] {
  border-color: var(--border-color) !important;
}

.border-b, .border-t, .border-l, .border-r, .border {
  border-color: var(--border-color) !important;
}

/* Remove borders on neomorphic elements */
.chapter-card, .tool-card, .card-hover {
  border: none !important;
}

/* ==================== */
/* Hover States Fix     */
/* ==================== */

[class*="hover:bg-gray"]:hover,
[class*="hover:bg-primary"]:hover {
  background: var(--neo-bg) !important;
  box-shadow: var(--neo-shadow-raised) !important;
}

/* ==================== */
/* Theme Toggle Button  */
/* ==================== */

.theme-toggle-book {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--neo-bg);
  box-shadow: var(--neo-shadow-raised);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: all 0.3s ease;
}

.theme-toggle-book:hover {
  box-shadow: var(--neo-shadow-raised-hover);
  transform: translateY(-2px);
}

.theme-toggle-book:active {
  box-shadow: var(--neo-shadow-inset);
  transform: translateY(0);
}

.theme-toggle-book svg {
  width: 24px;
  height: 24px;
  fill: var(--color-gold);
}

/* Sun icon for dark mode */
[data-theme="dark"] .theme-toggle-book .icon-moon {
  display: none;
}

[data-theme="dark"] .theme-toggle-book .icon-sun {
  display: block;
}

/* Moon icon for light mode */
.theme-toggle-book .icon-sun {
  display: none;
}

.theme-toggle-book .icon-moon {
  display: block;
}

/* ==================== */
/* Back to Main Site    */
/* ==================== */

.back-to-site {
  position: fixed;
  bottom: 24px;
  left: 24px;
  padding: 12px 20px;
  border-radius: 12px;
  background: var(--neo-bg);
  box-shadow: var(--neo-shadow-soft);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 9999;
  transition: all 0.3s ease;
}

.back-to-site:hover {
  box-shadow: var(--neo-shadow-raised);
  color: var(--color-gold);
  transform: translateY(-2px);
}

.back-to-site svg {
  width: 18px;
  height: 18px;
}

/* ==================== */
/* Mobile Responsive    */
/* ==================== */

@media (max-width: 768px) {
  .theme-toggle-book {
    bottom: 16px;
    right: 16px;
    width: 48px;
    height: 48px;
  }

  .back-to-site {
    bottom: 16px;
    left: 16px;
    padding: 10px 16px;
    font-size: 13px;
  }

  .chapter-card,
  .tool-card {
    box-shadow: var(--neo-shadow-soft) !important;
  }
}

/* ==================== */
/* Animations           */
/* ==================== */

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

.chapter-card,
.tool-card,
.prose > * {
  animation: fadeIn 0.3s ease-out;
}

/* ==================== */
/* Print Styles         */
/* ==================== */

@media print {
  * {
    box-shadow: none !important;
    background: white !important;
    color: black !important;
  }

  .theme-toggle-book,
  .back-to-site,
  nav, header {
    display: none !important;
  }
}

/* ==================== */
/* Share Buttons        */
/* ==================== */

.share-buttons {
  display: flex;
  gap: 12px;
  margin: 24px 0;
  flex-wrap: wrap;
  align-items: center;
}

.share-buttons-label {
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  margin-right: 8px;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--neo-bg);
  box-shadow: var(--neo-shadow-soft);
  border: none;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.share-btn:hover {
  box-shadow: var(--neo-shadow-raised);
  transform: translateY(-2px);
}

.share-btn:active {
  box-shadow: var(--neo-shadow-inset);
  transform: translateY(0);
}

.share-btn svg {
  width: 18px;
  height: 18px;
}

.share-btn-tg {
  color: #0088cc !important;
}

.share-btn-vk {
  color: #4680C2 !important;
}

.share-btn-wa {
  color: #25D366 !important;
}

.share-btn-copy {
  color: var(--color-gold) !important;
}

/* ==================== */
/* Chapter Navigation   */
/* ==================== */

.chapter-nav {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 16px;
  margin: 48px 0 24px;
  padding-top: 32px;
  border-top: 1px solid var(--border-color);
}

.chapter-nav-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px;
  border-radius: 16px;
  background: var(--neo-bg);
  box-shadow: var(--neo-shadow-soft);
  text-decoration: none;
  transition: all 0.3s ease;
  min-width: 0;
  max-width: 48%;
}

.chapter-nav-link:hover {
  box-shadow: var(--neo-shadow-raised);
  transform: translateY(-2px);
}

.chapter-nav-link-prev {
  align-items: flex-start;
}

.chapter-nav-link-next {
  align-items: flex-end;
  margin-left: auto;
  background: var(--color-gold) !important;
}

.chapter-nav-link-next .chapter-nav-label,
.chapter-nav-link-next .chapter-nav-title {
  color: #fff !important;
}

.chapter-nav-link-next svg {
  stroke: #fff;
}

.chapter-nav-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted) !important;
  display: flex;
  align-items: center;
  gap: 6px;
}

.chapter-nav-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==================== */
/* Table of Contents    */
/* ==================== */

.chapter-toc {
  background: var(--neo-bg);
  box-shadow: var(--neo-shadow-soft);
  border-radius: 16px;
  padding: 20px 24px;
  margin-bottom: 32px;
}

.chapter-toc-title {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted) !important;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.chapter-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chapter-toc-item {
  margin: 0;
}

.chapter-toc-link {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--text-secondary) !important;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.chapter-toc-link:hover {
  background: rgba(140, 126, 92, 0.1);
  color: var(--color-gold) !important;
}

/* ==================== */
/* Chapter Summary      */
/* ==================== */

.chapter-summary {
  background: var(--neo-bg);
  box-shadow: var(--neo-shadow-soft);
  border-radius: 16px;
  padding: 24px;
  margin: 32px 0;
  border-left: 4px solid var(--color-gold);
}

.chapter-summary-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-gold) !important;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.chapter-summary-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.chapter-summary-list li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 12px;
  color: var(--text-secondary) !important;
  font-size: 15px;
  line-height: 1.6;
}

.chapter-summary-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-gold);
  font-weight: bold;
}

.chapter-summary-list li:last-child {
  margin-bottom: 0;
}

/* ==================== */
/* Mobile Responsive    */
/* ==================== */

@media (max-width: 768px) {
  .share-buttons {
    gap: 8px;
  }

  .share-btn {
    padding: 8px 12px;
    font-size: 13px;
  }

  .share-btn span {
    display: none;
  }

  .share-buttons-label {
    width: 100%;
    margin-bottom: 4px;
  }

  .chapter-nav {
    flex-direction: column;
    gap: 12px;
  }

  .chapter-nav-link {
    max-width: 100%;
  }

  .chapter-nav-link-next {
    align-items: flex-start;
  }

  .chapter-toc {
    padding: 16px;
  }

  .chapter-summary {
    padding: 16px;
  }
}