/* ══════════════════════════════════════
   AlphaSniper — Premium Trading Dashboard
   Mobile-first · Arabic RTL · iPhone PWA
   ══════════════════════════════════════ */

/* ─── RESET & BASE ─── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  /* Surfaces */
  --bg:#08080c;
  --surface:#0f1014;
  --surface-2:#161a1f;
  --surface-3:#1e2228;
  --surface-glass:rgba(16,18,24,0.85);
  --border:rgba(255,255,255,0.06);
  --border-hover:rgba(255,255,255,0.12);

  /* Text */
  --text:#f0f0f5;
  --text-2:#c4c8d8;
  --text-3:#8b90a5;

  /* Accent */
  --green:#00e87b;
  --green-soft:rgba(0,232,123,0.1);
  --green-glow:rgba(0,232,123,0.25);
  --red:#ff4757;
  --red-soft:rgba(255,71,87,0.1);
  --amber:#ffb830;
  --amber-soft:rgba(255,184,48,0.1);
  --blue:#3b82f6;
  --blue-soft:rgba(59,130,246,0.1);
  --cyan:#06d6f2;

  /* Typography */
  --font:'Tajawal',sans-serif;
  --mono:'IBM Plex Mono',monospace;

  /* Spacing */
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --pad:16px;
  --radius:14px;
  --radius-sm:10px;
  --radius-xs:7px;
}

html{
  font-size:16px;
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  min-height:100dvh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  padding-top:var(--safe-top);
  padding-bottom:calc(72px + var(--safe-bottom));
}

/* ─── AMBIENT GLOW ─── */
.glow{
  position:fixed;pointer-events:none;z-index:0;
  border-radius:50%;filter:blur(100px);
}
.glow--1{
  width:300px;height:300px;top:-100px;right:-60px;
  background:rgba(0,232,123,0.06);
  animation:glowFloat 12s ease-in-out infinite;
}
.glow--2{
  width:250px;height:250px;bottom:100px;left:-80px;
  background:rgba(59,130,246,0.04);
  animation:glowFloat 15s ease-in-out infinite reverse;
}
@keyframes glowFloat{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(20px,30px) scale(1.15)}
}

/* ─── TOP BAR ─── */
.topbar{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px var(--pad);
  background:var(--surface-glass);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border);
}
.topbar__right{display:flex;align-items:center;gap:12px}
.topbar__logo{display:flex;align-items:center;gap:10px}
.topbar__icon{
  width:38px;height:38px;border-radius:10px;
  background:linear-gradient(135deg,#00e87b,#06d6f2);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-weight:700;font-size:13px;
  color:var(--bg);letter-spacing:-0.5px;
  box-shadow:0 0 20px rgba(0,232,123,0.3);
}
.topbar__title{
  font-size:1.15rem;font-weight:800;letter-spacing:-0.3px;
  background:linear-gradient(135deg,var(--text),var(--text-2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.topbar__sub{
  font-family:var(--mono);font-size:0.65rem;color:var(--text-3);
  letter-spacing:0.5px;
}
.topbar__left{display:flex;align-items:center;gap:10px}
.push-btn{
  width:36px;height:36px;border-radius:50%;
  background:var(--surface-2);border:1px solid var(--border);
  color:var(--text-2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all 0.25s;position:relative;
}
.push-btn:active{transform:scale(0.9)}
.push-btn.subscribed{color:var(--green);border-color:rgba(0,232,123,0.2);background:var(--green-soft)}
.push-btn.subscribed::after{
  content:'';position:absolute;top:2px;right:2px;
  width:8px;height:8px;border-radius:50%;
  background:var(--green);border:2px solid var(--bg);
}
.topbar__live{
  display:flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:20px;
  background:var(--surface-2);border:1px solid var(--border);
  font-size:0.7rem;color:var(--text-2);
}
.topbar__live.open{border-color:var(--green-soft);background:var(--green-soft)}
.topbar__live.open .topbar__live-text{color:var(--green)}
.topbar__live.open .pulse-dot{background:var(--green);box-shadow:0 0 8px var(--green)}

.pulse-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--text-3);
  animation:pulse 2.5s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:0.4;transform:scale(0.8)}
}

/* ─── BOT STATUS STRIP ─── */
.bots-strip{
  display:flex;gap:8px;padding:12px var(--pad);
  overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.bots-strip::-webkit-scrollbar{display:none}
.bot-chip{
  display:flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:var(--radius-sm);
  background:var(--surface);border:1px solid var(--border);
  flex-shrink:0;transition:all 0.3s;
}
.bot-chip.alive{border-color:rgba(0,232,123,0.15);background:var(--green-soft)}
.bot-chip.alive .bot-chip__dot{background:var(--green);box-shadow:0 0 6px var(--green)}
.bot-chip.dead{border-color:rgba(255,71,87,0.15);background:var(--red-soft)}
.bot-chip.dead .bot-chip__dot{background:var(--red);box-shadow:0 0 6px var(--red);animation:none}
.bot-chip__dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--text-3);flex-shrink:0;
  animation:pulse 2s ease-in-out infinite;
}
.bot-chip__name{font-size:0.78rem;font-weight:600;color:var(--text);white-space:nowrap}
.bot-chip__status{
  font-family:var(--mono);font-size:0.62rem;color:var(--text-3);
  white-space:nowrap;
}

/* ─── STAT CARDS ─── */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  padding:4px var(--pad) 12px;
}
.stat-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:14px 10px;
  text-align:center;transition:all 0.25s;
}
.stat-card--accent{
  background:var(--green-soft);
  border-color:rgba(0,232,123,0.12);
}
.stat-card--accent .stat-card__value{color:var(--green)}
.stat-card__value{
  display:block;font-family:var(--mono);
  font-size:1.6rem;font-weight:700;line-height:1;
  margin-bottom:4px;color:var(--text);
}
.stat-card__label{
  font-size:0.68rem;color:var(--text-3);font-weight:500;
}

/* ─── CALENDAR TOGGLE ─── */
.calendar-toggle-bar{
  padding:4px var(--pad) 8px;
}
.calendar-toggle-btn{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:12px 16px;border-radius:var(--radius-sm);
  background:var(--surface);border:1px solid var(--border);
  color:var(--text);font-family:var(--font);font-size:0.88rem;font-weight:600;
  cursor:pointer;transition:all 0.25s;
}
.calendar-toggle-btn:active{transform:scale(0.98);background:var(--surface-2)}
.calendar-toggle-btn svg{color:var(--green);flex-shrink:0}
.cal-chevron{
  margin-right:auto;margin-left:0;
  transition:transform 0.3s ease;
}
.cal-chevron.open{transform:rotate(180deg)}

/* ─── CALENDAR ─── */
.calendar-section{
  margin:0 var(--pad) 12px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:16px;
  overflow:hidden;
  transition:max-height 0.35s ease, opacity 0.3s ease, padding 0.35s ease, margin 0.35s ease;
  max-height:500px;opacity:1;
}
.calendar-section.collapsed{
  max-height:0;opacity:0;padding:0 16px;margin:0 var(--pad);
  border-color:transparent;
}
.calendar-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;
}
.calendar-month{
  font-size:0.95rem;font-weight:700;
}
.calendar-nav{
  width:32px;height:32px;border-radius:8px;
  background:var(--surface-2);border:1px solid var(--border);
  color:var(--text);font-size:1.2rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all 0.2s;
}
.calendar-nav:active{transform:scale(0.92);background:var(--surface-3)}
.calendar-grid{
  display:grid;grid-template-columns:repeat(7,1fr);gap:4px;
  text-align:center;
}
.cal-day-name{
  font-size:0.62rem;color:var(--text-3);font-weight:600;
  padding:4px 0;letter-spacing:0.3px;
}
.cal-day{
  aspect-ratio:1;border-radius:var(--radius-xs);
  display:flex;align-items:center;justify-content:center;
  font-size:0.78rem;font-weight:500;color:var(--text-3);
  cursor:pointer;transition:all 0.2s;position:relative;
}
.cal-day:active{transform:scale(0.9)}
.cal-day.has-data{color:var(--text);font-weight:700;background:var(--surface-2)}
.cal-day.has-data::after{
  content:'';position:absolute;bottom:3px;
  width:4px;height:4px;border-radius:50%;background:var(--green);
}
.cal-day.today{
  background:var(--green);color:var(--bg);font-weight:800;
}
.cal-day.today::after{display:none}
.cal-day.selected{
  outline:2px solid var(--green);outline-offset:-2px;
}
.cal-day.other-month{opacity:0.25}

/* ─── SECTION TABS ─── */
.section-tabs{
  display:flex;gap:6px;padding:0 var(--pad) 12px;
  overflow-x:auto;scrollbar-width:none;
}
.section-tabs::-webkit-scrollbar{display:none}
.section-tab{
  padding:8px 18px;border-radius:20px;
  font-family:var(--font);font-size:0.8rem;font-weight:600;
  background:var(--surface);border:1px solid var(--border);
  color:var(--text-3);cursor:pointer;
  white-space:nowrap;flex-shrink:0;
  transition:all 0.25s;
}
.section-tab:active{transform:scale(0.95)}
.section-tab.active{
  background:var(--text);color:var(--bg);border-color:var(--text);
}

/* ─── ALERTS FEED ─── */
.feed{
  padding:0 var(--pad);
  display:flex;flex-direction:column;gap:10px;
  min-height:200px;
}
.feed-empty{
  text-align:center;padding:48px 20px;
}
.feed-empty__icon{font-size:2.5rem;margin-bottom:12px;opacity:0.5}
.feed-empty__text{font-size:0.85rem;color:var(--text-3)}

/* ── Alert Card ── */
.alert-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:16px;
  transition:all 0.2s;
  animation:slideUp 0.4s ease-out both;
}
.alert-card:active{transform:scale(0.985);background:var(--surface-2)}

.alert-card__top{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:10px;
}
.alert-card__ticker{
  font-family:var(--mono);font-size:1.1rem;font-weight:700;
  color:var(--cyan);letter-spacing:0.5px;
}
.alert-card__type{
  font-size:0.62rem;font-weight:700;
  padding:3px 10px;border-radius:6px;
  letter-spacing:0.5px;text-transform:uppercase;
}
.alert-card__type.insider{background:var(--green-soft);color:var(--green)}
.alert-card__type.options{background:var(--amber-soft);color:var(--amber)}
.alert-card__type.news{background:var(--blue-soft);color:var(--blue)}
.alert-card__type.buy{background:var(--green-soft);color:var(--green)}
.alert-card__type.sell{background:var(--red-soft);color:var(--red)}

.alert-card__body{
  font-size:0.85rem;color:var(--text-2);
  line-height:1.7;margin-bottom:10px;
}
.alert-card__body strong{color:var(--text);font-weight:600}

.alert-card__footer{
  display:flex;align-items:center;justify-content:space-between;
}
.alert-card__time{
  font-family:var(--mono);font-size:0.65rem;color:var(--text-3);
}
.alert-card__price{
  font-family:var(--mono);font-size:0.82rem;font-weight:600;
}
.alert-card__price.up{color:var(--green)}
.alert-card__price.down{color:var(--red)}

.alert-card__value{
  font-family:var(--mono);font-size:0.78rem;font-weight:600;
  color:var(--amber);
}

@keyframes slideUp{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}

/* ─── HIGHLIGHT CARD (Top Insider) ─── */
.highlight-card{
  margin:16px var(--pad);padding:20px;
  background:linear-gradient(135deg,rgba(0,232,123,0.06),rgba(6,214,242,0.04));
  border:1px solid rgba(0,232,123,0.15);
  border-radius:var(--radius);position:relative;overflow:hidden;
}
.highlight-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--green),var(--cyan),transparent);
}
.highlight-card__badge{
  font-size:0.72rem;font-weight:700;color:var(--amber);margin-bottom:8px;
}
.highlight-card__ticker{
  font-family:var(--mono);font-size:1.5rem;font-weight:700;
  color:var(--green);margin-bottom:4px;
}
.highlight-card__details{
  display:flex;align-items:center;gap:12px;
  font-size:0.82rem;color:var(--text-2);
}
.highlight-card__value{
  font-family:var(--mono);font-weight:700;color:var(--green);
}

/* ─── BOTTOM NAV ─── */
.bottom-nav{
  position:fixed;bottom:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:space-around;
  height:calc(64px + var(--safe-bottom));
  padding-bottom:var(--safe-bottom);
  background:var(--surface-glass);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-top:1px solid var(--border);
}
.bottom-nav__item{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  background:none;border:none;color:var(--text-3);
  font-family:var(--font);font-size:0.62rem;font-weight:600;
  cursor:pointer;padding:8px 16px;
  transition:all 0.2s;
}
.bottom-nav__item:active{transform:scale(0.9)}
.bottom-nav__item.active{color:var(--green)}
.bottom-nav__item.active svg{filter:drop-shadow(0 0 6px var(--green-glow))}

/* ─── MODAL ─── */
.modal{
  position:fixed;inset:0;z-index:500;
  background:rgba(0,0,0,0.7);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:none;align-items:flex-end;justify-content:center;
  padding-bottom:var(--safe-bottom);
}
.modal.show{display:flex}
.modal__content{
  width:100%;max-width:480px;max-height:85vh;
  background:var(--surface);
  border-radius:var(--radius) var(--radius) 0 0;
  overflow-y:auto;
  animation:modalUp 0.35s ease-out;
}
@keyframes modalUp{
  from{transform:translateY(100%)}to{transform:translateY(0)}
}
.modal__header{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px;border-bottom:1px solid var(--border);
  position:sticky;top:0;background:var(--surface);z-index:1;
}
.modal__header h2{font-size:1.1rem;font-weight:700}
.modal__close{
  width:32px;height:32px;border-radius:50%;
  background:var(--surface-2);border:1px solid var(--border);
  color:var(--text-2);font-size:1rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}

/* ─── SEARCH ─── */
.search-box{padding:16px 20px}
.search-box input{
  width:100%;padding:14px 16px;
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--radius-sm);
  font-family:var(--mono);font-size:1rem;color:var(--text);
  outline:none;transition:border 0.2s;
  text-align:right;direction:ltr;
}
.search-box input:focus{border-color:var(--green)}
.search-box input::placeholder{color:var(--text-3);font-family:var(--font);font-size:0.85rem}

.search-results{padding:0 20px 20px}
.search-result{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;border-bottom:1px solid var(--border);
  cursor:pointer;
}
.search-result:active{opacity:0.6}
.search-result__ticker{font-family:var(--mono);font-weight:700;font-size:1rem}
.search-result__count{font-size:0.75rem;color:var(--text-3)}

/* ─── PRICE DISPLAY ─── */
.price-display{
  text-align:center;padding:28px 20px;
}
.price-display__value{
  display:block;font-family:var(--mono);
  font-size:2.8rem;font-weight:700;color:var(--green);
  margin-bottom:6px;
}
.price-display__label{
  font-size:0.72rem;color:var(--text-3);
}
.ticker-alerts-list{
  padding:0 20px 20px;
}
.ticker-alerts-list .alert-card{margin-bottom:8px}

/* ─── SCROLLBAR ─── */
::-webkit-scrollbar{width:0;height:0}

/* ─── UTILITY ─── */
.anim-stagger > *{animation:slideUp 0.4s ease-out both}
.anim-stagger > *:nth-child(1){animation-delay:0.05s}
.anim-stagger > *:nth-child(2){animation-delay:0.1s}
.anim-stagger > *:nth-child(3){animation-delay:0.15s}
.anim-stagger > *:nth-child(4){animation-delay:0.2s}
.anim-stagger > *:nth-child(5){animation-delay:0.25s}
.anim-stagger > *:nth-child(6){animation-delay:0.3s}
.anim-stagger > *:nth-child(7){animation-delay:0.35s}
.anim-stagger > *:nth-child(8){animation-delay:0.4s}

/* ─── TABLET + DESKTOP ─── */
@media(min-width:600px){
  body{max-width:480px;margin:0 auto;border-inline:1px solid var(--border)}
  .stats{grid-template-columns:repeat(4,1fr)}
}