/**
 * 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('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
@import url("RTG/src/css/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 theme variables - Material Design dark theme */
  --bg-primary-dark: #1e1e1e;
  --bg-secondary-dark: #2d2d2d;
  --bg-container-dark: #383838;
  --text-primary-dark: rgba(255, 255, 255, 0.87);
  --text-secondary-dark: rgba(255, 255, 255, 0.6);
  --text-disabled-dark: rgba(255, 255, 255, 0.38);
  --accent-dark: #bb86fc;
  --accent-secondary-dark: #00e5cc;
  --button-hover-dark: #9965da;
  --button-active-dark: #7b40c0;
  --error-color-dark: #cf6679;
  --overlay-dark: rgba(0, 0, 0, 0.5);
  --divider-dark: rgba(255, 255, 255, 0.12);
  --scrollbar-dark: rgba(255, 255, 255, 0.12);

  /* RGB values for opacity adjustments */
  --scrollbar-color-rgb: 255, 255, 255;
  --accent-color-rgb: 187, 134, 252;
  --error-color-rgb: 207, 102, 121;
  /* Light theme variables - Material Design light theme */
  --bg-primary-light: #ffffff;
  --bg-secondary-light: #f5f5f5;
  --bg-container-light: #ffffff;
  --text-primary-light: rgba(0, 0, 0, 0.87);
  --text-secondary-light: rgba(0, 0, 0, 0.6);
  --text-disabled-light: rgba(0, 0, 0, 0.38);
  --accent-light: #bb86fc;
  --accent-secondary-light: #00e5cc;
  --button-hover-light: #9965da;
  --button-active-light: #7b40c0;
  --error-color-light: #b00020;
  --overlay-light: rgba(255, 255, 255, 0.5);
  --divider-light: rgba(0, 0, 0, 0.12);
  --scrollbar-light: rgba(0, 0, 0, 0.12);

  /* 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;
}

/* 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);
}

/* Sticky Footer at absolute bottom */
footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #333;
    color: white;
    text-align: center;
    padding: 15px;
    font-family: 'JetBrains Mono', monospace;
    z-index: 1000;
    height: 70px;
}

#buh {
    font-family: 'JetBrains Mono';
    color: powderblue;
}