/* =======================================================================
   HOTFIX (Desktop + Mobile)
   Purpose:
   - Stable responsive shell (sidebar/topbar)
   - Bell modal layering (always on top)
   - Kill green/blue flash messages → use Bell only
   - No duplicated/conflicting rules
   Last updated: 2025-11-08
   ======================================================================= */

/* =========================
   0) TOKENS
   ========================= */
:root{
  --navbar-h: 56px;              /* mobile header height */
  --sidebar-w: 260px;            /* desktop sidebar width */
  --sidebar-w-mobile: 260px;     /* mobile sidebar width */
  --accent: var(--color-primary, #6366f1);

  /* Bell stacking (keep consistent) */
  --z-bell-modal: 1200;
  --z-bell-backdrop: 1198;
  --z-bell-button: 1210;
}

/* Containers should not cap width */
.container,
.container-fluid,
.container-lg,
.container-xl,
.container-xxl{
  max-width: 100% !important;
}

/* =========================
   1) MOBILE LAYOUT (<= 767.98)
   ========================= */
#navBackdrop[hidden]{ display:none !important; }
#navBackdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  z-index:1025;
}

/* Base sidebar width (desktop, overridden later) */
.sidebar{ width: var(--sidebar-w); }

@media (max-width: 767.98px){
  #navBackdrop{ display:block; }

  /* Mobile: sidebar as normal block (dropdown),
     exact visual handled in theme.css (#sidebarNav)  */
  .sidebar{
    width:100%;
    border-right:none;
    background:transparent;
    box-shadow:none;
    padding-left:0;
    padding-right:0;
  }

  /* content clearance for fixed top navbar
     body.has-fixed-navbar already gives padding-top:56px
     → yaha extra margin nahi, warna blank space aata hai */
  .app-body.has-fixed-navbar .main-wrap{
    margin-top:0 !important;
  }
}

/* =========================
   2) DESKTOP LAYOUT (>= 768px)
   ========================= */
@media (min-width: 768px){
  /* Hide mobile topbar */
  #mainNavbar.topbar { display: none !important; }
  #navBackdrop{ display:none !important; }

  /* Flex wrapper should stretch children */
  .d-flex.flex-md-row.min-vh-100{ align-items:stretch; }

  /* Pinned sidebar */
  #sidebarNav{
    position: sticky !important;
    top: 0 !important;
    height: 100vh !important;
    transform: none !important;
    flex: 0 0 var(--sidebar-w) !important;
    width: var(--sidebar-w) !important;
    min-width: var(--sidebar-w) !important;
    max-width: var(--sidebar-w) !important;
    margin-top: 0 !important;
    padding-top: 25px !important;
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86)) !important;
    backdrop-filter: blur(10px);
    border-right: 1px solid color-mix(
      in srgb,
      var(--color-border, #e5e7eb) 80%,
      var(--color-text, #1f2937)
    );
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.75),
      0 14px 28px rgba(0,0,0,.08);
    border-radius: 0 16px 16px 0;
  }

  .main-wrap{
    min-width:0 !important;
    flex:1 1 auto !important;
    width:auto !important;
    max-width:100% !important;
    padding:0 !important;
    margin-top:0 !important;
    display:flow-root;
  }

  /* Safety: kill first-child top margin in content */
  .main-wrap > *:first-child{ margin-top:0 !important; }
}

/* =========================
   3) SIDEBAR NAV POLISH
   ========================= */
#sidebarNav .text-center{
  padding-top:6px;
  padding-bottom:10px;
}
#sidebarNav .text-center img,
#sidebarNav .text-center .avatar{
  outline: 3px solid color-mix(in srgb, var(--accent) 28%, transparent);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  transition: transform .18s ease, box-shadow .18s ease;
}
#sidebarNav .text-center img:hover,
#sidebarNav .text-center .avatar:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

#sidebarNav .nav{
  display:flex;
  flex-direction:column;
  gap:.25rem;
}
#sidebarNav .nav-link{
  position: relative;
  display:flex;
  align-items:center;
  padding:.45rem .6rem;
  font-size:.95rem;
  line-height:1.25rem;
  border-radius:12px;
  text-decoration:none;
  font-weight:700;
  letter-spacing:.01em;
  transition:
    transform .14s ease,
    background .14s ease,
    color .14s ease,
    box-shadow .14s ease;
}
#sidebarNav .nav-link i{
  font-size:1rem;
  width:1.25rem;
  margin-right:.4rem;
  transition: transform .12s ease, opacity .12s ease;
  opacity:.9;
}
#sidebarNav .nav-link:hover{
  background: color-mix(in srgb, var(--accent) 12%, #fff);
  transform: translateX(2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
#sidebarNav .nav-link:hover i{
  transform: translateX(1px) scale(1.03);
  opacity:1;
}
#sidebarNav .nav-link::after{
  content:"";
  position:absolute;
  left:8px;
  top:8px;
  bottom:8px;
  width:4px;
  border-radius:4px;
  background: color-mix(in srgb, var(--accent) 65%, transparent);
  transform: scaleY(.4);
  opacity:0;
  transition: transform .18s ease, opacity .18s ease;
}
#sidebarNav .nav-link:hover::after{
  opacity:1;
  transform: scaleY(1);
}
#sidebarNav .nav-link.active,
#sidebarNav .nav-link[aria-current="page"]{
  background: color-mix(in srgb, var(--accent) 16%, #fff);
  color: color-mix(
    in srgb,
    var(--color-text, #1f2937) 88%,
    var(--accent)
  );
  font-weight:800;
  box-shadow: inset 0 0 0 1px color-mix(
    in srgb,
    var(--accent) 25%,
    transparent
  );
}
#sidebarNav .nav-link.active::after,
#sidebarNav .nav-link[aria-current="page"]::after{
  opacity:1;
  transform: scaleY(1);
}

/* Bell button z-order */
.nav-bell{
  position: relative;
  z-index: var(--z-bell-button);
}

/* Optional fixed bell dropdown if you ever use it from sidebar */
@media (min-width: 768px){
  .sidebar-bell .bell-dropdown{
    position: fixed;
    top: 10px;
    left: var(--sidebar-w);
    width: 360px;
    max-width: calc(100vw - 16px);
    max-height: 420px;
  }
}

/* =========================
   4) DEALS LAYOUT HELPERS
   ========================= */
.dealcards{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(3, minmax(0,1fr));
  align-items:stretch;
}
@media (max-width: 1100px){
  .dealcards{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .dealcards{ grid-template-columns:1fr; }
}

.kv{
  display:grid;
  grid-template-columns:minmax(120px, 28%) 1fr;
  gap:.5rem .75rem;
}
@media (max-width: 992px){
  .kv{ grid-template-columns:minmax(100px, 34%) 1fr; }
}

.dealspage{ padding-left:0; padding-right:0; }

/* =========================
   5) BELL MODAL (ALWAYS ON TOP)
   ========================= */
.bell-modal,
#bellModal{
  z-index: var(--z-bell-modal) !important; /* top-most */
}
.modal-backdrop.show,
.custom-bell-backdrop{
  z-index: var(--z-bell-backdrop) !important; /* just beneath */
}

/* Compact placement / height */
@media (min-width: 768px){
  #bellModal .modal-dialog{
    max-width: 520px;
    margin: 80px auto 16px;
  }
}
#bellModal .modal-body{
  max-height: 65vh;
  overflow-y: auto;
}

/* While bell modal is open, background should not steal clicks */
.modal-open #navBackdrop,
.modal-open .topbar,
.modal-open #sidebarNav,
.modal-open .sidebar,
.modal-open .main-wrap,
.modal-open .sbox-k,
.modal-open .dealspage{
  pointer-events: none !important;
  z-index: 0 !important;
}
/* Modal stays interactive */
.modal-open .modal,
.modal-open .modal *{
  pointer-events: auto !important;
}

/* Small UI bits inside Bell */
#bellModal .bm-mark{ font-size:12px; line-height:1; }
#bellModal .vstack [data-id]{
  transition: opacity .25s ease, transform .25s ease;
}
#bellModal .vstack [data-id].fading{
  opacity:0;
  transform:translateY(-4px);
}

/* =========================
   6) GLOBAL MESSAGES → Bell only
   =========================
   - Hide green/blue banners from Django messages framework
   - Keep red (errors) visible so form errors still show
   */
.alert-success,
.alert-info { display:none !important; }
/* Optional: mute warnings too
.alert-warning { display:none !important; }
*/
.alert-danger { display:block; }

.site-messages,
.messages,
#messages{
  margin:0 !important;
  padding:0 !important;
  height:0 !important;
  overflow:hidden !important;
}

/* Prevent layout jump when messages would have added spacing */
body.has-messages-padding { padding-top:0 !important; }
/* Bell must always be on top and clickable */
.nav-bell { position: relative; z-index: 1210; }
.bell-btn  { pointer-events: auto; cursor: pointer; }

/* Hide green/blue banners so notifications only in bell */
.alert-success, .alert-info { display: none !important; }
/* === Bell absolute top priority === */
.nav-bell { position: relative; z-index: 2147483000 !important; }
#bellMenu  { z-index: 2147483001 !important; }
.bell-btn  { pointer-events: auto !important; cursor: pointer !important; }

/* कोई overlay क्लिक न खा सके */
#navBackdrop { pointer-events: auto; }
.modal-backdrop.show { pointer-events: auto; }

/* अगर किसी ने navbar/topbar पर गलती से pointer-events:none लगा दिया हो */
#mainNavbar, .topbar { pointer-events: auto !important; }