/* =========================================================
   ENCORE — App Shell Styles (shared across all app pages)
   ========================================================= */

@import '../css/tokens.css';
@import '../css/main.css';

/* ── App Layout ──────────────────────────────────────────── */
.app-layout {
  display: grid;
  min-height: 100vh;
  grid-template-rows: var(--navbar-height) 1fr;
  background: var(--color-cream-light);
}

/* ── App Navbar ───────────────────────────────────────────── */
.app-navbar {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 100;
  height: var(--navbar-height);
  display: flex;
  align-items: center;
  background: rgba(224,219,212,.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--color-cream-dark);
}

.app-navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.app-navbar__logo {
  height: 24px;
  width: auto;
}

.app-navbar__user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.app-navbar__event-name {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  display: none;
}

@media (min-width: 768px) {
  .app-navbar__event-name { display: block; }
}

/* ── App Sidebar ──────────────────────────────────────────── */
.app-with-sidebar {
  display: grid;
  grid-template-columns: 1fr;
  min-height: calc(100vh - var(--navbar-height));
  margin-top: var(--navbar-height);
}

@media (min-width: 1024px) {
  .app-with-sidebar { grid-template-columns: 240px 1fr; }
}

.app-sidebar {
  background: var(--color-cream);
  border-right: 1px solid var(--color-cream-dark);
  padding: var(--space-6) 0;
  display: none;
  flex-direction: column;
  position: sticky;
  top: var(--navbar-height);
  height: calc(100vh - var(--navbar-height));
  overflow-y: auto;
}

@media (min-width: 1024px) {
  .app-sidebar { display: flex; }
}

.app-sidebar__section {
  padding: var(--space-4) var(--space-6);
}

.app-sidebar__label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
  display: block;
}

.app-sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.app-sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  transition:
    background var(--duration-base) var(--ease-smooth),
    color var(--duration-base) var(--ease-smooth);
}

.app-sidebar__link:hover {
  background: var(--color-cream-light);
  color: var(--color-dark);
}

.app-sidebar__link.active {
  background: var(--color-dark);
  color: var(--color-cream);
}

.app-sidebar__link svg { flex-shrink: 0; }

/* ── App Content ──────────────────────────────────────────── */
.app-content {
  padding: var(--space-8) var(--space-6);
  max-width: 1200px;
}

@media (min-width: 768px) {
  .app-content { padding: var(--space-10) var(--space-10); }
}

/* ── Page Header ──────────────────────────────────────────── */
.page-header {
  margin-bottom: var(--space-10);
}

.page-header__label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gold);
  display: block;
  margin-bottom: var(--space-2);
}

.page-header h1 {
  font-family: var(--font-serif);
  font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
  font-weight: 300;
}

.page-header p {
  color: var(--color-text-secondary);
  margin-top: var(--space-3);
  font-size: var(--text-lg);
  max-width: 560px;
}

/* ── Mobile Bottom Nav ────────────────────────────────────── */
.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  inset-inline: 0;
  z-index: 100;
  background: rgba(224,219,212,.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--color-cream-dark);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-bottom: env(safe-area-inset-bottom);
}

@media (min-width: 1024px) {
  .mobile-bottom-nav { display: none; }
}

.mobile-bottom-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--space-3) var(--space-2);
  color: var(--color-text-muted);
  font-size: 10px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: color var(--duration-base) var(--ease-smooth);
}

.mobile-bottom-nav__item.active {
  color: var(--color-dark);
}

.mobile-bottom-nav__item svg { width: 20px; height: 20px; }

/* Fix overlapping titles in app layout */
:root {
  --navbar-height: 72px;
}

.app-with-sidebar {
  margin-top: var(--navbar-height);
}

/* Force reveal elements to be visible in the app to prevent blank screens if JS fails */
.reveal {
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
}

/* Global safeguard for cards with text to avoid sticking to borders */
.task-item, .quote-preview-item, .task-preview-item, .provider-card__body, .cotizar-card {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

.kpi-card {
  padding: 1.5rem !important;
}

.dashboard-card {
  padding: 2rem !important;
}

/* Fix for Dashboard countdown to fill the card */
.countdown-card__numbers span {
  font-size: clamp(3.5rem, 12vw, 8rem) !important;
}
.countdown-card__sep {
  font-size: clamp(3rem, 10vw, 6rem) !important;
}
.countdown-card__numbers small {
  font-size: var(--text-sm) !important;
}

/* Force task cards and lists to have plenty of safe padding */
.task-group__header, .task-item, .task-preview-item {
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

/* Increase breathing room between sidebar and main content on desktop */
@media (min-width: 1024px) {
  .app-content {
    padding-left: 4rem !important;
  }
}

/* Fix Tasks Overview mobile layout and padding */
.tasks-overview {
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

@media (max-width: 768px) {
  .tasks-overview {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem !important;
    padding: 1.5rem !important;
  }
  .tasks-overview__progress {
    grid-column: 1 / -1; /* Span full width on mobile */
    order: 3;
  }
  .tasks-overview__stat {
    text-align: left !important;
  }
  .tasks-overview__stat--right {
    text-align: right !important;
  }
}