/* ============================================================
   Catchers Agency — Custom CSS
   Custom font loading + reusable design tokens
   ============================================================ */

/* ── PPAgrandir Custom Font (Catchers Agency Brand Font) ── */
@font-face {
  font-family: 'CatchersFont';
  src: url('/assets/fonts/font.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'CatchersFont';
  src: url('/assets/fonts/font-medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'CatchersFont';
  src: url('/assets/fonts/font-bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'CatchersFont';
  src: url('/assets/fonts/font-heavy.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'CatchersFont';
  src: url('/assets/fonts/font-black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ── CSS Design Tokens — Light Theme ── */
.hidden {
  display: none !important;
}

:root {
  --bg-base:       245 248 245;
  --bg-card:       255 255 255;
  --bg-elevated:   238 244 238;
  --bg-hover:      232 240 232;
  --border:        220 229 220;
  --border-subtle: 232 238 232;

  --text-primary:   13 31 20;
  --text-secondary: 74 99 86;
  --text-muted:     122 147 134;
  --text-placeholder: 160 180 168;

  --accent:       19 57 41;
  --accent-hover: 13 42 30;
  --accent-light: rgb(var(--accent) / 0.08);
  --accent-glow:  rgb(var(--accent) / 0.15);

  --success:  22 163 74;
  --error:    220 38 38;
  --warning:  217 119 6;
  --info:     3 105 161;
}

/* ── CSS Design Tokens — Dark Theme ── */
html.dark {
  --bg-base:       14 20 18;
  --bg-card:       21 30 26;
  --bg-elevated:   27 39 33;
  --bg-hover:      33 47 40;
  --border:        43 58 50;
  --border-subtle: 35 48 41;

  --text-primary:   235 242 237;
  --text-secondary: 168 190 178;
  --text-muted:     115 140 125;
  --text-placeholder: 90 112 100;

  --accent:       53 168 111;
  --accent-hover: 74 189 132;
  --accent-light: rgb(var(--accent) / 0.14);
  --accent-glow:  rgb(var(--accent) / 0.24);

  --success:  74 222 128;
  --error:    248 113 113;
  --warning:  251 191 36;
  --info:     56 189 248;
}

/* ── Dark mode: soften hardcoded light-only status colors ──
   A handful of alert/status elements (error banners, delete buttons,
   success banners) use Tailwind's raw red/green/amber palette directly
   instead of the themed tokens above. Tone those down under dark mode
   so they don't read as light-mode rectangles floating on a dark page. */
html.dark .bg-red-50            { background-color: rgb(248 113 113 / 0.12) !important; }
html.dark .hover\:bg-red-50:hover  { background-color: rgb(248 113 113 / 0.16) !important; }
html.dark .hover\:bg-red-100:hover { background-color: rgb(248 113 113 / 0.2)  !important; }
html.dark .border-red-200       { border-color: rgb(248 113 113 / 0.35) !important; }
html.dark .bg-green-50          { background-color: rgb(74 222 128 / 0.12) !important; }
html.dark .border-green-200     { border-color: rgb(74 222 128 / 0.35) !important; }
html.dark .bg-amber-100         { background-color: rgb(251 191 36 / 0.18) !important; }

/* ── Base Resets ── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'CatchersFont', 'PPAgrandir', ui-sans-serif, system-ui, sans-serif;
  background-color: rgb(var(--bg-base));
  color: rgb(var(--text-primary));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: rgb(var(--bg-elevated)); }
::-webkit-scrollbar-thumb { background: rgb(var(--border)); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--accent)); }

/* ── Selection ── */
::selection { background: var(--accent-light); color: rgb(var(--text-primary)); }

/* ── Input Focus ── */
.input-glow:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-glow);
  border-color: rgb(var(--accent)) !important;
}

/* ── Brand Text ── */
.gradient-text {
  color: rgb(var(--accent));
  font-weight: 900;
}

/* ── Card Hover Lift ── */
.card-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-hover:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(19,57,41,0.12), 0 0 0 1px rgb(var(--border));
}

/* ── Shimmer Skeleton ── */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, rgb(var(--bg-elevated)) 25%, rgb(var(--bg-hover)) 50%, rgb(var(--bg-elevated)) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 8px;
}

/* ── One-shot success ping (vs. Tailwind's infinite animate-ping) ── */
@keyframes ping-once {
  0%   { transform: scale(1); opacity: 1; }
  75%, 100% { transform: scale(2.2); opacity: 0; }
}
.animate-ping-once {
  animation: ping-once 0.8s cubic-bezier(0, 0, 0.2, 1) 1;
}

/* ── Fade In ── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in-up             { animation: fadeInUp 0.35s ease-out both; }
.fade-in-up-delay-1     { animation-delay: 0.08s; }
.fade-in-up-delay-2     { animation-delay: 0.16s; }
.fade-in-up-delay-3     { animation-delay: 0.24s; }

/* ── Subtle Pulse ── */
@keyframes subtlePulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); }
  50%       { box-shadow: 0 0 0 8px transparent; }
}
.glow-pulse { animation: subtlePulse 2s ease-in-out infinite; }

/* ── Sidebar Active Link ── */
.nav-link {
  position: relative;
  transition: all 0.15s ease;
}
.nav-link::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px; height: 55%;
  background: rgb(var(--accent));
  border-radius: 0 2px 2px 0;
  transition: transform 0.15s ease;
}
.nav-link.active::before, .nav-link:hover::before {
  transform: translateY(-50%) scaleY(1);
}

/* ── Upload Drop Zone ── */
.drop-zone {
  border: 2px dashed rgb(var(--border));
  transition: border-color 0.2s, background 0.2s;
}
.drop-zone.drag-over {
  border-color: rgb(var(--accent));
  background: var(--accent-light);
}

/* ── Page Transition ── */
.page-enter { animation: fadeInUp 0.35s ease-out both; }

/* ── Modal entrance ── */
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}
.modal-panel { animation: modalIn 0.22s cubic-bezier(0.34, 1.4, 0.64, 1) both; }

/* ── Focus rings (keyboard nav) ── */
:focus-visible {
  outline: 2px solid rgb(var(--accent));
  outline-offset: 2px;
  border-radius: 6px;
}

/* ── Secondary button hover ── */
button.border, a.border {
  transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.1s;
}
button.border:active, a.border:active { transform: scale(0.98); }

/* ── App-wide Interaction Layer ── */
.app-enhanced .app-card,
.app-enhanced .auth-card,
.app-enhanced .profile-card,
.app-enhanced .add-card,
.app-enhanced section.bg-light-card,
.app-enhanced div.bg-light-card.border {
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease;
}

.app-enhanced .app-card:hover,
.app-enhanced .auth-card:hover,
.app-enhanced .profile-card:hover,
.app-enhanced .add-card:hover {
  transform: translateY(-2px);
  border-color: rgb(var(--accent) / 0.28) !important;
  box-shadow: 0 14px 34px rgb(12 35 24 / 0.08);
}

.interactive-surface {
  position: relative;
  overflow: hidden;
}

.interactive-surface::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(
      320px circle at var(--spotlight-x, 50%) var(--spotlight-y, 50%),
      rgb(var(--accent) / 0.075),
      transparent 42%
    );
  transition: opacity 0.18s ease;
}

.interactive-surface:hover::after {
  opacity: 1;
}

.ui-reveal {
  opacity: 0;
  transform: translateY(10px);
}

.ui-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.38s ease, transform 0.38s ease;
}

.ui-ripple {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  background: currentColor;
  opacity: 0.18;
  animation: uiRipple 0.58s ease-out forwards;
}

@keyframes uiRipple {
  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

.app-progress-bar {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9997;
  width: 100%;
  height: 3px;
  pointer-events: none;
  transform-origin: left;
  transform: scaleX(0);
  background: rgb(var(--accent));
  box-shadow: 0 0 18px rgb(var(--accent) / 0.32);
}

.search-clear-btn {
  position: absolute;
  right: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 999px;
  display: none;
  align-items: center;
  justify-content: center;
  color: rgb(var(--text-muted));
  background: rgb(var(--bg-elevated));
  border: 1px solid rgb(var(--border));
  font-size: 0.85rem;
  line-height: 1;
}

.search-clear-btn:hover {
  color: rgb(var(--accent));
  border-color: rgb(var(--accent) / 0.4);
}

.has-search-clear {
  padding-right: 2.75rem !important;
}

.quick-switcher-overlay {
  position: fixed;
  inset: 0;
  z-index: 9996;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 1rem 1rem;
  background: rgb(5 12 8 / 0.28);
}

.quick-switcher-panel {
  width: min(36rem, 100%);
  border-radius: 1rem;
  border: 1px solid rgb(var(--border));
  background: rgb(var(--bg-card));
  box-shadow: 0 24px 70px rgb(7 19 13 / 0.22);
  overflow: hidden;
}

.quick-switcher-input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgb(var(--border));
  background: rgb(var(--bg-card));
  color: rgb(var(--text-primary));
  padding: 1rem 1.1rem;
  font-size: 0.95rem;
}

.quick-switcher-input:focus {
  outline: none;
}

.quick-switcher-list {
  max-height: 22rem;
  overflow-y: auto;
  padding: 0.45rem;
}

.quick-switcher-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 0.75rem;
  padding: 0.8rem 0.85rem;
  color: rgb(var(--text-secondary));
  text-align: left;
}

.quick-switcher-item:hover,
.quick-switcher-item.is-active {
  color: rgb(var(--accent));
  background: var(--accent-light);
}

.quick-switcher-dot {
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 999px;
  background: rgb(var(--accent));
  opacity: 0.65;
  flex-shrink: 0;
}

.scroll-top-btn {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 45;
  width: 2.65rem;
  height: 2.65rem;
  border-radius: 999px;
  border: 1px solid rgb(var(--border));
  background: rgb(var(--bg-card) / 0.92);
  color: rgb(var(--accent));
  box-shadow: 0 12px 28px rgb(12 35 24 / 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(0.5rem);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.scroll-top-btn.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.scroll-top-btn:hover {
  border-color: rgb(var(--accent) / 0.5);
}

/* ── Modal Backdrop ── */
.modal-backdrop {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal-panel {
  background-color: rgb(var(--bg-card)) !important;
  opacity: 1 !important;
}

/* ── Responsive Typography ── */
.text-responsive-xl { font-size: clamp(1.25rem, 3vw, 2rem); }
.text-responsive-lg { font-size: clamp(1rem, 2.5vw, 1.5rem); }
.text-responsive-md { font-size: clamp(0.875rem, 1.5vw, 1rem); }

/* ── Auth Card Shadow ── */
.auth-card {
  box-shadow: 0 4px 24px rgba(19,57,41,0.08), 0 1px 4px rgba(19,57,41,0.06);
}

/* ── App Card Shadow ── */
.app-card {
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
}

/* ── Insight Thumbnails ── */
.insight-thumb,
.insight-slot {
  aspect-ratio: 9 / 16;
  width: 100%;
  border-radius: 0.75rem;
  background: rgb(var(--bg-card));
  border: 1px solid rgb(var(--border));
}

.insight-thumb {
  display: block;
  object-fit: cover;
}

.insight-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  border-style: dashed;
  color: rgb(var(--text-muted));
  font-size: 0.625rem;
}

/* ── Brand Button ── */
.btn-brand {
  background: rgb(var(--accent));
  color: #FFFFFF;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
}
.btn-brand:hover {
  background: rgb(var(--accent-hover));
  box-shadow: 0 4px 16px rgba(19,57,41,0.3);
}
.btn-brand:active { transform: scale(0.98); }

/* ── Small Screen Ergonomics ── */
@media (max-width: 640px) {
  body {
    min-width: 0;
  }

  #sidebar {
    width: min(18rem, 86vw);
  }

  main {
    min-width: 0;
    width: 100%;
  }

  main > header {
    padding: 0.75rem 1rem !important;
    gap: 0.75rem !important;
  }

  main > header > .flex-1,
  main > header .max-w-md {
    min-width: 0;
  }

  .page-enter {
    padding: 1rem !important;
  }

  .app-card,
  .auth-card,
  main .shadow-sm {
    border-radius: 1rem !important;
  }

  .auth-card {
    padding: 1.25rem !important;
  }

  .drop-zone {
    padding: 1.25rem !important;
  }

  body > .w-full.max-w-md {
    max-width: 100%;
  }

  body > .w-full.max-w-md > .text-center img {
    height: 9rem !important;
  }

  #toast-container {
    top: 1rem;
    left: 1rem;
    right: 1rem;
  }

  #toast-container > div {
    max-width: none;
  }
}

@media (max-width: 420px) {
  main > header {
    padding-inline: 0.75rem !important;
  }

  .page-enter {
    padding: 0.75rem !important;
  }

  .btn-brand,
  button,
  a {
    max-width: 100%;
  }
}

/* ── App Top Navigation ──
   Always exactly one row, at every screen size — logo left, links centered,
   user widget right — it never wraps to extra rows and never converts to
   an off-canvas sidebar. Instead of breakpoints, everything that could
   overflow (logo, nav text/icons/gaps, avatar, name) scales down fluidly
   with clamp(..., Nvw, ...) as the viewport narrows, so the same layout
   just gets more compact rather than reflowing. Uses position:sticky in
   normal document flow (body switches to a column stack below) instead of
   position:fixed, so <main> starts right after however tall the bar is. */
body {
  flex-direction: column !important;
}

#sidebar {
  position: sticky !important;
  inset: auto !important;
  top: 0.75rem !important;
  margin: 0.75rem 1rem 0 !important;
  width: auto !important;
  height: auto !important;
  min-height: clamp(3rem, 2.6rem + 1.2vw, 4.5rem) !important;
  transform: none !important;
  display: grid !important;
  /* minmax(max-content, 1fr): each outer column is never forced smaller
     than its own content (avoids the user-widget, which is wider than the
     logo, overflowing into the nav column) while still splitting any
     leftover space equally — see the user-widget clamp values below, which
     are deliberately kept close to the logo's width so this stays visually
     centered even when there isn't much leftover space to equalize with. */
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr) !important;
  align-items: center !important;
  gap: clamp(0.375rem, 0.1rem + 0.9vw, 0.75rem) !important;
  padding: clamp(0.375rem, 0.2rem + 0.6vw, 0.75rem) clamp(0.625rem, 0.3rem + 1vw, 1.25rem) !important;
  border: 1px solid rgba(220, 229, 220, 0.92) !important;
  border-radius: clamp(0.875rem, 0.7rem + 0.6vw, 1.25rem) !important;
  box-shadow: 0 18px 44px rgba(13, 31, 20, 0.12), 0 1px 2px rgba(13, 31, 20, 0.04) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  overflow: visible !important;
  z-index: 40 !important;
}

/* Grid (not flex-with-matched-widths): the two outer 1fr columns are always
   equal width no matter how much content logo/user-widget actually have,
   so the auto-sized middle column (nav) is always the bar's true visual
   center — not just centered within whatever space happens to be left. */
#sidebar > div:first-child {
  justify-self: start !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* logo.png's actual canvas is a huge 6667x6667 square, but the visible
   "catchers." wordmark only fills a thin ~14%-tall band through its
   vertical center — plain object-fit:contain sizes to the square canvas,
   so the wordmark rendered as a barely-visible sliver no matter how big
   the box was. Every other page already solves this the same way (see
   e.g. dashboard.html's own vertical-sidebar logo): oversize the image via
   an explicit width, center it absolutely, and let the container's
   overflow:hidden crop away everything above/below the visible band. */
#sidebar > div:first-child a {
  position: relative !important;
  height: clamp(2rem, 1.2rem + 3.5vw, 5rem) !important;
  width: clamp(3.75rem, 2.75rem + 6vw, 11rem) !important;
  overflow: hidden !important;
}

#sidebar > div:first-child img {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: clamp(4.7rem, 3.4rem + 7.5vw, 13.75rem) !important;
  height: auto !important;
  max-width: none !important;
  transform: translate(-50%, -50%) !important;
  scale: 1 !important;
  object-fit: contain !important;
  object-position: center !important;
}

#sidebar > div:first-child p {
  line-height: 2.5rem !important;
}

#sidebar > nav {
  justify-self: center !important;
  order: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(0.0625rem, -0.15rem + 0.6vw, 0.375rem) !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

#sidebar .nav-link {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  gap: clamp(0.1875rem, 0rem + 0.5vw, 0.75rem) !important;
  padding: clamp(0.25rem, 0.1rem + 0.4vw, 0.625rem) clamp(0.25rem, 0rem + 0.7vw, 1rem) !important;
  font-size: clamp(0.5625rem, 0.45rem + 0.3vw, 0.875rem) !important;
}

#sidebar .nav-link svg {
  width: clamp(0.6875rem, 0.55rem + 0.35vw, 1.25rem) !important;
  height: clamp(0.6875rem, 0.55rem + 0.35vw, 1.25rem) !important;
}

#sidebar .nav-link::before {
  display: none !important;
}

#sidebar > div:last-child {
  justify-self: end !important;
  width: auto !important;
  display: flex !important;
  justify-content: flex-end !important;
  padding: 0 !important;
  border-top: 0 !important;
}

#sidebar #settings-btn {
  padding: clamp(0.1875rem, 0.05rem + 0.35vw, 0.625rem) clamp(0.25rem, 0.05rem + 0.5vw, 0.75rem) !important;
  gap: clamp(0.25rem, 0.05rem + 0.5vw, 0.75rem) !important;
}

#sidebar #user-avatar {
  width: clamp(1.25rem, 1rem + 0.7vw, 2rem) !important;
  height: clamp(1.25rem, 1rem + 0.7vw, 2rem) !important;
  font-size: clamp(0.5625rem, 0.45rem + 0.3vw, 0.875rem) !important;
}

#sidebar #user-name {
  font-size: clamp(0.5625rem, 0.45rem + 0.3vw, 0.875rem) !important;
  /* Kept deliberately tighter than a "natural" username width — the closer
     this column's content width tracks the logo's, the less the centered
     nav drifts when there isn't enough leftover space for the grid to
     equalize both side columns (see grid-template-columns above). Long
     names/emails ellipsis-truncate (.truncate is already on this element)
     rather than push the layout around. */
  max-width: clamp(3rem, 1rem + 4vw, 9rem) !important;
}

#sidebar #user-role {
  font-size: clamp(0.5rem, 0.42rem + 0.2vw, 0.75rem) !important;
}

#sidebar #settings-btn svg,
#sidebar #notif-btn svg {
  width: clamp(0.625rem, 0.5rem + 0.3vw, 1rem) !important;
  height: clamp(0.625rem, 0.5rem + 0.3vw, 1rem) !important;
}

#sidebar #notif-btn {
  padding: clamp(0.1875rem, 0.05rem + 0.35vw, 0.5rem) !important;
}

#settings-dropdown {
  top: calc(100% + 0.5rem) !important;
  bottom: auto !important;
  left: auto !important;
  right: 0 !important;
  min-width: 13.5rem !important;
}

#notif-dropdown {
  top: calc(100% + 0.5rem) !important;
  bottom: auto !important;
  left: auto !important;
  right: 0 !important;
}

#sidebar-overlay,
main > header.lg\:hidden {
  display: none !important;
}

main {
  margin-left: 0 !important;
  width: 100% !important;
}

/* Below this, even the smallest legible clamp() sizes for 5 full-text nav
   links + full username can't fit in one row without overlapping (measured
   empirically: overlap starts ~620px, so 700px leaves margin for translated
   labels/RTL). Rather than let it overlap, wrap, or become a sidebar, drop
   to icon-only nav + avatar-only user widget — same single-row bar, same
   icon positions, just without labels once there's truly no room for them. */
@media (max-width: 700px) {
  #sidebar .nav-link span {
    display: none !important;
  }

  #sidebar .nav-link {
    padding: clamp(0.375rem, 0.25rem + 0.6vw, 0.625rem) !important;
  }

  #sidebar #user-name,
  #sidebar #user-role {
    display: none !important;
  }

  #sidebar #settings-btn {
    padding: 0.375rem !important;
  }
}

/* ── Profile & Settings page polish ── */
.profile-page #sidebar,
.add-page #sidebar {
  z-index: 60 !important;
  background: rgb(var(--bg-card) / 0.98) !important;
}

.profile-page main,
.add-page main {
  background:
    linear-gradient(180deg, rgb(var(--bg-card) / 0.72), rgb(var(--bg-base) / 0) 18rem),
    rgb(var(--bg-base));
}

.profile-page main > header.profile-header,
.add-page main > header.add-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  background: rgb(var(--bg-card) / 0.98) !important;
  border-bottom: 1px solid rgb(var(--border));
  box-shadow: 0 10px 28px rgba(13, 31, 20, 0.08);
  min-height: 4.5rem;
}

.profile-content,
.add-content {
  padding: 2.25rem clamp(1rem, 3vw, 2rem) 3rem !important;
}

.profile-card,
.add-card {
  box-shadow: 0 14px 34px rgba(13, 31, 20, 0.08), 0 1px 2px rgba(13, 31, 20, 0.04);
}

.profile-grid {
  align-items: stretch;
}

.profile-equal-card {
  height: 100%;
  min-height: 33rem;
  display: flex;
  flex-direction: column;
}

.profile-equal-card form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.profile-equal-card form > button[type="submit"] {
  margin-top: auto;
}

.profile-detail-row {
  min-height: 5rem;
}

.profile-signout-action {
  display: flex;
  justify-content: center;
  padding: 0.25rem 0 0.5rem;
}

.add-form-grid {
  width: 100%;
}

.add-card {
  min-width: 0;
}

.add-step {
  width: 2rem;
  height: 2rem;
  border-radius: 0.75rem;
  background: rgb(var(--accent));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(19, 57, 41, 0.16);
}

.add-input {
  min-height: 3rem;
}

.add-social-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.add-social-row > span {
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgb(var(--border));
  border-radius: 0.875rem;
  background: rgb(var(--bg-card));
  color: rgb(var(--accent));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 800;
}

.add-media-card .drop-zone {
  min-height: 13rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.add-insights-card .insight-slot,
.add-insights-card .insight-thumb {
  border-radius: 0.5rem;
}

.insight-platform-card {
  display: flex;
  min-height: 10.5rem;
  flex-direction: column;
}

.insight-platform-card [id$="-preview"] {
  margin-bottom: 0.75rem;
}

.insight-platform-card .insight-upload-btn {
  margin-top: auto;
  width: 100%;
  border: 1px solid rgba(19, 57, 41, 0.16);
  border-radius: 0.75rem;
  background: rgb(var(--bg-card));
  color: rgb(var(--accent));
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.625rem 0.75rem;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
}

.insight-platform-card .insight-upload-btn:hover {
  background: rgb(var(--accent));
  border-color: rgb(var(--accent));
  color: #fff;
}

.insight-platform-card .insight-upload-btn:active {
  transform: scale(0.98);
}

.add-actions {
  justify-content: flex-end;
  padding-bottom: 0.25rem;
}

@media (max-width: 600px) {
  .profile-content,
  .add-content {
    padding: 1rem 0.875rem 2rem !important;
  }

  .profile-card,
  .add-card {
    padding: 1.25rem !important;
  }

  .profile-equal-card {
    min-height: auto;
  }

  .profile-signout-action {
    padding-top: 0;
  }

  .add-social-row {
    align-items: flex-start;
  }

  .add-social-row > span {
    margin-top: 0.25rem;
  }

  .profile-identity {
    align-items: flex-start;
    gap: 1rem;
  }

  .profile-identity #big-avatar {
    width: 4rem;
    height: 4rem;
    font-size: 1.5rem;
  }
}

/* ══════════════════════════════════════════════════════
   Language Switcher — EN | AR slider toggle
   ══════════════════════════════════════════════════════ */

.lang-switcher {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid rgb(var(--border));
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: rgb(var(--bg-elevated));
  height: 2rem;
}

.lang-btn {
  border: 0;
  background: transparent;
  color: rgb(var(--text-secondary));
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 0 10px;
  height: 100%;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  letter-spacing: 0.03em;
}

.lang-btn:hover {
  background: rgb(var(--bg-hover));
  color: rgb(var(--accent));
}

.lang-btn.lang-active {
  background: rgb(var(--accent));
  color: #ffffff;
}

/* Divider between EN and AR */
.lang-btn:first-child {
  border-right: 1px solid rgb(var(--border));
}

/* Auth page — floating language switcher */
.lang-switcher-float {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

[dir="rtl"] .lang-switcher-float {
  right: auto;
  left: 1rem;
}

/* ══════════════════════════════════════════════════════
   RTL — Arabic layout overrides
   ══════════════════════════════════════════════════════ */

/* Arabic system font fallback */
[dir="rtl"] body {
  font-family: 'CatchersFont', 'Noto Kufi Arabic', 'Noto Sans Arabic',
               'Segoe UI', 'Tahoma', 'Arial', ui-sans-serif, system-ui, sans-serif;
}

/* RTL: Toast notifications on the left */
[dir="rtl"] #toast-container {
  right: auto !important;
  left: 1.25rem !important;
}

/* RTL: Flip user widget text alignment in sidebar */
[dir="rtl"] #sidebar .text-left {
  text-align: right !important;
}

/* RTL: Flip password eye-toggle button position */
[dir="rtl"] .relative > button.absolute {
  right: auto !important;
  left: 0.75rem !important;
}

[dir="rtl"] .relative > input[type="password"] {
  padding-right: 1rem !important;
  padding-left: 3rem !important;
}

/* RTL: Sidebar search icon */
[dir="rtl"] .relative > svg.absolute {
  right: auto !important;
  left: 0.75rem !important;
}

[dir="rtl"] .relative > input[class*="pl-9"] {
  padding-left: 1rem !important;
  padding-right: 2.25rem !important;
}

/* RTL: Flip back-arrow icon on add-influencer page */
[dir="rtl"] .rtl-flip {
  transform: scaleX(-1);
}

/* RTL: nav-link active indicator on right */
[dir="rtl"] .nav-link::before {
  left: auto !important;
  right: 0 !important;
  border-radius: 2px 0 0 2px !important;
}

/* Create Proposal: influencer picker cards. These are structural rules for
   JS-rendered (innerHTML) content — kept as real classes rather than inline
   style="" attributes so the CSP style-src can stay free of 'unsafe-inline'. */
.pick-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
}

.pick-card-avatar {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  overflow: hidden;
  background-color: rgb(var(--border));
}

.pick-card-info {
  flex: 1 1 0%;
  min-width: 0;
}

.pick-card-info-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.5rem;
  row-gap: 0.25rem;
  min-width: 0;
}

.pick-card-name {
  max-width: 100%;
}

.pick-card-badge {
  flex-shrink: 0;
  padding: 0.125rem 0.375rem;
}

.pick-card-price {
  text-align: right;
  flex-shrink: 0;
}

.pick-card-check {
  margin-top: 0.25rem;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pick-card-check-icon {
  width: 0.75rem;
  height: 0.75rem;
}

.pick-card-actions {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex-shrink: 0;
}

.pick-card-action-btn {
  padding: 0.375rem 0.625rem;
}

.drag-item-avatar {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  overflow: hidden;
  background-color: rgb(var(--border));
}