/* ====== BUTTON OVERRIDES ====== */
/* Aurora Glass: pill-shaped, frosted/semi-transparent, compact, smaller text.
   See public/css/design-system.css + docs/DESIGN_THEME_DOCUMENTATION.md. */
.btn {
  border-radius: var(--radius-pill, 999px) !important;   /* fully rounded pill */
  padding: 0.42rem 0.95rem !important;                   /* compact */
  font-weight: 600 !important;
  font-size: 0.8rem !important;                          /* smaller text */
  letter-spacing: 0.01em !important;
  transition: var(--transition-cyber, var(--transition-smooth)) !important;
  border: 1px solid var(--glass-border, rgba(0, 0, 0, 0.1)) !important;
  background:
    linear-gradient(135deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.02)),
    var(--glass-bg, rgba(0, 0, 0, 0.045)) !important;  /* semi-transparent glass */
  -webkit-backdrop-filter: blur(16px) !important;        /* blurry */
  backdrop-filter: blur(16px) !important;
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.06) !important;
  position: relative !important;
  overflow: hidden !important;
  text-transform: initial !important;
  line-height: 1.3 !important;
}

/* Keep the touch target reasonable while staying compact. */
.btn-lg { padding: 0.6rem 1.4rem !important; font-size: 0.9rem !important; }
.btn-sm { padding: 0.3rem 0.75rem !important; font-size: 0.72rem !important; }

.btn:hover {
  transform: translateY(-2px) !important;
  border-color: var(--cyber-border-strong, rgba(88, 88, 88, 0.34)) !important;
  box-shadow: var(--cyber-shadow-soft, var(--shadow-md)) !important;
}

.btn-primary {
  background: var(--primary-gradient) !important;
  color: var(--on-primary, #f6f6f6) !important;
  border-color: var(--line-strong) !important;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(0, 0, 0, 0.06) !important;
}

.btn-primary:hover {
  background: var(--primary-gradient-hover) !important;
  box-shadow: var(--shadow-primary), 0 0 24px rgba(0, 0, 0, 0.16) !important;
}
.btn-primary-50 {
  background: var(--primary-gradient-50) !important;
  color: var(--on-primary, #f6f6f6) !important;
}
.btn-gradient-border {
  border: 2px solid !important;
  border-image-slice: 1;
  border-width: 2px;
  border-image-source: var(--primary-gradient);
  background: transparent !important;
  color: var(--primary-color) !important;
}

/* ====== PROMO DISCOUNT BUTTON ====== */
.btn-promo-discount {
  background: transparent !important;
  border: 2px solid #1d8660 !important;
  border-radius: 50px !important;
  color: var(--ink) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  padding: 0.35rem 1rem !important;
  white-space: nowrap;
  letter-spacing: 0.01em;
  transition: all 0.25s ease !important;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.06), inset 0 0 8px rgba(0, 0, 0, 0.06) !important;
}

.btn-promo-discount:hover {
  background: rgba(29, 134, 96, 0.1) !important;
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.06), inset 0 0 12px rgba(0, 0, 0, 0.06) !important;
  transform: translateY(-1px) !important;
}

.btn-promo-discount:active {
  transform: scale(0.97) !important;
}

.promo-discount-highlight {
  color: #1d8660 !important;
  font-weight: 700;
}
.btn-outline-primary {
  border: 1px solid var(--cyber-border-strong, rgba(88, 88, 88, 0.34)) !important;
  color: var(--primary-light) !important;
  text-shadow: none !important;
  background:
    linear-gradient(135deg, rgba(119, 119, 119, 0.08), rgba(133, 133, 133, 0.035)),
    transparent !important;
  backdrop-filter: blur(10px);
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(0, 0, 0, 0.06) !important;
}

.btn-outline-primary:hover {
  background: var(--primary-gradient) !important;
  color: var(--on-primary, #f6f6f6) !important;
  border-color: var(--primary-color) !important;
}

.btn-secondary {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.11), rgba(0, 0, 0, 0.035)) !important;
  color: var(--ink) !important;
  border-color: var(--cyber-border, rgba(88, 88, 88, 0.18)) !important;
}

.btn-success {
  background: linear-gradient(135deg, var(--success-color), var(--success-light)) !important;
  color: var(--status-ink) !important;
}

.btn-danger {
  background: linear-gradient(90.9deg, var(--danger-light), var(--danger-color)) !important;
  color: var(--status-ink) !important;
}

.btn-warning {
  background: linear-gradient(135deg, var(--warning-color), var(--warning-light)) !important;
  color: var(--ink) !important;
}

.btn-info {
  background: linear-gradient(135deg, var(--info-color), var(--info-light)) !important;
  color: var(--brand-ink) !important;
}

.btn-light {
  background: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
}

.btn-light:hover {
  background: var(--bg-surface-hover) !important;
  color: var(--text-primary) !important;
}

.btn-dark {
  background: linear-gradient(135deg, var(--dark-color), var(--dark-alt)) !important;
  color: var(--ink) !important;
}

/* Button ripple effect */
.btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: var(--scrim-soft);
  transition: var(--transition-ripple);
  transform: translate(-50%, -50%);
}

.btn:active::before {
  width: 300px;
  height: 300px;
}

/* ====== FORM CONTROLS ====== */
.form-control {
  min-height: 44px !important;
  border-radius: 16px !important;
  padding: 0.72rem 0.95rem !important;
  transition: var(--transition-cyber, var(--transition-ease)) !important;
  /* Opaque well, not glass: a near-transparent field lets whatever sits behind
     it (and, on mobile, the browser's own dark field paint) show through, which
     is how these turned into black boxes inside modals. */
  background: var(--surface-sunken) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--cyber-border, var(--border-color)) !important;
  font-size: 0.95rem !important;
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.06) !important;
  caret-color: var(--accent-cyan, var(--primary-light)) !important;
}

.form-control::placeholder {
  color: var(--text-muted) !important;
}
#userMessage.form-control {
  border: unset!important;
  border-color: unset!important;
}

/* 1. First, your normal focus style for ALL form-controls */
.form-control:focus {
    background: var(--surface-raised) !important;
    border-color: var(--cyber-border-strong, var(--primary-color)) !important;
    box-shadow: var(--cyber-glow, 0 0 0 0.2rem rgba(0, 0, 0, 0.06)) !important;
    outline: none !important;
    transform: translateY(-1px) !important;
}

/* 2. Then override specifically for #userMessage (this rule comes AFTER) */
#userMessage.form-control:focus,
#userMessage.form-control:hover {
    border-color: transparent !important;     /* or whatever color you want */
    border: 1px solid transparent !important; /* or just `border: none !important;` */
    box-shadow: none !important;
    transform: none !important;
}

.form-control:hover {
  border-color: var(--cyber-border-strong, var(--primary-light)) !important;
  box-shadow: var(--cyber-shadow-soft, inset 0 1px 0 rgba(0, 0, 0, 0.06)) !important;
}

textarea.form-control {
  min-height: 120px !important;
  resize: vertical;
}

.form-select {
  min-height: 44px !important;
  border-radius: 16px !important;
  border: 1px solid var(--cyber-border, var(--border-color)) !important;
  padding: 0.72rem 2.4rem 0.72rem 0.95rem !important;
  transition: var(--transition-cyber, var(--transition-ease)) !important;
  background-color: var(--cyber-surface, var(--bg-tertiary)) !important;
  color: var(--text-primary) !important;
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.06) !important;
}

.form-select:focus {
  border-color: var(--cyber-border-strong, var(--primary-color)) !important;
  box-shadow: var(--cyber-glow, 0 0 0 0.2rem rgba(0, 0, 0, 0.06)) !important;
}

/* ====== FORM CHECK (CHECKBOX / RADIO / SWITCH) ======
   The canonical control for the whole app. Two rules matter here:

   1. TOKENS FROM theme.css ONLY. The old version reached for the style.css
      aliases (--primary-gradient, --cyber-border, --text-primary). Those live
      in style.css, which is NOT loaded on every page — and an undefined var()
      kills the whole declaration, so a "checked" box silently fell back to its
      unchecked fill. theme.css is loaded first everywhere, so only its names
      are safe here.
   2. THE MARK MUST CONTRAST WITH THE FILL. The checked box is --brand-fill,
      so the tick and the radio dot are --brand-ink (the label colour that
      token guarantees), never a line colour — a dark tick on a dark fill is
      an invisible checkbox, which is what the old rules drew. */
.form-check {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding-left: 0 !important;
  min-height: auto !important;
  margin-bottom: 0.5rem !important;
}

.form-check-input {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  border-radius: 6px !important;
  border: 1.5px solid var(--line-strong) !important;
  background-color: var(--surface-page) !important;
  background-image: none !important;
  cursor: pointer !important;
  position: relative !important;
  transition: background-color 0.16s ease, border-color 0.16s ease,
              box-shadow 0.16s ease !important;
  margin: 0 !important;
  float: none !important;
  flex-shrink: 0 !important;
  box-shadow: none !important;
}

.form-check-input:hover {
  border-color: var(--ink-muted) !important;
  background-color: var(--surface-sunken) !important;
}

.form-check-input:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px var(--focus-ring) !important;
}

.form-check-input:checked {
  background-color: var(--brand-fill) !important;
  border-color: var(--brand-fill) !important;
  background-image: none !important;
}

.form-check-input:checked:hover {
  background-color: var(--brand-fill-hover) !important;
  border-color: var(--brand-fill-hover) !important;
}

/* The tick: a rotated L drawn in the fill's own label colour. */
.form-check-input[type="checkbox"]:checked::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 5px !important;
  height: 9px !important;
  border: solid var(--brand-ink) !important;
  border-width: 0 2px 2px 0 !important;
  border-radius: 1px !important;
  transform: translate(-50%, -60%) rotate(45deg) !important;
}

/* Partial selection (a "select all" head with some rows ticked). */
.form-check-input[type="checkbox"]:indeterminate {
  background-color: var(--brand-fill) !important;
  border-color: var(--brand-fill) !important;
  background-image: none !important;
}

.form-check-input[type="checkbox"]:indeterminate::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 10px !important;
  height: 2px !important;
  border-radius: 1px !important;
  background-color: var(--brand-ink) !important;
  transform: translate(-50%, -50%) !important;
  border: none !important;
}

.form-check-input:active {
  transform: scale(0.95) !important;
}

.form-check-label {
  cursor: pointer !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  user-select: none !important;
  line-height: 1.4 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.form-check-label:hover {
  color: var(--ink) !important;
}

/* ====== FORM SWITCH - iOS/Native App Style ====== */
.form-switch {
  padding-left: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
}

/* Knob is drawn as a background-image (a white circle) rather than a
   pseudo-element, because ::before/::after on <input> elements is rendered
   inconsistently across browsers. This guarantees a light-coloured knob and
   overrides Bootstrap's default (grey) switch thumb. The track colour comes
   from a token-driven gradient so the switch follows the theme. */
.form-switch .form-check-input {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 46px !important;
  height: 26px !important;
  min-width: 46px !important;
  border-radius: 999px !important;
  background-color: var(--fill-mid-soft) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='4' fill='%23ffffff'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: left 3px center !important;
  background-size: 20px 20px !important;
  border: 1px solid var(--line) !important;
  cursor: pointer !important;
  position: relative !important;
  transition: background-color 0.22s ease, border-color 0.22s ease,
              box-shadow 0.22s ease, background-position 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  margin: 0 !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.16) !important;
}

.form-switch .form-check-input::before,
.form-switch .form-check-input::after {
  display: none !important;
}

.form-switch .form-check-input:hover {
  border-color: var(--line-strong) !important;
  background-color: var(--fill-mid) !important;
}

.form-switch .form-check-input:focus {
  outline: none !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.16), 0 0 0 3px var(--focus-ring) !important;
}

.form-switch .form-check-input:checked {
  background-color: var(--status-success) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='4' fill='%23ffffff'/%3e%3c/svg%3e") !important;
  background-position: right 3px center !important;
  background-size: 20px 20px !important;
  background-repeat: no-repeat !important;
  border-color: var(--status-success) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12) !important;
}

.form-switch .form-check-input:checked:focus {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), 0 0 0 3px var(--focus-ring) !important;
}

.form-switch .form-check-input:checked:hover {
  background-color: var(--status-success) !important;
  border-color: var(--status-success) !important;
  filter: brightness(1.08) !important;
}

.form-switch .form-check-input:active {
  transform: none !important;
}

/* Disabled states */
.form-check-input:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

.form-check-input:disabled + .form-check-label {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* ====== RADIO BUTTONS - Native App Style ====== */
.form-check-input[type="radio"] {
  border-radius: 50% !important;
  width: 20px !important;
  height: 20px !important;
}

.form-check-input[type="radio"]:checked {
  background-color: var(--brand-fill) !important;
  border-color: var(--brand-fill) !important;
}

.form-check-input[type="radio"]:checked::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background-color: var(--brand-ink) !important;
  transform: translate(-50%, -50%) !important;
  border: none !important;
}


/* ====== FORM CHECK INLINE ====== */
.form-check-inline {
  display: inline-flex !important;
  align-items: center !important;
  margin-right: 1rem !important;
}

/* ====== FORM CHECK SIZING VARIANTS ====== */
.form-check-sm .form-check-input {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
}

.form-check-sm .form-check-label {
  font-size: 0.8125rem !important;
}

.form-check-lg .form-check-input {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
}

.form-check-lg .form-check-label {
  font-size: 1rem !important;
}

/* Switch size variants: the knob is a background-image, so a smaller track
   means a smaller background-size, not a smaller ::before (which is off). */
.form-switch.form-check-sm .form-check-input {
  width: 38px !important;
  height: 22px !important;
  min-width: 38px !important;
  background-size: 16px 16px !important;
}

.form-switch.form-check-lg .form-check-input {
  width: 54px !important;
  height: 30px !important;
  min-width: 54px !important;
  background-size: 24px 24px !important;
}

/* ====== IMAGE INFO MODAL ====== */

  .bg-gradient-purple {
    background: linear-gradient(135deg, #5a5a5a, #7c7c7c) !important;
  }
  #imagePreviewModal .modal-content { 
    background: none !important; 
    border: none;
    backdrop-filter: blur(5px);
 }
  /* A modal is an opaque sheet, never glass: the frosted panel gradient is
     almost fully transparent, so the page underneath bled straight through
     (chat list, dashboard, coin grid — all readable behind the dialog). */
  .modal-content {
   background: var(--surface-overlay) !important;
   border: 1px solid var(--cyber-border, var(--glass-border)) !important;
   color: var(--text-primary) !important;
   box-shadow: var(--cyber-shadow, var(--shadow-modal)) !important;
 }
  .modal-dialog { max-width:500px; margin:0 auto; }
  @media (min-width:576px) { .modal-dialog { margin:1rem auto; } }

/* ====== VIDEO GEN OVERLAY ICON ====== */
.video-icon-overlay{
  font-size: 40px !important;
}
@media screen and (max-width: 768px) {
  .video-icon-overlay{
    font-size: 30px !important;
  }
}
@media screen and (max-width: 480px) {
  .video-icon-overlay{
    font-size: 30px !important;
  }
}
/* ====== CARD OVERRIDES ====== */
.card {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--cyber-border, var(--glass-border)) !important;
  background: var(--cyber-panel-gradient, var(--bg-secondary)) !important;
  box-shadow: var(--cyber-shadow-soft, var(--shadow-sm)) !important;
  transition: var(--transition-cyber, var(--transition-smooth)) !important;
  overflow: hidden !important;
}

.card:hover {
  border-color: var(--cyber-border-strong, var(--border-primary)) !important;
  box-shadow: var(--cyber-shadow, var(--shadow-lg)) !important;
}

.card-header {
  background: linear-gradient(90deg, rgba(119, 119, 119, 0.14), rgba(133, 133, 133, 0.04)) !important;
  border-bottom: 1px solid var(--cyber-border, var(--border-light)) !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  padding: var(--spacing-lg) !important;
  font-weight: 600 !important;
}

.card-footer {
  background: var(--veil) !important;
  border-top: 1px solid var(--cyber-border, var(--border-light)) !important;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
  padding: var(--spacing-lg) !important;
}

/* ====== MODAL OVERRIDES ====== */
/* Mobile viewport height fix - use dynamic viewport height for better mobile support */
:root {
  --vh: 1vh; /* Fallback, will be set by JavaScript */
}

.modal-content {
  border-radius: 24px !important;
  border: 1px solid var(--cyber-border, var(--glass-border)) !important;
  /* Opaque — see the note on the earlier .modal-content rule. */
  background: var(--surface-overlay) !important;
  box-shadow: var(--cyber-shadow, var(--shadow-modal)) !important;
  animation: modalSlideIn 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
.modal-body {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  flex: 1 1 auto !important;
  -webkit-overflow-scrolling: touch;
}
#imagePreviewModal .modal-body{
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
#imagePreviewModal .image-like-overlay {
  display: none !important;
}
.modal-header {
  padding: 16px 18px !important;
  border-radius: 24px 24px 0 0 !important;
  background:
    linear-gradient(90deg, rgba(119, 119, 119, 0.18), rgba(133, 133, 133, 0.055)),
    rgba(241, 241, 241, 0.62);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-bottom: 1px solid var(--cyber-border, var(--border-light)) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.modal-header .btn-close {
  order: 1 !important;
  margin-right: 0 !important;
}

.modal-header .modal-title {
  order: 2 !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  text-align: right !important;
}

.modal-footer {
  border-top: 1px solid var(--cyber-border, var(--border-light)) !important;
  padding: 14px 18px !important;
  border-radius: 0 0 24px 24px !important;
  background: var(--veil) !important;
  flex-shrink: 0 !important;
}

/* Mobile viewport height fixes for modals */
@media (max-width: 768px) {
  /* Use dynamic viewport height (dvh) with fallback to CSS variable */
  .modal-dialog {
    max-height: calc(var(--vh, 1vh) * 95) !important;
    max-height: 95dvh !important; /* Modern browsers support dvh */
    margin: 0.5rem auto !important;
  }
  
  .modal-content {
    max-height: calc(var(--vh, 1vh) * 95) !important;
    max-height: 95dvh !important;
  }
}

@media (max-width: 576px) {
  .modal-dialog {
    max-height: calc(var(--vh, 1vh) * 90) !important;
    max-height: 100dvh !important;
    margin: 0.25rem auto !important;
  }
  
  .modal-content {
    max-height: calc(var(--vh, 1vh) * 90) !important;
    max-height: 100dvh !important;
  }
}

.modal-title {
  font-weight: 750 !important;
  letter-spacing: 0.012em !important;
  background: linear-gradient(100deg, #000000 0%, var(--primary-light) 42%, var(--accent-cyan, var(--primary-color)) 115%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.btn-close {
  border-radius: 14px !important;
  padding: 0.5rem !important;
  transition: var(--transition-ease) !important;
  background: var(--glass-bg-strong) !important;
  border: 1px solid var(--cyber-border, var(--glass-border)) !important;
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.06) !important;
  /* Purple arrow for dark mode */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath fill-rule='evenodd' d='M10.854 4.146a.5.5 0 0 1 0 .708L6.707 8l4.147 4.146a.5.5 0 0 1-.708.708l-4.5-4.5a.5.5 0 0 1 0-.708l4.5-4.5a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 1em !important;
  margin: unset !important;
}

.btn-close:hover {
  border-color: var(--cyber-border-strong, var(--primary-light)) !important;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.14) !important;
}

#imagePreviewModal .modal-content {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}
.btn-close.btn-close-right{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath fill-rule='evenodd' d='M5.146 4.146a.5.5 0 0 0 0 .708L9.293 8l-4.147 4.146a.5.5 0 0 0 .708.708l4.5-4.5a.5.5 0 0 0 0-.708l-4.5-4.5a.5.5 0 0 0-.708 0z'/%3E%3C/svg%3E") !important;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-50px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ====== ALERT OVERRIDES ====== */
.alert {
  border-radius: var(--radius-sm) !important;
  border: none !important;
  padding: var(--spacing-md) var(--spacing-lg) !important;
  position: relative !important;
  overflow: hidden !important;
}

.alert::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: currentColor;
}

.alert-primary {
  background: linear-gradient(135deg, rgba(119, 119, 119, 0.1), rgba(35, 35, 35, 0.1)) !important;
  color: var(--primary-dark) !important;
}

.alert-success {
  background: linear-gradient(135deg, rgba(40, 167, 69, 0.1), rgba(32, 201, 151, 0.1)) !important;
  color: #155724 !important;
}

.alert-danger {
  background: linear-gradient(135deg, rgba(35, 35, 35, 0.1), rgba(198, 0, 0, 0.1)) !important;
  color: #721c24 !important;
}

.alert-warning {
  background: linear-gradient(135deg, rgba(162, 122, 0, 0.1), rgba(168, 77, 1, 0.1)) !important;
  color: #856404 !important;
}

/* ====== BADGE / TAG OVERRIDES ====== */
/* Aurora Glass: fully rounded, compact, smaller text. */
.badge {
  border-radius: var(--radius-pill, 999px) !important;
  padding: 0.28rem 0.6rem !important;          /* compact */
  font-size: 0.72rem !important;               /* smaller text */
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  transition: var(--transition-ease) !important;
}
.tags-container .badge, .badge-sm {
  padding: 2px 7px !important;
  font-size: 0.68rem !important;
}

.badge-primary {
  background: var(--primary-gradient) !important;
  color: var(--on-primary, #f6f6f6) !important;
}

/* Neutral / secondary badges adopt the frosted glass look so plain tags
   match the buttons. Coloured semantic badges keep their own background. */
.badge.bg-secondary,
.badge.bg-light,
.badge.text-bg-secondary,
.badge.text-bg-light {
  background:
    linear-gradient(135deg, rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.02)),
    var(--glass-bg, rgba(0, 0, 0, 0.045)) !important;
  border: 1px solid var(--glass-border, rgba(0, 0, 0, 0.1)) !important;
  color: var(--text-secondary, #424242) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
}

/* Custom status / type tags (dashboard posts, etc.): pill-shaped + frosted,
   keeping their semantic tint. Centralised here so it applies app-wide. */
.post-status-badge,
.post-type-badge,
.preview-meta-badge,
.platform-badge {
  border-radius: var(--radius-pill, 999px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
}

/* ====== PAGINATION OVERRIDES ====== */
.pagination .page-link {
  border-radius: var(--radius-pill) !important;
  margin: 0 var(--spacing-xs) !important;
  border: var(--form-border-width) solid var(--primary-color) !important;
  color: var(--primary-color) !important;
  transition: var(--transition-ease) !important;
  min-width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.pagination .page-link:hover {
  background: var(--primary-gradient) !important;
  color: var(--on-primary, #f6f6f6) !important;
  transform: scale(1.1) !important;
}

.pagination .page-item.active .page-link {
  background: var(--primary-gradient) !important;
  border-color: var(--primary-color) !important;
  color: var(--on-primary, #f6f6f6) !important;
}

/* ====== NAV OVERRIDES ====== */
.nav-pills .nav-link {
  border-radius: var(--radius-pill) !important;
  transition: var(--transition-ease) !important;
  padding: 0.75rem 1.5rem !important;
  margin: 0 var(--spacing-xs) !important;
}

.nav-pills .nav-link:hover {
  background: var(--glass-strong) !important;
  color: var(--primary-color) !important;
  transform: var(--btn-hover-transform) !important;
}

.nav-pills .nav-link.active {
  background: var(--primary-gradient) !important;
  color: var(--on-primary, #f6f6f6) !important;
}

.nav-tabs .nav-link {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
  transition: var(--transition-ease) !important;
  padding: 0.75rem 1.5rem !important;
  border: none !important;
  margin-right: var(--spacing-xs) !important;
  color: var(--text-secondary) !important;
}

.nav-tabs .nav-link:hover {
  background: var(--glass-bg) !important;
  color: var(--text-primary) !important;
}

.nav-tabs .nav-link.active {
  background: var(--bg-tertiary) !important;
  color: var(--primary-light) !important;
  border-bottom: 3px solid var(--primary-color) !important;
}

/* ====== PROGRESS BAR OVERRIDES ====== */
.progress {
  border-radius: var(--radius-pill) !important;
  height: 10px !important;
  background: var(--glass-strong) !important;
}

.progress-bar {
  background: var(--primary-gradient) !important;
  border-radius: var(--radius-pill) !important;
  transition: width 0.6s ease !important;
}

/* ====== LIST GROUP OVERRIDES ====== */
.list-group-item {
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--cyber-border, var(--glass-border)) !important;
  margin-bottom: var(--spacing-sm) !important;
  transition: var(--transition-cyber, var(--transition-ease)) !important;
  padding: var(--spacing-md) !important;
  background:
    linear-gradient(135deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.018)),
    var(--cyber-surface, var(--bg-secondary)) !important;
  color: var(--text-primary) !important;
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.06) !important;
}

.list-group-item:hover {
  background: var(--cyber-gradient, var(--bg-surface-hover)) !important;
  transform: translateX(5px) !important;
  border-color: var(--cyber-border-strong, var(--border-primary)) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--cyber-shadow-soft, none) !important;
}

.list-group-item.active {
  background: var(--primary-gradient) !important;
  border-color: var(--primary-color) !important;
  color: var(--on-primary, #f6f6f6) !important;
}

/* ====== TOOLTIP OVERRIDES ====== */
.tooltip {
  --bs-tooltip-max-width: 200px;
  --bs-tooltip-font-size: 0.75rem;
}

.tooltip-inner {
  background: var(--surface-overlay) !important;
  border: 1px solid rgba(88, 88, 88, 0.25) !important;
  border-radius: 8px !important;
  padding: 5px 10px !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  max-width: 200px !important;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16) !important;
  white-space: nowrap !important;
}

/* Bootstrap 5 arrow selectors */
.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
  border-top-color: var(--line-strong) !important;
}

.bs-tooltip-bottom .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
  border-bottom-color: var(--line-strong) !important;
}

/* ====== DROPDOWN OVERRIDES ====== */
.dropdown-menu {
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--cyber-border, var(--glass-border)) !important;
  background: var(--cyber-panel-gradient, var(--bg-secondary)) !important;
  box-shadow: var(--cyber-shadow-soft, var(--shadow-dropdown)) !important;
  padding: var(--spacing-sm) !important;
  animation: dropdownSlideIn 0.3s ease !important;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.dropdown-item {
  border-radius: var(--radius-xs) !important;
  padding: 0.75rem 1rem !important;
  margin: var(--spacing-xs) 0 !important;
  transition: var(--transition-ease) !important;
  color: var(--text-primary) !important;
}

.dropdown-item:hover {
  background: var(--cyber-gradient, rgba(119, 119, 119, 0.2)) !important;
  color: var(--ink) !important;
  transform: translateX(5px) !important;
}

@keyframes dropdownSlideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ====== ACCORDION OVERRIDES ====== */
.accordion-button {
  border-radius: var(--radius-sm) !important;
  border: none !important;
  background: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  transition: var(--transition-ease) !important;
  padding: var(--spacing-lg) !important;
}

.accordion-button:not(.collapsed) {
  background: var(--scrim-soft) !important;
  color: var(--primary-light) !important;
  box-shadow: none !important;
}

.accordion-button:focus {
  box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.06) !important;
}

.accordion-button::after {
  filter: invert(1) brightness(2);
}

.accordion-item {
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-sm) !important;
  margin-bottom: var(--spacing-sm) !important;
  background: var(--bg-secondary) !important;
}

.accordion-body {
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}


/* FULL-HEIGHT RIGHT-SLIDE MODAL – works 100% with Bootstrap 5 */

.modal.fade .modal-dialog {
  /* Start off-screen to the right */
  transform: translateX(100%) !important;
  transition: transform 0.3s ease-out !important;

  /* Full height + stick to right edge */
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;

  /* Layout */
  margin: 0 !important;
  max-width: 420px;           /* change as needed */
  width: 100%;
  height: calc(var(--vh, 1vh) * 100) !important;  /* full viewport height with mobile fix */
  height: 100dvh !important;  /* Modern browsers support dvh */

  /* Remove Bootstrap's default centering */
  transform: translateX(100%) !important;
}

.modal.fade.show .modal-dialog {
  transform: translateX(0) !important;
}

/* When closing – slide back out */
.modal.fade .modal-dialog.modal-out {
  transform: translateX(100%) !important;
}

/* Make modal content fill the full height */
.modal.fade .modal-dialog .modal-content {
  height: 100dvh !important;
  border: 1px solid var(--cyber-border, rgba(88, 88, 88, 0.18)) !important;
  border-right: 0 !important;
  border-radius: 28px 0 0 28px !important;
  box-shadow: -18px 0 54px rgba(0, 0, 0, 0.16), 0 0 30px rgba(0, 0, 0, 0.06) !important;
}

/* Optional: full-width on mobile */
@media (max-width: 576px) {
  .modal.fade .modal-dialog {
    max-width: 100% !important;
    height: calc(var(--vh, 1vh) * 100) !important;
    height: 100dvh !important;
  }
}

/* ====== DARK MODE BOOTSTRAP UTILITY OVERRIDES ====== */

/* Background utility overrides */
.bg-light {
  background-color: var(--bg-tertiary) !important;
}

.bg-white {
  background-color: var(--bg-secondary) !important;
}

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

.bg-body {
  background-color: var(--bg-primary) !important;
}

/* Text utility overrides */
.text-dark {
  color: var(--text-primary) !important;
}

.text-body {
  color: var(--text-primary) !important;
}

.text-muted {
  color: var(--text-secondary) !important;
}

.text-secondary {
  color: var(--text-secondary) !important;
}

/* Border utility overrides */
.border {
  border-color: var(--glass-border) !important;
}

.border-top,
.border-bottom,
.border-start,
.border-end {
  border-color: var(--glass-border) !important;
}

.border-light {
  border-color: var(--glass-border) !important;
}

.border-secondary {
  border-color: var(--glass-border) !important;
}

/* Offcanvas dark mode */
.offcanvas {
  background: var(--cyber-panel-gradient, var(--bg-secondary)) !important;
  color: var(--text-primary) !important;
  border-color: var(--cyber-border, var(--glass-border)) !important;
  box-shadow: var(--cyber-shadow, var(--shadow-lg)) !important;
}

.offcanvas-header {
  background: linear-gradient(90deg, rgba(119, 119, 119, 0.16), rgba(133, 133, 133, 0.045)) !important;
  border-bottom: 1px solid var(--cyber-border, var(--glass-border)) !important;
}

.offcanvas-body {
  background: transparent !important;
}

/* Accordion dark mode */
.accordion {
  --bs-accordion-bg: var(--bg-secondary);
  --bs-accordion-border-color: var(--glass-border);
}

.accordion-item {
  background-color: var(--bg-secondary) !important;
  border-color: var(--glass-border) !important;
}

.accordion-button {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

.accordion-button:not(.collapsed) {
  background-color: var(--scrim-soft) !important;
  color: var(--primary-light) !important;
}

.accordion-button::after {
  filter: invert(1) brightness(2);
}

.accordion-body {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

/* Breadcrumb dark mode */
.breadcrumb {
  background-color: var(--bg-tertiary) !important;
}

.breadcrumb-item a {
  color: var(--primary-light) !important;
}

.breadcrumb-item.active {
  color: var(--text-secondary) !important;
}

/* Pagination dark mode */
.page-link {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--glass-border) !important;
  color: var(--text-primary) !important;
}

.page-link:hover {
  background-color: var(--scrim-soft) !important;
  color: var(--primary-light) !important;
}

.page-item.active .page-link {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

/* Toast dark mode */
.toast {
  background-color: var(--bg-secondary) !important;
  border-color: var(--glass-border) !important;
  color: var(--text-primary) !important;
}

.toast-header {
  background-color: var(--bg-tertiary) !important;
  border-bottom-color: var(--glass-border) !important;
  color: var(--text-primary) !important;
}

/* Popover dark mode */
.popover {
  background-color: var(--bg-secondary) !important;
  border-color: var(--glass-border) !important;
}

.popover-header {
  background-color: var(--bg-tertiary) !important;
  border-bottom-color: var(--glass-border) !important;
  color: var(--text-primary) !important;
}

.popover-body {
  color: var(--text-primary) !important;
}

/* Carousel dark mode */
.carousel-caption {
  background: var(--veil-strong) !important;
  backdrop-filter: blur(10px) !important;
}

/* Input group dark mode */
.input-group-text {
  background:
    linear-gradient(135deg, rgba(0, 0, 0, 0.075), rgba(0, 0, 0, 0.025)),
    var(--cyber-surface, var(--bg-tertiary)) !important;
  border-color: var(--cyber-border, var(--glass-border)) !important;
  color: var(--text-primary) !important;
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.06) !important;
}

/* Spinner dark mode */
.spinner-border,
.spinner-grow {
  color: var(--primary-light) !important;
}

.spinner-border.text-primary,
.spinner-grow.text-primary {
  color: var(--primary-color) !important;
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .card,
  .form-control,
  .form-select,
  .dropdown-menu,
  .dropdown-item,
  .list-group-item,
  .modal-content,
  .modal.fade .modal-dialog,
  .offcanvas {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }

  .btn:hover,
  .card:hover,
  .form-control:focus,
  .form-control:hover,
  .dropdown-item:hover,
  .list-group-item:hover {
    transform: none !important;
  }
}