/*
 * GOLPOOGRO - Global CSS Blueprint
 */

@import url("./reset.css");
@import url("./variables.css");
@import url("./typography.css");
@import url("./animations.css");
@import url("../themes/dark.css");
@import url("../themes/light.css");

/* Premium Layout Elements */
body {
  background-color: var(--bg-primary);
  background-image: 
    radial-gradient(at 0% 0%, var(--glow-1) 0px, transparent 50%),
    radial-gradient(at 100% 100%, var(--glow-2) 0px, transparent 50%);
  background-attachment: fixed;
  color: var(--text-primary);
  overflow-y: auto;
  font-family: var(--font-sans);
}

.glass-bg-base {
  background: var(--bg-glass);
  backdrop-filter: blur(var(--blur-heavy));
  -webkit-backdrop-filter: blur(var(--blur-heavy));
  border: 1px solid var(--bg-glass-border);
}

.glass-card {
  background: var(--bg-glass-card);
  backdrop-filter: blur(var(--blur-normal));
  -webkit-backdrop-filter: blur(var(--blur-normal));
  border: 1px solid var(--bg-glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: transform 0.3s var(--ease-cinematic), 
              box-shadow 0.3s var(--ease-cinematic), 
              border-color 0.3s var(--ease-cinematic),
              background-color 0.3s var(--ease-cinematic);
}

.glass-card:hover {
  transform: translateY(-2px);
  background: var(--bg-glass-hover);
  border-color: rgba(59, 130, 246, 0.25);
  box-shadow: var(--shadow-lg), 0 0 20px rgba(59, 130, 246, 0.12);
}

.glass-input {
  width: 100%;
  padding: 0.8rem 1.2rem;
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid var(--bg-glass-border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  transition: all 0.3s var(--ease-cinematic);
}

[data-theme="light"] .glass-input {
  background: rgba(255, 255, 255, 0.3);
}

.glass-input:focus {
  border-color: var(--accent-gold);
  background: rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 0 4px var(--accent-gold-glow);
}

[data-theme="light"] .glass-input:focus {
  background: rgba(255, 255, 255, 0.5);
}

/* Base Wrapper Grid */
#app-root {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

/* Utility Layout Classes */
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.grid-cols-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-lg);
}

.grid-cols-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
}

/* Shiny Glassy Blue Text Accent */
.gold-gradient-text, .blue-gradient-text {
  background: linear-gradient(135deg, #a5f3fc 0%, var(--accent-gold) 50%, #1d4ed8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

[data-theme="light"] .gold-gradient-text, [data-theme="light"] .blue-gradient-text {
  background: linear-gradient(135deg, #1e40af 0%, var(--accent-gold) 50%, #0284c7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Ensure sidebar and navbar are completely hidden on login/signup pages across all device viewport schemas */
body.auth-flow #main-sidebar,
body.auth-flow #main-navbar {
  display: none !important;
}

/* Responsive visibility helper classes - default (mobile/tablet) states */
.show-on-desktop {
  display: none !important;
}

.hide-on-desktop {
  display: block !important;
}