/* ===================================================================
   THEME: DentalHub - Ultra Modern (Dark Blue Gradient)
   FIXES:
   - Sidebar collapse works (dh-sidebar-collapsed)
   - Layout stable on scroll (sidebar inside flex wrapper)
   =================================================================== */

:root{
  --dh-bg-0:#050A18;
  --dh-bg-1:#06122C;
  --dh-bg-2:#0B1F45;
  --dh-glass: rgba(255,255,255,.06);
  --dh-border: rgba(255,255,255,.10);
  --dh-text: rgba(255,255,255,.92);
  --dh-muted: rgba(255,255,255,.65);
  --dh-primary:#2F7BFF;
  --dh-primary-2:#35C6FF;
  --dh-radius: 18px;
  --dh-shadow: 0 18px 60px rgba(0,0,0,.45);
}

*{ box-sizing:border-box; }


/* === LOGO SVG MOBILE */
.dh-brand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
}

.dh-brand-svg {
  display: block;
  width: 34px;
  height: 34px;
}

#dhSidebarOffcanvasLabel {
  color: #fff;
}

#dhSidebarOffcanvasLabel:hover {
  opacity: 0.95;
}

.dh-brand-title {
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1;
  color: #ffffff;
  letter-spacing: -0.02em;
}

.dh-brand-subtitle {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.72);
  margin-top: 2px;
}
/* === LOGO SVG DESKTOP */
.dh-brand-link {
  color: #fff;
}

.dh-brand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
}

.dh-brand-svg {
  display: block;
  width: 34px;
  height: 34px;
}

.dh-brand-title {
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1;
  color: #ffffff;
  letter-spacing: -0.02em;
}


.dh-body{
  min-height:100vh;
  color: var(--dh-text);
  background:
    radial-gradient(1200px 600px at 15% 10%, rgba(47,123,255,.35), transparent 60%),
    radial-gradient(900px 500px at 85% 15%, rgba(53,198,255,.25), transparent 55%),
    linear-gradient(135deg, var(--dh-bg-0), var(--dh-bg-1) 45%, var(--dh-bg-2));
  overflow-x:hidden;
}

/* ===== News Nav Styling ===== */

.dh-nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  transition: all .18s ease;
}

.dh-nav-link .dh-nav-icon-wrapper {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  transition: all .2s ease;
}

.dh-nav-link i {
  font-size: 15px;
}

/* Hover */
.dh-nav-link:hover {
  background: rgba(255,255,255,0.06);
}

.dh-nav-link:hover .dh-nav-icon-wrapper {
  background: rgba(0,123,255,0.15);
  transform: scale(1.05);
}

/* Active state premium */
.dh-nav-link.dh-news-active {
  background: linear-gradient(135deg, rgba(0,123,255,.18), rgba(0,123,255,.08));
  border: 1px solid rgba(0,123,255,.35);
}

.dh-nav-link.dh-news-active .dh-nav-icon-wrapper {
  background: linear-gradient(135deg, #0d6efd, #4dabf7);
  color: #fff;
}

/* Badge compteur */
.dh-nav-badge {
  margin-left: auto;
  background: #0d6efd;
  color: #fff;
  font-size: 11px;
  padding: 3px 7px;
  border-radius: 999px;
  font-weight: 600;
  min-width: 22px;
  text-align: center;
}

.dh-brand-link {
  text-decoration: none !important;
  color: inherit !important;
  display: inline-block;
}

.dh-brand-link:hover,
.dh-brand-link:focus,
.dh-brand-link:active {
  text-decoration: none !important;
  color: inherit !important;
}
/* Brand link: force no blue/no underline in all states */
a.dh-brand-link,
a.dh-brand-link:visited,
a.dh-brand-link:hover,
a.dh-brand-link:focus,
a.dh-brand-link:active {
  color: inherit !important;
  text-decoration: none !important;
}

/* Force children to inherit too (si .dh-brand-title a une couleur propre) */
a.dh-brand-link .dh-brand-title,
a.dh-brand-link .dh-brand-subtitle {
  color: inherit !important;
  text-decoration: none !important;
}

/* Si le bleu vient d'un "focus ring" du thème */
a.dh-brand-link:focus {
  outline: none !important;
  box-shadow: none !important;
}
/* ============================================================
   LAYOUT FIX (IMPORTANT)
   Sidebar MUST be in the flex wrapper, not outside.
   ============================================================ */
.dh-wrapper{
  display:flex;
  min-height:100vh;
  width:100%;
}

.dh-content{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.dh-sidebar{
  width: 290px;
  flex: 0 0 290px;
  position: sticky;
  top:0;
  height:100vh;
  padding: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-right: 1px solid var(--dh-border);
  backdrop-filter: blur(12px);
  overflow: hidden;
  transition: all .18s ease;
}

.dh-sidebar-inner{
  display:flex;
  flex-direction:column;
  height:100%;
  gap:14px;
}

.dh-sidebar-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 14px;
  border: 1px solid var(--dh-border);
  border-radius: var(--dh-radius);
  background: rgba(255,255,255,.04);
}

.dh-collapse-btn{
  border: 1px solid var(--dh-border);
}

.dh-logo-dot{
  width:14px; height:14px;
  border-radius:999px;
  background: linear-gradient(135deg, var(--dh-primary), var(--dh-primary-2));
  box-shadow: 0 0 0 6px rgba(47,123,255,.12);
}

.dh-brand-title{
  font-weight:800;
  letter-spacing:.2px;
}
.dh-brand-subtitle{
  font-size:.82rem;
  color: var(--dh-muted);
}

.dh-nav{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding: 6px;
}

.dh-nav-section{
  margin: 14px 10px 6px;
  font-size:.78rem;
  letter-spacing:.10em;
  text-transform:uppercase;
  color: rgba(255,255,255,.55);
}

.dh-nav-link{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
  color: var(--dh-text);
  text-decoration:none;
  border: 1px solid transparent;
  background: transparent;
  transition: all .18s ease;
}

.dh-nav-link i{
  width:22px;
  text-align:center;
  opacity:.95;
}

.dh-nav-link:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
  transform: translateY(-1px);
}

.dh-nav-link.active{
  background: linear-gradient(135deg, rgba(47,123,255,.20), rgba(53,198,255,.10));
  border-color: rgba(47,123,255,.35);
}

.dh-pill{
  margin-left:auto;
  padding: 3px 8px;
  font-size:.72rem;
  border-radius:999px;
  border:1px solid rgba(53,198,255,.35);
  background: rgba(53,198,255,.10);
}

.dh-sidebar-footer{
  padding: 6px;
}

.dh-upgrade{
  padding: 14px;
  border-radius: var(--dh-radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
}
.dh-upgrade-title{
  font-weight: 800;
  margin-bottom: 4px;
}

/* ============================================================
   SIDEBAR COLLAPSED MODE (FIX: arrow now works)
   ============================================================ */
.dh-sidebar.dh-sidebar-collapsed{
  width: 92px;
  flex: 0 0 92px;
  padding: 18px 12px;
}

.dh-sidebar.dh-sidebar-collapsed .dh-brand-subtitle,
.dh-sidebar.dh-sidebar-collapsed .dh-nav-section,
.dh-sidebar.dh-sidebar-collapsed .dh-upgrade,
.dh-sidebar.dh-sidebar-collapsed .dh-nav-link span,
.dh-sidebar.dh-sidebar-collapsed .dh-pill{
  display:none !important;
}

.dh-sidebar.dh-sidebar-collapsed .dh-nav-link{
  justify-content:center;
  padding: 12px;
}

.dh-sidebar.dh-sidebar-collapsed .dh-nav-link i{
  margin:0;
  width:auto;
}

/* ============================================================
   OFFCANVAS (mobile)
   ============================================================ */
.dh-offcanvas{
  background: linear-gradient(135deg, var(--dh-bg-0), var(--dh-bg-1));
  color: var(--dh-text);
}
.dh-offcanvas .offcanvas-header{
  border-bottom: 1px solid var(--dh-border);
}

/* ============================================================
   TOPBAR
   ============================================================ */
.dh-topbar{
  position: sticky;
  top:0;
  z-index: 100;
  width:100%;
  border-bottom: 1px solid var(--dh-border);
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(12px);
}

.dh-topbar-inner{
  display:flex;
  align-items:center;
  gap:14px;
  padding: 12px 14px;
}

.dh-icon-btn{
  color: var(--dh-text);
  border: 1px solid var(--dh-border);
  background: rgba(255,255,255,.04);
  border-radius: 14px;
  padding: 8px 12px;
}
.dh-icon-btn:hover{
  background: rgba(255,255,255,.08);
}

.dh-profile-btn{
  display:flex;
  align-items:center;
  gap:10px;
  color: var(--dh-text);
  border: 1px solid var(--dh-border);
  background: rgba(255,255,255,.04);
  border-radius: 14px;
  padding: 8px 10px;
}
.dh-profile-btn:hover{ background: rgba(255,255,255,.08); }

.dh-avatar{
  width:30px; height:30px;
  border-radius:12px;
  display:grid; place-items:center;
  font-weight:800;
  background: linear-gradient(135deg, rgba(47,123,255,.85), rgba(53,198,255,.65));
}

.dh-badge-dot{
  position:absolute;
  top: 6px;
  right: 6px;
  width:9px; height:9px;
  background: #ff3b3b;
  border-radius:999px;
  border:2px solid rgba(8,16,36,.9);
}

/* SEARCH */
.dh-search{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 8px 12px;
  border-radius: 14px;
  border: 1px solid var(--dh-border);
  background: rgba(255,255,255,.04);
  min-width: 360px;
}
.dh-search i{ color: rgba(255,255,255,.75); }
.dh-search .form-control{
  background: transparent;
  border: none;
  color: var(--dh-text);
  padding: 0;
}
.dh-search .form-control:focus{
  box-shadow:none;
}
.dh-kbd{
  margin-left:auto;
  font-size:.72rem;
  color: rgba(255,255,255,.70);
  padding: 2px 8px;
  border-radius: 10px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.18);
}
/* SEARCH PLACEHOLDER (DentalHub fix) */
.dh-search .form-control::placeholder{
  color: rgba(255,255,255,.65); /* gris clair lisible */
  opacity: 1;
}

.dh-search .form-control::-webkit-input-placeholder{
  color: rgba(255,255,255,.65);
  opacity: 1;
}

.dh-search .form-control:-ms-input-placeholder{
  color: rgba(255,255,255,.65);
}

.dh-search .form-control::-ms-input-placeholder{
  color: rgba(255,255,255,.65);
}
/* ============================================================
   MAIN
   ============================================================ */
.dh-main{
  flex:1;
  min-width:0;
}

.dh-hero{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding: 18px;
  border-radius: var(--dh-radius);
  border: 1px solid var(--dh-border);
  background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  box-shadow: var(--dh-shadow);
}

.dh-h1{
  font-size: 1.45rem;
  font-weight: 900;
  margin:0 0 6px 0;
}
.dh-h2{
  font-size: 1.1rem;
  font-weight: 800;
}
.dh-muted{ color: var(--dh-muted); }

.dh-btn{
  border-radius: 14px;
  padding: 10px 14px;
  font-weight: 700;
}
.btn-primary{
  background: linear-gradient(135deg, var(--dh-primary), var(--dh-primary-2));
  border: none;
}
.btn-primary:hover{ filter: brightness(1.05); }

.dh-btn-soft{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18) !important;
}

/* CARDS */
.dh-card{
  display:flex;
  gap:14px;
  align-items:center;
  padding: 16px;
  border-radius: var(--dh-radius);
  border: 1px solid var(--dh-border);
  background: rgba(255,255,255,.04);
  box-shadow: 0 10px 35px rgba(0,0,0,.25);
}

.dh-card-icon{
  width:44px; height:44px;
  border-radius: 16px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(47,123,255,.22), rgba(53,198,255,.10));
  border:1px solid rgba(47,123,255,.30);
}

.dh-card-title{ font-weight: 700; color: rgba(255,255,255,.82); }
.dh-card-value{ font-size: 1.45rem; font-weight: 900; line-height: 1.1; }
.dh-card-sub{ font-size:.86rem; color: var(--dh-muted); }

.dh-panel{
  padding: 18px;
  border-radius: var(--dh-radius);
  border: 1px solid var(--dh-border);
  background: rgba(255,255,255,.04);
  box-shadow: var(--dh-shadow);
}

.dh-hr{
  border-color: rgba(255,255,255,.12);
  opacity:1;
  margin: 16px 0;
}

/* DROPDOWN */
.dh-dropdown{
  background: linear-gradient(135deg, rgba(8,16,36,.98), rgba(8,16,36,.92));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  overflow:hidden;
}
.dh-dropdown .dropdown-item{
  color: rgba(255,255,255,.85);
  padding: 10px 12px;
}
.dh-dropdown .dropdown-item:hover{
  background: rgba(255,255,255,.06);
  color: #fff;
}

/* FOOTER */
.dh-footer{
  border-top: 1px solid var(--dh-border);
  background: rgba(255,255,255,.03);
}
.dh-footer-link{
  color: rgba(255,255,255,.70);
  text-decoration:none;
}
.dh-footer-link:hover{ color:#fff; }

/* RESPONSIVE */
@media (max-width: 575.98px){
  .dh-hero{ flex-direction:column; }
  .dh-search{ min-width: 100%; }
}
/* ============================================================
   HOVER EXPAND (when collapsed)
   - If sidebar is collapsed, hovering temporarily expands it.
   - Arrow can be clicked to keep it expanded.
   ============================================================ */

@media (min-width: 992px){
  /* Expanded temporarily on hover */
  .dh-sidebar.dh-sidebar-collapsed.dh-hover-open{
    width: 290px;
    flex: 0 0 290px;
    padding: 18px;
  }

  /* Re-show texts when hover-open */
  .dh-sidebar.dh-sidebar-collapsed.dh-hover-open .dh-brand-subtitle,
  .dh-sidebar.dh-sidebar-collapsed.dh-hover-open .dh-nav-section,
  .dh-sidebar.dh-sidebar-collapsed.dh-hover-open .dh-upgrade,
  .dh-sidebar.dh-sidebar-collapsed.dh-hover-open .dh-nav-link span,
  .dh-sidebar.dh-sidebar-collapsed.dh-hover-open .dh-pill{
    display: initial !important;
  }

  /* Restore normal nav alignment when hover-open */
  .dh-sidebar.dh-sidebar-collapsed.dh-hover-open .dh-nav-link{
    justify-content:flex-start;
    padding: 10px 12px;
  }

  .dh-sidebar.dh-sidebar-collapsed.dh-hover-open .dh-nav-link i{
    width:22px;
    text-align:center;
  }
}

/* Account - Hero avatar */
.dh-hero-avatar{
  width:64px;
  height:64px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.05);
  box-shadow: 0 10px 25px rgba(0,0,0,.28);
  display:grid;
  place-items:center;
}

.dh-hero-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.dh-hero-initials{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  font-weight:900;
  letter-spacing:.5px;
  color:#fff;
  background: linear-gradient(135deg, rgba(47,123,255,.85), rgba(53,198,255,.65));
}
.dh-avatar{
  overflow: hidden;
}
/* Header - Avatar (small) */
.dh-avatar{
  width:34px;
  height:34px;
  border-radius:12px;
  overflow:hidden;
  display:grid;
  place-items:center;
  flex-shrink:0;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
}

.dh-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.dh-avatar .dh-avatar-initials{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  font-weight:900;
  letter-spacing:.5px;
  color:#fff;
  background: linear-gradient(135deg, rgba(47,123,255,.85), rgba(53,198,255,.65));
}