/* ==============================================================================
   SAVED REELS DASHBOARD - MAIN STYLESHEET
   ==============================================================================
   This stylesheet controls the visual presentation, responsive layout, animations,
   and color themes for the Saved Reel Vault application.
   Every section and key line is annotated so you can easily customize colors,
   spacing, typography, and card dimensions.
   ============================================================================== */

/* ------------------------------------------------------------------------------
   1. ROOT VARIABLES & THEME CONFIGURATION
   Edit these CSS variables to easily re-theme the entire dashboard.
   ------------------------------------------------------------------------------ */
:root {
  /* Main dark page background color */
  --bg: #080b17;

  /* Card panel and container background */
  --panel: #151a2b;

  /* Primary text color (high contrast near-white) */
  --text: #f7f8ff;

  /* Secondary muted text color (for captions, counts, and subtitles) */
  --muted: #abb4ca;

  /* Primary font stack: includes Malayalam font with fallback to system fonts */
  --font-family: "Noto Sans Malayalam", "Manjari", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Global border radius settings for consistency */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 19px;
  --radius-xl: 27px;

  /* Smooth transition timing for hovers and interactions */
  --transition-speed: 0.25s;
}

/* ------------------------------------------------------------------------------
   2. GLOBAL RESET & BASE STYLES
   ------------------------------------------------------------------------------ */
/* Ensure all elements calculate width and height including borders and padding */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Global body styling with ambient glowing background gradients */
body {
  /* Remove default browser margin */
  margin: 0;

  /* Minimum height ensures the background spans the entire viewport */
  min-height: 100vh;

  /* Primary font family defined in :root */
  font-family: var(--font-family);

  /* Deep dark ambient radial background with purple & teal glow orbs */
  background:
    radial-gradient(circle at 5% 0%, #6d3fa940, transparent 32%),
    radial-gradient(circle at 100% 25%, #116a8740, transparent 35%),
    var(--bg);

  /* Default text color */
  color: var(--text);

  /* Smoother font rendering on modern displays */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ------------------------------------------------------------------------------
   3. LAYOUT CONTAINER
   ------------------------------------------------------------------------------ */
/* Centered main container wrapping all content */
main {
  /* Restrict max width on ultra-wide screens for readability */
  max-width: 1480px;

  /* Outer page padding */
  padding: 30px;

  /* Center the layout horizontally */
  margin: 0 auto;
}

/* ------------------------------------------------------------------------------
   4. TOP BAR & BRANDING
   ------------------------------------------------------------------------------ */
/* Top flex row holding the brand name and the right-side subtitle */
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

/* Brand logo and title container */
.brand {
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 11px; /* Gap between icon and text */
}

/* Glowing gradient play icon mark */
.mark {
  display: grid;
  place-items: center; /* Center the play symbol */
  width: 39px;
  height: 39px;
  border-radius: 12px;
  background: linear-gradient(135deg, #bd83ff, #fd71ad); /* Vibrant gradient */
  box-shadow: 0 0 24px #b070ff55; /* Soft neon glow */
  font-size: 14px;
  color: #ffffff;
}

/* Small uppercase badge / label styling */
.tiny {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--muted);
}

/* ------------------------------------------------------------------------------
   5. HERO BANNER
   ------------------------------------------------------------------------------ */
/* Hero section banner with rich mesh gradient and decorative orb */
.hero {
  position: relative;
  overflow: hidden; /* Hide decorative background circle overflow */
  padding: 42px;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.12); /* Subtle glass border */
  background: linear-gradient(120deg, #4d299b, #9c3c73 51%, #167099);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.33);
}

/* Decorative ring in the top-right corner of the hero */
.hero::after {
  content: "";
  position: absolute;
  width: 310px;
  height: 310px;
  right: -80px;
  top: -120px;
  border: 60px solid rgba(255, 255, 255, 0.05); /* Very subtle semi-transparent ring */
  border-radius: 50%;
  pointer-events: none; /* Ignore mouse interactions */
}

/* Light subtitle inside hero */
.hero .tiny {
  color: #f0dfff;
}

/* Main hero title heading */
.hero h1 {
  /* Fluid responsive font size */
  font-size: clamp(32px, 5vw, 57px);
  letter-spacing: -2px;
  line-height: 1.13;
  margin: 12px 0;
  color: #ffffff;
}

/* Hero description paragraph */
.hero p {
  max-width: 600px;
  line-height: 1.8;
  color: #f2eafa;
  margin: 0;
}

/* Total reel count pill badge inside hero */
.stat {
  display: inline-flex;
  align-items: center;
  margin-top: 22px;
  padding: 7px 15px;
  border-radius: 20px;
  background: rgba(10, 21, 53, 0.35); /* Translucent dark backdrop */
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 13px;
  backdrop-filter: blur(4px);
}

/* Glowing green pulse dot inside stat pill */
.dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: #85f7d0; /* Bright mint green */
  box-shadow: 0 0 10px #85f7d0; /* Glowing effect */
}

/* ------------------------------------------------------------------------------
   6. TOOLS & SEARCH BAR
   ------------------------------------------------------------------------------ */
/* Container holding the search box and live results counter */
.tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 28px 0 21px;
}

/* Rounded search input container */
.search {
  width: min(680px, 100%);
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 15px;
  background: #171d31;
  transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
}

/* Glowing focus ring when user clicks or tabs into the search bar */
.search:focus-within {
  border-color: #bc8dff;
  box-shadow: 0 0 0 3px rgba(181, 131, 255, 0.15);
}

/* Search lens icon */
.lens {
  font-size: 23px;
  color: #c5a7ff;
  user-select: none;
}

/* Actual search text input element */
input[type="search"] {
  border: 0;
  outline: 0;
  color: var(--text);
  background: transparent;
  width: 100%;
  padding: 15px 0;
  font: inherit;
  font-size: 14px;
}

/* Placeholder styling inside search box */
input[type="search"]::placeholder {
  color: #9ea9c4;
}

/* Clear search button (the small 'x' button) */
.clear {
  border: 0;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.06);
  color: #e7ebf8;
  font-size: 19px;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background var(--transition-speed), color var(--transition-speed);
}

.clear:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

/* Live results counter text ("Showing X of Y reels") */
.count {
  font-size: 13px;
  white-space: nowrap;
  color: var(--muted);
}

/* Emphasized number in counter */
.count b {
  color: #ffffff;
}

/* ------------------------------------------------------------------------------
   7. REELS GRID LAYOUT
   ------------------------------------------------------------------------------ */
/* 4-column responsive grid container for reel cards */
.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4 equal columns */
  gap: 20px; /* Space between cards */
}

/* ------------------------------------------------------------------------------
   8. REEL CARD STYLING
   ------------------------------------------------------------------------------ */
/* Individual reel card article container */
.card {
  /* Default accent color fallback (overridden inline per card) */
  --a: #b58dff;
  --b: #f28db9;

  position: relative;
  background: linear-gradient(150deg, #1b2034, #121728);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 7px 22px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;

  /* Smooth lift animation on hover */
  transition:
    transform var(--transition-speed),
    box-shadow var(--transition-speed),
    border-color var(--transition-speed);
}

/* Card hover elevation and glowing accent border */
.card:hover {
  transform: translateY(-6px);
  border-color: var(--a);
  box-shadow:
    0 18px 35px rgba(0, 0, 0, 0.5),
    0 0 25px color-mix(in srgb, var(--a) 23%, transparent);
}

/* ------------------------------------------------------------------------------
   9. CARD MEDIA / THUMBNAIL AREA
   ------------------------------------------------------------------------------ */
/* Top media link area wrapping the video thumbnail image */
.media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4; /* Standard vertical reel portrait aspect ratio */
  background: linear-gradient(140deg, var(--a), var(--b));
  overflow: hidden;
  text-decoration: none;
  color: #ffffff;
}

/* Bottom shadow overlay for thumbnail contrast */
.media::after {
  content: "";
  position: absolute;
  inset: 35% 0 0;
  background: linear-gradient(transparent, rgba(7, 11, 24, 0.79));
  pointer-events: none;
}

/* Thumbnail image tag */
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Fill area without distorting aspect ratio */
  display: block;
  transition: transform 0.35s ease;
}

/* Subtle image zoom on card hover */
.card:hover .media img {
  transform: scale(1.045);
}

/* Reel index badge ("#001") in top-left corner */
.badge {
  position: absolute;
  z-index: 2;
  left: 12px;
  top: 12px;
  background: rgba(11, 16, 34, 0.8);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 9px;
  padding: 6px 9px;
  font: 700 11px "Segoe UI", sans-serif;
  color: #ffffff;
  letter-spacing: 0.7px;
}

/* Centered play button icon overlay */
.play {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 51px;
  height: 51px;
  transform: translate(-50%, -50%) scale(0.85);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4);
  opacity: 0; /* Hidden by default until hover */
  transition: opacity var(--transition-speed), transform var(--transition-speed);
}

/* Play triangle symbol drawn using CSS borders */
.play::after {
  content: "";
  position: absolute;
  left: 21px;
  top: 15px;
  border-left: 17px solid #392262;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

/* Fade in play button on card hover */
.card:hover .play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Placeholder container shown when image fails to load */
.placeholder {
  height: 100%;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

.placeholder span {
  font-size: 45px;
  display: block;
}

/* ------------------------------------------------------------------------------
   10. CARD CONTENT & ACTIONS
   ------------------------------------------------------------------------------ */
/* Lower text section inside the card */
.content {
  padding: 18px 18px 19px;
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Stretch content so buttons align at bottom */
}

/* Reel title / caption heading */
.title {
  font-size: 14px;
  font-weight: 550;
  line-height: 1.75;
  margin: 0 0 17px;
  min-height: 73px; /* Keeps card heights uniform across row */
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* Truncate titles beyond 3 lines */
  overflow-wrap: anywhere; /* Break long words, URLs, or hashtags cleanly */
}

/* Action button row */
.actions {
  display: flex;
  gap: 8px;
  margin-top: auto; /* Push buttons to bottom of card */
}

/* Shared styling for both Open Reel and Copy Link buttons */
.open, .copy {
  flex: 1; /* Both buttons share equal width */
  min-height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity var(--transition-speed), background var(--transition-speed), border-color var(--transition-speed);
}

/* Primary "Open Reel ↗" button with gradient background */
.open {
  background: linear-gradient(115deg, var(--a), var(--b));
  color: #0a1020;
  border: 0;
}

.open:hover {
  opacity: 0.92;
}

/* Secondary "Copy Link" button with subtle translucent background */
.copy {
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e4e9fa;
  background: rgba(255, 255, 255, 0.04);
}

.copy:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Active success state when link is copied */
.copy.done {
  color: #90f2cf;
  border-color: rgba(144, 242, 207, 0.4);
}

/* ------------------------------------------------------------------------------
   11. EMPTY SEARCH STATE
   ------------------------------------------------------------------------------ */
/* Empty search results feedback box */
.empty {
  padding: 70px 20px;
  text-align: center;
  border: 1px dashed rgba(255, 255, 255, 0.15);
  border-radius: 18px;
  color: var(--muted);
  margin-top: 20px;
}

.empty h2 {
  color: #ffffff;
  margin-top: 0;
}

/* ------------------------------------------------------------------------------
   12. TOAST NOTIFICATION
   ------------------------------------------------------------------------------ */
/* Floating toast banner confirming actions like link copy */
.toast {
  position: fixed;
  z-index: 999;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 20px);
  opacity: 0;
  transition: opacity var(--transition-speed), transform var(--transition-speed);
  pointer-events: none;
  padding: 12px 19px;
  background: #28304d;
  border: 1px solid rgba(176, 154, 255, 0.4);
  border-radius: var(--radius-md);
  font-size: 13px;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.5);
  color: #ffffff;
}

/* Class added via JS when toast is visible */
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ------------------------------------------------------------------------------
   13. FOOTER
   ------------------------------------------------------------------------------ */
footer {
  text-align: center;
  color: #8e99b5;
  font-size: 12px;
  margin: 36px 0 16px;
  padding: 16px;
}

/* ------------------------------------------------------------------------------
   14. RESPONSIVE BREAKPOINTS
   ------------------------------------------------------------------------------ */
/* Medium screens & tablets (max 1060px) */
@media (max-width: 1060px) {
  /* Switch grid from 4 columns to 2 columns */
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile smartphones (max 600px) */
@media (max-width: 600px) {
  /* Reduce outer page padding */
  main {
    padding: 18px 15px 38px;
  }

  /* Compact top bar */
  .top {
    margin-bottom: 18px;
  }

  /* Hide small subtitle on narrow screens to save space */
  .top .tiny {
    display: none;
  }

  /* Compact hero banner */
  .hero {
    padding: 29px 23px;
    border-radius: 21px;
  }

  .hero h1 {
    letter-spacing: -1.3px;
  }

  /* Stack search input and counter vertically */
  .tools {
    margin: 23px 0 17px;
    flex-direction: column;
    align-items: stretch;
    gap: 11px;
  }

  .count {
    text-align: right;
  }

  /* Single column grid on phones */
  .grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Slightly larger font on phone for readability */
  .title {
    font-size: 15px;
  }
}

/* ------------------------------------------------------------------------------
   15. ACCESSIBILITY: REDUCED MOTION PREFERENCE
   ------------------------------------------------------------------------------ */
/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}