@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');

/* =========================================
   AURORA GLASSMORPHISM BACKGROUND
   ========================================= */
body.theme-aurora, body:not(.theme-blue):not(.theme-dark):not(.light) {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #f8fafc;
}

body.theme-blue {
  background: linear-gradient(-45deg, #87ceeb, #00bfff);
  color: #1e293b;
}

body.theme-dark {
  background: linear-gradient(-45deg, #232526, #414345);
  color: #f8fafc;
}

/* Light theme for integration with Wind Rose Analyzer */
body.light {
  background: linear-gradient(135deg, #f0f4f8 0%, #d9e2ec 100%);
  color: #102a43;
}
body.light .glass-bg-orbs { opacity: 0.15; }

.app-background-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.glass-bg-orbs {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  overflow: hidden; pointer-events: none;
  opacity: 0.4;
}
.orb {
  position: absolute; border-radius: 50%; filter: blur(60px);
  opacity: 0.3; animation: floatOrbs 10s ease-in-out infinite alternate;
}
.orb-1 { width: 400px; height: 400px; background: #a855f7; top: -10%; left: -10%; animation-delay: 0s; }
.orb-2 { width: 500px; height: 500px; background: #3b82f6; bottom: -20%; right: -10%; animation-delay: -2s; }
.orb-3 { width: 300px; height: 300px; background: #ec4899; top: 40%; right: 10%; animation-delay: -4s; }
.orb-4 { width: 450px; height: 450px; background: #06b6d4; bottom: 10%; left: 20%; animation-delay: -6s; }

@keyframes floatOrbs {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(30px, -50px) scale(1.1); }
}

.glass-particles {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 1px);
  background-size: 24px 24px; opacity: 0.3;
  animation: moveParticles 20s linear infinite; pointer-events: none;
}

@keyframes moveParticles {
  0% { background-position: 0 0; }
  100% { background-position: 48px 48px; }
}

/* =========================================
    SIDEBAR STYLES
    ========================================= */
.hamburger-btn {
  background: rgba(15, 23, 42, 0.8); border: 1px solid rgba(255,255,255,0.2);
  color: white; font-size: 20px; padding: 8px 12px; border-radius: 50%;
  cursor: pointer; transition: all 0.3s; position: fixed; top: 20px; left: 20px;
  z-index: 9999; backdrop-filter: blur(10px); box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  display: flex; align-items: center; justify-content: center; width: 45px; height: 45px;
}
.hamburger-btn:hover { background: rgba(255,255,255,0.2); transform: scale(1.05); }

.app-sidebar-overlay {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(0, 0, 0, 0.5); z-index: 10000; display: none;
  backdrop-filter: blur(3px); opacity: 0; transition: opacity 0.3s ease;
}
.app-sidebar-overlay.active { display: block; opacity: 1; }

.app-sidebar {
  position: fixed; top: 0; left: -280px; width: 280px; height: 100vh;
  background: rgba(20,20,30,0.75); backdrop-filter: blur(20px);
  z-index: 10001; transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  box-shadow: 5px 0 15px rgba(0, 0, 0, 0.5); display: flex;
  flex-direction: column; border-right: 1px solid rgba(255,255,255,0.1);
  overflow-x: hidden;
  font-family: "Inter", sans-serif;
}
.app-sidebar.active { left: 0; }

.app-sidebar * {
  box-sizing: border-box;
}

.sidebar-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 15px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); background: rgba(0,0,0,0.2);
}
.sidebar-close-btn {
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: white;
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer; display: flex;
  align-items: center; justify-content: center; transition: all 0.2s;
}
.sidebar-close-btn:hover { background: rgba(239, 68, 68, 0.8); transform: rotate(90deg); }

.sidebar-menu { flex: 1; padding: 20px 10px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; position: relative; }
.sidebar-footer { padding: 15px; background: rgba(0,0,0,0.2); border-top: 1px solid rgba(255,255,255,0.1); }

.flaticon-icon { width: 26px; height: 26px; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3)); }
.sidebar-link { display: flex; align-items: center; gap: 12px; padding: 8px 12px; margin: 4px 10px; border-radius: 12px; text-decoration: none; color: #fff; transition: all 0.3s ease; position: relative; z-index: 2; user-select: none; -webkit-user-select: none; }
.active-glide-indicator { position: absolute; top: 0; left: 0; height: 42px; background: rgba(255, 255, 255, 0.1); border-left: 3px solid #38bdf8; border-radius: 8px; transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), height 0.4s cubic-bezier(0.25, 1, 0.5, 1), width 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease; z-index: 1; pointer-events: none; opacity: 0; box-shadow: 0 4px 12px rgba(56, 189, 248, 0.2); }
.sidebar-link:hover { transform: translateX(8px) !important; background: transparent !important; border-color: transparent !important; }
.sidebar-link.active { background: transparent !important; border-color: transparent !important; }

@keyframes gradientAurora { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.app-sidebar.aurora-bg::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(56,189,248,0.1), rgba(167,139,250,0.1), rgba(244,63,94,0.1)); background-size: 400% 400%; animation: gradientAurora 15s ease infinite; z-index: -1; pointer-events: none; opacity: 0.8; }
.sidebar-link:hover .flaticon-icon { transform: scale(1.15) translateY(-2px); filter: drop-shadow(0 6px 12px rgba(0,0,0,0.6)); }
.theme-flaticon { width: 20px; height: 20px; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); vertical-align: middle; }
button:hover .theme-flaticon, .lang-toggle-fancy:hover .theme-flaticon { transform: rotate(15deg) scale(1.25); }

.sidebar-group-header { font-size: 10px; color: #94a3b8; text-transform: uppercase; font-weight: 700; margin: 10px 0 5px 15px; letter-spacing: 1px; opacity: 0.8; display: flex; justify-content: space-between; align-items: center; cursor: pointer; padding-right: 15px; transition: opacity 0.3s; }
.sidebar-group-header:hover { opacity: 1; color: #fff; }
.sidebar-group-content { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.3s cubic-bezier(0.25, 1, 0.5, 1); }
.sidebar-group-content > div { overflow: hidden; }
.sidebar-group[data-expanded="false"] .sidebar-group-content { grid-template-rows: 0fr; }
.sidebar-group[data-expanded="false"] .toggle-icon { transform: rotate(-90deg); }
.toggle-icon { transition: transform 0.3s ease; }

.app-sidebar.minified { width: 85px; }
.app-sidebar.minified .sidebar-link span, .app-sidebar.minified .sidebar-group-header span, .app-sidebar.minified .sidebar-group-header .toggle-icon, .app-sidebar.minified .sidebar-footer span, .app-sidebar.minified .sidebar-header div:nth-child(2), .app-sidebar.minified .theme-switch__container, .app-sidebar.minified .lang-toggle-fancy button, .app-sidebar.minified #authSidebarState span, .app-sidebar.minified .sidebar-menu hr { opacity: 0; pointer-events: none; display: none; }
.app-sidebar.minified .sidebar-link { justify-content: center; margin: 4px 5px; }
.app-sidebar.minified .sidebar-header { justify-content: center; }
.app-sidebar.minified .sidebar-header img { margin-left: 0; }

.sidebar-link::after { content: ''; position: absolute; left: 100%; margin-left: 10px; user-select: none; -webkit-user-select: none; background: rgba(15, 23, 42, 0.9); padding: 6px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; color: #fff; opacity: 0; pointer-events: none; transition: opacity 0.3s, transform 0.3s; transform: translateX(-10px); white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(5px); }
.app-sidebar.minified .sidebar-link:hover::after { content: attr(aria-label); opacity: 1; transform: translateX(0); }

.theme-dropdown { display: none; }
.theme-dropdown.show-themes { display: block; }

/* =========================================
    COMMAND PALETTE
    ========================================= */
.cmd-palette-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.4); backdrop-filter: blur(8px); z-index: 10000; display: flex; justify-content: center; align-items: flex-start; padding-top: 10vh; animation: fadeIn 0.2s ease; font-family: "Inter", sans-serif; }
.cmd-palette-modal { width: 90%; max-width: 500px; background: rgba(30, 41, 59, 0.85); border-radius: 16px; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); overflow: hidden; }
.cmd-palette-header { display: flex; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.1); }
.cmd-palette-header input { flex: 1; background: transparent; border: none; padding: 20px 0; color: #fff; font-size: 16px; outline: none; }
.cmd-palette-header input::placeholder { color: #64748b; }
.cmd-palette-body { max-height: 350px; overflow-y: auto; padding: 10px; }
.cmd-item { display: flex; align-items: center; gap: 12px; padding: 12px 15px; color: #cbd5e1; cursor: pointer; border-radius: 8px; transition: all 0.2s; text-decoration: none; }
.cmd-item:hover, .cmd-item.active { background: rgba(255,255,255,0.1); color: #fff; }
.cmd-item img { width: 24px; height: 24px; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* =========================================
    THEME SWITCH (DARK MODE)
    ========================================= */
.theme-switch { --toggle-size: 11px; --container-width: 4.625em; --container-height: 2em; --container-radius: 4.25em; --container-light-bg: #3D7EAE; --container-night-bg: #1D1F2C; --circle-container-diameter: 2.375em; --sun-moon-diameter: 1.6em; --sun-bg: #ECCA2F; --moon-bg: #C4C9D1; --spot-color: #959DB1; --circle-container-offset: calc((var(--container-height) - var(--circle-container-diameter)) / 2); --stars-color: #fff; --clouds-color: #F3FDFF; --back-clouds-color: #AACADF; --transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25); --circle-transition: .3s cubic-bezier(0, -0.02, 0.35, 1.17); }
.theme-switch, .theme-switch *, .theme-switch *::before, .theme-switch *::after { box-sizing: border-box; margin: 0; padding: 0; font-size: var(--toggle-size); }
.theme-switch__container { width: var(--container-width); height: var(--container-height); background-color: var(--container-light-bg); border-radius: var(--container-radius); overflow: hidden; cursor: pointer; box-shadow: 0em -0.062em 0.062em rgba(0, 0, 0, 0.25), 0em 0.062em 0.125em rgba(255, 255, 255, 0.94); transition: var(--transition); position: relative; }
.theme-switch__container::before { content: ""; position: absolute; z-index: 1; inset: 0; box-shadow: 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset, 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset; border-radius: var(--container-radius) }
.theme-switch__checkbox { display: none; }
.theme-switch__circle-container { width: var(--circle-container-diameter); height: var(--circle-container-diameter); background-color: rgba(255, 255, 255, 0.1); position: absolute; left: var(--circle-container-offset); top: var(--circle-container-offset); border-radius: var(--container-radius); box-shadow: inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), 0 0 0 0.625em rgba(255, 255, 255, 0.1), 0 0 0 1.25em rgba(255, 255, 255, 0.1); display: flex; transition: var(--circle-transition); pointer-events: none; }
.theme-switch__sun-moon-container { pointer-events: auto; position: relative; z-index: 2; width: var(--sun-moon-diameter); height: var(--sun-moon-diameter); margin: auto; border-radius: var(--container-radius); background-color: var(--sun-bg); box-shadow: 0.062em 0.062em 0.062em rgba(0, 0, 0, 0.25) inset, 0em -0.062em 0.062em rgba(255, 255, 255, 1) inset; filter: drop-shadow(0.062em 0.125em 0.125em rgba(0, 0, 0, 0.25)) drop-shadow(0em 0.062em 0.125em rgba(0, 0, 0, 0.25)); overflow: hidden; transition: var(--transition); }
.theme-switch__moon { transform: translateX(100%); width: 100%; height: 100%; background-color: var(--moon-bg); border-radius: inherit; box-shadow: 0.062em 0.062em 0.062em rgba(0, 0, 0, 0.25) inset, 0em -0.062em 0.062em rgba(255, 255, 255, 1) inset; transition: var(--transition); position: relative; }
.theme-switch__spot { position: absolute; top: 0.75em; left: 0.312em; width: 0.75em; height: 0.75em; border-radius: var(--container-radius); background-color: var(--spot-color); box-shadow: 0em 0.031em 0.062em rgba(0, 0, 0, 0.25) inset; }
.theme-switch__spot:nth-of-type(2) { width: 0.375em; height: 0.375em; top: 0.937em; left: 1.375em; }
.theme-switch__spot:nth-last-of-type(3) { width: 0.25em; height: 0.25em; top: 0.312em; left: 0.812em; }
.theme-switch__stars-container { position: absolute; color: var(--stars-color); top: -100%; left: 0.312em; width: 2.75em; height: auto; transition: var(--transition); }
.theme-switch__checkbox:checked + .theme-switch__container { background-color: var(--container-night-bg); }
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container { left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter)); }
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container:hover { left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter) - 0.187em) }
.theme-switch__circle-container:hover { left: calc(var(--circle-container-offset) + 0.187em); }
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__moon { transform: translate(0); }
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__stars-container { top: 50%; transform: translateY(-50%); }

/* =========================================
    FOOTER STYLES
    ========================================= */
.advanced-footer {
  --bg-dark: #0f172a;
  --accent: #fbbf24;
  --text-main: #f8fafc;
  --text-dim: #94a3b8;

  background: linear-gradient(135deg, rgba(15, 23, 42, 0.85) 0%, rgba(30, 41, 59, 0.95) 100%);
  color: var(--text-main);
  font-family: "IBM Plex Sans", "Inter", sans-serif;
  padding: 25px 20px;
  text-align: center;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(74, 144, 196, 0.3);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.3);
  margin-top: 20px;
}

.footer-container {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.analysis-section { margin-bottom: 5px; }

.analysis-label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 8px;
  font-weight: 700;
}

.analysis-content { font-size: 1rem; line-height: 1.6; }

.highlight-name {
  color: #f59e0b;
  font-weight: 700;
  font-size: 1.25rem;
  text-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
  margin: 0 4px;
}

.data-source-bar {
  font-size: 0.85rem;
  color: var(--text-dim);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 15px;
  width: 100%;
  max-width: 700px;
}

.source-highlight {
  color: #fbbf24;
  font-weight: 600;
}