/* ============================
   StageTN Dark Orange Theme
   ============================ */

:root {
  --app-bg: #121212;
  --app-fg: #f8f9fa;
  --muted: #adb5bd;
  --divider: #2b2b2b;
  --brand: #ff6600;       /* Orange principal */
  --brand-hover: #ff7b1a; /* Hover plus clair */
}

.color{
  color: #ff7b1a;
}
.btn-color{
  color: #ff7b1a;
  border-color: #ff7b1a;
}
.btn-color:hover{
  color: #ffffff;
  border-color: #ffffff;
  background-color: #000;
}
/* Layout général */
html, body {
  background: var(--app-bg);
  color: var(--app-fg);
  font-family: 'Inter', system-ui, sans-serif;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--app-bg);
  border-bottom: 1px solid var(--divider);
}

.app-header .brand {
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--brand);
}

main {
  padding-top: 0.75rem;
  padding-bottom: 4rem;
}

/* ================= Stories ================= */

/* تعطيل الـscroll الأفقي الغريب + شكل الشريط */
.story-scroller {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  padding: 8px; /* 0.5rem */
  -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--divider);
}
.story-scroller::-webkit-scrollbar { display: none; }

/* الحاوية الأساسية لكل story (دائرة مع border برتقالي) */
.story {
  width: 64px;
  height: 64px;
  border: 3px solid #ff7b1a;   /* كان gradient: عوّضناه بحدود */
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  background: #000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
}
.story:hover { transform: scale(1.05); }

/* الصور والفيديوهات داخل الستوري */
.story img,
.story video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  display: block;
  background: #000;
}

/* اسم الستوري تحت الصورة */
.story small,
.text-center small {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.75rem;
  color: #aaa;
}

/* Feed (posts) */
.feed-card {
  border: 1px solid var(--divider);
  border-radius: 16px;
  overflow: hidden;
  background: #1c1c1c;
  transition: box-shadow 0.3s;
}
.feed-card:hover { box-shadow: 0 0 12px rgba(255, 102, 0, 0.25); }
.feed-header { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: #333; }
.feed-img { width: 100%; aspect-ratio: 1/1; object-fit: cover; background: #2b2b2b; }
.feed-actions { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.75rem; }
.btn-icon { border: none; background: transparent; color: var(--app-fg); font-size: 1.35rem; transition: color 0.25s; }
.btn-icon:hover { color: var(--brand-hover); }

/* Navigation bas */
.tabbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 3.5rem;
  border-top: 1px solid var(--divider);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--app-bg);
  z-index: 1000;
}
.tab-btn {
  text-align: center;
  color: var(--muted);
  font-size: 1.3rem;
  padding-top: 0.4rem;
  transition: color 0.3s;
}
.tab-btn.active, .tab-btn:hover { color: var(--brand); }

/* Story Viewer Overlay */
.story-viewer {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 2000;
  display: none;
}
.story-viewer.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sv-img {
  max-width: 92vw;
  max-height: 78vh;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  background: #000;
}

.sv-ui {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  z-index: 2;
  pointer-events: none;
}
.sv-top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  position:relative; 
  z-index:3; 
  pointer-events:auto; 
  justify-content: space-between; /* العنوان على اليسار + مجموعة الأزرار على اليمين */
}

#svSound,#svClose{ pointer-events:auto; }
/* خَلّي الكونتينر متاع الأزرار هو اللي يدزّ لليمين */
.sv-top > .d-flex { 
  margin-left: auto; 
}

.sv-user { color: #fff; font-weight: 600; }
.sv-close {
  margin-left: auto;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 1.5rem;
  pointer-events: auto;
  transition: color 0.3s;
  margin-left: 0; 
}
.sv-close:hover { color: var(--brand); }
.sv-progress {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.2);
}
.sv-bar { height: 100%; width: 0; background: var(--brand); transition: width linear; }
.sv-hit { position: absolute; top: 0; bottom: 0; width: 40%; z-index: 1; }
.sv-prev { left: 0; } .sv-next { right: 0; }

/* Media Queries */
@media (min-width: 576px) {
  .feed-wrap { max-width: 540px; margin-inline: auto; }
}
@media (min-width: 768px) {
  .feed-wrap { max-width: 640px; }
}

/* === Tabbar improvements === */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; height: 3.5rem;
  border-top: 1px solid var(--divider);
  display: grid; grid-template-columns: repeat(5,1fr);
  background: var(--app-bg); z-index: 1000;
}
.tabbar .tab-btn {
  position: relative;
  text-align: center;
  color: var(--muted);
  font-size: 1.35rem;
  padding-top: .35rem;
  transition: color .25s ease, transform .15s ease;
  text-decoration: none;
}
.tabbar .tab-btn:hover { color: var(--brand-hover); }
.tabbar .tab-btn:active { transform: translateY(1px); }

/* Active orange + tiny indicator */
.tabbar .tab-btn.active { color: var(--brand); }
.tabbar .tab-btn.active::before {
  content: "";
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 18px; height: 3px; border-radius: 2px;
  background: var(--brand);
}

/***********************************/
.offre-tools input::placeholder { color: #bbb; }
.offre-tools input:focus, .offre-tools select:focus {
  border-color: var(--brand);
  box-shadow: none;
}

/* ===== Liste des Rapports ===== */
.rapport-card {
  background: #1c1c1c;
  border: 1px solid var(--divider);
  transition: transform 0.2s ease, box-shadow 0.3s;
}
.rapport-card:hover { transform: translateY(-3px); box-shadow: 0 0 12px rgba(255, 102, 0, 0.25); }
.rapport-thumb { width: 60px; height: 60px; border-radius: 12px; object-fit: cover; }

/* ===== Filtres Rapports ===== */
.rapport-filter select {
  min-width: 140px;
  background-color: #1a1a1a !important;
  color: #fff !important;
  border-color: var(--divider) !important;
}
.rapport-filter select:focus { border-color: var(--brand); box-shadow: none; }
#resetFilters { border-color: var(--brand); color: var(--brand); }
#resetFilters:hover { background-color: var(--brand); color: #000; }

/* ===== Rapport Detail ===== */
.rapport-detail { background: #1c1c1c; border: 1px solid var(--divider); }
.rapport-detail h6 { color: var(--brand); font-weight: 600; }
.rapport-suggestions .rapport-card {
  background: #1c1c1c;
  border: 1px solid var(--divider);
  transition: transform 0.2s ease, box-shadow 0.3s;
}
.rapport-suggestions .rapport-card:hover { transform: translateY(-3px); box-shadow: 0 0 12px rgba(255, 102, 0, 0.25); }

/* ===== Offre detail style Insta ===== */
.offre-header { background: #1a1a1a; border-bottom: 1px solid var(--divider); }
.offre-img img { display: block; width: 100%; height: auto; object-fit: cover; background: #000; }
.offre-body { background: #1c1c1c; border-top: 1px solid var(--divider); }
.offre-body ul li::marker { color: var(--brand); }
.offre-body button.btn-warning {
  font-weight: 600;
  border-radius: 12px;
  transition: all 0.2s ease;
}
.offre-body button.btn-warning:hover { background-color: var(--brand-hover); transform: translateY(-2px); }

/* ===== Messaging (message) ===== */
.messenger{
  display:grid;
  grid-template-columns: 320px 1fr;
  min-height: calc(100dvh - 3.5rem - 56px); /* footer + header */
  background: var(--app-bg);
}
.chat-list{background:#151515;}
.chat-list .list-group-item{ background:transparent; color:var(--app-fg); border-color:var(--divider); }
.chat-list .list-group-item.active{ background: rgba(255,102,0,0.12); border-color: var(--brand); color: var(--app-fg); }
.thread-header{ display:flex; align-items:center; gap:.5rem; padding:.5rem .75rem; background:#121212; }
.thread-meta{display:flex; align-items:center;}
.messages{
  height: calc(100% - 56px - 64px); /* minus header+composer */
  overflow-y:auto; padding: .75rem;
  background: #111;
  scroll-behavior: smooth;
}
.msg{
  max-width: 78%; margin:.25rem 0; padding:.5rem .75rem; border-radius:14px;
  line-height:1.35; font-size:.95rem;
}
.msg.you{ background:#1e1e1e; color:#eee; border:1px solid #2a2a2a; }
.msg.me{
  background: linear-gradient(135deg,#ff7b1a,#ff6600);
  color:#111; margin-left:auto;
}
.msg small{ display:block; opacity:.7; font-size:.75rem; margin-top:.25rem; }
.composer{ display:flex; align-items:center; padding:.5rem .75rem; background:#141414; }
#msgInput{ background:#1a1a1a; color:#fff; border-color:#2b2b2b; }
#msgInput:focus{ border-color: var(--brand); box-shadow:none; }

@media (max-width: 991.98px){
  .messenger{ grid-template-columns: 1fr; }
  .chat-list{ display:block; }
  .chat-thread.hide{ display:none; }
}

/******sweet alert**********/
.swal2-popup { border-radius: 14px !important; }
.swal2-title { color: var(--brand); }

/* === À propos === */
.rapport-card ul li::marker { color: var(--brand); }
.rapport-card img.rounded-circle { border: 2px solid var(--brand); padding: 2px; }

/* === Catalogue grid === */
.catalog-card{
  background:#1c1c1c;
  border:1px solid var(--divider);
  transition:transform .15s ease, box-shadow .25s ease;
}
.catalog-card:hover{ transform:translateY(-3px); box-shadow:0 0 12px rgba(255,102,0,.25); }
.catalog-cover{ background:#0f0f0f; border:1px dashed rgba(255,255,255,.08); height:130px; }
.catalog-card h6{ color:#eee; }

/*Footer fix*/
:root { --footer-h: 3.5rem; /* même hauteur que le footer */ }
.footer-space { height: calc(var(--footer-h) + 0.8rem); }

/* === Text color fix for Dark Mode === */
body, p, small, span, li { color: #ddd !important; }
.text-muted { color: #aaa !important; }
.rapport-card p, .catalog-card p, .card-body p { color: #ddd !important; }
a, button { color: #ffb570; }
h1,h2,h3,h4,h5,h6 { color: #fff; }

/* Transitions / fade */
body, p, li, small, span, a, h1, h2, h3, h4, h5, h6 { transition: color .2s ease, background-color .2s ease, opacity .4s ease; }
.fade-in { opacity: 0; transform: translateY(8px); animation: fadeInUp .5s ease forwards; }
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }
.fade-scroll { opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease; }
.fade-scroll.visible { opacity: 1; transform: translateY(0); }

/* stretched links helpers */
.feed-card.position-relative .stretched-link,
.rapport-card.position-relative .stretched-link{
  position:absolute; inset:0; z-index:5; text-decoration:none; color:inherit;
}

#nbOffre{ font-size: x-small; }
#nbRapport{ font-size: x-small; }

.new-dot {
  display: inline-block;
  width: 8px; height: 8px; margin-left: 6px;
  background-color: #ff3b3b; border-radius: 50%;
  vertical-align: middle; box-shadow: 0 0 4px #ff3b3b;
}

/* 🔧 Barre de filtres responsive */
.filters-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  overflow-x: hidden;
}
.filters-bar select {
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 180px;
}
@media (max-width: 768px) {
  .filters-bar select, .filters-bar input {
    flex: 1 1 100%;
    min-width: 100%;
  }
}
.filters-bar select option { text-overflow: ellipsis; overflow: hidden; }
@media (max-width: 576px) {
  .filters-bar .d-flex { width: 100%; }
  #resetFilter { padding: 0.35rem 0.55rem; }
}

/* للـviewer: دعم video */
.sv-img, .sv-video { width:100%; height:100%; object-fit:cover; display:none; }
.story-viewer.active .sv-img, .story-viewer.active .sv-video { display:block; }
.sv-btn {
  background: transparent; border: 1px solid #ff7b1a; color: #ff7b1a;
  border-radius: 8px; padding: 2px 8px; line-height: 1;
}
.sv-btn:hover { background:#ff7b1a22; }

/* --- Fix: no X scroll + reset next to select without overflow --- */
html, body { max-width: 100%; overflow-x: hidden; }

.filters-bar { width: 100%; overflow: hidden; } /* ما يخرش شي على اليمين */
.filters-bar > .position-relative { min-width: 0; } /* input container ينكمش */

.inline-actions{
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;           /* خلي البلوك ياخذ عرضو بصح */
  min-width: 0;          /* يسمح بالإنكماش */
}

.inline-actions select{
  flex: 1 1 auto;        /* يتوسّع/ينكمش حسب المكان */
  min-width: 0;          /* مهم لتكسير الـoverflow */
  width: 100%;
  max-width: 100%;
}

#resetFilter{
  flex: 0 0 auto;        /* حجم ثابت ما يزاحمش select */
  padding: .35rem .55rem;
  border-color: var(--brand-hover);
  color: var(--brand-hover);
}
#resetFilter:hover{
  background: var(--brand-hover);
  color: #111;
}

/* Mobile: خليهم يبقاو جنب بعض قد ما ينجم */
@media (max-width: 576px){
  .inline-actions{ width: 100%; }
  .inline-actions select{ min-width: 0; }
}

/* Loader offres - small tweaks */
#offersLoader { transition: opacity .25s ease; }
#offersLoader.hidden { opacity: 0; height: 0; padding: 0; margin: 0; overflow: hidden; pointer-events: none; }
.offers-error {
  background: rgba(255, 123, 26, 0.06);
  border: 1px solid rgba(255,123,26,0.12);
  color: #ffd9b3;
  padding: .75rem;
  border-radius: 10px;
  font-size: .95rem;
}
.offers-skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  height: 72px;
  border-radius: 10px;
  margin-bottom: .5rem;
}