/* ========================================
   OLI BENE — Dark Theme
   ======================================== */

/* CSS Custom Properties for theme switching */
:root,
[data-theme="light"] {
  --ob-bg: #fafafa;
  --ob-bg-alt: #fff;
  --ob-bg-warm: #f5f0eb;
  --ob-bg-warm2: #f0ebe4;
  --ob-bg-warm3: #f0e8df;
  --ob-bg-warm4: #f0e0d0;
  --ob-bg-icon: #f5f0eb;
  --ob-text: #333;
  --ob-text-dark: #222;
  --ob-text-heading: #2a2a2a;
  --ob-text-secondary: #777;
  --ob-text-muted: #999;
  --ob-text-light: #888;
  --ob-text-desc: #666;
  --ob-border: #eee;
  --ob-border-light: #f0f0f0;
  --ob-card-bg: #fff;
  --ob-card-shadow: rgba(0, 0, 0, 0.06);
  --ob-card-hover-shadow: rgba(0, 0, 0, 0.08);
  --ob-sidebar-bg: #1a1a1a;
  --ob-dark-section: #1a1a1a;
  --ob-dark-card: #2a2a2a;
  --ob-overlay: rgba(26, 26, 26, 0.6);
  --ob-input-bg: #fff;
  --ob-input-border: #ddd;
  --ob-badge-bg: #f5f0eb;
  --ob-map-fill: #f0e8df;
  --ob-map-label: #555;
  --ob-region-bg: #f0e8df;
  --ob-link-color: #4040c0;
  --ob-accent: #e86c2e;
  --ob-accent-warm: #b5704d;
  --ob-rating-text: #666;
  --ob-details-text: #666;
  --ob-details-strong: #444;
  --ob-outline-btn-color: #2a2a2a;
  --ob-outline-btn-border: #ccc;
  --ob-modal-bg: #fff;
  --ob-modal-overlay: rgba(0, 0, 0, 0.5);
  --ob-toast-bg: #333;
  --ob-toast-text: #fff;
  --ob-scroll-track: #f0f0f0;
  --ob-scroll-thumb: #ccc;
}

[data-theme="dark"] {
  --ob-bg: #0f1117;
  --ob-bg-alt: #1a1d27;
  --ob-bg-warm: #1e2130;
  --ob-bg-warm2: #1e2130;
  --ob-bg-warm3: #252838;
  --ob-bg-warm4: #2a2d3d;
  --ob-bg-icon: #2a2d3d;
  --ob-text: #e0e0e6;
  --ob-text-dark: #f0f0f5;
  --ob-text-heading: #f0f0f5;
  --ob-text-secondary: #9a9ab0;
  --ob-text-muted: #7a7a90;
  --ob-text-light: #8a8aa0;
  --ob-text-desc: #9a9ab0;
  --ob-border: #2a2d3d;
  --ob-border-light: #252838;
  --ob-card-bg: #1a1d27;
  --ob-card-shadow: rgba(0, 0, 0, 0.3);
  --ob-card-hover-shadow: rgba(0, 0, 0, 0.4);
  --ob-sidebar-bg: #0a0c14;
  --ob-dark-section: #0a0c14;
  --ob-dark-card: #1a1d27;
  --ob-overlay: rgba(10, 12, 20, 0.8);
  --ob-input-bg: #1a1d27;
  --ob-input-border: #2a2d3d;
  --ob-badge-bg: #2a2d3d;
  --ob-map-fill: #252838;
  --ob-map-label: #9a9ab0;
  --ob-region-bg: #252838;
  --ob-link-color: #6b8cff;
  --ob-accent: #e86c2e;
  --ob-accent-warm: #c4825f;
  --ob-rating-text: #9a9ab0;
  --ob-details-text: #9a9ab0;
  --ob-details-strong: #c0c0d0;
  --ob-outline-btn-color: #e0e0e6;
  --ob-outline-btn-border: #444;
  --ob-modal-bg: #1a1d27;
  --ob-modal-overlay: rgba(0, 0, 0, 0.7);
  --ob-toast-bg: #252838;
  --ob-toast-text: #e0e0e6;
  --ob-scroll-track: #1a1d27;
  --ob-scroll-thumb: #3a3d4d;
}

/* ========================================
   Base overrides
   ======================================== */
[data-theme="dark"] body {
  background: var(--ob-bg);
  color: var(--ob-text);
}

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

[data-theme="dark"] .hamburger {
  background: var(--ob-sidebar-bg);
}

/* ========================================
   Main content areas
   ======================================== */
[data-theme="dark"] .toolkit {
  background: var(--ob-bg-alt);
}

[data-theme="dark"] .toolkit__title,
[data-theme="dark"] .toolkit-card__title {
  color: var(--ob-text-heading);
}

[data-theme="dark"] .toolkit__desc,
[data-theme="dark"] .toolkit-card__desc {
  color: var(--ob-text-secondary);
}

[data-theme="dark"] .toolkit__label {
  color: var(--ob-text-muted);
}

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

[data-theme="dark"] .toolkit-card:hover {
  box-shadow: 0 8px 24px var(--ob-card-hover-shadow);
}

[data-theme="dark"] .toolkit-card__icon {
  background: var(--ob-bg-icon);
}

/* Featured toolkit card */
[data-theme="dark"] .toolkit-card--featured {
  background: var(--ob-dark-section);
}

/* ========================================
   What's On Preview
   ======================================== */
[data-theme="dark"] .whatson-preview {
  background: var(--ob-bg-warm2);
}

[data-theme="dark"] .whatson-preview__title {
  color: var(--ob-text-heading);
}

[data-theme="dark"] .whatson-preview__label {
  color: var(--ob-text-muted);
}

[data-theme="dark"] .whatson-card {
  background: var(--ob-dark-card);
}

/* ========================================
   Tips Section
   ======================================== */
[data-theme="dark"] .tips__title,
[data-theme="dark"] .tip-item__title {
  color: var(--ob-text-dark);
}

[data-theme="dark"] .tip-item__desc,
[data-theme="dark"] .tips__footer {
  color: var(--ob-text-secondary);
}

[data-theme="dark"] .tip-item {
  border-bottom-color: var(--ob-border);
}

[data-theme="dark"] .tip-item:first-of-type {
  border-top-color: var(--ob-border);
}

[data-theme="dark"] .tip-item__icon {
  background: var(--ob-bg-warm4);
}

[data-theme="dark"] .tips__footer a {
  color: var(--ob-text-dark);
  border-bottom-color: var(--ob-text-dark);
}

/* ========================================
   Blog Section
   ======================================== */
[data-theme="dark"] .blog-preview__title {
  color: var(--ob-text-heading);
}

[data-theme="dark"] .blog-preview__text {
  color: var(--ob-text-desc);
}

/* ========================================
   Useful Apps
   ======================================== */
[data-theme="dark"] .useful-apps {
  background: var(--ob-bg);
}

[data-theme="dark"] .useful-apps__title {
  color: var(--ob-text-heading);
}

[data-theme="dark"] .useful-apps__desc {
  color: var(--ob-text-secondary);
}

[data-theme="dark"] .useful-apps__label {
  color: var(--ob-text-muted);
}

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

[data-theme="dark"] .app-card:hover {
  box-shadow: 0 8px 24px var(--ob-card-hover-shadow);
  border-color: var(--ob-border);
}

[data-theme="dark"] .app-card__icon {
  background: var(--ob-bg-icon);
}

[data-theme="dark"] .app-card__name {
  color: var(--ob-text-heading);
}

[data-theme="dark"] .app-card__desc {
  color: var(--ob-text-muted);
}

/* ========================================
   Footer
   ======================================== */
[data-theme="dark"] .footer {
  background: var(--ob-dark-section);
}

/* ========================================
   Community Banner
   ======================================== */
[data-theme="dark"] .community-banner {
  background: var(--ob-dark-section);
}

/* ========================================
   Buttons
   ======================================== */
[data-theme="dark"] .btn-pill--outline {
  color: var(--ob-outline-btn-color);
  border-color: var(--ob-outline-btn-border);
}

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

[data-theme="dark"] .btn-pill--dark:hover {
  background: var(--ob-text);
  color: var(--ob-bg);
}

/* ========================================
   Destinations Page
   ======================================== */
[data-theme="dark"] .map-section {
  background: var(--ob-bg);
}

[data-theme="dark"] .map-section__subtitle {
  color: var(--ob-text-light);
}

[data-theme="dark"] .map-region__path {
  fill: var(--ob-map-fill);
  stroke: var(--ob-bg);
}

[data-theme="dark"] .map-region__label {
  fill: var(--ob-map-label);
}

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

[data-theme="dark"] .region-card__count {
  color: var(--ob-text-muted);
}

[data-theme="dark"] .dest-card + .dest-card {
  border-top-color: var(--ob-border);
}

[data-theme="dark"] .dest-card__title {
  color: var(--ob-text-dark);
}

[data-theme="dark"] .dest-card__category {
  color: var(--ob-text-light);
}

[data-theme="dark"] .dest-card__address {
  color: var(--ob-link-color);
}

[data-theme="dark"] .dest-card__desc {
  color: var(--ob-text-light);
}

[data-theme="dark"] .dest-card__details {
  color: var(--ob-details-text);
}

[data-theme="dark"] .dest-card__details strong {
  color: var(--ob-details-strong);
}

[data-theme="dark"] .dest-card__rating span {
  color: var(--ob-rating-text);
}

/* ========================================
   Tips Grid
   ======================================== */
[data-theme="dark"] .tips-intro {
  background: var(--ob-bg);
}

[data-theme="dark"] .tips-intro__title {
  color: var(--ob-text-heading);
}

[data-theme="dark"] .tips-intro__desc {
  color: var(--ob-text-desc);
}

[data-theme="dark"] .tips-grid {
  background: var(--ob-bg-warm);
}

/* ========================================
   Page Hero (inner pages)
   ======================================== */
[data-theme="dark"] .page-hero {
  background-color: var(--ob-dark-section);
}

[data-theme="dark"] .page-hero__subtitle {
  color: var(--ob-text-muted);
}

/* ========================================
   Cards (whatson-news, expats)
   ======================================== */
[data-theme="dark"] .card {
  background: var(--ob-card-bg);
  border-color: var(--ob-border-light);
}

[data-theme="dark"] .card:hover {
  box-shadow: 0 8px 24px var(--ob-card-hover-shadow);
}

[data-theme="dark"] .card-title {
  color: var(--ob-text-heading);
}

[data-theme="dark"] .card-desc {
  color: var(--ob-text-secondary);
}

[data-theme="dark"] .card-time {
  color: var(--ob-text-muted);
}

[data-theme="dark"] .card-location {
  color: var(--ob-text-light);
}

[data-theme="dark"] .card-source {
  color: var(--ob-text-muted);
}

[data-theme="dark"] .card-footer {
  border-top-color: var(--ob-border);
}

[data-theme="dark"] .card-link {
  color: var(--ob-accent-warm);
  border-color: var(--ob-accent-warm);
}

/* ========================================
   What's On News page
   ======================================== */
[data-theme="dark"] .hiblava-wrapper {
  background: var(--ob-bg);
}

[data-theme="dark"] .hiblava-header {
  background: var(--ob-bg-alt);
}

[data-theme="dark"] .nav-btn {
  background: var(--ob-bg-warm);
  color: var(--ob-text);
  border-color: var(--ob-border);
}

[data-theme="dark"] .nav-btn.active,
[data-theme="dark"] .nav-btn:hover {
  background: var(--ob-accent);
  border-color: var(--ob-accent);
  color: #fff;
}

[data-theme="dark"] .load-more-btn {
  background: var(--ob-bg-alt);
  color: var(--ob-text);
  border-color: var(--ob-border);
}

[data-theme="dark"] .load-more-btn:hover {
  border-color: var(--ob-accent);
}

/* ========================================
   Cabinet & Login
   ======================================== */
[data-theme="dark"] .login-page {
  background: var(--ob-bg);
}

[data-theme="dark"] .login-card {
  background: var(--ob-card-bg);
  box-shadow: 0 4px 20px var(--ob-card-shadow);
}

[data-theme="dark"] .login-card input {
  background: var(--ob-input-bg);
  border-color: var(--ob-input-border);
  color: var(--ob-text);
}

[data-theme="dark"] .login-card label {
  color: var(--ob-text-secondary);
}

[data-theme="dark"] .cabinet-page {
  background: var(--ob-bg);
}

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

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

/* ========================================
   Premium Tools / Dashboard
   ======================================== */
[data-theme="dark"] .dashboard-page {
  background: var(--ob-bg);
}

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

[data-theme="dark"] .tool-card:hover {
  box-shadow: 0 8px 24px var(--ob-card-hover-shadow);
}

[data-theme="dark"] .tool-card__title {
  color: var(--ob-text-heading);
}

[data-theme="dark"] .tool-card__desc {
  color: var(--ob-text-secondary);
}

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

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

/* ========================================
   Modals
   ======================================== */
[data-theme="dark"] .modal-overlay {
  background: var(--ob-modal-overlay);
}

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

[data-theme="dark"] .modal h2,
[data-theme="dark"] .modal h3 {
  color: var(--ob-text-heading);
}

/* ========================================
   Pricing Cards
   ======================================== */
[data-theme="dark"] .pricing-card {
  background: var(--ob-card-bg);
  border-color: var(--ob-border);
}

[data-theme="dark"] .pricing-card__name {
  color: var(--ob-text-heading);
}

[data-theme="dark"] .pricing-card__price {
  color: var(--ob-text);
}

[data-theme="dark"] .pricing-card__feature {
  color: var(--ob-text-secondary);
}

/* ========================================
   Travel
   ======================================== */
[data-theme="dark"] .travel-page {
  background: var(--ob-bg);
}

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

[data-theme="dark"] .travel-card__title {
  color: var(--ob-text-heading);
}

[data-theme="dark"] .travel-card__desc {
  color: var(--ob-text-secondary);
}

/* ========================================
   Blog Articles
   ======================================== */
[data-theme="dark"] .blog-article {
  background: var(--ob-bg);
}

[data-theme="dark"] .blog-article__content {
  color: var(--ob-text);
}

[data-theme="dark"] .blog-article__content h2,
[data-theme="dark"] .blog-article__content h3 {
  color: var(--ob-text-heading);
}

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

[data-theme="dark"] .blog-card__title {
  color: var(--ob-text-heading);
}

[data-theme="dark"] .blog-card__excerpt {
  color: var(--ob-text-secondary);
}

/* ========================================
   Networking
   ======================================== */
[data-theme="dark"] .networking-page,
[data-theme="dark"] .networking-section {
  background: var(--ob-bg);
}

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

[data-theme="dark"] .service-card__name {
  color: var(--ob-text-heading);
}

[data-theme="dark"] .service-card__desc {
  color: var(--ob-text-secondary);
}

/* ========================================
   Snappy Corn
   ======================================== */
[data-theme="dark"] .snappy-page {
  background: var(--ob-bg);
}

/* ========================================
   Expat Checklist
   ======================================== */
[data-theme="dark"] .checklist-page {
  background: var(--ob-bg);
}

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

[data-theme="dark"] .checklist-step {
  border-bottom-color: var(--ob-border);
  color: var(--ob-text);
}

/* ========================================
   Scrollbar
   ======================================== */
[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--ob-scroll-track);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--ob-scroll-thumb);
}

/* ========================================
   Forms & Inputs
   ======================================== */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: var(--ob-input-bg);
  border-color: var(--ob-input-border);
  color: var(--ob-text);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--ob-text-muted);
}

/* ========================================
   Toasts
   ======================================== */
[data-theme="dark"] .toast {
  background: var(--ob-toast-bg);
  color: var(--ob-toast-text);
}

/* ========================================
   Favorites sidebar badge
   ======================================== */
[data-theme="dark"] .favorites-badge {
  background: var(--ob-accent);
}

/* ========================================
   Theme Toggle Button
   ======================================== */
.theme-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 0;
  cursor: pointer;
  padding: 8px 12px;
  border: 1px solid #333;
  border-radius: 24px;
  background: transparent;
  color: #ccc;
  font-size: 0.78rem;
  font-family: 'Mulish', sans-serif;
  transition: all 0.3s;
  width: fit-content;
}

.theme-toggle:hover {
  border-color: #e86c2e;
  color: #fff;
}

.theme-toggle__icon {
  font-size: 1rem;
  line-height: 1;
}

.theme-toggle__label {
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 600;
}

/* ========================================
   Smooth transition for theme switch
   ======================================== */
body,
.sidebar,
.toolkit,
.toolkit-card,
.whatson-preview,
.whatson-card,
.useful-apps,
.app-card,
.footer,
.card,
.login-card,
.modal-content,
.nav-btn,
input, textarea, select {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ========================================
   HiBlava / WhatsonNews overrides (--hb-* vars)
   ======================================== */
[data-theme="dark"] .hiblava-wrapper {
  --hb-bg: #0f1117;
  --hb-bg-card: #1a1d27;
  --hb-bg-card-hover: #222536;
  --hb-surface: #1e2130;
  --hb-border: #2a2d3d;
  --hb-text: #e0e0e6;
  --hb-text-dim: #8a8aa0;
  --hb-accent: #c4825f;
  --hb-accent-light: #d4956b;
  --hb-accent-glow: rgba(196, 130, 95, 0.25);
}

[data-theme="dark"] .hiblava-wrapper .card.card--own-article {
  background: #1e1810;
  border-color: #8b5e2f;
  box-shadow: 0 2px 12px rgba(139, 94, 47, 0.25);
}

[data-theme="dark"] .hiblava-wrapper .card.card--own-article:hover {
  background: #271f14;
  border-color: #c47a30;
  box-shadow: 0 8px 28px rgba(196, 122, 48, 0.18);
}

[data-theme="dark"] .hiblava-wrapper .card.card--own-article .card-source {
  color: #e8943c;
}

/* ========================================
   Expat Hero Tabs (dark theme)
   ======================================== */
[data-theme="dark"] .page-hero__tabs .page-hero__tab {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .page-hero__tabs .page-hero__tab:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* ========================================
   Access control modal
   ======================================== */
[data-theme="dark"] .access-modal {
  background: var(--ob-modal-bg);
}

[data-theme="dark"] .access-modal h2 {
  color: var(--ob-text-heading);
}

[data-theme="dark"] .access-modal p {
  color: var(--ob-text-secondary);
}

/* ========================================
   Salary Calculator & Cost of Living
   ======================================== */
[data-theme="dark"] .calculator-page {
  background: var(--ob-bg);
}

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

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