/* ================================================
   DARK MODE STYLES FOR CORKULOUS LIQUID GLASS
   Enhanced dark mode that integrates seamlessly
   with the Liquid Glass design system
   ================================================ */

/* === LEGACY CSS VARIABLES (for compatibility) === */
:root {
  /* Light theme (default) */
  --color-white: #ffffff;
  --color-black: #222222;
  --color-grey: #f7f7fd;
  --color-theme: #ff4f5a;
  --color-body-text: #565c64;
  --color-hr-border: #eceff8;

  /* Headings */
  --color-heading: #132339;
  --color-subheading: #081e39;

  /* Backgrounds */
  --color-bg-soft: #f9fdfa;
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f7f7fd;
  --color-bg-footer: #ffffff;
  --color-bg-header: #ffffff;

  /* Theme colors */
  --color-theme-primary: #ff4f5a;
  --color-theme-secondary: #583bf7;
  --color-theme-green: #19cb55;
  --color-light-blue: #3694f5;
  --color-orange: #ff4f5a;

  /* Additional UI colors */
  --color-border: #eceff8;
  --color-input-bg: #ffffff;
  --color-input-border: #eceff8;
  --color-input-text: #222222;
  --color-card-bg: #ffffff;
  --color-card-shadow: rgba(0, 0, 0, 0.1);

  /* Navigation */
  --color-nav-bg: #ffffff;
  --color-nav-text: #132339;
  --color-nav-hover: #ff4f5a;

  /* Links */
  --color-link: #ff4f5a;
  --color-link-hover: #e63946;

  /* Code blocks */
  --color-code-bg: #f5f5f5;
  --color-code-text: #333333;
}

[data-theme="dark"] {
  /* Dark theme */
  --color-white: #1a1a1a;
  --color-black: #f0f0f0;
  --color-grey: #2a2a2a;
  --color-theme: #ff5f69;
  --color-body-text: #d4d4d8;
  --color-hr-border: #3a3a3a;

  /* Headings */
  --color-heading: #e8e8e8;
  --color-subheading: #d0d0d0;

  /* Backgrounds */
  --color-bg-soft: #1e1e1e;
  --color-bg-primary: #121212;
  --color-bg-secondary: #1a1a1a;
  --color-bg-footer: #0a0a0a;
  --color-bg-header: #1a1a1a;

  /* Theme colors (slightly adjusted for dark mode) */
  --color-theme-primary: #ff5f69;
  --color-theme-secondary: #6b4cff;
  --color-theme-green: #22d863;
  --color-light-blue: #4da3ff;
  --color-orange: #ff5f69;

  /* Additional UI colors */
  --color-border: #3a3a3a;
  --color-input-bg: #2a2a2a;
  --color-input-border: #3a3a3a;
  --color-input-text: #e0e0e0;
  --color-card-bg: #1e1e1e;
  --color-card-shadow: rgba(0, 0, 0, 0.3);

  /* Navigation */
  --color-nav-bg: #1a1a1a;
  --color-nav-text: #e8e8e8;
  --color-nav-hover: #ff5f69;

  /* Links */
  --color-link: #ff5f69;
  --color-link-hover: #ff7a81;

  /* Code blocks */
  --color-code-bg: #2a2a2a;
  --color-code-text: #e0e0e0;
}

/* Apply CSS Variables to Elements */
body {
  background-color: var(--color-bg-primary);
  color: var(--color-body-text);
  transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-heading);
  transition: color 0.3s ease;
}

.header-area {
  background-color: var(--color-bg-header);
  transition: background-color 0.3s ease;
}

.header-area .main-menu ul li a {
  color: var(--color-nav-text);
  transition: color 0.3s ease;
}

.header-area .main-menu ul li a:hover {
  color: var(--color-nav-hover);
}

a {
  color: var(--color-link);
  transition: color 0.3s ease;
}

a:hover {
  color: var(--color-link-hover);
}

.card, .blog-box, .feature-box {
  background-color: var(--color-card-bg);
  box-shadow: 0 2px 10px var(--color-card-shadow);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

input, textarea, select {
  background-color: var(--color-input-bg);
  border-color: var(--color-input-border);
  color: var(--color-input-text);
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

code, pre {
  background-color: var(--color-code-bg);
  color: var(--color-code-text);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Theme Toggle Button */
.theme-toggle-desktop {
  margin-left: 20px;
  margin-right: 20px;
  display: flex;
  align-items: center;
}

.theme-toggle-btn {
  background: transparent;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
  margin: 0;
}

.theme-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.1);
}

.theme-toggle-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 79, 90, 0.2);
}

.theme-toggle-btn i {
  font-size: 20px;
  transition: transform 0.3s ease;
}

/* Moon icon - orange/red theme color */
.theme-toggle-btn .fa-moon {
  color: #ff4f5a;
}

/* Sun icon - yellow/orange */
.theme-toggle-btn .fa-sun {
  color: #ffb700;
}

.theme-toggle-btn:hover i {
  transform: rotate(20deg);
}

/* Dark mode adjustments */
[data-theme="dark"] .theme-toggle-btn .fa-sun {
  color: #ffd700;
  filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.5));
}

[data-theme="dark"] .theme-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Mobile theme toggle */
.mobile-theme-item a {
  color: var(--color-nav-text) !important;
}

.mobile-theme-item a:hover {
  color: var(--color-nav-hover) !important;
}

/* Dark mode specific adjustments */
[data-theme="dark"] .logo img {
  filter: brightness(0.9);
}

[data-theme="dark"] .footer-area {
  background-color: var(--color-bg-footer);
}

[data-theme="dark"] .grey-bg {
  background-color: var(--color-bg-secondary);
}

[data-theme="dark"] .white-bg {
  background-color: var(--color-bg-primary);
}

[data-theme="dark"] hr {
  border-color: var(--color-hr-border);
}

[data-theme="dark"] .border,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-left,
[data-theme="dark"] .border-right {
  border-color: var(--color-border) !important;
}

/* Fix for Bootstrap components in dark mode */
[data-theme="dark"] .btn-primary {
  background-color: var(--color-theme-primary);
  border-color: var(--color-theme-primary);
}

[data-theme="dark"] .btn-primary:hover {
  background-color: var(--color-theme-primary);
  border-color: var(--color-theme-primary);
  opacity: 0.8;
}

[data-theme="dark"] .btn-outline-primary {
  color: var(--color-theme-primary);
  border-color: var(--color-theme-primary);
}

[data-theme="dark"] .btn-outline-primary:hover {
  background-color: var(--color-theme-primary);
  border-color: var(--color-theme-primary);
}

/* Header layout adjustments to match Audit Plus */
.header-area .col-xl-10 {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}

.header-area .main-menu {
  flex: 1;
  margin-left: 50px;
  display: flex;
  align-items: center;
  height: 100%;
}

.header-area .theme-toggle-desktop {
  order: 2;
  margin-left: auto;
  display: flex;
  align-items: center;
}

.header-area .header-btn {
  order: 3;
  margin-left: 20px;
  margin-top: 0 !important;
  display: flex !important;
  align-items: center;
}

/* Remove any default margins that might affect alignment */
.header-area .main-menu ul {
  margin-bottom: 0;
  display: flex;
  align-items: center;
  height: 100%;
}

.header-area .main-menu ul li {
  display: flex;
  align-items: center;
}

.header-area .header-btn .btn {
  margin: 0;
}

/* Ensure proper alignment on medium screens */
@media (max-width: 1199px) and (min-width: 768px) {
  .header-area .main-menu {
    margin-left: 20px;
  }
}

/* Download Button Styling for better visibility */
.header-btn .btn {
  background: #19cb55;
  color: #fff;
  padding: 8px 25px;
  border-radius: 50px;
  font-weight: 600;
  border: 2px solid transparent;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 1.5;
  vertical-align: middle;
  height: 40px;
}

.header-btn .btn:hover {
  background: transparent;
  border-color: #19cb55;
  color: #19cb55;
}

.header-btn .btn i {
  margin-right: 8px;
  font-size: 16px;
}

/* Dark mode download button */
[data-theme="dark"] .header-btn .btn {
  background: #22d863;
  color: #fff;
  border-color: transparent;
}

[data-theme="dark"] .header-btn .btn:hover {
  background: transparent;
  border-color: #22d863;
  color: #22d863;
}

/* Ensure button is always visible */
.header-btn {
  display: flex !important;
  align-items: center;
}

/* Smooth transition for theme switching */
* {
  transition-property: none !important;
}

.theme-transition,
.theme-transition *,
.theme-transition *:before,
.theme-transition *:after {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
  transition-delay: 0s !important;
}

/* Additional Dark Mode Styles for Corkulous Pages */

/* Page sections */
[data-theme="dark"] .page__title {
  background-color: var(--color-bg-secondary);
}

[data-theme="dark"] .experience_area {
  background-color: var(--color-bg-primary);
  color: var(--color-body-text);
}

/* Blog sections */
[data-theme="dark"] .blog3 {
  background-color: var(--color-bg-primary);
}

[data-theme="dark"] .section_title_wrapper h2,
[data-theme="dark"] .section-title,
[data-theme="dark"] .team_title_h3 {
  color: var(--color-heading);
}

[data-theme="dark"] .blog {
  background-color: var(--color-card-bg);
  border: 1px solid var(--color-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .blog__meta {
  background-color: var(--color-card-bg);
}

[data-theme="dark"] .blog__meta span {
  color: #9a9a9a;
}

[data-theme="dark"] .blog__meta h3 {
  color: var(--color-heading);
}

[data-theme="dark"] .blog__image {
  background-color: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
}

/* Admin tables */
[data-theme="dark"] .admin-table {
  background-color: var(--color-bg-secondary);
  border-color: var(--color-border);
  color: var(--color-body-text);
}

[data-theme="dark"] .admin-table-header {
  background-color: var(--color-bg-secondary);
  color: var(--color-heading);
  border-color: var(--color-border);
}

[data-theme="dark"] .admin-table-header a {
  color: var(--color-link);
}

[data-theme="dark"] .admin-table-header a:hover {
  color: var(--color-link-hover);
}

[data-theme="dark"] .admin-table-row {
  background-color: var(--color-card-bg);
  color: var(--color-body-text);
  border-color: var(--color-border);
}

[data-theme="dark"] .admin-table-row:hover {
  background-color: var(--color-bg-secondary);
}

[data-theme="dark"] .admin-table-footer {
  background-color: var(--color-bg-secondary);
  color: var(--color-body-text);
  border-color: var(--color-border);
}

[data-theme="dark"] .subtitle {
  color: var(--color-heading);
}

/* Blog classic area */
[data-theme="dark"] .blog-classic {
  background-color: var(--color-bg-primary);
}

[data-theme="dark"] .blog-wrapper,
[data-theme="dark"] .blog-box {
  background-color: var(--color-card-bg);
  border-color: var(--color-border);
}

[data-theme="dark"] .blog_classic_content {
  color: var(--color-body-text);
}

[data-theme="dark"] .blog_classic_content h3 {
  color: var(--color-heading);
}

[data-theme="dark"] .category_widget {
  background-color: var(--color-card-bg);
  border: 1px solid var(--color-border);
  padding: 20px;
  border-radius: 8px;
}

[data-theme="dark"] .category_widget h4 {
  color: var(--color-heading);
}

[data-theme="dark"] .category_widget a {
  color: var(--color-link);
}

[data-theme="dark"] .category_widget a:hover {
  color: var(--color-link-hover);
}

/* Sidebar */
[data-theme="dark"] .sidebar {
  background-color: var(--color-bg-primary);
}

[data-theme="dark"] .others_info {
  background-color: var(--color-card-bg);
  border: 1px solid var(--color-border);
  padding: 20px;
  border-radius: 8px;
}

/* Contact form */
[data-theme="dark"] .contact__wrapper {
  background-color: var(--color-bg-primary);
}

[data-theme="dark"] .basic-login {
  background-color: var(--color-card-bg);
  padding: 40px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
}

[data-theme="dark"] .alert-primary {
  background-color: var(--color-bg-secondary);
  border-color: var(--color-border);
  color: var(--color-body-text);
}

[data-theme="dark"] .alert-primary a {
  color: var(--color-theme-primary) !important;
}

/* Forms - Enhanced for dark mode */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background-color: var(--color-input-bg) !important;
  border: 1px solid var(--color-input-border) !important;
  color: var(--color-input-text) !important;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] input[type="text"]:focus,
[data-theme="dark"] input[type="email"]:focus,
[data-theme="dark"] input[type="password"]:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
  background-color: #3a3a3a !important;
  border-color: var(--color-theme-primary) !important;
  box-shadow: 0 0 0 2px rgba(255, 79, 90, 0.2);
}

[data-theme="dark"] label {
  color: var(--color-body-text) !important;
}

[data-theme="dark"] .form-select option {
  background-color: var(--color-input-bg);
  color: var(--color-input-text);
}

/* Invalid feedback */
[data-theme="dark"] .invalid-feedback {
  color: #ff6b6b;
}

/* Buttons in dark mode */
[data-theme="dark"] .bt-btn,
[data-theme="dark"] .theme-btn-2 {
  background-color: var(--color-theme-primary);
  border-color: var(--color-theme-primary);
  color: #ffffff;
}

[data-theme="dark"] .bt-btn:hover,
[data-theme="dark"] .theme-btn-2:hover {
  background-color: transparent;
  border-color: var(--color-theme-primary);
  color: var(--color-theme-primary);
}

/* CAPTCHA area */
[data-theme="dark"] img#captcha {
  border: 2px solid var(--color-border);
  border-radius: 4px;
}

/* Links in dark mode content */
[data-theme="dark"] .experience_area a,
[data-theme="dark"] .blog_classic_content a {
  color: var(--color-link);
}

[data-theme="dark"] .experience_area a:hover,
[data-theme="dark"] .blog_classic_content a:hover {
  color: var(--color-link-hover);
}

/* Modal content in dark mode */
[data-theme="dark"] .modal-content {
  background-color: var(--color-card-bg);
  border-color: var(--color-border);
  color: var(--color-body-text);
}

[data-theme="dark"] .modal-header {
  background-color: var(--color-bg-secondary);
  border-bottom-color: var(--color-border);
}

[data-theme="dark"] .modal-header .modal-title {
  color: var(--color-heading);
}

[data-theme="dark"] .modal-header .close {
  color: var(--color-body-text);
  opacity: 0.8;
}

[data-theme="dark"] .modal-header .close:hover {
  opacity: 1;
}

[data-theme="dark"] .modal-body {
  background-color: var(--color-card-bg);
  color: var(--color-body-text);
}

[data-theme="dark"] .modal-body a {
  color: var(--color-link);
}

[data-theme="dark"] .modal-body a:hover {
  color: var(--color-link-hover);
}

/* Slider/Hero section text */
[data-theme="dark"] .slider_2 {
  background-color: #0a1929 !important;
  position: relative;
}

[data-theme="dark"] .slider_2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

[data-theme="dark"] .slider_2 .container {
  position: relative;
  z-index: 1;
}

/* Ensure slider text is always white */
.slider_2 h2,
.slider_2 h3 {
  color: white !important;
}

/* Article pages */
[data-theme="dark"] .experience_area {
  background-color: var(--color-bg-primary);
}

[data-theme="dark"] .experience_area > div {
  color: var(--color-body-text);
}

/* Inline styles override for dark mode */
[data-theme="dark"] div[style*="font-family:Trebuchet MS"] {
  color: var(--color-body-text) !important;
}

/* Next/Previous navigation */
[data-theme="dark"] .blog_classic_content > div[style*="float"] {
  color: var(--color-body-text);
}

/* TOC button in dark mode */
[data-theme="dark"] button[data-bs-toggle="modal"] {
  background-color: var(--color-theme-primary) !important;
  border-color: var(--color-theme-primary) !important;
  color: #ffffff !important;
}

[data-theme="dark"] button[data-bs-toggle="modal"]:hover {
  background-color: transparent !important;
  border-color: var(--color-theme-primary) !important;
  color: var(--color-theme-primary) !important;
}

/* Google Custom Search in dark mode */
[data-theme="dark"] .gcse-search,
[data-theme="dark"] .gsc-control-cse {
  background-color: transparent !important;
}

[data-theme="dark"] .gsc-search-box,
[data-theme="dark"] .gsc-input-box {
  background-color: var(--color-input-bg) !important;
  border-color: var(--color-input-border) !important;
}

[data-theme="dark"] .gsc-input {
  background-color: var(--color-input-bg) !important;
  color: var(--color-input-text) !important;
}

[data-theme="dark"] .gsc-search-button {
  background-color: var(--color-theme-primary) !important;
  border-color: var(--color-theme-primary) !important;
}

[data-theme="dark"] .gsc-results-wrapper-visible {
  background-color: var(--color-card-bg) !important;
  border-color: var(--color-border) !important;
}

/* Fix white backgrounds */
[data-theme="dark"] .white-bg {
  background-color: var(--color-bg-primary) !important;
}

[data-theme="dark"] .grey-bg {
  background-color: var(--color-bg-secondary) !important;
}

/* Blog page (uppercase BLOG class) */
[data-theme="dark"] .BLOG {
  background-color: var(--color-bg-primary);
}

[data-theme="dark"] .BLOG .blog {
  background-color: var(--color-card-bg);
  border: 1px solid var(--color-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .BLOG .blog__meta {
  background-color: var(--color-card-bg);
}

[data-theme="dark"] .BLOG .blog__meta span {
  color: #9a9a9a;
}

[data-theme="dark"] .BLOG .blog__meta h3 {
  color: var(--color-heading);
}

/* Pagination */
[data-theme="dark"] .paginati ul li a {
  background-color: var(--color-bg-secondary);
  border-color: var(--color-border);
  color: var(--color-body-text);
}

[data-theme="dark"] .paginati ul li a:hover,
[data-theme="dark"] .paginati ul li.active a {
  background-color: var(--color-theme-primary);
  border-color: var(--color-theme-primary);
  color: #ffffff;
}

/* Success page - ensure text is visible in both modes */
.page__title h3[style*="color:white"] {
  color: var(--color-heading) !important;
}

/* Light mode specific - keep white on blue background */
html:not([data-theme="dark"]) .page__title h3[style*="color:white"] {
  color: white !important;
}

/* Side info/mobile menu dark mode */
[data-theme="dark"] .side-info {
  background-color: var(--color-bg-secondary);
  color: var(--color-body-text);
}

[data-theme="dark"] .side-info-content {
  background-color: var(--color-bg-secondary);
}

[data-theme="dark"] .side-info-close {
  color: var(--color-body-text);
  background: transparent;
  border: none;
}

[data-theme="dark"] .side-info-close:hover {
  color: var(--color-theme-primary);
}

/* Offcanvas overlay */
[data-theme="dark"] .offcanvas-overlay {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Fix inline styles in showCategory.php */
[data-theme="dark"] .blog_classic_content span[style*="font-weight:bold"] {
  color: var(--color-body-text) !important;
}

[data-theme="dark"] .blog_classic_content > span {
  color: var(--color-body-text) !important;
}

/* Category content that might come from database */
[data-theme="dark"] .blog_classic_content p,
[data-theme="dark"] .blog_classic_content div,
[data-theme="dark"] .blog_classic_content span,
[data-theme="dark"] .blog_classic_content ul,
[data-theme="dark"] .blog_classic_content ol,
[data-theme="dark"] .blog_classic_content li {
  color: var(--color-body-text) !important;
}

/* Ensure breadcrumb is visible */
[data-theme="dark"] .blog_classic_content > span:first-of-type {
  color: var(--color-body-text) !important;
}

/* Category abstract */
[data-theme="dark"] .blog_classic_content > span[style*="font-size:14px"] {
  color: var(--color-body-text) !important;
}

/* Any nested content from category description */
[data-theme="dark"] .blog_classic_content * {
  color: inherit;
}

/* Override any hardcoded black colors */
[data-theme="dark"] .blog_classic_content *[style*="color: black"],
[data-theme="dark"] .blog_classic_content *[style*="color:#000"],
[data-theme="dark"] .blog_classic_content *[style*="color: #000000"],
[data-theme="dark"] .blog_classic_content *[style*="color:black"],
[data-theme="dark"] .blog_classic_content *[style*="color:#000000"] {
  color: var(--color-body-text) !important;
}

/* Fix Next navigation link container */
[data-theme="dark"] .blog_classic_content > div[style*="float: right"] {
  color: var(--color-body-text) !important;
}

[data-theme="dark"] .blog_classic_content > div[style*="float: left"] {
  color: var(--color-body-text) !important;
}

/* Enhanced readability for page.php and experience_area content */
[data-theme="dark"] .experience_area {
  font-weight: 400;
}

[data-theme="dark"] .experience_area p,
[data-theme="dark"] .experience_area div,
[data-theme="dark"] .experience_area span,
[data-theme="dark"] .experience_area li {
  color: var(--color-body-text);
  line-height: 1.7;
}

[data-theme="dark"] .experience_area h1,
[data-theme="dark"] .experience_area h2,
[data-theme="dark"] .experience_area h3,
[data-theme="dark"] .experience_area h4,
[data-theme="dark"] .experience_area h5,
[data-theme="dark"] .experience_area h6 {
  color: var(--color-heading);
  font-weight: 600;
}

/* Improve contrast for any nested content */
[data-theme="dark"] .experience_area strong,
[data-theme="dark"] .experience_area b {
  color: #e8e8e8;
  font-weight: 600;
}

/* Lists in experience area */
[data-theme="dark"] .experience_area ul li,
[data-theme="dark"] .experience_area ol li {
  color: var(--color-body-text);
}

/* Override any dim colors from database content */
[data-theme="dark"] .experience_area *[style*="color: #666"],
[data-theme="dark"] .experience_area *[style*="color: #777"],
[data-theme="dark"] .experience_area *[style*="color: #888"],
[data-theme="dark"] .experience_area *[style*="color: #999"] {
  color: var(--color-body-text) !important;
}