/* ============================================
   NEXiiO — Dark Style — Elegant
   Loaded after style.css — overrides via [data-theme="dark"]
   Also auto via prefers-color-scheme when no user choice
   ============================================ */

/* Dark tokens — applied when html[data-theme="dark"] */
[data-theme="dark"] {
  --bg: #0F1115;
  --bg-2: #15181C;
  --surface: #1A1D22;
  --surface-soft: #1E2127;
  --surface-muted: #242830;
  --ink: #F0F2F5;
  --ink-2: #C8CDD5;
  --muted: #9AA0A8;
  --muted-2: #7A808A;
  --line: rgba(255,255,255,.08);
  --line-strong: rgba(255,255,255,.12);
  --line-accent: rgba(255,107,46,.28);
  --accent-soft: rgba(255,107,46,.14);
  --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3);
  --shadow-md: 0 4px 20px rgba(0,0,0,.35), 0 12px 32px rgba(0,0,0,.25);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.5), 0 32px 64px rgba(0,0,0,.35);
  --footer-bg: #070A0E;
  --footer-bg-2: #0A0D11;
}

/* Smooth transition when toggling */
html { transition: background-color 360ms var(--ease-out), color 360ms var(--ease-out); }
body, .site-header, .portfolio-card, .product-box, .blog-list, .filters,
.portfolio-filter-wrapper, .portfolio-detail-sidebar, .product-detail,
.contact-form, .site-footer { transition: background-color 320ms var(--ease-out), border-color 320ms var(--ease-out), color 320ms var(--ease-out), box-shadow 320ms var(--ease-out); }

/* Auto dark when user has not chosen and OS prefers dark */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg: #0F1115;
    --bg-2: #15181C;
    --surface: #1A1D22;
    --surface-soft: #1E2127;
    --surface-muted: #242830;
    --ink: #F0F2F5;
    --ink-2: #C8CDD5;
    --muted: #9AA0A8;
    --muted-2: #7A808A;
    --line: rgba(255,255,255,.08);
    --line-strong: rgba(255,255,255,.12);
    --line-accent: rgba(255,107,46,.28);
    --accent-soft: rgba(255,107,46,.14);
    --footer-bg: #070A0E;
    --footer-bg-2: #0A0D11;
  }
}

/* Header glass in dark */
[data-theme="dark"] .site-header,
[data-theme="dark"] header,
html:not([data-theme="light"]):not([data-theme="dark"]) .site-header,
html:not([data-theme="light"]):not([data-theme="dark"]) header {
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]):not([data-theme="dark"]) .site-header,
  html:not([data-theme="light"]):not([data-theme="dark"]) header {
    background: rgba(15,17,21,.78);
    border-color: var(--line);
  }
}
[data-theme="dark"] .site-header,
[data-theme="dark"] header {
  background: rgba(15,17,21,.85) !important;
  border-color: var(--line) !important;
}
[data-theme="dark"] .site-header.is-scrolled,
[data-theme="dark"] header.set-bg {
  background: rgba(18,20,26,.92) !important;
  border-color: var(--line-strong) !important;
  box-shadow: 0 1px 0 var(--line), 0 8px 24px rgba(0,0,0,.35) !important;
}
[data-theme="dark"] .logo {
  filter: brightness(0) invert(1);
}
[data-theme="dark"] .main-nav li a { color: var(--ink-2); }
[data-theme="dark"] .main-nav li a:hover { background: var(--surface-soft); color: var(--ink); }
[data-theme="dark"] .main-nav .sub-menu { background: var(--surface); border-color: var(--line); }
[data-theme="dark"] .phone-pill { background: var(--surface-soft); color: var(--ink); border:1px solid var(--line); }
[data-theme="dark"] .phone-pill:hover { background: var(--surface-muted); }
[data-theme="dark"] .nav-toggle { background: var(--surface-soft); border-color: var(--line); color: var(--ink); }

/* Cards — keep product image white for readability even in dark */
[data-theme="dark"] .product-box img { background: #fff; }
[data-theme="dark"] .gallery-top { background: var(--surface-soft); border-color: var(--line); }
[data-theme="dark"] .product-detail-image { background: var(--surface-soft); border-color: var(--line); }
[data-theme="dark"] .portfolio-card-banner { background: var(--surface-soft); }

/* Mobile nav dark */
@media (max-width: 1199px) {
  [data-theme="dark"] .main-nav,
  html:not([data-theme="light"]):not([data-theme="dark"]) .main-nav {
  }
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]):not([data-theme="dark"]) .main-nav {
    background: rgba(26,29,34,.96);
    border-color: var(--line);
  }
}
[data-theme="dark"] .main-nav {
  background: rgba(26,29,34,.97) !important;
  border-color: var(--line) !important;
}
[data-theme="dark"] .main-nav li a { color: var(--ink-2); }
[data-theme="dark"] .main-nav .sub-menu { background: var(--surface-muted) !important; }

/* Footer already dark — slightly deeper in dark mode, no change needed */

/* Toggle button — circular, no oval focus */
.theme-toggle {
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px;
  border-radius:50%;
  border:1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  cursor:pointer;
  transition: all 320ms var(--ease-spring);
  flex-shrink:0;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.theme-toggle:focus { outline: none; }
.theme-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);
  border-color: var(--accent);
}
.theme-toggle:focus:not(:focus-visible) { box-shadow: none; }
.theme-toggle:hover {
  background: var(--surface-soft);
  border-color: var(--line-strong);
  transform: translateY(-1px) rotate(8deg);
  box-shadow: var(--shadow-sm);
}
.theme-toggle:active { transform: scale(.95); }
.theme-toggle svg { width:18px; height:18px; transition: transform 360ms var(--ease-spring); }
.theme-toggle:hover svg { transform: rotate(20deg) scale(1.08); }
[data-theme="dark"] .theme-toggle { background: var(--surface-soft); border-color: var(--line); }
/* Icon swap */
.theme-toggle .icon-sun { display:block; }
.theme-toggle .icon-moon { display:none; }
[data-theme="dark"] .theme-toggle .icon-sun { display:none; }
[data-theme="dark"] .theme-toggle .icon-moon { display:block; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .theme-toggle .icon-sun { display:none; }
  html:not([data-theme]) .theme-toggle .icon-moon { display:block; }
  html[data-theme="light"] .theme-toggle .icon-sun { display:block !important; }
  html[data-theme="light"] .theme-toggle .icon-moon { display:none !important; }
}

/* Product image — keep white in dark for true color, but soften */
[data-theme="dark"] .product-box img { background: #ECECEC; }

/* Swiper pagination in dark */
[data-theme="dark"] .home-slider .swiper-pagination-bullet { background: rgba(255,255,255,.45); }
[data-theme="dark"] .home-slider .swiper-pagination-bullet-active { background: #fff; }

/* Swiper navigation chevrons — darker in dark mode */
[data-theme="dark"] .home-slider .swiper-button-next,
[data-theme="dark"] .home-slider .swiper-button-prev {
    color: var(--accent) !important;           /* primary accent for contrast */
    outline: none !important;
}
[data-theme="dark"] .home-slider .swiper-button-next::after,
[data-theme="dark"] .home-slider .swiper-button-prev::after {
    filter: none !important;                    /* override any default light filter */
}
[data-theme="dark"] .home-slider .swiper-button-next:hover,
[data-theme="dark"] .home-slider .swiper-button-prev:hover {
    color: var(--accent-soft) !important;
}

/* Product + Project gallery chevrons — darker in dark mode */
[data-theme="dark"] .gallery-top .swiper-button-next,
[data-theme="dark"] .gallery-top .swiper-button-prev,
[data-theme="dark"] .project-gallery.gallery-top .swiper-button-next,
[data-theme="dark"] .project-gallery.gallery-top .swiper-button-prev {
    color: var(--accent) !important;
    background: var(--surface) !important;
    border-color: var(--line) !important;
    outline: none !important;
}
[data-theme="dark"] .gallery-top .swiper-button-next::after,
[data-theme="dark"] .gallery-top .swiper-button-prev::after,
[data-theme="dark"] .project-gallery.gallery-top .swiper-button-next::after,
[data-theme="dark"] .project-gallery.gallery-top .swiper-button-prev::after {
    filter: none !important;
}
[data-theme="dark"] .gallery-top .swiper-button-next:hover,
[data-theme="dark"] .gallery-top .swiper-button-prev:hover,
[data-theme="dark"] .project-gallery.gallery-top .swiper-button-next:hover,
[data-theme="dark"] .project-gallery.gallery-top .swiper-button-prev:hover {
    color: var(--accent-soft) !important;
}

/* Scroll progress */
[data-theme="dark"] .scroll-progress { background: var(--accent); }

/* Selection */
[data-theme="dark"] ::selection { background: var(--accent); color:#fff; }

/* Raw-HTML tables (Bootstrap .table) — readable in dark */
[data-theme="dark"] .prose table,
[data-theme="dark"] .blog-single-post table,
[data-theme="dark"] .portfolio-detail-content table,
[data-theme="dark"] .product-detail .text-justify table,
[data-theme="dark"] .table {
    color: var(--ink-2);
    background-color: transparent;
    border-color: var(--line-strong);
}
[data-theme="dark"] .table td,
[data-theme="dark"] .table th {
    color: var(--ink-2);
    border-color: var(--line-strong);
}
[data-theme="dark"] .table thead th {
    color: var(--ink);
    background: var(--surface-soft);
    border-bottom-color: var(--line-strong);
}
[data-theme="dark"] .table-bordered,
[data-theme="dark"] .table-bordered td,
[data-theme="dark"] .table-bordered th { border-color: var(--line-strong); }
[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background-color: var(--surface-soft); }
[data-theme="dark"] .table-hover tbody tr:hover { background-color: var(--surface-muted); color: var(--ink); }