/* ══════════════════════════════════════════════════
   Dark Mode — newhome
   Applied via body.dark-mode class
   ══════════════════════════════════════════════════ */

/* ── CSS Color Token System ──────────────────────── */
:root {
  --dm-bg:          #ffffff;
  --dm-bg-card:     #f5f5f5;
  --dm-bg-input:    #ffffff;
  --dm-text:        #111111;
  --dm-text-muted:  #555b6e;
  --dm-border:      #e0e0e0;
  --dm-shadow:      rgba(0, 0, 0, 0.08);
  --dm-btn-sec-bg:  #f3f4f6;
  --dm-btn-sec-text:#111111;
  --dm-hover-card:  #ebebeb;
  --dm-brand-red:   #bb1226;
}

body.dark-mode {
  --dm-bg:          #0f0f0f;
  --dm-bg-card:     #1e1e1e;
  --dm-bg-input:    #1a1a1a;
  --dm-text:        #ffffff;
  --dm-text-muted:  #bbbbbb;
  --dm-border:      #2a2a2a;
  --dm-shadow:      rgba(0, 0, 0, 0.5);
  --dm-btn-sec-bg:  #2a2a2a;
  --dm-btn-sec-text:#ffffff;
  --dm-hover-card:  #2a2a2a;
  --dm-brand-red:   #ff2a2a;
}

/* ── Global transition ─────────────────────────── */
body,
.top-nav,
.card,
.product-card,
.incubator-card,
.branch-card,
.ad-card,
.ads-stat-card,
.products-stat,
.incubators-stat,
.hero-panel,
.hero-sidebar,
.hero-sidebar-item,
.hero-float-card,
.hero-note-text,
.hero-note-upload,
.hero-glass-search,
.floating-actions a,
.floating-actions button,
input,
select,
textarea,
.btn-secondary,
.auth-btn,
.dark-mode-toggle,
footer,
.footer {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ── CSS variable overrides ────────────────────── */
body.dark-mode {
  --brand-gray: #0f0f0f;
  --brand-border: #2a2a2a;
  --brand-text-muted: #bbbbbb;
  --homepage-header-bg: #121212;
  --homepage-text-color: #ffffff;
  --homepage-heading-color: #f0f2f7;
  --homepage-paragraph-color: #bbbbbb;
  --homepage-link-color: #d0d4de;
  --homepage-button-color: var(--brand-red);
}

/* ── Body ──────────────────────────────────────── */
body.dark-mode {
  background: var(--dm-bg);
  color: var(--dm-text);
  background-image:
    radial-gradient(circle at 8% 12%, rgba(215, 0, 0, 0.06), transparent 34%),
    radial-gradient(circle at 92% 78%, rgba(215, 0, 0, 0.05), transparent 36%);
}

/* ── Headings / text ───────────────────────────── */
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: #f0f2f7;
}

body.dark-mode p {
  color: #cccccc;
}

body.dark-mode a {
  color: #c8ccd6;
}

body.dark-mode label {
  color: #d4d8e0;
}

/* ── Icon visibility (FontAwesome only — avoid breaking multi-color SVGs) */
body.dark-mode .icon-box i,
body.dark-mode .card i {
  color: inherit;
}

/* ── Navbar ────────────────────────────────────── */
body.dark-mode .top-nav {
  background: #121212;
  border-bottom-color: var(--dm-border);
}

body.dark-mode .top-nav .nav-links a {
  color: #c8ccd6;
}

body.dark-mode .top-nav .nav-links a:hover,
body.dark-mode .top-nav .nav-links a.active {
  color: #fff;
}

body.dark-mode .logo-text {
  color: #f0f2f7;
}

/* ── Auth buttons ──────────────────────────────── */
body.dark-mode .auth-btn {
  color: #c8ccd6;
  border-color: #3a3a3a;
}

body.dark-mode .auth-btn:hover {
  background: var(--dm-bg-card);
  color: #fff;
}

body.dark-mode .auth-btn.primary {
  color: #fff;
}

/* ── Dark mode toggle button ───────────────────── */
.dark-mode-toggle {
  background: none;
  border: 1px solid #d0d4de;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  color: #171a20;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.dark-mode-toggle:hover {
  background: rgba(0, 0, 0, 0.06);
}

body.dark-mode .dark-mode-toggle {
  border-color: #3a3a3a;
  color: #f0f2f7;
}

body.dark-mode .dark-mode-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* ── Buttons — primary red (stays visible) ─────── */
body.dark-mode .btn-primary,
body.dark-mode [class*="btn-primary"],
body.dark-mode a.btn-primary {
  background: var(--dm-brand-red);
  color: #ffffff !important;
}

/* ── Buttons — secondary ───────────────────────── */
body.dark-mode .btn-secondary {
  background: var(--dm-btn-sec-bg);
  border-color: #444444;
  color: var(--dm-btn-sec-text);
}

body.dark-mode .btn-secondary:hover {
  background: var(--dm-hover-card);
  color: #fff;
}

/* ── Cards ─────────────────────────────────────── */
body.dark-mode .card {
  background: var(--dm-bg-card);
  border-color: var(--dm-border);
  box-shadow: 0 2px 12px var(--dm-shadow);
}

body.dark-mode .card:hover {
  background: var(--dm-hover-card);
}

body.dark-mode .card h3 {
  color: #f0f2f7;
}

body.dark-mode .card p {
  color: var(--dm-text-muted);
}

body.dark-mode .icon-box {
  background: rgba(215, 0, 0, 0.15);
}

/* ── Section head ──────────────────────────────── */
body.dark-mode .section-head h2 {
  color: #f0f2f7;
}

body.dark-mode .section-head p {
  color: var(--dm-text-muted);
}

/* ── Inputs / Selects / Textareas ──────────────── */
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
  background: var(--dm-bg-input);
  color: var(--dm-text);
  border-color: #3a3a3a;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: #666c7a;
}

body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus {
  border-color: var(--brand-red);
  outline: none;
}

body.dark-mode select option {
  background: var(--dm-bg-input);
  color: var(--dm-text);
}

/* ── Tables ────────────────────────────────────── */
body.dark-mode table {
  background: var(--dm-bg-card);
  color: var(--dm-text);
}

body.dark-mode th {
  background: #121212;
  color: #f0f2f7;
  border-color: var(--dm-border);
}

body.dark-mode td {
  border-color: var(--dm-border);
  color: #cccccc;
}

body.dark-mode tr:hover td {
  background: var(--dm-hover-card);
}

/* ── Modals ────────────────────────────────────── */
body.dark-mode .modal,
body.dark-mode [class*="modal"],
body.dark-mode [role="dialog"] {
  background: var(--dm-bg-card);
  color: var(--dm-text);
  border-color: var(--dm-border);
}

/* ── Floating actions ──────────────────────────── */
body.dark-mode .floating-actions a,
body.dark-mode .floating-actions button {
  background: var(--dm-bg-card);
  color: var(--dm-text);
  border-color: #3a3a3a;
}

body.dark-mode .floating-actions a:hover,
body.dark-mode .floating-actions button:hover {
  background: var(--dm-hover-card);
}

/* ── Hero section ──────────────────────────────── */
body.dark-mode .hero {
  background: #0a0a0a;
}

body.dark-mode .hero-content h1 {
  color: #fff;
}

body.dark-mode .hero-content p {
  color: rgba(255, 255, 255, 0.8);
}

body.dark-mode .hero-stats .stat {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .hero-stats .stat strong {
  color: #fff;
}

body.dark-mode .hero-stats .stat span {
  color: rgba(255, 255, 255, 0.65);
}

body.dark-mode .hero-sidebar {
  background: rgba(18, 18, 18, 0.95);
  border-color: var(--dm-border);
}

body.dark-mode .hero-sidebar-item {
  color: #c8ccd6;
}

body.dark-mode .hero-sidebar-item:hover,
body.dark-mode .hero-sidebar-item[aria-expanded="true"] {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

body.dark-mode .hero-sidebar-subitem {
  color: var(--dm-text-muted);
}

body.dark-mode .hero-sidebar-subitem:hover {
  color: #fff;
}

body.dark-mode .hero-glass-search {
  background: rgba(18, 18, 18, 0.85);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.55);
}

body.dark-mode .hero-dashboard,
body.dark-mode .hero-panel {
  background: rgba(18, 18, 18, 0.92);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--dm-text);
}

body.dark-mode .hero-panel header {
  color: #c8ccd6;
}

body.dark-mode .hero-panel strong {
  color: #fff;
}

body.dark-mode .hero-note-text {
  background: var(--dm-bg-card);
  color: var(--dm-text);
  border-color: #3a3a3a;
}

body.dark-mode .hero-note-upload {
  background: var(--dm-bg-card);
  color: var(--dm-text-muted);
  border-color: #3a3a3a;
}

body.dark-mode .hero-note-upload:hover {
  background: var(--dm-hover-card);
}

/* ── Products page ─────────────────────────────── */
body.dark-mode .products-hero h1,
body.dark-mode .branches-head h1,
body.dark-mode .incubators-hero h1 {
  color: #f0f2f7;
}

body.dark-mode .products-hero p,
body.dark-mode .branches-head p,
body.dark-mode .incubators-hero p {
  color: var(--dm-text-muted);
}

body.dark-mode .products-stat,
body.dark-mode .incubators-stat {
  background: var(--dm-bg-card);
  border-color: var(--dm-border);
  box-shadow: 0 4px 14px var(--dm-shadow);
}

body.dark-mode .products-stat:hover,
body.dark-mode .incubators-stat:hover {
  background: var(--dm-hover-card);
}

body.dark-mode .products-stat span,
body.dark-mode .incubators-stat span {
  color: var(--dm-text-muted);
}

body.dark-mode .products-tabs,
body.dark-mode .incubators-tabs {
  border-color: var(--dm-border);
}

body.dark-mode .products-tabs button,
body.dark-mode .incubators-tabs button {
  color: var(--dm-text-muted);
  border-color: #3a3a3a;
}

body.dark-mode .products-tabs button:hover,
body.dark-mode .incubators-tabs button:hover {
  background: var(--dm-bg-card);
  color: #fff;
}

body.dark-mode .products-tabs button.active,
body.dark-mode .incubators-tabs button.active {
  color: #fff;
}

body.dark-mode .product-card,
body.dark-mode .incubator-card,
body.dark-mode .branch-card {
  background: var(--dm-bg-card);
  border-color: var(--dm-border);
  box-shadow: 0 2px 12px var(--dm-shadow);
}

body.dark-mode .product-card:hover,
body.dark-mode .incubator-card:hover,
body.dark-mode .branch-card:hover {
  background: var(--dm-hover-card);
}

body.dark-mode .product-card h3,
body.dark-mode .incubator-card h3,
body.dark-mode .branch-card h3,
body.dark-mode .product-card h4,
body.dark-mode .incubator-card h4,
body.dark-mode .branch-card h4 {
  color: #f0f2f7;
}

body.dark-mode .product-card p,
body.dark-mode .incubator-card p,
body.dark-mode .branch-card p {
  color: var(--dm-text-muted);
}

body.dark-mode .products-section-title,
body.dark-mode .incubators-section-title {
  color: #f0f2f7;
}

/* ── Branches page ─────────────────────────────── */
body.dark-mode .branches-toolbar input,
body.dark-mode .branches-toolbar select {
  background: var(--dm-bg-input);
  color: var(--dm-text);
  border-color: #3a3a3a;
}

/* ── Ads page ──────────────────────────────────── */
body.dark-mode .ads-stat-card {
  background: var(--dm-bg-card);
  border-color: var(--dm-border);
}

body.dark-mode .ads-stat-card:hover {
  background: var(--dm-hover-card);
}

body.dark-mode .ads-stat-label {
  color: var(--dm-text-muted);
}

body.dark-mode .ad-card {
  background: var(--dm-bg-card);
  border-color: var(--dm-border);
}

body.dark-mode .ad-card:hover {
  background: var(--dm-hover-card);
}

body.dark-mode .ad-card h3,
body.dark-mode .ad-card h4 {
  color: #f0f2f7;
}

body.dark-mode .ad-card p {
  color: var(--dm-text-muted);
}

body.dark-mode .ads-section-title {
  color: #f0f2f7;
}

/* ── Form sections ─────────────────────────────── */
body.dark-mode .registration-section,
body.dark-mode [id="register"],
body.dark-mode .form-card,
body.dark-mode form {
  background: transparent;
}

body.dark-mode .form-group label {
  color: #d4d8e0;
}

/* ── Feature / info sections ───────────────────── */
body.dark-mode .features-section,
body.dark-mode .about-section,
body.dark-mode [class*="-section"] {
  background: transparent;
}

body.dark-mode .feature-item,
body.dark-mode .feature-card {
  background: var(--dm-bg-card);
  border-color: var(--dm-border);
}

body.dark-mode .feature-item:hover,
body.dark-mode .feature-card:hover {
  background: var(--dm-hover-card);
}

/* ── Incubators page ───────────────────────────── */
body.dark-mode .incubators-search-wrap input {
  background: var(--dm-bg-input);
  color: var(--dm-text);
  border-color: #3a3a3a;
}

body.dark-mode .incubators-tabs-bar {
  border-color: var(--dm-border);
}

body.dark-mode .incubator-section-head {
  color: #f0f2f7;
  border-color: var(--dm-border);
}

body.dark-mode .incubator-cta {
  background: var(--dm-bg-card);
  border-color: var(--dm-border);
}

body.dark-mode .incubator-cta:hover {
  background: var(--dm-hover-card);
}

body.dark-mode .incubator-cta h3 {
  color: #f0f2f7;
}

body.dark-mode .incubator-cta p {
  color: var(--dm-text-muted);
}

/* ── Announcement bar ──────────────────────────── */
body.dark-mode .announcement-bar {
  background: #0a0005;
}

/* ── Footer / bottom areas ─────────────────────── */
body.dark-mode footer,
body.dark-mode .footer {
  background: #0a0a0a;
  border-top-color: var(--dm-border);
  color: var(--dm-text-muted);
}

body.dark-mode footer a,
body.dark-mode .footer a {
  color: #c8ccd6;
}

/* ── Misc ──────────────────────────────────────── */
body.dark-mode .divider,
body.dark-mode hr {
  border-color: var(--dm-border);
}

body.dark-mode [class*="badge"],
body.dark-mode [class*="-badge"] {
  background: #2a2a2a;
  color: var(--dm-text);
}

body.dark-mode [class*="-tag"],
body.dark-mode [class*="tag-"] {
  background: #2a2a2a;
  color: #c8ccd6;
}

body.dark-mode .hero-float-card {
  background: var(--dm-bg-card);
  border-color: var(--dm-border);
  color: var(--dm-text);
}

body.dark-mode .hero-float-title {
  color: #f0f2f7;
}

body.dark-mode .hero-float-desc {
  color: var(--dm-text-muted);
}

/* Scrollbar styling for dark mode */
body.dark-mode ::-webkit-scrollbar-track {
  background: #1a1a1a;
}

body.dark-mode ::-webkit-scrollbar-thumb {
  background: #3a3a3a;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: #4a4a4a;
}