/* ==========================================================================
   reskin.css — loaded AFTER tailwind.css
   --------------------------------------------------------------------------
   Purpose: neutralise the Tailwind-default "generated template" look across
   the whole site without rewriting ~700 class usages in ~75 templates.

   Why a separate file and not a block inside input.css:
   Tailwind's PostCSS step emits its own utilities around your custom rules,
   so an override written next to them wins or loses depending on emit order.
   A stylesheet that simply loads later has no such ambiguity — same
   specificity, guaranteed last word.

   Anything here is a deliberate visual decision. When you want a genuinely
   decorative gradient or a floating blur, give the component its own class
   rather than reaching for bg-gradient-to-* again.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Radii — flatten the balloon look.
   Cards should read as panels, not stickers.
   -------------------------------------------------------------------------- */
.rounded-3xl { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 0.75rem; }
.rounded-xl { border-radius: 0.5rem; }
.rounded-lg { border-radius: 0.5rem; }

/* --------------------------------------------------------------------------
   1b. Icon frames — one geometry for every glyph tile.
   Templates wrote these by hand and drifted apart: `p-3 rounded-xl text-2xl`,
   `w-10 h-10 rounded-2xl`, `w-8 h-8 rounded-lg`, `rounded-full` and bare emoji
   with no tile at all. Same idea, five different shapes, so a row of cards
   never lined up. Normalise the tile to a fixed square with a fixed radius and
   scale the glyph inside it instead of moving the box.
   -------------------------------------------------------------------------- */
.nx-icon,
[class*="rounded-xl"][class*="bg-"][class*="text-2xl"],
[class*="rounded-xl"][class*="bg-"][class*="text-xl"],
[class*="rounded-lg"][class*="bg-"][class*="text-2xl"],
[class*="rounded-lg"][class*="bg-"][class*="text-xl"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--nx-icon-size);
  height: var(--nx-icon-size);
  padding: 0;
  border-radius: var(--nx-icon-radius);
  font-size: 1.375rem;
  line-height: 1;
}

/* Smaller heading tiles (h2/h3 leads) keep their own scale but share the radius */
.nx-icon-sm {
  width: 2.25rem;
  height: 2.25rem;
  font-size: 1.125rem;
}

/* A tile must not stretch when the parent is a flex row */
.nx-icon { align-self: center; }

/* --------------------------------------------------------------------------
   2. Gradients — the loudest tell.
   Keep the hue, drop the rainbow. Any element that relied on a gradient for
   its whole visual identity now shows its background colour instead, so give
   those sections a border or surface to keep their shape.
   -------------------------------------------------------------------------- */
.bg-gradient-to-r { background-image: none; }
.bg-gradient-to-l { background-image: none; }
.bg-gradient-to-t { background-image: none; }
.bg-gradient-to-b { background-image: none; }
.bg-gradient-to-tr { background-image: none; }
.bg-gradient-to-tl { background-image: none; }
.bg-gradient-to-br { background-image: none; }
.bg-gradient-to-bl { background-image: none; }
.bg-gradient-to-none { background-image: none; }

/* Gradient-bordered surfaces ("border-gradient") lose their glow */
.border-gradient-to-r,
.border-gradient-to-l,
.border-gradient-to-t,
.border-gradient-to-b { border-image: none; }

/* Restoring the surface that killing the gradient removed.
   In Tailwind a gradient is two things: `bg-gradient-to-*` sets
   `background-image`, and `from-*`/`to-*` only set the --tw-gradient-* stop
   variables — neither sets `background-color`. So the rule above strips the
   image and leaves 125 elements across ~40 templates with no fill at all,
   which is why icon tiles and cards read as holes rather than panels.
   Constrain the fallback to rounded surfaces (tiles, cards, badges) so a
   full-bleed hero section does not gain a flat slab of colour. */
[class*="rounded-"][class*="bg-gradient-to-"] {
  background-color: rgba(99, 102, 241, 0.14);
}
[class*="rounded-"][class*="bg-gradient-to-"][class*="rounded-full"] {
  background-color: rgba(99, 102, 241, 0.14);
}

/* --------------------------------------------------------------------------
   3. Backdrop blur — noise behind text on 135 elements.
   Kept only for genuinely floating surfaces, which opt back in by class
   (.nx-float) rather than by accident.
   -------------------------------------------------------------------------- */
.backdrop-blur-sm { backdrop-filter: none; -webkit-backdrop-filter: none; }
.backdrop-blur { backdrop-filter: none; -webkit-backdrop-filter: none; }
.backdrop-blur-md { backdrop-filter: none; -webkit-backdrop-filter: none; }
.backdrop-blur-lg { backdrop-filter: none; -webkit-backdrop-filter: none; }
.backdrop-blur-xl { backdrop-filter: none; -webkit-backdrop-filter: none; }
.backdrop-blur-2xl { backdrop-filter: none; -webkit-backdrop-filter: none; }
.backdrop-blur-3xl { backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Opt-in blur for the surfaces that must float above content */
.nx-float {
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  background: rgba(16, 18, 24, 0.82);
}

/* --------------------------------------------------------------------------
   4. Decorative blur orbs — the coloured circles behind hero sections.
   They were pure filler. Dim rather than delete, so a layout depending on
   the element keeps its spacing.
   -------------------------------------------------------------------------- */
.blur-3xl, .blur-2xl, .blur-3xl > *, .blur-2xl > * { opacity: 0.3; }

/* --------------------------------------------------------------------------
   5. Type weight — font-black on 414 elements flattened every heading,
   label and number into the same voice. Cap it at 800.
   -------------------------------------------------------------------------- */
.font-black { font-weight: 800; }

/* --------------------------------------------------------------------------
   6. Hover scale — turning lists into toys. A 1px lift is enough feedback.
   -------------------------------------------------------------------------- */
.hover\:scale-105:hover,
.hover\:scale-110:hover,
.hover\:scale-125:hover,
.hover\:scale-95:hover,
.group:hover .group-hover\:scale-105,
.group:hover .group-hover\:scale-110 {
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   7. Ambient looping animations — distraction on a data-dense dashboard.
   -------------------------------------------------------------------------- */
.animate-float,
.animate-pulse-slow,
.animate-bounce-slow,
.animate-ping,
.animate-pulse { animation: none; }

/* --------------------------------------------------------------------------
   8. Glows and heavy shadows — a 1px edge instead of a coloured halo.
   -------------------------------------------------------------------------- */
.shadow-glow { box-shadow: 0 0 0 1px rgba(91, 108, 255, 0.35); }
.shadow-2xl { box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.5); }
.shadow-xl { box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.45); }

/* --------------------------------------------------------------------------
   9. Layout integrity across viewport sizes.
   These are the rules that keep 360px phones through 2560px monitors from
   breaking, without each template remembering a breakpoint.
   -------------------------------------------------------------------------- */

/* Long unbroken strings (IDs, tokens, URLs) must not widen the page */
p, li, dd, dt, td, th, label, .table, .stat-tile, .card {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Never let a fixed-width child push a grid/flex track wider than its column */
main > *, .card, .nx-shell > * { min-width: 0; }

/* Images and embeds */
img, svg, video, canvas, iframe {
  max-width: 100%;
}
img, video { height: auto; }
iframe { display: block; border: 0; }

/* Grids: any multi-column utility collapses gracefully on a phone.
   Written as attribute-free classes so it applies regardless of breakpoint
   utilities the template happened to use. */
@media (max-width: 640px) {
  .grid-cols-2, .grid-cols-3, .grid-cols-4, .grid-cols-5, .grid-cols-6,
  .grid-cols-7, .grid-cols-8, .grid-cols-9, .grid-cols-10, .grid-cols-11, .grid-cols-12 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-cols-3, .grid-cols-4, .grid-cols-5, .grid-cols-6,
  .grid-cols-7, .grid-cols-8, .grid-cols-9, .grid-cols-10, .grid-cols-11, .grid-cols-12 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Fluid gutters for direct children of the content column */
main > * { padding-inline: var(--nx-gutter, 1rem); }
main > .fluid-full { padding-inline: 0; }

/* Very wide monitors: cap the measure so lines stay readable */
@media (min-width: 1536px) {
  main > * {
    max-width: 1440px;
    margin-inline: auto;
  }
}

/* Short landscape phones: reclaim vertical space from padding */
@media (max-height: 520px) and (orientation: landscape) {
  .nx-section { padding-block: 1rem; }
}

/* Touch: keep hit areas finger-sized, but never inflate inline text links */
@media (hover: none) {
  button, [role='button'], .btn, input[type='submit'] {
    min-height: 2.75rem;
  }
}

/* --------------------------------------------------------------------------
   10. RTL toggles.
   The switches are built with `after:left-[2px]` + `after:translate-x-full`,
   which only moves the knob to the right. In an RTL document the "on" side is
   the left one, so every enabled toggle rendered with the knob on the wrong
   side while still showing the enabled colour. Mirror the geometry instead of
   editing 33 copies of the same markup.
   -------------------------------------------------------------------------- */
html[dir="rtl"] .peer-checked\:after\:translate-x-full::after {
  --tw-translate-x: -100%;
}
html[dir="rtl"] .peer-checked\:after\:translate-x-full::after {
  transform: translateX(-100%) var(--tw-translate-y, 0);
}
html[dir="rtl"] [class*="peer"] > div[class*="after:left-[2px]"]::after {
  left: auto;
  right: 2px;
}
html[dir="rtl"] [class*="peer"] > div[class*="after:left-[2px]"]:has(.peer:checked)::after {
  left: 2px;
  right: auto;
}

/* Respect reduced-motion for the transitions this file introduces */
@media (prefers-reduced-motion: reduce) {
  .hover\:scale-105:hover,
  .hover\:scale-110:hover,
  .hover\:scale-125:hover {
    transform: none;
  }
}

/* `to-secondary` was never generated into the PREBUILT tailwind.css even
   though tailwind.config.js defines `secondary: #7c8aff` — six templates
   (base/sidebar/messages/profile/servers/games) use
   `from-primary to-secondary`, so their gradient lost its end colour and
   faded to transparent. Declared here (loaded after tailwind.css) so it
   overrides `--tw-gradient-to`'s transparent fallback from .from-primary. */
.to-secondary {
  --tw-gradient-to: #7c8aff var(--tw-gradient-to-position);
}
/* ── قواعد بقيم اعتباطية استعملها قالب ولم يرها بناء tailwind.css ──
   `tailwind.css` ملف مبني مسبقاً (غير JIT): أي أداة بقيمة اعتباطية لم تُرَ وقت
   البناء تكون كلاساً ميتاً بلا أثر. كشفها `_dbg/site_layout_test.py` في صفحة
   الأذكار، والقاعدة هنا لا في الملف المبني. */
.max-h-\[340px\] { max-height: 340px; }
.min-h-\[16px\] { min-height: 16px; }