/* מערכת מצב כהה מותאמת ויעילה */

:root {
  /* Dark Mode Color System */
  --dark-bg-primary: #0f172a;
  --dark-bg-secondary: #1e293b;
  --dark-bg-card: #334155;
  --dark-bg-input: #0f172a;

  /* Text Colors */
  --dark-text-primary: #f8fafc;
  --dark-text-secondary: #cbd5e1;
  --dark-text-muted: #94a3b8;

  /* Interactive Colors */
  --dark-primary: #60a5fa;
  --dark-primary-light: #79c0ff;
  --dark-accent: #a78bfa;
  --dark-link: #58a6ff;
  --dark-link-hover: #79c0ff;

  /* State Colors */
  --dark-success: #2ea043;
  --dark-danger: #f85149;
  --dark-warning: #d29922;
  --dark-info: #1f6feb;

  /* Borders & Effects */
  --dark-border: #475569;
  --dark-border-light: #484f58;
  --dark-hover: #262c36;
  --dark-active: #388bfd26;

  /* Gradients */
  --dark-gradient-primary: linear-gradient(135deg, #58a6ff 0%, #1f6feb 100%);
  --dark-gradient-success: linear-gradient(135deg, #2ea043 0%, #059669 100%);
  --dark-gradient-danger: linear-gradient(135deg, #f85149 0%, #dc2626 100%);
  --dark-gradient-warning: linear-gradient(135deg, #d29922 0%, #d97706 100%);
  --dark-gradient-info: linear-gradient(135deg, #1f6feb 0%, #0891b2 100%);

  /* Shadows */
  --dark-shadow: rgba(1, 4, 9, 0.8);
  --dark-shadow-light: rgba(1, 4, 9, 0.4);
}

/* ===== BASE DARK MODE STYLES ===== */
body.dark-mode {
  background-color: var(--dark-bg-primary) !important;
  color: var(--dark-text-primary) !important;
  transition: all 0.3s ease;
}

body.dark-mode * {
  transition: background-color 0.3s ease, color 0.3s ease,
    border-color 0.3s ease;
}

/* ===== TYPOGRAPHY ===== */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
  color: var(--dark-text-primary) !important;
}

body.dark-mode .text-muted {
  color: var(--dark-text-muted) !important;
}

body.dark-mode .lead {
  color: var(--dark-text-secondary) !important;
}

body.dark-mode .text-dark {
  color: var(--dark-text-primary) !important;
}

body.dark-mode .text-secondary {
  color: var(--dark-text-secondary) !important;
}

/* ===== LINKS ===== */
body.dark-mode a {
  /* color: var(--dark-link) !important; */
}

body.dark-mode a:hover {
  /* color: var(--dark-link-hover) !important; */
}

/* ===== CARDS & CONTAINERS ===== */
body.dark-mode .card,
body.dark-mode .card-body,
body.dark-mode .card-footer,
body.dark-mode .card-header,
body.dark-mode .post-card,
body.dark-mode .post-card-enhanced,
body.dark-mode .post-content,
body.dark-mode .post-content-enhanced {
  background-color: var(--dark-bg-card) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text-primary) !important;
}

body.dark-mode .card-title {
  color: var(--dark-text-primary) !important;
}

body.dark-mode .card-text {
  color: var(--dark-text-secondary) !important;
}

/* ===== NAVIGATION ===== */
body.dark-mode .navbar {
  background-color: var(--dark-bg-secondary) !important;
  border-bottom: 1px solid var(--dark-border);
}

body.dark-mode .navbar-brand,
body.dark-mode .nav-link,
body.dark-mode .navbar-nav .nav-link {
  color: var(--dark-text-primary) !important;
}

body.dark-mode .nav-link:hover {
  color: var(--dark-primary-light) !important;
}

body.dark-mode .navbar-toggler {
  border-color: var(--dark-border);
}

body.dark-mode .navbar-toggler-icon {
  filter: invert(1);
}

/* ===== BUTTONS ===== */
body.dark-mode .btn-primary {
  background: var(--dark-gradient-primary) !important;
  border-color: var(--dark-primary) !important;
  color: white !important;
}

body.dark-mode .btn-primary:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%) !important;
  border-color: var(--dark-primary-light) !important;
}

body.dark-mode .btn-secondary {
  background-color: var(--dark-bg-secondary) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text-primary) !important;
}

body.dark-mode .btn-success {
  background: var(--dark-gradient-success) !important;
  border-color: var(--dark-success) !important;
}

body.dark-mode .btn-success:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
}

/* Outline Buttons */
body.dark-mode .btn-outline-primary {
  color: var(--dark-primary-light) !important;
  border-color: var(--dark-primary-light) !important;
  background-color: transparent !important;
}

body.dark-mode .btn-outline-primary:hover {
  background-color: var(--dark-primary) !important;
  border-color: var(--dark-primary) !important;
  color: white !important;
}

body.dark-mode .btn-outline-secondary {
  color: var(--dark-text-secondary) !important;
  border-color: var(--dark-border) !important;
  background-color: transparent !important;
}

body.dark-mode .btn-outline-secondary:hover {
  background-color: var(--dark-hover) !important;
  border-color: var(--dark-border-light) !important;
  color: var(--dark-text-primary) !important;
}

body.dark-mode .btn-outline-success {
  color: var(--dark-success) !important;
  border-color: var(--dark-success) !important;
}

body.dark-mode .btn-outline-success:hover {
  background-color: var(--dark-success) !important;
  color: white !important;
}

body.dark-mode .btn-outline-danger {
  color: var(--dark-danger) !important;
  border-color: var(--dark-danger) !important;
}

body.dark-mode .btn-outline-danger:hover {
  background-color: var(--dark-danger) !important;
  color: white !important;
}

body.dark-mode .btn-outline-warning {
  color: var(--dark-warning) !important;
  border-color: var(--dark-warning) !important;
}

body.dark-mode .btn-outline-warning:hover {
  background-color: var(--dark-warning) !important;
  color: white !important;
}

body.dark-mode .btn-outline-info {
  color: var(--dark-info) !important;
  border-color: var(--dark-info) !important;
}

body.dark-mode .btn-outline-info:hover {
  background-color: var(--dark-info) !important;
  color: white !important;
}

/* ===== FORMS ===== */
body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode input[type="number"],
body.dark-mode input[type="url"],
body.dark-mode input[type="color"],
body.dark-mode textarea,
body.dark-mode select {
  background-color: var(--dark-bg-input) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text-primary) !important;
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus,
body.dark-mode input:focus,
body.dark-mode textarea:focus {
  background-color: var(--dark-bg-card) !important;
  border-color: var(--dark-primary) !important;
  color: var(--dark-text-primary) !important;
  box-shadow: 0 0 0 0.25rem rgba(88, 166, 255, 0.25) !important;
}

body.dark-mode .form-control::placeholder,
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: var(--dark-text-muted) !important;
}

body.dark-mode .form-label {
  color: var(--dark-text-primary) !important;
}

body.dark-mode .form-text {
  color: var(--dark-text-muted) !important;
}

body.dark-mode .form-check-input {
  background-color: var(--dark-bg-input) !important;
  border-color: var(--dark-border) !important;
}

body.dark-mode .form-check-input:checked {
  background-color: var(--dark-primary) !important;
  border-color: var(--dark-primary) !important;
}

body.dark-mode .form-check-label {
  color: var(--dark-text-primary) !important;
}

/* ===== TABLES ===== */
body.dark-mode .table,
body.dark-mode .table th,
body.dark-mode .table td {
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-border) !important;
}

body.dark-mode .table thead th {
  background-color: var(--dark-bg-secondary) !important;
  color: var(--dark-text-primary) !important;
}

body.dark-mode .table-hover tbody tr:hover {
  background-color: var(--dark-hover) !important;
  color: var(--dark-text-primary) !important;
}

body.dark-mode .table tbody tr:nth-child(even),
body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--dark-bg-secondary) !important;
}

/* ===== ALERTS ===== */
body.dark-mode .alert {
  border-color: var(--dark-border) !important;
}

body.dark-mode .alert-success {
  background-color: rgba(46, 160, 67, 0.2) !important;
  color: var(--dark-success) !important;
  border-color: rgba(46, 160, 67, 0.3) !important;
}

body.dark-mode .alert-danger {
  background-color: rgba(248, 81, 73, 0.2) !important;
  color: var(--dark-danger) !important;
  border-color: rgba(248, 81, 73, 0.3) !important;
}

body.dark-mode .alert-warning {
  background-color: rgba(210, 153, 34, 0.2) !important;
  color: var(--dark-warning) !important;
  border-color: rgba(210, 153, 34, 0.3) !important;
}

body.dark-mode .alert-info {
  background-color: rgba(31, 111, 235, 0.2) !important;
  color: var(--dark-info) !important;
  border-color: rgba(31, 111, 235, 0.3) !important;
}

body.dark-mode .alert-light {
  background-color: var(--dark-bg-secondary) !important;
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-border) !important;
}

body.dark-mode .alert-dark {
  background-color: var(--dark-bg-card) !important;
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-border) !important;
}

/* ===== MODALS ===== */
body.dark-mode .modal-content {
  background-color: var(--dark-bg-card) !important;
  border-color: var(--dark-border) !important;
}

body.dark-mode .modal-header,
body.dark-mode .modal-footer {
  background-color: var(--dark-bg-secondary) !important;
  border-color: var(--dark-border) !important;
}

body.dark-mode .modal-title {
  color: var(--dark-text-primary) !important;
}

body.dark-mode .btn-close {
  filter: invert(1);
}

/* ===== DROPDOWN ===== */
body.dark-mode .dropdown-menu {
  background-color: var(--dark-bg-card) !important;
  border-color: var(--dark-border) !important;
}

body.dark-mode .dropdown-item {
  color: var(--dark-text-primary) !important;
}

body.dark-mode .dropdown-item:hover {
  background-color: var(--dark-hover) !important;
  color: var(--dark-text-primary) !important;
}

body.dark-mode .dropdown-divider {
  border-color: var(--dark-border) !important;
}

/* ===== FOOTER ===== */
body.dark-mode footer {
  background-color: var(--dark-bg-secondary) !important;
  color: var(--dark-text-primary) !important;
  border-top: 1px solid var(--dark-border);
}

/* ===== LIST GROUPS ===== */
body.dark-mode .list-group-item {
  background-color: var(--dark-bg-card) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text-primary) !important;
}

body.dark-mode .list-group-item:hover {
  background-color: var(--dark-hover) !important;
}

body.dark-mode .list-group-item.active {
  background: var(--dark-gradient-primary) !important;
  border-color: var(--dark-primary) !important;
}

/* ===== BADGES ===== */
body.dark-mode .badge {
  background-color: var(--dark-bg-secondary) !important;
  color: var(--dark-text-primary) !important;
}

body.dark-mode .badge.bg-primary {
  background: var(--dark-gradient-primary) !important;
}

body.dark-mode .badge.bg-success {
  background-color: var(--dark-success) !important;
}

body.dark-mode .badge.bg-danger {
  background-color: var(--dark-danger) !important;
}

body.dark-mode .badge.bg-warning {
  background-color: var(--dark-warning) !important;
}

body.dark-mode .badge.bg-info {
  background-color: var(--dark-info) !important;
}

body.dark-mode .badge.bg-light {
  background-color: var(--dark-bg-secondary) !important;
  color: var(--dark-text-primary) !important;
}

body.dark-mode .badge.bg-dark {
  background-color: var(--dark-bg-primary) !important;
  color: var(--dark-text-primary) !important;
}

/* ===== PROGRESS & UTILITIES ===== */
body.dark-mode .progress {
  background-color: var(--dark-bg-secondary) !important;
}

body.dark-mode .progress-bar {
  background: var(--dark-gradient-primary) !important;
}

body.dark-mode mark,
body.dark-mode .mark {
  background-color: rgba(210, 153, 34, 0.3) !important;
  color: var(--dark-text-primary) !important;
}

/* ===== BACKGROUND UTILITIES ===== */
body.dark-mode .bg-white {
  background-color: var(--dark-bg-card) !important;
}

body.dark-mode .bg-light {
  background-color: var(--dark-bg-secondary) !important;
}

body.dark-mode .bg-primary {
  background: var(--dark-gradient-primary) !important;
}

body.dark-mode .bg-success {
  background: var(--dark-gradient-success) !important;
}

body.dark-mode .bg-danger {
  background: var(--dark-gradient-danger) !important;
}

body.dark-mode .bg-warning {
  background: var(--dark-gradient-warning) !important;
}

body.dark-mode .bg-info {
  background: var(--dark-gradient-info) !important;
}

body.dark-mode .bg-transparent {
  background-color: transparent !important;
}

/* ===== TEXT UTILITIES ===== */
body.dark-mode .text-primary {
  color: var(--dark-primary-light) !important;
}

body.dark-mode .text-success {
  color: var(--dark-success) !important;
}

body.dark-mode .text-danger {
  color: var(--dark-danger) !important;
}

body.dark-mode .text-warning {
  color: var(--dark-warning) !important;
}

body.dark-mode .text-info {
  color: var(--dark-info) !important;
}

body.dark-mode .text-light {
  color: var(--dark-text-secondary) !important;
}

/* ===== BORDER UTILITIES ===== */
body.dark-mode .border,
body.dark-mode .border-top,
body.dark-mode .border-bottom,
body.dark-mode .border-start,
body.dark-mode .border-end {
  border-color: var(--dark-border) !important;
}

/* ===== BREADCRUMB ===== */
body.dark-mode .breadcrumb {
  background-color: transparent !important;
}

body.dark-mode .breadcrumb-item a {
  color: var(--dark-link) !important;
}

body.dark-mode .breadcrumb-item.active {
  color: var(--dark-text-muted) !important;
}

/* ===== INPUT GROUP ===== */
body.dark-mode .input-group-text {
  background-color: var(--dark-bg-secondary) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text-primary) !important;
}

/* ===== TAGS ===== */
body.dark-mode .tag-badge,
body.dark-mode .tag-enhanced,
body.dark-mode .post-tag {
  background-color: var(--dark-bg-secondary) !important;
  border-color: var(--dark-border) !important;
}

/* ===== SCROLLBARS ===== */
body.dark-mode ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

body.dark-mode ::-webkit-scrollbar-track {
  background: var(--dark-bg-secondary);
}

body.dark-mode ::-webkit-scrollbar-thumb {
  background: var(--dark-primary);
  border-radius: 4px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: var(--dark-primary-light);
}

/* ===== ADVANCED EDITOR ===== */
body.dark-mode .advanced-editor-container {
  border-color: var(--dark-border) !important;
  background-color: var(--dark-bg-card) !important;
}

body.dark-mode .advanced-editor-toolbar {
  background-color: var(--dark-bg-secondary) !important;
  border-color: var(--dark-border) !important;
}

body.dark-mode .advanced-editor-toolbar button {
  color: var(--dark-text-primary) !important;
}

body.dark-mode .advanced-editor-toolbar button:hover,
body.dark-mode .advanced-editor-toolbar button.active {
  background-color: var(--dark-hover) !important;
  border-color: var(--dark-border-light) !important;
}

body.dark-mode .advanced-editor-content {
  background-color: var(--dark-bg-input) !important;
  color: var(--dark-text-primary) !important;
}

body.dark-mode .editor-dialog {
  background-color: var(--dark-bg-card) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text-primary) !important;
}

body.dark-mode .editor-dialog input,
body.dark-mode .editor-dialog textarea,
body.dark-mode .editor-dialog select {
  background-color: var(--dark-bg-secondary) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text-primary) !important;
}

body.dark-mode .editor-dialog button.primary {
  background: var(--dark-gradient-primary) !important;
  color: white !important;
  border-color: var(--dark-primary) !important;
}

body.dark-mode .editor-dropzone {
  background: linear-gradient(
    145deg,
    rgba(13, 17, 23, 0.95) 0%,
    rgba(22, 27, 34, 0.9) 100%
  ) !important;
  border-color: var(--dark-primary) !important;
  color: var(--dark-text-primary) !important;
}

body.dark-mode .editor-dropzone.active {
  background: linear-gradient(
    145deg,
    rgba(88, 166, 255, 0.3) 0%,
    rgba(121, 192, 255, 0.2) 100%
  ) !important;
  border-color: var(--dark-primary-light) !important;
}

/* ===== ADMIN STYLES ===== */
body.dark-mode.admin-body {
  background-color: var(--dark-bg-primary) !important;
}

/* ===== POST CONTENT ===== */
body.dark-mode .post-content h1,
body.dark-mode .post-content h2,
body.dark-mode .post-content h3,
body.dark-mode .post-content h4,
body.dark-mode .post-content h5,
body.dark-mode .post-content h6 {
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-border) !important;
}

body.dark-mode .post-content blockquote {
  background-color: var(--dark-bg-secondary) !important;
  border-color: var(--dark-primary) !important;
  color: var(--dark-text-secondary) !important;
}

body.dark-mode .post-content code {
  background-color: var(--dark-bg-secondary) !important;
  color: var(--dark-primary-light) !important;
  border-color: var(--dark-border) !important;
}

body.dark-mode .post-content pre {
  background-color: var(--dark-bg-primary) !important;
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-border) !important;
}

/* Dark mode syntax highlighting */
body.dark-mode .post-content pre .keyword {
  color: #ff7b72;
}

body.dark-mode .post-content pre .string {
  color: #a5d6ff;
}

body.dark-mode .post-content pre .comment {
  color: #8b949e;
}

body.dark-mode .post-content pre .function {
  color: #d2a8ff;
}

body.dark-mode .post-content pre .number {
  color: #79c0ff;
}

/* ===== DARK MODE TOGGLE ===== */
.dark-mode-toggle {
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

body.dark-mode .dark-mode-toggle {
  background-color: var(--dark-bg-card) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text-primary) !important;
}

body.dark-mode .dark-mode-toggle:hover {
  background-color: var(--dark-hover) !important;
  border-color: var(--dark-primary) !important;
  box-shadow: 0 0 10px rgba(88, 166, 255, 0.3);
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 768px) {
  body.dark-mode .card {
    box-shadow: 0 1px 10px var(--dark-shadow-light);
  }

  body.dark-mode .modal-content {
    margin: 0.5rem;
  }
}

/* ===== PRINT STYLES ===== */
@media print {
  body.dark-mode {
    background: white !important;
    color: black !important;
  }

  body.dark-mode * {
    background: white !important;
    color: black !important;
    border-color: #ccc !important;
    box-shadow: none !important;
  }
}