/* ==========================================================================
   FONTS & IMPORTS
   ========================================================================== */
@import url('./assets/fonts/custom.font.css');

/* ==========================================================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   ========================================================================== */
:root {
  /* Typography */
  --font-family: Inter, sans-serif;

  /* Colors & Backgrounds */
  --background-color: linear-gradient(180deg, #249fa3, #1b7095);

  /* Layout & Spacing */
  --app-padding: 48px;
  --position-adjustment: 16px;
  --popover-width: 300px;
  --popover-height: 200px;
  --popover-padding: 10px;
  --popover-border-radius: 10px;
  --backdrop-blur: 3px;
}

/* ==========================================================================
   BASE STYLES
   ========================================================================== */

/* Hide body until web components are defined */
body:has(:not(:defined)) pwa-app {
  visibility: hidden;
}

body {
  font-family: var(--font-family);
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--background-color);
}

/* ==========================================================================
   LOADING OVERLAY
   ========================================================================== */

@keyframes slideUpFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulseText {
  0%,
  100% {
    opacity: 0.4;
  }

  50% {
    opacity: 1;
  }
}

#app-loading-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  z-index: 99999;
  background: var(--background-color);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

#app-loading-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  transform: scale(1.05);
  filter: blur(10px);
}

.loading-brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
  opacity: 0;
  animation: slideUpFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.loading-logo {
  width: 160px;
  height: 160px;
}

.loading-brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.brand-name {
  color: #ffffff;
  font-family: var(--font-family);
  font-size: 64px;
  font-weight: 700;
  letter-spacing: 8px;
  text-transform: uppercase;
  line-height: 1;
}

.brand-sub {
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-family);
  font-size: 34px;
  font-weight: 400;
  letter-spacing: 10px;
  text-transform: uppercase;
  line-height: 1;
}

.loading-text {
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0;
  opacity: 0;
  animation: slideUpFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards,
    pulseText 2s infinite ease-in-out 0.8s;
}

/* ==========================================================================
   MAIN APP COMPONENTS
   ========================================================================== */

/* PWA App Container */
pwa-app {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
}

/* App Directory (Left Side) */
app-directory {
  display: flex;
  position: absolute;
  left: var(--app-padding);
  top: var(--app-padding);
  z-index: 1;
}

app-navigation {
  position: absolute;
  left: var(--app-padding);
}

app-filter {
  bottom: calc(var(--app-padding));
}

app-panel {
  bottom: calc(var(--app-padding));
}

app-title {
  z-index: 0;
}

app-library {
  z-index: 1;
}

/* App Mapper (Center/Main Content) */
app-mapper {
  display: flex;
  position: absolute;
}

/* App Title (Center Top) */
app-title {
  position: absolute;
  top: var(--app-padding);
  left: 50%;
  transform: translateX(-50%);
}

/* App Library (Right Side) */
app-library {
  display: flex;
  position: absolute;
  right: var(--app-padding);
  top: var(--app-padding);
}

/* ==========================================================================
   POPOVER & MODAL STYLES
   ========================================================================== */

:popover-open {
  width: var(--popover-width);
  height: var(--popover-height);
  padding: 0 var(--popover-padding);
  border-radius: var(--popover-border-radius);
  border-width: 1px;
}

::backdrop {
  backdrop-filter: blur(var(--backdrop-blur));
}

/* ==========================================================================
   PWA DISPLAY MODES
   ========================================================================== */

/* Window Controls Overlay Mode */
@media (display-mode: window-controls-overlay) {
  .titlebar {
    position: fixed;
    left: env(titlebar-area-x, 0);
    top: env(titlebar-area-y, 0);
    width: env(titlebar-area-width, 100%);
    height: env(titlebar-area-height, 38px);
    -webkit-app-region: drag;
    app-region: drag;
  }

  app-mapper {
    --map-height: calc(100dvh - env(titlebar-area-height, 38px) * 2);
    --map-width: calc(100vw - env(titlebar-area-height, 38px) * 2);
    --map-margin-top: env(titlebar-area-height, 38px);
    align-items: flex-start;
  }

  app-directory {
    left: calc(var(--app-padding) + env(titlebar-area-height, 38px) - var(--position-adjustment));
    top: calc(var(--app-padding) + env(titlebar-area-height, 38px) - var(--position-adjustment));
  }

  app-navigation {
    left: calc(var(--app-padding) + env(titlebar-area-height, 38px) - var(--position-adjustment));
  }

  app-filter {
    bottom: calc(var(--app-padding) + env(titlebar-area-height, 38px) - var(--position-adjustment));
  }

  app-title {
    top: calc(var(--app-padding) + env(titlebar-area-height, 38px) - var(--position-adjustment));
    left: 50%;
    transform: translateX(-50%);
  }

  app-library {
    right: calc(var(--app-padding) + env(titlebar-area-height, 38px) - var(--position-adjustment));
    top: calc(var(--app-padding) + env(titlebar-area-height, 38px) - var(--position-adjustment));
  }
}

/* Standalone Mode */
@media (display-mode: standalone) {
  .titlebar {
    position: fixed;
    left: env(titlebar-area-x, 0);
    top: env(titlebar-area-y, 0);
    width: env(titlebar-area-width, 100%);
    height: env(titlebar-area-height, 38px);
    -webkit-app-region: drag;
    app-region: drag;
  }

  app-mapper {
    --map-height: calc(100dvh - env(titlebar-area-height, 38px));
    --map-width: calc(100vw - env(titlebar-area-height, 38px) * 2);
    align-items: flex-start;
  }

  app-directory {
    top: calc(var(--app-padding) - var(--position-adjustment));
    left: calc(var(--app-padding) + env(titlebar-area-height, 38px) - var(--position-adjustment));
  }

  app-navigation {
    left: calc(var(--app-padding) + env(titlebar-area-height, 38px) - var(--position-adjustment));
  }

  app-title {
    top: calc(var(--app-padding) - var(--position-adjustment));
  }

  app-library {
    top: calc(var(--app-padding) - var(--position-adjustment));
    right: calc(var(--app-padding) + env(titlebar-area-height, 38px) - var(--position-adjustment));
  }

  app-filter {
    bottom: calc(var(--app-padding) + env(titlebar-area-height, 38px) - var(--position-adjustment));
  }

}