/* ================================================================
   OMID INVESTMENT BANK - BASE STYLE
   File: public/assets/css/oy.base.css
   Author: Arman Mousavi
   Description:
   Core global styles, background effects, utilities and UI components
   Used across all pages (without navbar styles)
================================================================ */

/* ---------------------------------------------------------------
   🎨 ROOT VARIABLES (Theme Colors & Base Tokens)
---------------------------------------------------------------- */
:root {
  --red: #c1121f;
  --red-2: #ff3b3b;
  --bg: #0b0d12;
  --panel: #121520;
  --text: #eaedf3;
  --muted: #a7b0c0;
  --border: #232836;
  --ring: rgba(255,59,59,.34);
}

/* ---------------------------------------------------------------
   🧱 GLOBAL RESET & TYPOGRAPHY
---------------------------------------------------------------- */
html, body { height: 100%; }

body {
  font-family: 'Yekan Bakh';
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  accent-color: var(--red);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--red-2); text-decoration: none; }
a:hover { color: #ff6a6a; }

/* ---------------------------------------------------------------
   🌌 BACKGROUND FX (Grid / Blob / Noise)
   Used for aesthetic animated background layers
---------------------------------------------------------------- */
.oy-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background: radial-gradient(1200px 800px at 80% -10%, rgba(255,59,59,.06), transparent 40%);
}

/* Moving grid lines */
.oy-grid {
  position: absolute;
  inset: -2px;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 60px);
  mask: radial-gradient(circle at 50% 30%, rgba(0,0,0,.75), transparent 70%);
  animation: oyGrid 30s linear infinite;
  opacity: .06;
}
@keyframes oyGrid {
  from { transform: translateY(0); }
  to { transform: translateY(-120px); }
}

/* Glowing red blobs */
.oy-blob {
  position: absolute;
  width: 540px;
  height: 540px;
  filter: blur(60px);
  opacity: .22;
}
.oy-blob-1 {
  background: radial-gradient(closest-side, rgba(255,59,59,.6), transparent 70%);
  top: -120px;
  right: -120px;
  animation: oyDrift1 18s ease-in-out infinite;
}
.oy-blob-2 {
  background: radial-gradient(closest-side, rgba(255,59,59,.45), transparent 70%);
  bottom: -160px;
  left: -120px;
  animation: oyDrift2 22s ease-in-out infinite;
}
@keyframes oyDrift1 {
  0%,100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(-40px,30px) scale(1.08); }
}
@keyframes oyDrift2 {
  0%,100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(60px,-20px) scale(1.12); }
}

/* Subtle noise overlay */
.oy-noise {
  position: absolute;
  inset: 0;
  opacity: .03;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  animation: oyNoise 10s steps(10) infinite;
}
@keyframes oyNoise { to { transform: translate3d(0,0,0); } }

/* ---------------------------------------------------------------
   🔘 CTA BUTTONS / BADGES / DROPDOWNS
---------------------------------------------------------------- */
.oy-cta {
  background: linear-gradient(100deg, var(--red) 0%, var(--red-2) 100%);
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: .5rem .9rem;
  font-weight: 600;
  box-shadow: 0 12px 30px rgba(255,59,59,.28);
}

/* Dropdown menu base */
.dropdown-menu {
  background: linear-gradient(180deg, rgba(124, 124, 124, 0.438), rgb(0, 0, 0));
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  color: var(--text);

}
.dropdown-item { color: var(--text); }
.dropdown-item:hover {
  color: var(--text);
  background: rgba(255, 59, 59, 0.589);
}
.oy-hover:hover > .dropdown-menu { display: block; }

/* Avatar & Beta tag */
.oy-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 600;
  background: linear-gradient(135deg, rgba(255,59,59,.2), rgba(255,255,255,.06));
  border: 1px solid var(--border);
  color: #fff;
}
.oy-avatar.sm { width: 30px; height: 30px; font-size: .95rem; }

.oy-beta {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: linear-gradient(100deg, var(--red) 0%, var(--red-2) 100%);
  color: #fff;
  border-radius: 999px;
  padding: .28rem .6rem;
  font-weight: 400;
  font-size: .8rem;
  box-shadow: 0 10px 24px rgba(255,59,59,.28);
  border: 1px solid rgba(255,255,255,.12);
}

/* ---------------------------------------------------------------
   🧩 FORMS & INPUTS
---------------------------------------------------------------- */
.form-control,
.form-select,
.input-group-text {
  color: var(--text);
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--red-2);
  box-shadow: 0 0 0 .22rem var(--ring);
}

/* ---------------------------------------------------------------
   🪟 CARDS & PANELS
---------------------------------------------------------------- */
.card {
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
.border-oy { border-color: var(--border) !important; }

/* ---------------------------------------------------------------
   📊 TABLES
---------------------------------------------------------------- */
.table {
  color: var(--text);
  --bs-table-bg: transparent;
  border-color: var(--border);
}
.table thead th { border-bottom-color: var(--border); }

/* ---------------------------------------------------------------
   ⚙️ PAGE LOADER
---------------------------------------------------------------- */
#oy-loader {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(1000px 800px at 20% -10%, rgba(255,59,59,.06), transparent 45%),
    linear-gradient(135deg, rgba(11,13,18,1) 0%, rgba(18,21,32,1) 100%);
  z-index: 9999;
  transition: opacity .6s ease, visibility .6s ease;
}
#oy-loader.hidden { opacity: 0; visibility: hidden; }

.oy-loader-wrap { text-align: center; }
.oy-loader-logo {
  width: 112px;
  height: 112px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  color: var(--red);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 0 40px rgba(255,59,59,.18);
  backdrop-filter: blur(10px);
  animation: oyPulse 2.3s ease-in-out infinite;
  margin-inline: auto;
}
.oy-loader-bar {
  width: min(380px,84vw);
  height: 6px;
  background: #1e2230;
  border-radius: 999px;
  overflow: hidden;
  margin: 14px auto 8px;
}
.oy-loader-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(100deg, var(--red) 0%, var(--red-2) 100%);
  animation: oyLoad 2.6s ease-in-out infinite;
}
.oy-loader-text { color: var(--text); font-weight: 700; }

@keyframes oyLoad {
  0% { width:10%; }
  50% { width:82%; }
  100% { width:96%; }
}
@keyframes oyPulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

/* ---------------------------------------------------------------
   💬 SWEETALERT MODALS
---------------------------------------------------------------- */
.swal2-popup {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)) !important;
  color: var(--text) !important;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
.swal2-styled.swal2-confirm {
  background: linear-gradient(100deg, var(--red) 0%, var(--red-2) 100%) !important;
  box-shadow: 0 12px 30px rgba(255,59,59,.28) !important;
}
.swal2-styled.swal2-cancel {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

/* ---------------------------------------------------------------
   🦶 FOOTER
---------------------------------------------------------------- */
.oy-footer {
  background: transparent;
  border-top: 1px solid var(--border);
  color: var(--muted);
  text-align: center;
  padding: 1.5rem 0;
  margin-top: 3rem;
}
.oy-foot-link { color: var(--muted); }
.oy-foot-link:hover { color: #fff; }

/* ---------------------------------------------------------------
   🪶 UTILITIES / ACCESSIBILITY
---------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px,1px,1px,1px);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}

/* Disable animations if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .oy-blob, .oy-grid, #oy-loader .oy-loader-fill, #oy-fx {
    animation: none !important;
    transition: none !important;
  }
}