/*----------------------------------------------------------------------
    Dark Mode Overrides
    Project:  Website Binamitra
    Author:   Bryan Handoyo Soebekti
-----------------------------------------------------------------------*/

/* ===================== TYPOGRAPHY ===================== */
html.dark-mode body {
  background: #111318;
  color: #c4c5d4;
}

html.dark-mode p {
  color: #c4c5d4;
}

html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6 {
  color: #e2e2e8;
}

html.dark-mode a {
  color: #b8b9cc;
}

html.dark-mode a:hover,
html.dark-mode a:focus,
html.dark-mode a:active {
  color: #d0d1e0;
}

html.dark-mode span {
  color: #b0b1c4;
}

html.dark-mode em,
html.dark-mode li,
html.dark-mode li a {
  color: #caccda;
}

/* ===================== HEADER / NAVBAR ===================== */
html.dark-mode .header .navbar {
  background: #1c1d24;
  border-bottom: 1px solid #2a2b35;
}

html.dark-mode .header .nav-item-child {
  color: #e2e2e8;
}

html.dark-mode .header .nav-item-child:hover {
  color: #17bed2;
}

/* Always show light logo on dark background */
html.dark-mode .header .logo-img-main {
  display: inline-block !important;
}
html.dark-mode .header .logo-img-active {
  display: none !important;
}

/* Hamburger icon */
html.dark-mode .header .navbar-toggle .toggle-icon,
html.dark-mode .header .navbar-toggle .toggle-icon:before,
html.dark-mode .header .navbar-toggle .toggle-icon:after {
  background: #c0c0cc;
}

/* Desktop scrolled state */
@media (min-width: 992px) {
  html.dark-mode .page-on-scroll .header .navbar {
    background: #1c1d24;
    border-bottom-color: #2a2b35;
  }
  html.dark-mode .page-on-scroll .header .nav-item-child {
    color: #e2e2e8;
  }
}

/* Mobile nav */
@media (max-width: 991px) {
  html.dark-mode .header {
    background: #1c1d24;
  }
  html.dark-mode .header .navbar-collapse {
    background: #1c1d24;
    border-top: 1px solid #2a2b35;
  }
  html.dark-mode .header .nav-item-child {
    color: #e2e2e8;
  }
  html.dark-mode .header .logo .logo-img-main {
    display: inline-block !important;
  }
  html.dark-mode .header .logo .logo-img-active {
    display: none !important;
  }
}

/* ===================== BACKGROUNDS / SECTIONS ===================== */
html.dark-mode .bg-color-white {
  background: #111318;
}

html.dark-mode .bg-color-sky-light {
  background: #16171f;
}

html.dark-mode .section-seperator {
  border-bottom-color: #2a2b35;
}

/* ===================== ABOUT — LOCATION / CONTACT SECTION ===================== */
html.dark-mode .about-contact p {
  color: #e2e2e8;
}

html.dark-mode .about-contact span {
  color: #caccda;
}

html.dark-mode .about-contact .contact-list li {
  color: #e2e2e8;
}

/* ===================== STATS BAR ===================== */
html.dark-mode .stats-bar {
  background: #16171f;
  border-color: #2a2b35;
}

html.dark-mode .stat-label {
  color: #c4c5d4;
}

/* ===================== BRAND PARTNERS ===================== */
html.dark-mode .brand-partner-card {
  background: #1c1d24;
  border-color: #2a2b35;
}

html.dark-mode .brand-partner-img {
  background: #252630;
}

html.dark-mode .brand-partner-info {
  border-top-color: #2a2b35;
}

html.dark-mode .brand-partner-info p {
  color: #c4c5d4;
}

html.dark-mode .brand-partner-info .brand-name.carrier { color: #5aabdf; }
html.dark-mode .brand-partner-info .brand-name.toshiba { color: #eb0028; }
html.dark-mode .brand-partner-info .brand-name.gree    { color: #f47920; }

html.dark-mode .view-link {
  color: #17bed2;
}
html.dark-mode .view-link:hover {
  color: #3fd0e2;
}

/* ===================== SERVICE CARDS ===================== */
html.dark-mode .service {
  background: #1c1d24;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}

html.dark-mode .service h3 {
  color: #e2e2e8;
}

/* ===================== BUTTONS ===================== */
html.dark-mode .btn-white-brd {
  color: #e2e2e8;
  border-color: rgba(255, 255, 255, 0.45);
}

html.dark-mode .btn-white-brd:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

html.dark-mode .btn-base-brd {
  color: #17bed2;
  border-color: #17bed2;
}

html.dark-mode .btn-base-brd:hover {
  background: #17bed2;
  color: #fff;
}

/* ===================== BACK TO TOP ===================== */
html.dark-mode .back-to-top {
  background: #252630;
  color: #c4c5d4;
  border: 1px solid #2a2b35;
}

html.dark-mode .back-to-top:hover {
  color: #17bed2;
}

/* ===================== FOOTER ===================== */
/* Footer has a bg image so it stays mostly dark — adjust text/inputs */
html.dark-mode .footer-list-link {
  color: #d0d1dc;
}

html.dark-mode .footer-list-link:hover {
  color: #17bed2;
}

html.dark-mode .footer .footer-list-item {
  color: #caccda;
}

html.dark-mode .footer p {
  color: #caccda;
}

html.dark-mode .footer-input {
  background: rgba(255, 255, 255, 0.06);
  color: #c0c0cc;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

html.dark-mode .footer-input::placeholder {
  color: #7a7b8e;
}

html.dark-mode .footer-input:focus {
  background: rgba(255, 255, 255, 0.1);
  outline: none;
  border-color: #17bed2;
}

/* ===================== PRODUCTS PAGE ===================== */
html.dark-mode .products-nav,
html.dark-mode .tab-content {
  background: #111318;
}

html.dark-mode .nav-tabs > li > a {
  color: #c4c5d4;
  background: #1c1d24;
  border-color: #2a2b35;
}

html.dark-mode .nav-tabs > li.active > a,
html.dark-mode .nav-tabs > li.active > a:hover,
html.dark-mode .nav-tabs > li.active > a:focus {
  background: #252630;
  color: #e2e2e8;
  border-color: #2a2b35;
  border-bottom-color: transparent;
}

html.dark-mode .nav-tabs > li > a:hover {
  background: #252630;
  color: #17bed2;
  border-color: #2a2b35;
}

/* Product cards */
html.dark-mode .product-item,
html.dark-mode .thumbnail {
  background: #1c1d24;
  border-color: #2a2b35;
}

html.dark-mode .thumbnail .caption {
  color: #c4c5d4;
}

html.dark-mode .thumbnail:hover {
  border-color: #17bed2;
}

/* ===================== PROJECTS PAGE ===================== */
html.dark-mode .overflow-h {
  background: #111318;
}

/* ===================== TABLES & SPEC SHEETS ===================== */
html.dark-mode table {
  color: #c4c5d4;
}

html.dark-mode table th {
  background: #1c1d24;
  color: #e2e2e8;
  border-color: #2a2b35;
}

html.dark-mode table td {
  border-color: #2a2b35;
}

html.dark-mode table tr:nth-child(even) {
  background: #16171f;
}

/* ===================== ABOUT / CAREER / DESC PAGES ===================== */
html.dark-mode .panel,
html.dark-mode .panel-default {
  background: #1c1d24;
  border-color: #2a2b35;
}

html.dark-mode .panel-heading {
  background: #252630;
  border-color: #2a2b35;
  color: #e2e2e8;
}

html.dark-mode .panel-body {
  background: #1c1d24;
  color: #c4c5d4;
}

html.dark-mode .breadcrumb {
  background: #1c1d24;
}

html.dark-mode .breadcrumb > li,
html.dark-mode .breadcrumb > li a {
  color: #c4c5d4;
}

html.dark-mode .breadcrumb > .active {
  color: #17bed2;
}

/* ===================== DARK MODE TOGGLE SWITCH ===================== */

/* The toggle switch pill */
.dark-mode-toggle {
  position: relative;
  width: 50px;
  height: 26px;
  border-radius: 13px;
  background: #c8ccd6;
  border: none;
  cursor: pointer;
  float: right;
  margin: calc((105px - 26px) / 2) 0 0 20px; /* vertically center in 105px nav height */
  padding: 0;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.18), 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: background 280ms ease, box-shadow 280ms ease;
  outline: none;
}

.dark-mode-toggle:focus-visible {
  box-shadow: 0 0 0 3px rgba(23, 190, 210, 0.4);
}

/* Sliding knob */
.dark-mode-toggle::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.28);
  transition: left 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Track icons — both always in DOM, fade in/out */
.dark-mode-toggle .dm-moon,
.dark-mode-toggle .dm-sun {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  line-height: 1;
  transition: opacity 200ms ease;
  display: block !important;
  pointer-events: none;
}

/* Moon on the right track (visible when light mode — knob is left) */
.dark-mode-toggle .dm-moon {
  right: 7px;
  color: #6b7285;
  opacity: 1;
}

/* Sun on the left track (visible when dark mode — knob is right) */
.dark-mode-toggle .dm-sun {
  left: 7px;
  color: rgba(255, 255, 255, 0.9);
  opacity: 0;
}

/* ——— Dark mode active state ——— */
html.dark-mode .dark-mode-toggle {
  background: #17bed2;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* Knob slides to the right */
html.dark-mode .dark-mode-toggle::before {
  left: 27px; /* 50px - 20px - 3px */
}

html.dark-mode .dark-mode-toggle .dm-moon { opacity: 0; }
html.dark-mode .dark-mode-toggle .dm-sun  { opacity: 1; }

/* ——— Mobile nav (stacked layout) ——— */
@media (max-width: 991px) {
  .nav-collapse .menu-container {
    display: block;
  }

  .dark-mode-toggle {
    margin: 8px 15px 12px;
    display: block;
  }
}

/* ===================== SOLID-HEADER PAGES (PRODUCTS / PROJECTS) ===================== */
/*
 * products.css and projects.css both force:
 *   header.header.navbar-fixed-top.solid-header { background: #fff !important; }
 * They load AFTER darkmode.css, so we need higher specificity + !important to win.
 * Adding html.dark-mode prefix raises specificity from (0,3,1) to (0,4,2) — enough to override.
 */
html.dark-mode header.header.navbar-fixed-top.solid-header,
html.dark-mode .header.navbar-fixed-top.solid-header {
  background: #1c1d24 !important;
  border-bottom: 1px solid #2a2b35 !important;
}

html.dark-mode header.header.solid-header .nav-item-child,
html.dark-mode header.header.solid-header .navbar-nav > li > a {
  color: #e2e2e8 !important;
}

html.dark-mode header.header.solid-header .nav-item-child:hover,
html.dark-mode header.header.solid-header .navbar-nav > li > a:hover,
html.dark-mode header.header.solid-header .nav-item-child.active {
  color: #17bed2 !important;
}

html.dark-mode header.header.solid-header .navbar-toggle .toggle-icon,
html.dark-mode header.header.solid-header .navbar-toggle .toggle-icon:before,
html.dark-mode header.header.solid-header .navbar-toggle .toggle-icon:after {
  background: #c0c0cc !important;
}

/* Always show light logo on solid-header pages in dark mode */
html.dark-mode header.header.solid-header .logo-img-main {
  display: inline-block !important;
}
html.dark-mode header.header.solid-header .logo-img-active {
  display: none !important;
}

html.dark-mode header.header.solid-header .navbar {
  border-bottom-color: #2a2b35 !important;
}

/* ===================== PRODUCTS PAGE COMPONENTS ===================== */
html.dark-mode .brand-filter button {
  background-color: #1c1d24;
  color: #17bed2;
}

html.dark-mode .search-filter-bar .form-control {
  background-color: #1c1d24;
  border-color: #2a2b35;
  color: #e2e2e8;
}

html.dark-mode .search-filter-bar .form-control:focus {
  border-color: #17bed2;
  box-shadow: 0 0 4px rgba(23, 190, 210, 0.3);
}

html.dark-mode .product-card {
  background: #1c1d24;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

html.dark-mode .product-card img,
html.dark-mode .product-image-wrapper {
  background-color: #1c1d24;
}

html.dark-mode .product-image-wrapper {
  border-bottom-color: #2a2b35;
}

html.dark-mode .product-info h4 {
  color: #e2e2e8;
}

html.dark-mode .product-info p {
  color: #c4c5d4;
}

html.dark-mode .tabs {
  background: #1c1d24;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.5), 0 10px 10px rgba(0, 0, 0, 0.4);
}

html.dark-mode .extra-list-container {
  background: #1c1d24;
  border-color: #2a2b35;
}

/* ===================== PROJECTS PAGE TEXT ===================== */
/* Brighten solution-card body text — spans (brand tags) were #64657a (too dim) */
html.dark-mode .solution-card p {
  color: #c4c5d4;
}

html.dark-mode .solution-card span {
  color: #c4c5d4;
}

html.dark-mode .solution-card .link,
html.dark-mode .solution-card a.link {
  color: #c4c5d4;
}

/* Project detail pages — bullet list text */
html.dark-mode .project-list,
html.dark-mode .project-list li {
  color: #c4c5d4;
}

/* ===================== BRAND IDENTITY COLORS ===================== */
/* Light mode: set in products.css via [data-brand] selectors          */
/* Dark mode: Carrier navy is too dark on #1c1d24 — use a lighter sky  */
html.dark-mode [data-brand="Carrier"] .product-info span {
  color: #5aabdf;   /* Carrier blue — readable on dark */
}

html.dark-mode [data-brand="Toshiba"] .product-info span {
  color: #eb0028;   /* Toshiba red — already bright enough */
}

html.dark-mode [data-brand="Gree"] .product-info span {
  color: #f47920;   /* Gree orange — already bright enough */
}

/* ===================== FAQ ===================== */
html.dark-mode .faq-accordion {
  border-top-color: #2a2b35;
}
html.dark-mode .faq-item {
  border-bottom-color: #2a2b35;
}
html.dark-mode .faq-question {
  color: #e2e2e8;
}
html.dark-mode .faq-question:hover,
html.dark-mode .faq-question[aria-expanded="true"] {
  color: #17bed2;
}
html.dark-mode .faq-answer p {
  color: #c4c5d4;
}

/* ===================== BREADCRUMB ===================== */
html.dark-mode .breadcrumb-bar {
  background: #16171f;
  border-bottom-color: #2a2b35;
}
html.dark-mode .breadcrumb-item {
  color: #6e7080;
}
html.dark-mode .breadcrumb-item.active {
  color: #c4c5d4;
}
html.dark-mode .breadcrumb-item + .breadcrumb-item::before {
  color: #3a3b47;
}

/* ===================== SCOPE BLOCKS ===================== */
html.dark-mode .scope-block {
  background: #1c1d24;
  border-color: #2a2b35;
}

html.dark-mode .scope-block h4 {
  color: #e2e2e8;
  border-bottom-color: #17bed2;
}

html.dark-mode .scope-list li {
  color: #c4c5d4;
  border-bottom-color: #2a2b35;
}

html.dark-mode .scope-list li::before {
  color: #17bed2;
}

/* ===================== BRAND ABOUT CARDS ===================== */
html.dark-mode .brand-about-card {
  background: #1c1d24;
  border-color: #2a2b35;
}