/* ==========================================================================
   Avanzo Calendar — Application shell
   --------------------------------------------------------------------------
   Mobile (base rules)          Desktop (>= 768px)
   ─────────────────────────    ──────────────────────────────
   fixed header (56px)          fixed header (64px)
   full-width content           256px sidebar + content
   bottom tab bar + FAB         inline header nav + Create button
   sidebar = swipe-in drawer    sidebar = permanent rail
                                (bottom bar and FAB removed)

   The drawer holds SECONDARY CONTEXT ONLY — mini calendar, legend, upcoming
   events. Navigation lives in the bottom tab bar, where it is always visible.
   The old build put navigation inside the drawer and hid the Create button
   entirely below 768px, which left the primary action unreachable on the
   primary device.
   ========================================================================== */

/* ==========================================================================
   Header
   ========================================================================== */

.gcal-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: calc(var(--header-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) var(--sp-3) 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.gcal-logo {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  padding-inline: var(--sp-1);
  text-decoration: none;
  flex-shrink: 0;
}

.gcal-logo-icon { width: 32px; height: 32px; object-fit: contain; }

.gcal-logo-text {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  color: var(--text-muted);
}
.gcal-logo-text span { color: var(--brand-text); }

.header-nav { display: none; }

.header-right {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-left: auto;
  min-width: 0;
  flex-shrink: 1;
}

.header-link {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--tap-min);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--r-full);
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease);
}
.header-link:hover { background: var(--surface-hover); }
.header-link.active,
.header-link[aria-current="page"] {
  color: var(--brand-text);
  background: var(--brand-subtle);
}

.create-btn {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--tap-min);
  padding: var(--sp-2) var(--sp-5);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.create-btn:hover { background: var(--surface-hover); box-shadow: var(--shadow-md); }

.user-chip {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  flex-shrink: 1;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

.user-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  color: var(--text-inverse);
  background: var(--brand);
  border-radius: var(--r-full);
}

.logout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  background: none;
  border: none;
  border-radius: var(--r-full);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.logout-btn:hover { background: var(--surface-hover); color: var(--status-rejected-fg); }

.mobile-menu-btn { display: inline-flex; }

/* ==========================================================================
   Body, sidebar, main
   ========================================================================== */

.gcal-body {
  display: flex;
  padding-top: calc(var(--header-h) + env(safe-area-inset-top));
  min-height: 100dvh;
}

.gcal-sidebar {
  position: fixed;
  inset: calc(var(--header-h) + env(safe-area-inset-top)) auto 0 0;
  z-index: var(--z-drawer);
  width: min(304px, 85vw);
  padding: var(--sp-4) var(--sp-3);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface-sunken);
  border-right: 1px solid var(--border);
  translate: -100% 0;
  transition: translate var(--dur-normal) var(--ease);
}
.gcal-sidebar.open { translate: 0 0; }

.sidebar-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-sidebar);
  background: var(--scrim);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-normal) var(--ease), visibility var(--dur-normal);
}
.sidebar-overlay.show { opacity: 1; visibility: visible; }

.gcal-main {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  max-width: var(--content-max);
  padding: var(--sp-4) var(--sp-4)
           calc(var(--bottomnav-h) + var(--sp-8) + env(safe-area-inset-bottom));
}

.gcal-footer {
  margin-top: var(--sp-8);
  padding-top: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-align: center;
  border-top: 1px solid var(--border);
}

/* ==========================================================================
   Bottom navigation + floating action button  (mobile only)
   ========================================================================== */

.bottom-nav {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-bottomnav);
  display: flex;
  height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.bottom-nav-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--tap-min);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.bottom-nav-item i { font-size: 1.35rem; line-height: 1; }
.bottom-nav-item:hover { color: var(--text-secondary); }
.bottom-nav-item[aria-current="page"] { color: var(--brand-text); }

/* The active tab is marked with a bar as well as colour, so the current
   location is not communicated by colour alone. */
.bottom-nav-item[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: 0;
  width: var(--sp-8);
  height: 3px;
  background: var(--brand);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
}
.bottom-nav-item { position: relative; }

.fab {
  position: fixed;
  right: var(--sp-4);
  bottom: calc(var(--bottomnav-h) + var(--sp-4) + env(safe-area-inset-bottom));
  z-index: var(--z-bottomnav);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  color: var(--text-inverse);
  background: var(--brand);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease), scale var(--dur-fast) var(--ease);
}
.fab i { font-size: 1.6rem; line-height: 1; }
.fab:hover  { background: var(--brand-hover); }
.fab:active { scale: 0.94; }

/* ==========================================================================
   Sidebar content — mini calendar, legend, upcoming events
   ========================================================================== */

.sidebar-section {
  padding: var(--sp-4) var(--sp-2);
  border-top: 1px solid var(--border);
}

.sidebar-label {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.mini-cal { padding: 0 var(--sp-2) var(--sp-2); }

.mini-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-2);
}

.mini-label {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
}

.mini-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.mini-dow {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
}

.mini-day {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--r-full);
  transition: background var(--dur-fast) var(--ease);
}
.mini-day:hover     { background: var(--surface-active); }
.mini-day.other     { color: var(--text-muted); opacity: 0.5; }
.mini-day.today     { color: var(--text-inverse); background: var(--brand); font-weight: var(--fw-medium); }
/* Days with events carry a dot, not just a tint — colour alone is not a cue. */
.mini-day.has-event { position: relative; font-weight: var(--fw-medium); color: var(--brand-text); }
.mini-day.has-event::after {
  content: "";
  position: absolute;
  bottom: 1px;
  width: 4px; height: 4px;
  background: currentColor;
  border-radius: var(--r-full);
}
.mini-day.today.has-event::after { background: var(--text-inverse); }

.legend-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) 0;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

.legend-dot {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-radius: var(--r-full);
}

.upcoming-events-list { display: flex; flex-direction: column; gap: var(--sp-1); }

.upcoming-event-link,
.upcoming-event-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2);
  text-decoration: none;
  border-radius: var(--r-md);
  transition: background var(--dur-fast) var(--ease);
}
.upcoming-event-link:hover { background: var(--surface-active); }

.upcoming-event-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--r-md);
}

.upcoming-event-details { min-width: 0; }

.upcoming-event-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upcoming-event-time { font-size: var(--fs-xs); color: var(--text-muted); }

.view-all-events-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: var(--tap-min);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--brand-text);
  text-decoration: none;
}
.view-all-events-link:hover { text-decoration: underline; }

/* ==========================================================================
   Desktop
   ========================================================================== */

@media (min-width: 768px) {
  .gcal-header { padding-inline: var(--sp-4); gap: var(--sp-3); }
  .gcal-logo-icon { width: 40px; height: 40px; }
  .gcal-logo-text { font-size: var(--fs-xl); }

  .header-nav { display: flex; align-items: center; gap: var(--sp-1); }
  .create-btn { display: inline-flex; }
  .mobile-menu-btn { display: none; }

  /* Sidebar becomes a permanent rail; the drawer machinery switches off so a
     stale .open class from a resize can never leave it stuck. */
  .gcal-sidebar {
    width: var(--sidebar-w);
    translate: 0 0;
    transition: none;
  }
  .sidebar-overlay { display: none; }

  .gcal-main {
    margin-left: var(--sidebar-w);
    padding: var(--sp-6);
  }
  .gcal-main.no-sidebar { margin-left: 0; }

  /* Navigation and the primary action are in the header at this size. */
  .bottom-nav, .fab { display: none; }
}

/* Signed-out pages (login, 403) have no sidebar or bottom nav. */
.gcal-main.no-sidebar { padding-bottom: var(--sp-8); }