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

/* ==========================================================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   ========================================================================== */
:root {
  /* Typography */
  --font-family: 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)) {
  display: none;
}

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

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

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