/* ============================================================
   OVERLAY COMMON — shared styles for all module overlays
   ============================================================ */
.module-overlay{
  position:fixed;
  inset:48px 0 0 var(--sb-w, 60px);
  background:var(--bg, #f7f4ef);
  z-index:300;
  display:none;
  flex-direction:column;
  transition:left .22s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
}
.module-overlay.open{display:flex;}
.sidebar.expanded ~ .module-overlay{left:var(--sb-expanded-w, 220px);}

/* Module header bar */
.mod-header{
  height:48px;
  background:#1a1a1a;
  color:#fff;
  display:flex;
  align-items:center;
  padding:0 20px;
  gap:12px;
  flex-shrink:0;
  border-bottom:1px solid rgba(184,150,110,0.15);
}
.mod-header h3{font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px;}
.mod-header-right{margin-left:auto;display:flex;align-items:center;gap:8px;}

/* Module body — scrollable content */
.mod-body{flex:1;overflow-y:auto;overflow-x:hidden;}

/* Loading spinner */
.mod-spinner{
  width:18px;height:18px;
  border:2px solid rgba(184,150,110,0.2);
  border-top-color:#b8966e;
  border-radius:50%;
  animation:mod-spin .6s linear infinite;
}
@keyframes mod-spin{to{transform:rotate(360deg)}}