/**
 * Main Stylesheet
 * Core CSS variables, global styles, and responsive design foundation
 * Material Design color system and theme variables
 * @author Simeon Tsvetanov
 */

/* Import component styles */
@import url("./components/participant-counter.css");

/* Scrollbar Styles */
* {
  scrollbar-width: auto;
  scrollbar-color: var(--accent-dark) transparent;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  overflow: hidden;
  font-size: clamp(14px, 1.5vw, 18px);
}

*::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

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

*::-webkit-scrollbar-thumb {
  background-color: var(--accent-dark);
  border-radius: 6px;
}

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

/* Global styles */
:root {
  /* Dark mode: deep blue and muted violet, retaining the reference accent */
  --bg-primary-dark: #26384b;
  --bg-secondary-dark: #3f405f;
  --bg-container-dark: #4d5074;
  --text-primary-dark: #dce9f2;
  --text-secondary-dark: #b8ccd8;
  --text-disabled-dark: #8ca1ad;
  --accent-dark: #70b8bd;
  --accent-secondary-dark: #8ad0cc;
  --button-hover-dark: #579da4;
  --button-active-dark: #3f7f88;
  --error-color-dark: #e08a91;
  --overlay-dark: rgba(9, 20, 32, 0.72);
  --divider-dark: rgba(185, 208, 220, 0.25);
  --scrollbar-dark: rgba(185, 208, 220, 0.45);

  /* RGB values for opacity adjustments */
  --scrollbar-color-rgb: 0, 80, 80;
  --accent-color-rgb: 23, 107, 117;
  --error-color-rgb: 155, 63, 76;
  /* Light mode: pale blue and muted violet from the reference image */
  --bg-primary-light: #b8cce5;
  --bg-secondary-light: #a4a4cc;
  --bg-container-light: #c8d8eb;
  --text-primary-light: #005050;
  --text-secondary-light: #285f69;
  --text-disabled-light: #66858d;
  --accent-light: #176b75;
  --accent-secondary-light: #005050;
  --button-hover-light: #0b5963;
  --button-active-light: #064750;
  --error-color-light: #9b3f4c;
  --overlay-light: rgba(50, 65, 105, 0.45);
  --divider-light: rgba(0, 80, 80, 0.28);
  --scrollbar-light: rgba(0, 80, 80, 0.45);

  /* Common variables */
  --spacing-xs: clamp(0.25rem, 1vw, 0.5rem);
  --spacing-sm: clamp(0.5rem, 1.5vw, 1rem);
  --spacing-md: clamp(1rem, 2vw, 1.5rem);
  --spacing-lg: clamp(1.5rem, 3vw, 2.5rem);
  --spacing-xl: clamp(2rem, 4vw, 3rem);
  --border-radius: clamp(4px, 0.5vw, 8px);
  --transition-speed: 0.3s;
  /* Responsive container widths */
  --container-max-width: clamp(320px, 90vw, 1200px);
  --main-content-width: clamp(280px, 50vw, 600px);
  --side-margin: clamp(0px, 25vw, 300px);

  /* Header spacing */
  --header-padding: clamp(var(--spacing-xs), 2vw, var(--spacing-md));
}

body {
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  line-height: 1.6;
  transition: background-color var(--transition-speed),
    color var(--transition-speed);
}

/* Base button styles */
button {
  font-size: 1rem;
  border-radius: var(--border-radius);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 8px 16px;
  border: none;
}

.app-container {
  height: 100vh;
  height: 100dvh; /* Dynamic viewport height for mobile browsers */
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr minmax(0, var(--main-content-width)) 1fr;
  grid-template-areas:
    "header-left header header-right"
    "main-left main main-right"
    "footer-left footer footer-right";
  gap: 0;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  max-width: 100vw;
}

@media (min-width: 1200px) {
  .app-container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 768px) {
  .app-container {
    grid-template-columns: var(--spacing-sm) 1fr var(--spacing-sm);
    --main-content-width: calc(100vw - 2 * var(--spacing-sm));
    --side-margin: 0;
  }
}

@media (max-width: 480px) {
  .app-container {
    grid-template-columns: var(--spacing-xs) 1fr var(--spacing-xs);
    --main-content-width: calc(100vw - 2 * var(--spacing-xs));
  }
}

/* iOS PWA specific fixes */
@media (display-mode: standalone) {
  .app-container {
    height: 100vh;
    height: 100dvh;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom); /* Handle safe area for PWA */
  }
}

/* iOS Safari specific fixes */
@supports (-webkit-appearance: none) {
  .app-container {
    height: 100vh;
    height: 100dvh; /* Use full dynamic viewport height */
  }
}

.hidden {
  display: none !important;
}

.teams-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 12rem;
  padding: var(--spacing-xl);
  color: var(--text-primary);
}

.teams-loading .material-icons {
  position: relative;
  top: 2rem;
  font-size: 4rem;
  animation: loading-spin 1s linear infinite;
}

@keyframes loading-spin {
  to {
    transform: rotate(360deg);
  }
}

.footer {
  grid-area: footer;
  margin: calc(var(--spacing-sm) + 0.25rem) 0;
  padding: var(--spacing-sm) 0;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-sm);
}

.footer__link {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--divider-dark);
  border-radius: 999px;
  color: var(--text-primary-dark);
  background-color: var(--bg-secondary-dark);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease,
    color 0.2s ease, transform 0.2s ease;
}

.footer__link:hover,
.footer__link:focus-visible {
  border-color: var(--accent-dark);
  color: var(--bg-primary-dark);
  background-color: var(--accent-dark);
  transform: translateY(-1px);
}

body[data-theme="light"] .footer__link {
  border-color: var(--divider-light);
  color: var(--text-primary-light);
  background-color: var(--bg-container-light);
}

body[data-theme="light"] .footer__link:hover,
body[data-theme="light"] .footer__link:focus-visible {
  border-color: var(--accent-light);
  color: #ffffff;
  background-color: var(--accent-light);
}

/* Buy me a beer icon styling */
.beer-icon {
  display: inline-block;
  text-decoration: none;
  font-size: 1.6rem; /* Increased to match GitHub logo size */
  transition: transform 0.2s ease;
  margin-left: 4px;
  vertical-align: middle; /* Align with GitHub logo */
}

.beer-icon:hover {
  transform: scale(1.2);
}

/* GitHub logo styling */
.github-icon {
  display: inline-block;
  text-decoration: none;
  margin-right: 8px;
  transition: transform 0.2s ease;
  vertical-align: middle; /* Ensure proper alignment */
}

.github-icon img {
  width: 1.6rem;
  height: 1.6rem;
  vertical-align: middle;
  filter: brightness(0.7);
  transition: filter 0.2s ease, transform 0.2s ease;
  display: inline-block; /* Ensure consistent rendering */
}

.github-icon:hover img {
  filter: brightness(1);
  transform: scale(1.2);
}

/* Buy me a beer text styling - clickable but no visual changes */
.buy-me-text {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.buy-me-text:hover {
  text-decoration: none;
  color: inherit;
}

/* Dark theme GitHub logo */
body[data-theme="dark"] .github-icon img {
  filter: brightness(0.8) invert(1);
}

body[data-theme="dark"] .github-icon:hover img {
  filter: brightness(1) invert(1);
}

/* Light theme GitHub logo */
body[data-theme="light"] .github-icon img {
  filter: brightness(0.6);
}

body[data-theme="light"] .github-icon:hover img {
  filter: brightness(0.8);
}