/**
 * Modern UI layer — depth, radius, motion only.
 * Does NOT override header/panel/modal backgrounds (those broke contrast / white-on-white with glass).
 * Palette vars from layout/style.phtml remain available for accents only.
 */

:root {
  --modern-radius-sm: 10px;
  --modern-radius: 14px;
  --modern-radius-lg: 20px;
  --modern-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --modern-duration: 0.22s;
}

/* Subtle page depth — solid base color only, no !important fight with theme */
body:not(.night-mode) {
  background-color: var(--modern-page-bg, #f9f9f9);
}

/* Header: depth only — keep navbar colors from theme (style.phtml) */
.header-container {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 4px 20px rgba(0, 0, 0, 0.04);
}

.navbar-fixed-top.navbar-default {
  border-radius: 0 0 var(--modern-radius-sm) var(--modern-radius-sm);
}

/* Cards: shape + shadow only — do not replace panel background */
body:not(.night-mode) .panel-white,
body:not(.night-mode) .wowonder-well,
body:not(.night-mode) .wo-content-shadow,
body:not(.night-mode) .publisher-box .panel,
body:not(.night-mode) .featured-users,
body:not(.night-mode) .sidebar .sidebar-profile-style.card,
body:not(.night-mode) .post > .panel {
  border-radius: var(--modern-radius) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.06) !important;
  transition: box-shadow var(--modern-duration) var(--modern-ease);
}

@supports (color: color-mix(in srgb, white 50%, black)) {
  body:not(.night-mode) .panel-white,
  body:not(.night-mode) .wowonder-well,
  body:not(.night-mode) .wo-content-shadow,
  body:not(.night-mode) .publisher-box .panel,
  body:not(.night-mode) .featured-users,
  body:not(.night-mode) .sidebar .sidebar-profile-style.card,
  body:not(.night-mode) .post > .panel {
    box-shadow:
      0 2px 12px rgba(0, 0, 0, 0.06),
      0 0 0 1px color-mix(in srgb, var(--modern-accent, #a84849) 8%, rgba(0, 0, 0, 0.05)) !important;
  }
}

body:not(.night-mode) .post > .panel {
  overflow: hidden;
}

body:not(.night-mode) .post > .panel:hover,
body:not(.night-mode) .panel-white:hover {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(168, 72, 73, 0.14) !important;
}

@supports (color: color-mix(in srgb, white 50%, black)) {
  body:not(.night-mode) .post > .panel:hover,
  body:not(.night-mode) .panel-white:hover {
    box-shadow:
      0 8px 28px rgba(0, 0, 0, 0.08),
      0 0 0 1px color-mix(in srgb, var(--modern-accent, #a84849) 14%, rgba(0, 0, 0, 0.06)) !important;
  }
}

body.night-mode .panel-white,
body.night-mode .wowonder-well,
body.night-mode .wo-content-shadow,
body.night-mode .publisher-box .panel,
body.night-mode .featured-users,
body.night-mode .sidebar .sidebar-profile-style.card,
body.night-mode .post > .panel {
  border-radius: var(--modern-radius) !important;
}

/* Post footer: no backdrop (was muddying contrast) */
body:not(.night-mode) .post .post-footer {
  border-radius: 0 0 var(--modern-radius-sm) var(--modern-radius-sm);
}

/* Dropdowns: chrome only */
.dropdown-menu:not(.search-dropdown-container) {
  border-radius: var(--modern-radius-sm) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12) !important;
}

body.night-mode .dropdown-menu:not(.search-dropdown-container) {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45) !important;
}

/* Modals: shape + shadow only */
.modal-content {
  border-radius: var(--modern-radius-lg) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.2) !important;
  overflow: hidden;
}

body.night-mode .modal-content {
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55) !important;
}

/* Primary actions */
.btn-main,
.bg-main,
button.bg-main {
  border-radius: var(--modern-radius-sm) !important;
  transition: transform var(--modern-duration) var(--modern-ease), box-shadow var(--modern-duration) var(--modern-ease);
}

.btn-main:hover,
.bg-main:hover,
button.bg-main:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--modern-accent, #a84849) 35%, transparent);
}

@supports not (color: color-mix(in srgb, white 50%, black)) {
  .btn-main:hover,
  .bg-main:hover,
  button.bg-main:hover {
    box-shadow: 0 8px 22px rgba(168, 72, 73, 0.28);
  }
}

.left-sidebar ul li a {
  border-radius: var(--modern-radius-sm) !important;
  transition: background var(--modern-duration) var(--modern-ease), transform var(--modern-duration) var(--modern-ease);
}

.left-sidebar ul li a:hover {
  transform: translateY(-1px);
}

.header-container .search-input,
.header-container .navbar-form .form-control.search-input {
  border-radius: 999px !important;
  transition: box-shadow var(--modern-duration) var(--modern-ease), border-color var(--modern-duration) var(--modern-ease);
}

.header-container .search-input:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--modern-accent, #a84849) 22%, transparent);
}

@supports not (color: color-mix(in srgb, white 50%, black)) {
  .header-container .search-input:focus {
    box-shadow: 0 0 0 3px rgba(168, 72, 73, 0.2);
  }
}

.welcome-container .login {
  border-radius: var(--modern-radius-lg) !important;
  overflow: hidden;
}

.welcome-container .wo_r_features {
  border-radius: var(--modern-radius) !important;
}

.setting-well input[type="text"],
.setting-well input[type="password"],
.setting-well select,
.setting-well textarea {
  border-radius: var(--modern-radius-sm) !important;
  transition: box-shadow var(--modern-duration) var(--modern-ease);
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--modern-accent, #a84849);
  outline-offset: 2px;
}