/* ============================================================================
   Digga Design System — shared visual + interaction primitives
   Loaded by every page from /design-system.css. Additive only — never overrides
   existing utility classes; provides polish + consistency for new patterns.
   ============================================================================ */

/* ── Brand color tokens ─────────────────────────────────────────────────── */
:root {
  --digga-bg:           #000000;
  --digga-surface:      #0a0a0a;
  --digga-surface-2:    #111113;
  --digga-surface-3:    #18181b;
  --digga-border:       #1c1c1e;
  --digga-border-2:     #27272a;
  --digga-border-3:     #3f3f46;
  --digga-text:         #f4f4f5;
  --digga-text-muted:   #a1a1aa;
  --digga-text-dim:     #71717a;
  --digga-text-faint:   #52525b;

  --digga-primary:      #FF8C00;        /* signal orange — single source of truth */
  --digga-primary-2:    #E67E00;
  --digga-primary-soft: rgba(255,140,0,.12);
  --digga-primary-glow: rgba(255,140,0,.4);

  --digga-success:      #22c55e;
  --digga-danger:       #ef4444;
  --digga-info:         #3b82f6;

  --digga-radius-sm:    8px;
  --digga-radius:       12px;
  --digga-radius-lg:    16px;
  --digga-radius-xl:    20px;

  --digga-shadow-sm:    0 1px 2px rgba(0,0,0,.4);
  --digga-shadow:       0 4px 16px rgba(0,0,0,.5);
  --digga-shadow-lg:    0 10px 40px rgba(0,0,0,.6);

  --digga-transition:   .15s ease;
  --digga-transition-2: .25s cubic-bezier(.16,.84,.44,1);

  --digga-mono:         'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── Global reset polish ────────────────────────────────────────────────── */
*, *::before, *::after { -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { overscroll-behavior-y: none; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button, a, [role="button"], label { cursor: pointer; }

/* ── Mobile scroll fix — Chrome/Safari touch scroll on nested containers ── */
.tab-panel, .modal-box, [style*="overflow-y"], [class*="overflow-y"] {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
@media (max-width: 767px) {
  body, main, .tab-panel, #comments-root, #commentsContainer, #postsContainer,
  #savedContainer, #newsFeed, #notif-panel, .modal-overlay {
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
  /* Prevent buttons from stealing scroll gestures on mobile */
  button, a, [role="button"] { touch-action: pan-y; }
}

/* Prevent iOS text inflation on rotation */
@media (max-width: 767px) {
  input, textarea, select { font-size: 16px !important; }
}

img { max-width: 100%; height: auto; }

/* Focus visibility for keyboard users */
:focus-visible {
  outline: 2px solid var(--digga-primary);
  outline-offset: 2px;
  border-radius: 4px;
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) { outline: none; }

/* ── Typography scale ───────────────────────────────────────────────────── */
.dg-mono { font-family: var(--digga-mono); }

/* ── Scrollbar polish ───────────────────────────────────────────────────── */
::-webkit-scrollbar      { width: 8px; height: 8px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{ background: var(--digga-border-3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #52525b; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ── Animations ─────────────────────────────────────────────────────────── */
@keyframes dg-fade-up   { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:translateY(0) } }
@keyframes dg-fade-in   { from { opacity:0 } to { opacity:1 } }
@keyframes dg-pulse     { 0%,100% { opacity:.5 } 50% { opacity:1 } }
@keyframes dg-spin      { to { transform: rotate(360deg) } }
@keyframes dg-shimmer   { 0% { background-position: -200% 0 } 100% { background-position: 200% 0 } }
@keyframes dg-toast-in  { from { opacity:0; transform: translate(-50%, 12px) } to { opacity:1; transform: translate(-50%, 0) } }
@keyframes dg-toast-out { from { opacity:1; transform: translate(-50%, 0) } to { opacity:0; transform: translate(-50%, 12px) } }

.dg-fade-up { animation: dg-fade-up .25s ease both; }
.dg-fade-in { animation: dg-fade-in .2s ease both; }
.dg-pulse   { animation: dg-pulse 1.4s ease-in-out infinite; }
.dg-spin    { animation: dg-spin 1s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Skeleton loader ────────────────────────────────────────────────────── */
.dg-skel {
  background: linear-gradient(90deg, #18181b 25%, #27272a 50%, #18181b 75%);
  background-size: 200% 100%;
  animation: dg-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--digga-radius-sm);
}

/* ── Toast system (used via window.diggaToast) ──────────────────────────── */
.dg-toast-stack {
  position: fixed;
  left: 50%;
  bottom: calc(80px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  width: max-content;
  max-width: calc(100vw - 32px);
}
@media (min-width: 768px) {
  .dg-toast-stack { bottom: 24px; }
}
.dg-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: #18181b;
  border: 1px solid #27272a;
  border-radius: var(--digga-radius);
  color: #f4f4f5;
  font-size: 14px;
  box-shadow: var(--digga-shadow);
  animation: dg-toast-in .2s ease both;
  max-width: 100%;
}
.dg-toast.--success { border-color: rgba(34,197,94,.4); }
.dg-toast.--error   { border-color: rgba(239,68,68,.4); }
.dg-toast.--info    { border-color: rgba(249,115,22,.4); }
.dg-toast .material-symbols-outlined { font-size: 18px; }
.dg-toast.--leaving { animation: dg-toast-out .2s ease both; }

/* ── Buttons polish ─────────────────────────────────────────────────────── */
.dg-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; padding: 10px 16px; border-radius: var(--digga-radius);
  font-size: 13px; font-weight: 700; transition: transform var(--digga-transition), box-shadow var(--digga-transition), background var(--digga-transition);
  border: 1px solid transparent;
}
.dg-btn:active { transform: scale(0.97); }
.dg-btn[disabled], .dg-btn.--loading { opacity: .6; cursor: not-allowed; }

.dg-btn-primary { background: var(--digga-primary); color: #000; }
.dg-btn-primary:hover { background: var(--digga-primary-2); }

.dg-btn-ghost { background: transparent; color: var(--digga-text-muted); border-color: var(--digga-border-2); }
.dg-btn-ghost:hover { color: var(--digga-text); border-color: var(--digga-border-3); }

.dg-btn-danger { background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.3); color: #f87171; }
.dg-btn-danger:hover { background: rgba(239,68,68,.18); }

/* Loading spinner inside button */
.dg-btn .dg-spinner {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: dg-spin .8s linear infinite;
}

/* ── Card polish ────────────────────────────────────────────────────────── */
.dg-card {
  background: var(--digga-surface-2);
  border: 1px solid var(--digga-border);
  border-radius: var(--digga-radius-lg);
  transition: border-color var(--digga-transition);
}
.dg-card:hover { border-color: var(--digga-border-2); }

/* ── Sync indicator (shown briefly while server data loads) ────────────── */
.dg-sync-pill {
  position: fixed;
  top: calc(60px + env(safe-area-inset-top));
  right: 12px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--digga-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  background: rgba(249,115,22,.08);
  border: 1px solid rgba(249,115,22,.25);
  color: var(--digga-primary);
  animation: dg-fade-in .2s ease both;
}
.dg-sync-pill.--leaving { animation: dg-fade-in .2s ease reverse both; }
.dg-sync-pill .dg-spinner-sm {
  width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid currentColor; border-right-color: transparent;
  animation: dg-spin .8s linear infinite;
}

/* ── Auth gate fallback (after timeout) ─────────────────────────────────── */
.dg-authgate-fallback {
  margin-top: 16px;
  font-family: var(--digga-mono);
  font-size: 11px;
  color: var(--digga-text-faint);
}
.dg-authgate-fallback a { color: var(--digga-primary); text-decoration: underline; }

/* ── Press effect for mobile cards/buttons ──────────────────────────────── */
.dg-pressable { transition: transform .12s ease, opacity .12s ease; }
.dg-pressable:active { transform: scale(0.98); opacity: .92; }

/* ── Flair pill system ─────────────────────────────────────────────────────
   Each flair has its own colour-coded background + border. Used on post cards
   to give the feed an emotional / topical colour map. Filter chips above the
   feed use a separate, more subdued visual language so they don't compete. */
.flair-pill {
  display: inline-flex; align-items: center;
  font-family: var(--digga-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid;
  white-space: nowrap;
}
.flair-pill[data-flair="klausuren"]        { background: rgba(239,68,68,.14);  border-color: rgba(239,68,68,.45);  color: #fca5a5; }
.flair-pill[data-flair="mensa"]            { background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.45); color: #fcd34d; }
.flair-pill[data-flair="party"]            { background: rgba(34,197,94,.14);  border-color: rgba(34,197,94,.45);  color: #86efac; }
.flair-pill[data-flair="klatsch"]          { background: rgba(236,72,153,.14); border-color: rgba(236,72,153,.45); color: #f9a8d4; }
.flair-pill[data-flair="wohngemeinschaft"] { background: rgba(167,139,250,.14);border-color: rgba(167,139,250,.45);color: #c4b5fd; }
.flair-pill[data-flair="marktplatz"]       { background: rgba(16,185,129,.14); border-color: rgba(16,185,129,.45); color: #6ee7b7; }
.flair-pill[data-flair="jobs"]             { background: rgba(34,211,238,.14); border-color: rgba(34,211,238,.45); color: #67e8f9; }
.flair-pill[data-flair="allgemein"]        { background: rgba(113,113,122,.14);border-color: rgba(113,113,122,.45);color: #d4d4d8; }
/* Optional dorm pill — sits next to the flair pill, stays distinct */
.dorm-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--digga-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(59,130,246,.14);
  border: 1px solid rgba(59,130,246,.45);
  color: #93c5fd;
  white-space: nowrap;
}
.dorm-pill .material-symbols-outlined { font-size: 10px; }

/* External (cross-uni) post badge */
.flair-pill[data-flair="extern"] { background: rgba(0,212,255,.12); border-color: rgba(0,212,255,.4); color: #67e8f9; }

/* Filter chips above the feed — visually distinct from flair pills */
.filter-chip {
  display: inline-flex; align-items: center;
  font-family: var(--digga-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--digga-border-2);
  background: transparent;
  color: var(--digga-text-dim);
  transition: color var(--digga-transition), border-color var(--digga-transition), background var(--digga-transition);
  white-space: nowrap;
}
.filter-chip:hover { color: var(--digga-text-muted); border-color: var(--digga-border-3); }
.filter-chip.--active {
  background: var(--digga-primary);
  border-color: var(--digga-primary);
  color: #000;
}

/* ── Flair-chip — shared filter chip used across news, wg, marketplace,
   events, and feed pages. Matches the inline styles in feed.html so all
   pages share identical chip appearance via design-system.css. ──────────── */
.flair-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--digga-border-3);
  color: var(--digga-text-dim);
  font-family: var(--digga-mono);
  transition: border-color var(--digga-transition), color var(--digga-transition), background var(--digga-transition);
  white-space: nowrap;
}
.flair-chip:hover { border-color: #71717a; color: #e4e4e7; }
.flair-chip.selected {
  border-color: rgba(249,115,22,.5);
  background: rgba(249,115,22,.1);
  color: var(--digga-primary);
}
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
@media (max-width: 767px) {
  .flair-chip { padding: 8px 14px; font-size: 12px; }
}

/* ── Brand orange override ────────────────────────────────────────────────
   Tailwind CDN ships the old #f97316 with `text-orange-500` / `bg-orange-500`.
   We re-point those to our signal orange so brand colour stays consistent
   without rewriting every utility class on every page. */
.text-orange-500   { color: var(--digga-primary) !important; }
.bg-orange-500     { background-color: var(--digga-primary) !important; }
.border-orange-500 { border-color: var(--digga-primary) !important; }
.text-orange-400   { color: #FFA533 !important; }
.bg-orange-400     { background-color: #FFA533 !important; }
.border-orange-400 { border-color: #FFA533 !important; }
.text-orange-600   { color: var(--digga-primary-2) !important; }
.bg-orange-600     { background-color: var(--digga-primary-2) !important; }

/* ── Accessibility helper ───────────────────────────────────────────────── */
.dg-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── Comprehensive Mobile & Responsive Enhancements ────────────────────── */

/* Prevent horizontal scroll on all pages */
html { max-width: 100vw; }
body { max-width: 100vw; overflow-x: hidden; }

/* Fluid container padding — tighter on mobile, breathing room on desktop */
.dg-container {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
}
@media (min-width: 640px) { .dg-container { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .dg-container { padding-left: 2rem; padding-right: 2rem; } }

/* Fluid typography scale — prevents oversized text on small screens */
@media (max-width: 374px) {
  h1, .text-3xl, .text-4xl { font-size: clamp(1.5rem, 7vw, 2rem) !important; line-height: 1.2 !important; }
  h2, .text-2xl { font-size: clamp(1.25rem, 5.5vw, 1.5rem) !important; }
  h3, .text-xl { font-size: clamp(1.1rem, 4.5vw, 1.25rem) !important; }
  .text-lg { font-size: 1rem !important; }
}

/* Touch targets — ensure minimum 44x44px on mobile for all interactive elements */
@media (max-width: 767px) {
  button, a, [role="button"], select, .clickable {
    min-height: 44px;
  }
  /* Exception: inline text links shouldn't have forced height */
  p a, span a, li a, .inline-link { min-height: unset; }
}

/* Cards — prevent overflow on narrow screens */
@media (max-width: 767px) {
  .dg-card, .post-card, .news-card, [class*="rounded-2xl"] {
    border-radius: var(--digga-radius) !important;
  }
  /* Ensure images inside cards don't overflow */
  img, video, iframe { max-width: 100%; height: auto; }
}

/* Modals — full screen on mobile for better UX */
@media (max-width: 639px) {
  .modal-box, [class*="max-w-xl"], [class*="max-w-2xl"] {
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: var(--digga-radius-lg) var(--digga-radius-lg) 0 0 !important;
  }
}

/* Bottom safe area padding for pages with fixed bottom nav */
@media (max-width: 767px) {
  .dg-safe-bottom { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

/* Fix horizontal overflow from wide elements */
@media (max-width: 767px) {
  pre, code, table { overflow-x: auto; max-width: 100%; }
  .overflow-x-auto { -webkit-overflow-scrolling: touch; }
}

/* Responsive grid helpers */
.dg-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .dg-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }
@media (min-width: 1024px) { .dg-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }

/* Better spacing scale on mobile */
@media (max-width: 767px) {
  .py-20 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  .py-16 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  .py-12 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
  .mb-8 { margin-bottom: 1.5rem !important; }
  .gap-8 { gap: 1.25rem !important; }
}

/* Landscape phone optimization */
@media (max-height: 500px) and (orientation: landscape) {
  .min-h-screen, .min-h-\\[calc\\(100vh-4rem\\)\\] { min-height: auto !important; }
  section { padding-top: 2rem !important; padding-bottom: 2rem !important; }
}

/* Tablet-specific tweaks */
@media (min-width: 768px) and (max-width: 1023px) {
  .md\\:text-6xl { font-size: 3rem !important; }
  .md\\:text-7xl { font-size: 3.5rem !important; }
}

/* Print-friendly — hide nav and overlays */
@media print {
  nav, footer, .fixed, #mobile-bottom-nav, .fab, button { display: none !important; }
  body { background: #fff !important; color: #000 !important; padding: 0 !important; }
}

/* ── Phase 1A: Optimistic auth state classes ────────────────────────────── */
/* dg-auth-loading → show a skeleton shimmer on content areas while
   Firebase verifies the session. Only visible on first-ever visit (< 300ms). */
html.dg-auth-loading [data-auth-content] {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
html.dg-auth-ok [data-auth-content] {
  opacity: 1;
  transition: opacity 0.15s ease;
}

/* Skeleton shimmer — applied to elements with data-skeleton on loading */
html.dg-auth-loading [data-skeleton] {
  position: relative;
  overflow: hidden;
  background: #111113 !important;
  color: transparent !important;
  border-color: transparent !important;
}
html.dg-auth-loading [data-skeleton]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.04) 40%,
    rgba(255,255,255,.07) 50%,
    rgba(255,255,255,.04) 60%,
    transparent 100%);
  background-size: 200% 100%;
  animation: dg-shimmer 1.4s infinite;
}
@keyframes dg-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* ── Phase 1C: View Transitions — instant clean crossfade, no movement ───── */
/* No translate: avoids blur/jank on mobile GPU compositing layers.           */
::view-transition-old(root) {
  animation: none;
  opacity: 0;
}
::view-transition-new(root) {
  animation: none;
}

/* Reduced-motion: already no animation, nothing extra needed */