/*
 * MythPW visual layer
 * Shared crimson/graphite language for the public website and control panel.
 */

:root {
  --cp-primary-end: #ef5a70;
  --cp-glow: rgba(201, 47, 73, 0.16);
  --cp-glow-strong: rgba(201, 47, 73, 0.24);
  --cp-grid-line: rgba(74, 37, 48, 0.035);
  --cp-highlight: rgba(255, 255, 255, 0.74);
  --cp-glass: rgba(255, 252, 253, 0.84);
}

:root.dark {
  --cp-primary-end: #ff8996;
  --cp-glow: rgba(255, 64, 88, 0.13);
  --cp-glow-strong: rgba(255, 64, 88, 0.22);
  --cp-grid-line: rgba(255, 255, 255, 0.022);
  --cp-highlight: rgba(255, 255, 255, 0.055);
  --cp-glass: rgba(14, 9, 11, 0.82);
}

body.cp-app {
  position: relative;
  background:
    radial-gradient(circle at 80% -10rem, var(--cp-glow), transparent 34rem),
    linear-gradient(var(--cp-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--cp-grid-line) 1px, transparent 1px),
    var(--cp-bg);
  background-size: auto, 32px 32px, 32px 32px, auto;
}

.cp-app-header {
  background: var(--cp-glass);
  box-shadow: 0 1px 0 var(--cp-highlight), 0 12px 40px rgba(47, 23, 30, 0.045);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  backdrop-filter: blur(22px) saturate(145%);
}

.dark .cp-app-header {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.025), 0 14px 48px rgba(0, 0, 0, 0.22);
}

.cp-app-sidebar {
  background:
    radial-gradient(circle at 50% -5rem, var(--cp-glow-strong), transparent 18rem),
    color-mix(in srgb, var(--cp-bg-elevated) 96%, transparent);
  box-shadow: inset -1px 0 var(--cp-highlight);
}

.cp-sidebar-header::after {
  position: absolute;
  right: 24%;
  bottom: -1px;
  left: 24%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cp-primary), transparent);
  box-shadow: 0 0 16px var(--cp-glow-strong);
  content: "";
  opacity: 0.72;
}

.cp-sidebar-logo-wrap {
  filter: drop-shadow(0 8px 18px var(--cp-glow-strong));
}

.sidebar .menu-label {
  padding-top: 1.25rem;
}

.sidebar .menu-label .menu-title {
  color: color-mix(in srgb, var(--cp-muted) 84%, var(--cp-primary));
  letter-spacing: 0.13em;
}

.sidebar .menu-link {
  min-height: 3.1rem;
  border-radius: 0.9rem;
}

.sidebar .menu-link:hover {
  background: linear-gradient(90deg, var(--cp-surface-hover), color-mix(in srgb, var(--cp-surface-hover) 45%, transparent));
}

.sidebar .menu-item.active > .menu-link {
  border-color: var(--cp-primary-border);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--cp-primary) 14%, var(--cp-surface)), color-mix(in srgb, var(--cp-primary) 4%, var(--cp-surface)));
  box-shadow: inset 3px 0 var(--cp-primary), 0 10px 28px var(--cp-glow);
}

.sidebar .menu-icon {
  width: 2rem;
  height: 2rem;
  flex-basis: 2rem;
  border: 1px solid var(--cp-border);
  border-radius: 0.7rem;
  background: var(--cp-surface-muted);
}

.sidebar .menu-link:hover .menu-icon {
  border-color: var(--cp-border-strong);
  color: var(--cp-text);
}

.sidebar .menu-item.active > .menu-link .menu-icon {
  border-color: var(--cp-primary-border);
  background: var(--cp-surface-raised);
  box-shadow: inset 0 0 0 1px var(--cp-primary-soft), 0 7px 18px var(--cp-glow);
  color: var(--cp-primary);
}

.sidebar .menu-item.active > .menu-link .menu-icon i.cp-icon-ready,
.sidebar .menu-item.active > .menu-link .menu-icon .cp-icon-svg {
  color: var(--cp-primary) !important;
  stroke: currentColor;
  opacity: 1;
}

.cp-content-container {
  padding: clamp(1.25rem, 2.4vw, 2.5rem);
}

.cp-page-shell {
  gap: clamp(1.25rem, 2vw, 1.75rem);
}

.cp-page-heading {
  min-height: 3.75rem;
}

.cp-page-heading__icon,
.cp-public-promo__icon,
.cp-promo-editor__heading-icon,
.cp-promo-editor__section-icon {
  border-color: var(--cp-primary-border);
  background:
    radial-gradient(circle at 30% 20%, color-mix(in srgb, #fff 22%, transparent), transparent 58%),
    var(--cp-primary-soft);
  box-shadow: inset 0 1px var(--cp-highlight), 0 10px 24px var(--cp-glow);
}

.cp-page-heading__icon {
  width: 3rem;
  height: 3rem;
  flex-basis: 3rem;
  border-radius: 1rem;
}

.cp-page-heading__title {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 780;
  letter-spacing: -0.05em;
}

.cp-page-heading__subtitle {
  margin-top: 0.32rem;
}

.card,
.box,
.well,
.cp-soft-panel,
.cp-admin-userinfo__panel,
.cp-promo-editor,
.donate-card {
  border-color: var(--cp-border);
  background:
    linear-gradient(145deg, var(--cp-highlight), transparent 8rem),
    var(--cp-surface);
  box-shadow: var(--cp-shadow-xs);
}

.card-header,
.box-header {
  background: linear-gradient(180deg, color-mix(in srgb, var(--cp-surface-raised) 72%, transparent), transparent);
}

.card-title,
.box-header h2,
.box-header h3 {
  font-weight: 730;
  letter-spacing: -0.03em;
}

.btn-primary,
.login__submit,
.btn-outline.login__submit {
  border-color: color-mix(in srgb, var(--cp-primary) 82%, #fff);
  background: linear-gradient(135deg, var(--cp-primary), var(--cp-primary-end));
  box-shadow: 0 10px 26px var(--cp-glow-strong), inset 0 1px rgba(255, 255, 255, 0.24);
  color: #fff;
}

.btn-primary:hover,
.login__submit:hover,
.btn-outline.login__submit:hover {
  border-color: var(--cp-primary-hover);
  background: linear-gradient(135deg, var(--cp-primary-hover), color-mix(in srgb, var(--cp-primary-end) 88%, #fff));
  box-shadow: 0 14px 34px var(--cp-glow-strong), inset 0 1px rgba(255, 255, 255, 0.3);
  color: #fff;
}

.btn-light,
.btn-outline,
.btn-clear,
.btn-outline.btn-dark,
.cp-theme-toggle,
.cp-header-icon-btn {
  box-shadow: inset 0 1px var(--cp-highlight);
}

.input,
.select,
.textarea,
#myTabContent input[type="text"]:not(.input),
#myTabContent input[type="password"]:not(.input),
#myTabContent input[type="number"]:not(.input),
#myTabContent textarea:not(.textarea),
#myTabContent select:not(.select),
.form-horizontal input[type="text"],
.form-horizontal input[type="password"],
.form-horizontal input[type="email"],
.form-horizontal input[type="number"],
.form-horizontal select,
.form-horizontal textarea {
  border-color: var(--cp-border);
  background-color: color-mix(in srgb, var(--cp-surface-muted) 82%, var(--cp-surface));
  box-shadow: inset 0 1px 2px rgba(53, 25, 34, 0.025);
}

.input:focus,
.select:focus,
.textarea:focus,
#myTabContent input:focus,
#myTabContent select:focus,
#myTabContent textarea:focus,
.form-horizontal input:focus,
.form-horizontal select:focus,
.form-horizontal textarea:focus {
  box-shadow: 0 0 0 4px var(--cp-focus), inset 0 1px 2px transparent;
}

.dropdown-content,
.popover,
.popup,
.modal,
.cp-modal > .card {
  background: color-mix(in srgb, var(--cp-surface-raised) 96%, transparent);
  box-shadow: var(--cp-shadow-lg), inset 0 1px var(--cp-highlight);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
  backdrop-filter: blur(22px) saturate(130%);
}

.nav.nav-tabs {
  border-color: var(--cp-border);
  background: color-mix(in srgb, var(--cp-surface-muted) 88%, transparent);
}

.nav.nav-tabs > li.active > a {
  box-shadow: 0 6px 18px rgba(53, 25, 34, 0.07), inset 0 1px var(--cp-highlight);
}

.table thead th {
  background: color-mix(in srgb, var(--cp-surface-muted) 90%, var(--cp-surface));
}

.badge-primary,
.badge-outline.badge-primary,
.dark .badge-primary,
.dark .badge-outline.badge-primary,
.label-info {
  border-color: var(--cp-primary-border);
  background: color-mix(in srgb, var(--cp-primary) 12%, var(--cp-surface));
  color: var(--cp-primary) !important;
  box-shadow: inset 0 1px var(--cp-highlight);
}

.dark .badge-primary,
.dark .badge-outline.badge-primary {
  color: #ffabb7 !important;
}

/* Remove the old Metronic blue from utility-driven and legacy components. */
.text-primary,
.dark .text-primary {
  color: var(--cp-primary) !important;
}

.text-primary-active,
.dark .text-primary-active {
  color: var(--cp-primary-hover) !important;
}

.bg-primary-light,
.dark .bg-primary-light {
  background-color: var(--cp-primary-soft) !important;
}

.border-l-primary {
  border-left-color: var(--cp-primary) !important;
}

.tab-active\:bg-primary-light.active,
[data-tab-toggle].active,
.dark .tab-active\:bg-primary-light.active,
.dark [data-tab-toggle].active {
  border-color: var(--cp-primary-border);
  background-color: var(--cp-primary-soft);
  color: var(--cp-primary);
}

.dark input.input:focus,
.dark textarea.textarea:focus,
.dark select.select:focus,
.dark .input-group:focus-within .input-group-text,
.dark .input-group:focus-within .input,
.cp-shop-admin-editor input[type="text"]:focus,
.cp-shop-admin-editor input[type="number"]:focus,
.cp-shop-admin-editor textarea:focus {
  border-color: var(--cp-primary);
  box-shadow: 0 0 0 4px var(--cp-focus);
}

.dark .popover .label-info,
.label-info {
  border-color: var(--cp-primary-border);
  background: var(--cp-primary-soft);
  color: var(--cp-primary);
}

.iPhoneCheckContainer.is-checked,
.iPhoneCheckContainer:has(input:checked),
.iOSCheckContainer.is-checked,
.iOSCheckContainer:has(input:checked),
.dark .iPhoneCheckContainer.is-checked,
.dark .iPhoneCheckContainer:has(input:checked),
.dark .iOSCheckContainer.is-checked,
.dark .iOSCheckContainer:has(input:checked) {
  border-color: var(--cp-primary-border);
  background: var(--cp-primary);
}

.cp-shop .shop_count,
.cp-shop .notification_adm_clone {
  border-color: var(--cp-primary-border);
  background: var(--cp-primary-soft);
  color: var(--cp-primary);
}

.cp-shop .notification_adm_clone:hover {
  background: color-mix(in srgb, var(--cp-primary) 16%, transparent);
}

.dark .cp-theme-toggle {
  border-color: var(--cp-border);
  background: var(--cp-surface);
}

.dark .cp-theme-toggle:hover {
  border-color: var(--cp-primary-border);
  background: var(--cp-primary-soft);
}

.dark .cp-theme-icon {
  color: var(--cp-primary);
  stroke-width: 2;
}

/* Sidebar support contact: replace the broken legacy user glyph with Discord. */
.cp-sidebar-footer .ar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--cp-border);
  border-radius: 0.9rem;
  background: color-mix(in srgb, var(--cp-surface-muted) 76%, transparent);
  color: var(--cp-muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

.cp-sidebar-footer .ar > i.icon-user {
  display: none;
}

.cp-sidebar-footer .ar > i.cp-discord-icon.cp-icon-ready {
  display: inline-flex;
  width: 1.2rem;
  height: 1.2rem;
  color: var(--cp-primary);
  font-size: 1.2rem;
}

.cp-sidebar-footer .ar a {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0 0.55rem;
  border: 1px solid var(--cp-primary-border);
  border-radius: var(--cp-radius-pill);
  background: var(--cp-primary-soft);
  color: var(--cp-primary);
  font-weight: 750;
  text-decoration: none;
  transition: border-color var(--cp-transition), background-color var(--cp-transition), color var(--cp-transition), transform var(--cp-transition);
}

.cp-sidebar-footer .ar a:hover {
  border-color: var(--cp-primary);
  background: var(--cp-primary);
  color: #fff;
  transform: translateY(-1px);
}

/* Auth screens */
.auth-page-container::before {
  background:
    linear-gradient(135deg, rgba(21, 8, 13, 0.47), rgba(32, 13, 20, 0.62)),
    url("../img/bg.jpg") center / cover no-repeat;
}

.auth-page-container::after {
  background:
    radial-gradient(circle at 70% 34%, rgba(255, 64, 88, 0.12), transparent 26rem),
    linear-gradient(0deg, rgba(7, 3, 5, 0.24), rgba(7, 3, 5, 0.12));
}

.dark .auth-page-container::before {
  background:
    linear-gradient(135deg, rgba(7, 3, 5, 0.72), rgba(18, 7, 11, 0.78)),
    url("../img/bg.jpg") center / cover no-repeat;
}

.login-container {
  isolation: isolate;
  border-color: color-mix(in srgb, var(--cp-primary) 12%, var(--cp-border));
  background: color-mix(in srgb, var(--cp-surface) 91%, transparent);
  box-shadow: 0 36px 110px rgba(8, 2, 4, 0.38), inset 0 1px rgba(255, 255, 255, 0.7);
}

.login-container::before {
  position: absolute;
  z-index: 1;
  top: -1px;
  right: 3.5rem;
  left: 3.5rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cp-primary), transparent);
  box-shadow: 0 0 20px var(--cp-glow-strong);
  content: "";
}

.dark .login-container {
  background: color-mix(in srgb, var(--cp-surface) 88%, transparent);
  box-shadow: 0 36px 110px rgba(0, 0, 0, 0.55), inset 0 1px rgba(255, 255, 255, 0.055);
}

@supports (backdrop-filter: blur(1px)) {
  .login-container,
  .dark .login-container {
    -webkit-backdrop-filter: blur(28px) saturate(135%);
    backdrop-filter: blur(28px) saturate(135%);
  }
}

.auth-brand__mark {
  border-color: var(--cp-primary-border);
  background:
    radial-gradient(circle at 30% 18%, color-mix(in srgb, #fff 45%, transparent), transparent 56%),
    var(--cp-primary-soft);
  box-shadow: 0 10px 28px var(--cp-glow), inset 0 1px var(--cp-highlight);
}

.auth-brand__title {
  letter-spacing: -0.035em;
}

.login-nav {
  background: color-mix(in srgb, var(--cp-surface-muted) 86%, transparent);
}

.login-nav__item.active a {
  box-shadow: 0 7px 18px rgba(53, 25, 34, 0.08), inset 0 1px var(--cp-highlight);
}

.login__input,
.login-container input[type="email"],
.login-container input[type="password"],
.login-container input[type="search"],
.login-container input[type="tel"],
.login-container input[type="text"],
.login-container select,
.login-container textarea {
  border-color: var(--cp-border);
  background: color-mix(in srgb, var(--cp-surface-muted) 84%, var(--cp-surface));
  box-shadow: inset 0 1px 2px rgba(53, 25, 34, 0.03);
}

.login__input:focus,
.login-container input:focus,
.login-container select:focus,
.login-container textarea:focus {
  box-shadow: 0 0 0 4px var(--cp-focus);
}

.back-to-site-link {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(12, 7, 9, 0.48);
  color: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.back-to-site-link:hover {
  border-color: rgba(255, 91, 112, 0.38);
  background: rgba(28, 12, 17, 0.7);
  color: #fff;
}

/* Standalone registration remains readable while sharing the same artwork. */
.cp-legacy-auth {
  background:
    linear-gradient(135deg, rgba(244, 239, 241, 0.9), rgba(244, 239, 241, 0.82)),
    url("../img/bg.jpg") center / cover fixed no-repeat;
}

.dark.cp-legacy-auth,
.dark .cp-legacy-auth {
  background:
    linear-gradient(135deg, rgba(8, 5, 6, 0.94), rgba(14, 9, 11, 0.9)),
    url("../img/bg.jpg") center / cover fixed no-repeat;
}

.cp-legacy-auth > .container-fluid > .row-fluid > .box,
.cp-legacy-auth > .container-fluid > .row-fluid > .well.box {
  border-color: color-mix(in srgb, var(--cp-primary) 12%, var(--cp-border));
  box-shadow: var(--cp-shadow-lg);
}

@media (max-width: 767px) {
  .cp-content-container {
    padding: 1rem 0.75rem 1.5rem;
  }

  .login-container {
    border-radius: 1.35rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .cp-page-heading__icon,
  .auth-brand__mark {
    animation: cp-accent-breathe 7s ease-in-out infinite;
  }
}

@keyframes cp-accent-breathe {
  0%, 100% { box-shadow: inset 0 1px var(--cp-highlight), 0 10px 24px var(--cp-glow); }
  50% { box-shadow: inset 0 1px var(--cp-highlight), 0 12px 32px var(--cp-glow-strong); }
}