/* Import CSS Variables */
@import url('_variables.css');

/* Reset padding and margin for html and body */
html, body {
    margin: 0;
    padding: 0;
}

html {
  font-size: 16px;
  position: relative;
  min-height: 100%;
}

body {
  overflow-x: hidden;
  /* Prevent overscroll bounce on mobile */
  overscroll-behavior: none;
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;
}

/* Slightly smaller on very small screens to fit more content */
@media (max-width: 360px) {
  html {
    font-size: 15px;
  }
}

/* Standard desktop */
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

body {
  font-family: var(--font-family-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: linear-gradient(135deg, 
      #F5F3FA 0%, 
      #EEEAF5 25%,
      #E8E4F2 50%,
      #ECEAF5 75%,
      #F3F1F8 100%);
  background-attachment: fixed;
  min-height: 100vh;
  min-height: 100dvh; /* Dynamic viewport height for mobile */
  /* Prevent pull-to-refresh on mobile Chrome */
  overscroll-behavior-y: contain;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Global Container */
.container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
  width: 100%;
}

@media screen and (max-width: 991px) {
  .container {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Main content area */
main {
  padding: var(--spacing-lg) !important;
  max-width: min(calc(100vw - var(--container-padding) * 2), calc(var(--container-max-width) - var(--container-padding) * 2)) !important;
  margin: 0 auto;
}

/* ===== Glassmorphism Utilities ===== */

/* Primary gradient background (purple theme) */
.glass-bg {
  background: linear-gradient(135deg, 
      rgba(60, 32, 130, 0.85) 0%, 
      rgba(107, 45, 158, 0.8) 50%, 
      rgba(166, 67, 173, 0.85) 100%);
}

/* Solid gradient background (no transparency) */
.glass-bg-solid {
  background: linear-gradient(135deg, 
      rgb(60, 32, 130) 0%, 
      rgb(107, 45, 158) 50%, 
      rgb(166, 67, 173) 100%);
}

/* Glassmorphism blur effect */
.glass-blur {
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
}

/* Glass border */
.glass-border {
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Glass shadow (purple tint) */
.glass-shadow {
  box-shadow: 
      0 4px 30px rgba(60, 32, 130, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Glass shadow for bottom elements */
.glass-shadow-top {
  box-shadow: 
      0 -4px 30px rgba(60, 32, 130, 0.3),
      inset 0 -1px 0 rgba(255, 255, 255, 0.15);
}

/* Light glass element (for buttons, badges on glass bg) */
.glass-element {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.glass-element:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.15) 100%);
}

/* Glass text colors */
.glass-text {
  color: var(--color-bg);
}

.glass-text-muted {
  color: rgba(255, 255, 255, 0.8);
}

/* Glass icon styling */
.glass-icon {
  color: var(--color-bg);
  transition: transform var(--transition-base);
}

.glass-icon:hover {
  transform: scale(1.1);
}

/* Glass interactive element hover effect */
.glass-hover {
  transition: all var(--transition-base);
}

.glass-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.glass-hover:active {
  transform: translateY(0);
}

/* ===== Custom Scrollbar Styles ===== */

:root {
  --sb-track-color: transparent;
  --sb-thumb-color: var(--color-primary);
  --sb-size: 4px;
}

/* Глобально для всех элементов */
*::-webkit-scrollbar {
  width: var(--sb-size);
  height: var(--sb-size);
}

*::-webkit-scrollbar-track {
  background: var(--sb-track-color);
  border-radius: var(--border-radius-lg);
}

*::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
  border-radius: var(--border-radius-lg);
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary-hover);
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

/* Firefox */
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
  }
}