/* ===== MamasBilder — "The Empathetic Curator" Design System ===== */

@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');

/* --- Design Tokens --- */
:root {
  --primary: #2559bd;
  --primary-dim: #0f4db0;
  --primary-container: #dae2ff;
  --on-primary: #f8f7ff;
  --on-primary-container: #0d4cb0;
  --secondary: #c20000;
  --secondary-container: #ffdad4;
  --on-secondary-container: #a80000;
  --surface: #f9f9fc;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f2f3f7;
  --surface-container: #ebeef3;
  --surface-container-high: #e4e8ee;
  --surface-dim: #d3dbe3;
  --on-surface: #2d3339;
  --on-surface-variant: #596066;
  --outline: #757b82;
  --outline-variant: #acb3b9;
  --error: #9f403d;

  --font: "Public Sans", sans-serif;
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --min-touch: 56px;
}

/* --- Reset --- */
*, *::before, *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  background-color: var(--surface);
  color: var(--on-surface);
  line-height: 1.5;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

/* --- Typography (Editorial Scale) --- */
.display-sm  { font-size: 2.25rem; font-weight: 600; line-height: 1.2; }
.headline-sm { font-size: 1.5rem;  font-weight: 600; line-height: 1.3; }
.title-lg    { font-size: 1.375rem; font-weight: 600; line-height: 1.4; }
.body-lg     { font-size: 1rem;    font-weight: 400; line-height: 1.5; }
.label-md    { font-size: 0.75rem; font-weight: 500; line-height: 1.4; color: var(--on-surface-variant); }

/* --- Material Symbols --- */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}
.material-symbols-outlined.filled {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* --- Layout --- */
.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.app-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* --- Header (Glassmorphism) --- */
.app-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background: rgba(249, 249, 252, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: sticky;
  top: 0;
  z-index: 100;
}

.app-header__back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--min-touch);
  height: var(--min-touch);
  border: none;
  background: none;
  color: var(--primary);
  cursor: pointer;
  border-radius: var(--radius-lg);
}
.app-header__back:active { transform: scale(0.98); }

.app-header__title {
  flex: 1;
  font-size: 1.375rem;
  font-weight: 600;
}

/* --- Bottom Navigation (Material 3 Style) --- */
.bottom-nav {
  display: flex;
  justify-content: space-around;
  padding: 0.5rem 0;
  background: var(--surface-container-lowest);
  position: sticky;
  bottom: 0;
  z-index: 100;
}

.bottom-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 1.5rem;
  border: none;
  background: none;
  color: var(--on-surface-variant);
  font-family: var(--font);
  font-size: 0.75rem;
  cursor: pointer;
  border-radius: var(--radius-lg);
  min-height: var(--min-touch);
  justify-content: center;
}

.bottom-nav__item.active {
  color: var(--primary);
}
.bottom-nav__item.active .nav-pill {
  background: var(--primary-container);
  border-radius: 9999px;
  padding: 0.25rem 1rem;
}

/* --- Folder Cards (No borders! Background shifts only) --- */
.folder-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
}

.folder-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--surface-container-low);
  border-radius: var(--radius-xl);
  cursor: pointer;
  border: none;
  width: 100%;
  text-align: left;
  font-family: var(--font);
  color: var(--on-surface);
  min-height: var(--min-touch);
}
.folder-card:active { transform: scale(0.98); background: var(--surface-container); }

.folder-card__icon {
  font-size: 2rem;
  color: var(--primary);
}

.folder-card__info { flex: 1; }
.folder-card__name { font-size: 1.125rem; font-weight: 600; }
.folder-card__meta { font-size: 0.875rem; color: var(--on-surface-variant); }

.folder-card__chevron { color: var(--outline); }

/* --- Gallery Grid --- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 4px;
  padding: 4px;
}

.gallery-item {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-md);
  cursor: pointer;
  background: var(--surface-container);
}
.gallery-item:active { transform: scale(0.98); }

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-item__video-badge {
  position: absolute;
  bottom: 0.5rem;
  left: 0.5rem;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border-radius: var(--radius-sm);
  padding: 0.125rem 0.375rem;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.gallery-item__fav {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  color: var(--secondary);
}

/* --- Photo Fullscreen View --- */
.photo-view {
  position: fixed;
  inset: 0;
  background: var(--surface);
  z-index: 200;
  display: flex;
  flex-direction: column;
}

.photo-view__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: rgba(249, 249, 252, 0.85);
  backdrop-filter: blur(20px);
}

.photo-view__canvas {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: pan-x pan-y pinch-zoom;
}

.photo-view__canvas img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.photo-view__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--min-touch);
  height: var(--min-touch);
  border: none;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--on-surface);
}
.photo-view__nav--prev { left: 0.75rem; }
.photo-view__nav--next { right: 0.75rem; }

/* --- Video Player --- */
.video-player {
  position: fixed;
  inset: 0;
  background: var(--on-surface);
  z-index: 200;
  display: flex;
  flex-direction: column;
}

.video-player__header {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  background: rgba(0, 0, 0, 0.6);
  color: white;
}

.video-player video {
  flex: 1;
  width: 100%;
  object-fit: contain;
  background: black;
}

/* --- Auth Screen --- */
.auth-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 2rem;
  gap: 2rem;
}

.auth-screen__title {
  font-size: 2.25rem;
  font-weight: 600;
  color: var(--primary);
}

.pin-input {
  display: flex;
  gap: 0.75rem;
}

.pin-input__digit {
  width: var(--min-touch);
  height: var(--min-touch);
  border: none;
  background: var(--surface-container-low);
  border-radius: var(--radius-lg);
  font-size: 1.5rem;
  font-family: var(--font);
  text-align: center;
  color: var(--on-surface);
}
.pin-input__digit:focus {
  outline: none;
  background: var(--primary-container);
}

.auth-screen__button {
  min-width: 200px;
  min-height: var(--min-touch);
  border: none;
  background: linear-gradient(135deg, var(--primary), var(--primary-dim));
  color: var(--on-primary);
  font-family: var(--font);
  font-size: 1.125rem;
  font-weight: 600;
  border-radius: var(--radius-xl);
  cursor: pointer;
  padding: 0 2rem;
}
.auth-screen__button:active { transform: scale(0.98); }

.auth-screen__error {
  color: var(--error);
  font-size: 0.875rem;
}

/* --- Icon Button (reusable) --- */
.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--min-touch);
  height: var(--min-touch);
  border: none;
  background: none;
  cursor: pointer;
  border-radius: var(--radius-lg);
  color: var(--on-surface);
}
.icon-btn:active { transform: scale(0.98); }
.icon-btn--fav { color: var(--secondary); }

/* --- Breadcrumb --- */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  color: var(--on-surface-variant);
  overflow-x: auto;
  white-space: nowrap;
}

.breadcrumb__item {
  cursor: pointer;
  color: var(--primary);
}
.breadcrumb__item:last-child {
  color: var(--on-surface);
  cursor: default;
}

/* --- Section Header --- */
.section-header {
  padding: 1.5rem 1rem 0.75rem;
  font-size: 1.375rem;
  font-weight: 600;
}

/* --- Loading / Empty States --- */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem;
  color: var(--on-surface-variant);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  gap: 1rem;
  text-align: center;
  color: var(--on-surface-variant);
}
.empty-state .material-symbols-outlined { font-size: 3rem; }

/* --- Utilities --- */
.hidden { display: none !important; }