/* ==========================================================================
   Layout - Grid System, Sidebar, Navigation
   Loaded by: ALL pages.
   Defines the two-column sidebar + main-content shell used on every page.
   ========================================================================== */

/* Two-column page shell: fixed-width sidebar | fluid content area.
   At ≤780px this collapses to a single column (sidebar moves to top).
   At ≤480px the sidebar leaves normal flow and becomes a fixed bottom tab bar. */
#layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}

/* Main content area.
   CRITICAL: min-width: 0 is required here. Without it, a grid child
   defaults to min-width: auto, which allows the content to overflow its
   column and cause horizontal scroll on any page with a wide table or
   canvas. Do not remove this property. */
.main {
  padding: 28px;
  min-width: 0;
  overflow-x: hidden;
}

/* ==========================================================================
   Sidebar
   ========================================================================== */

.sidebar {
  padding: 18px 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.055));
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Circular logo link in the sidebar header */
.site-icon {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-soft);
  text-decoration: none;
}

.site-icon img {
  width: 22px;
  height: 22px;
  filter: invert(1);
  opacity: 0.9;
}

/* Vertical nav list — each link has an icon + text label */
.nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 18px;
  padding: 0;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.86);
  padding: 12px 12px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 650;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-link img {
  width: 20px;
  height: 20px;
  filter: invert(1);
  opacity: 0.9;
}

.nav-link:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* Active nav link — frosted glass pill with subtle border.
   Applied by navigation.js setActiveNavLink() on DOMContentLoaded. */
.nav-link.is-active {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.1));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  color: rgba(255, 255, 255, 0.95);
}

/* Sidebar footer pushed to bottom with margin-top: auto.
   Contains the logout button. */
.sidebar-footer {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-footer .logout {
  width: 100%;
  justify-content: flex-start;
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 10px 12px;
  height: auto;
  font-weight: 650;
}

.sidebar-footer .logout img {
  width: 18px;
  height: 18px;
  filter: invert(1);
  opacity: 0.9;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Tablet: narrow sidebar at 220px instead of 240px */
@media (max-width: 1100px) {
  #layout {
    grid-template-columns: 220px 1fr;
  }
}

/* Small tablet / large phone: collapse to single column.
   Sidebar loses min-height and its right border, gaining a bottom border
   so it reads as a horizontal header above the main content. */
@media (max-width: 780px) {
  #layout {
    grid-template-columns: 1fr;
  }
  .sidebar {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .main {
    padding: 18px;
    overflow-x: hidden;
  }
}

/* ==========================================================================
   Mobile — Fixed bottom tab bar (≤480px / iPhone)
   At this breakpoint the sidebar becomes a native-app-style bottom tab bar.
   The layout switches from grid to block so the sidebar can be taken out
   of normal flow with position: fixed.
   ========================================================================== */

@media (max-width: 480px) {
  /* Switch from grid to block so sidebar can leave the flow */
  #layout {
    display: block;
  }

  /* Sidebar becomes a frosted-glass bottom tab bar.
     Uses env(safe-area-inset-bottom) to respect iPhone home indicator space. */
  .sidebar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    min-height: auto;
    height: 56px;
    padding: 0 6px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    gap: 0;
    border-right: none;
    border-bottom: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    background: rgba(11, 18, 32, 0.88);
    box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.06);
    z-index: 50;
  }

  /* Hide logo and logout — bottom nav is navigation only */
  .site-icon,
  .sidebar-footer {
    display: none;
  }

  /* Nav becomes a horizontal row filling the tab bar */
  .nav {
    flex-direction: row;
    width: 100%;
    margin: 0;
    gap: 0;
    justify-content: space-around;
  }

  /* Each nav link: icon above, label below (icon-only tab pattern) */
  .nav-link {
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 2px;
    border-radius: 12px;
    gap: 3px;
    font-size: 0; /* hide original text node — label shown via ::after */
    border: none;
    box-shadow: none;
  }

  .nav-link img {
    width: 24px;
    height: 24px;
  }

  /* Short label rendered via data-label attribute on each <a> in the HTML.
     font-size: 0 on the parent hides the full nav-link text. */
  .nav-link::after {
    content: attr(data-label);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.1px;
    color: rgba(255, 255, 255, 0.52);
    font-family: var(--font);
  }

  /* Active tab: teal icon tint + teal label + subtle bg */
  .nav-link.is-active {
    background: rgba(45, 189, 177, 0.12);
    border: none;
    box-shadow: none;
    color: var(--teal);
  }

  /* Teal color filter: invert(0.68) sepia(1) saturate(3) hue-rotate(130deg)
     converts the white icon SVG to the --teal color (#2dbdb1) */
  .nav-link.is-active img {
    filter: invert(0.68) sepia(1) saturate(3) hue-rotate(130deg);
    opacity: 1;
  }

  .nav-link.is-active::after {
    color: var(--teal);
  }

  /* Main: full width, with extra bottom padding for the fixed tab bar height
     plus iPhone safe area inset so content isn't hidden behind it */
  .main {
    padding: 16px;
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }
}